Week 12: Breaking Mondrian

Last week I was a little frustrated at feeling like I didn't know enough to make my website look like something other than boxes stacked on top of each other. This week I resolved to do something about that. I've revamped the site to give it a distinctive style, and while I'm not sure the result is aesthetically better -- yet -- it certainly is less boxy and more unique.

I started off by finally changing the damn font. Adobe Garamond Pro Bold is an eye-catching, impactful font that works nicely for headings, but it is absolute crap for content. I used CSS to change all my content boxes to Georgia, whose clarity and distinctive serifs make it easy to read. That was an easy call. Then I got down to hard work.

What I wanted was to eliminate some of the straight lines in my CSS template without destroying the site's clear organization. This took the most concerted foray into GIMP I've thus far attempted. The background of the site had been a tiled image, one pixel wide, with a thick white zone separating the light blue heading from the dark blue body of the page. I widened the image to fifty pixels and turned the straight white border into a hand-drawn curvy shape like an elementary school ocean. It took quite a while to get the ends to line up right, but when I was done, like magic my page had a distinct sky-and-sea theme. I was taken aback by how this one change completely changed the feel of the layout.

I wanted to run with the maritime idea suggested by my new border, so I took my site logo -- a blue-and-black box -- and revisited it in GIMP to see if I could give it an island shape that could sit on the waves. I had to deal with layers and transparency a good deal to make this work, since I didn't want to surround my island with a white box, and I discovered that PNG images can be partly transparent while JPGs cannot! I considered ditching transparency and just coloring the background of the logo with the same color scheme used for the site background, but that might have caused issues on computers with different screen dimensions from mine. In the end, my island-logo sat nicely on my ocean, properly centered above my content, with a nice, transparent background.

I liked the evolving line-drawing feeling of the site's art, so I went ahead and replaced a horizontal rule element on the verses page with a curlicue section divider I drew with the pencil in MS Paint. I really like the outcome; I only wish I'd been able to figure out how to use CSS to make the [hr /] tag default to this graphic.

Still on my artistic to-do list: make some seaweed out of line drawings to overlap the boundary of my still-boxy content pane; turn the menu items into clouds. Still on my technical to-do list: implement a blog for the news page; get a Creative Commons license on the verses page. Still on my miscellaneous to-do list: clean up the footer; write content for the About and FAQ pages.

Week 11: Spring

I had a nice spring break last week, returning to my roots as a recreational BASIC programmer and not thinking very much about professionally valuable languages like HTML. Now that I'm back, it's time for more website reviews!

The sad thing about lists of useful websites from 2008 is that some of them have dropped off the Internet here in 2011. My eye was drawn immediately to the CSSFights.com website, which looked from the thumbnail graphic like an engaging way to compare and evaluate web designs. But the site no longer exists as such. It's been replaced by a mere gallery of designs that the webmaster presumably thinks are cool, indistinguishable from most of the other sites we've looked at this semester.

Speaking of indistinguishable websites, how about the other twenty-six of this week's readings, huh? Look, let's be honest. Five or ten websites that showcase really good web design make a valuable and useful list. Forty or fifty is just redundant, especially when they often link to each other in a big backpatting circle. Yes, there is lots of interesting web design out there. Some of it is fun and artistic in spite of being completely dysfunctional, like iamyuna.com, which I found through CSSBased.com. Some of it is practical and unexceptionally brilliant in its thoroughly best-practices integration of form and function, like volusion.co.uk, which I found through CSSHeaven.com. But there are only so many sites you can look at before you feel like you're not going to see anything new, and more to the point, only so many compendia of "good design" you can look at before your eyes start bleeding at the samey samey sameness. It's not that I think I know everything. I know I don't. But what I don't know is no longer the kind of stuff I can pick up just by looking at websites and thinking about them real hard. Here are some things I don't know.

1. I don't know how to implement most of the designs I consider good. I know enough CSS to put together a workmanlike site that will neither confuse or annoy my audience, nor win any awards for innovation. But I don't know how to do the snazzy stuff that injects art into otherwise by-the-book websites. I barely know how to do mouseover effects. The scrolling banner graphic and pop-out content boxes on volusion.co.uk? No idea where to begin. Can't learn just by looking.

2. On a related note, I don't know how to write original scripts. I'm proud of being able to make someone else's PHP work on my website, but I can't write PHP (or Flash, or Java, or other mainstays of the Web 2.0 "look"). Can't learn that just by looking at websites, either.

3. I don't have great artistic vision. I look at my current website and I think, "well, the font's ugly, the banner needs work, the background is bland." Those are things I sort of know how to do something about, and I will do something about each of them before I turn in the site, but the result will still obviously be a set of boxes stacked on top of one another. About the limit of my creativity is feeling that I ought to find a way to make some kind of graphic that overlaps my content column into the background area, and I don't even know how to do that. But I can't learn artistic vision just by looking. That's like thinking you can watch a hundred New York Yankees games and know how to hit home runs yourself at the end of it.

So, sadly, I don't have much to say about this week's websites. They didn't do anything for me, in the sense of teaching me to be a better designer. I could rattle off some criticism of random designs I found through the sites, but my heart wouldn't be in it, since I can't do a tenth of what the worst designer featured on those sites can do. True, you don't have to be a vintner to know good wine from bad, or to say "this wine is bad and here is why." But I'm not trying to become a web design critic, I'm trying to become a web designer, and I've reached the limit of where criticism can take me.

Week 9: The Free Web

Coding is different. A fledgling lawyer who wants an off-the-cuff opinion from a more experienced colleague in a different firm might have to pay for a legal consultation. A medical layman interested in psychological disorders is likely to have to pony up tuition for the opportunity to learn from someone who knows what she's talking about. But coding? Coding is different. Coding is egalitarian. Coding in any particular language, from XHTML to PHP to C++, is taught for free on a hundred websites. If you have questions, a hundred forums will answer them. If you need code, ten thousand frighteningly skilled coders are at your service to produce short snippets. They help freely: because they can, and because there's no reason not to, and because they were learners once too, and because they still are, and because coding is different. There are no trade secrets, no mindset that valuable skills are to be hoarded and guarded from unlicensed practitioners or future competitors, not even a presumption that a student pays a master for instruction. Information is free. It's a refreshing environment to work in.

That's the preamble to this week's website reviews. I love that HotScripts has tens of thousands of prewritten scripts across the linguistic board, free for the taking. I love that all the tools of web design, right down to web editors themselves, can be had freely from Amaya and SeaMonkey and Komodo. I love that WordPress is open source. I love that even where a for-profit ethic exists, as in cases like Pandora and Google, companies find ways to provide their basic services for free. (I love that they have to -- because if they don't, someone else will! Photoshop is needlessly expensive, so I'm using GIMP, money out of Adobe's pocket.) In a professional world where all these tools can be had free of charge, and often free of license, the only restrictions on a would-be Web developer are the cost of server space and his own free time to develop his site and his talent. It's like learning the guitar, only the guitar is free, and so are all the books on playing it. This in a profession where some people earn six figures or even more. It's staggering. I love all this week's websites, even the commercial ones, and even the ones with bad design (who are you, SoundStageAV.com? What do you do? Does your site have other pages? How do I get to them?)

I'm raving because I love this ethic. It's a good ethic, even if it leads to occurrences like professors of information science explicitly encouraging their students to pirate Dreamweaver from Demonoid (not to name any names). It promotes growth. And I'm growing!

Week 8: Now With Content!

I spent the evening on some overdue Web development, and I missed it! It's fun to make my website bend to my will like a faulty dam before a storm tide. The first order of the night was to address the height of the page header. The CSS's default design is awful for my purposes here; a tall header and an enormous default picture combine to push the page's content two-thirds of the way down the page. Changing the picture was easy -- I replaced it with a much shorter placeholder graphic I hacked together in GIMP. (It looks just okay enough to put me in danger of letting the placeholder turn into the final product.) The header was harder. I couldn't figure out what part of the CSS code governed it. I fiddled with all the pixel heights to see what they did, even changed a bunch of colors to see if I could find the right part of the code, but the height of the header remained resolutely stuck. At last I figured it out, and the joke was on me: the "header" is actually nothing more than a cleverly designed, tiled background graphic! Once I figured that out, I booted GIMP again, shaved off a few dozen pixels, and elevated my content comfortably into the upper half of the screen.

Then came the part I'd been worried about. It was time to implement the central feature of the site: the array grab that populates the Verses page with a random poem. I built it up in my mind into an invincible monster made of PHP, server-side execution, and databases. To my amazement, though, everything went smoothly in a way that almost never happens in coding. My slightly-modified code pasted from StackOverflow.com worked perfectly (once I figured out that only the server could execute it, anyway). I didn't need a database, just a one-dimensional array in the form of a text file and the insight to realize that I could totally embed HTML elements into lines of the text array to create titles, line breaks, and so on. Then it was just a matter of figuring out that the page name had to end in .php, and just like that, my site had content. I quickly added a copyright notice. I should think about Creative Commons.

This thing ain't finished yet. I still need to add one major content element -- the news blog -- and revamp the site's look, especially that increasingly grating font. There's lots else, too, but those tasks stand out. Unfinished or not, though, there is now a reason for people to come to my website. And that is kind of cool!