This is where I'm starting: I know the basics of and that xml exists (if you haven't seen these before, the preceding links are tutorials at w3schools; HtmlDog also has excellent tutorials). These are the things I'd feel comfortable explaining to other people; although I have tinkered with a smattering of things including various Python web frameworks, php, mysql, javascript, and ruby on rails, I don't feel comfortable enough in them to count them.

So where to start? Well, for inspiration, I've been flipping through the sites and layouts on csszengarden and misspato (the clean section - most of the rest, while good-looking, is too flashy to suit my style). When I get back to Chicago, I need to check out Web Design In A Nutshell and read through the remaining chapters that didn't get hit during Thanksgiving break.

Since I learned HTML back in high school, it seems that the "slice n' dice images into tables to make everything pretty" has been replaced by a focus on standards and separation of content and presentation, which is just fine by me; if there's a default semantic order to things, I don't have to make up new relationships for every project I set out on.

Tonight's reading was working through the "primer" articles in A List Apart, a web design blog with some well-written articles far beyond my current level of sophistication. Specifically, I'm reading through all the posts referenced in the ALA Primer and the ALA Primer, Part II. I'm calling out a few gems more buried in these posts:

  • 10 styles of webdesign - nice job of calling out various visual styles. I've noticed that a good number of computer geeks favor the HTMinimaLism style with a smattering of SuperTiny SimCity - my favorite is a balance between HTMinimaLism and Hand Drawn Analog.
  • Speaking of visual styles: my mother calls mine "colorblind," which is why I'm grateful for the suggestion to pick your color palette from a favorite photograph, as I can take nicer photographs than I can create color schemes.
  • A surprising interlude about what design is and isn't. Design "necessarily involves solving problems" and "satisfying the requirements of a user," which is "what distinguishes it from art or self-expression." Replace some of the web terms with engineering ones, and you could peg it as a Ben Linder lecture.
  • What is the difference between a hyphen, a minus, an em-dash, and an en-dash? Note to self: take typography. Actually, make that graphic design classes... I'd still love to get at least a certificate someday.
  • What about fonts? A study suggests that sans serif in readable column sizes (~11 words per row of text) is the way to go. Here's a list of beautiful typefaces. I've also been partial to bitstream vera sans ever since Brian Shih suggested it on his blog.
  • I'll have to come back to glish.com, which has links to css tutorials and samples of nice layouts, including a 3-column with a fluid middle column. There is also a walkthrough of a css recreation of a table-heavy website.
  • Instead of using tables for markups, how about lists and css instead? This is one of those "why it's great to separate style from content" demonstrations. It also means you can use son of suckerfish dropdowns (original suckerfish here) and then sliding doors to make the css more than pretty colored text.
  • Then we turn those prettified lists into css rollovers with no preloads, or for the more graphically inclined, an image slicing replacement.
  • I liked this article on the three-column layout not just for the column layout, but as an example of how to use css to drag semantically marked blocks of text into place.
  • You can give each little content-block its own background and create visually separated columns as in layoutgala's example gallery, or keep the content block backgrounds transparent and use a background image to fake the "column" look.
  • Speaking of background images... they go over the background color, meaning that you can create a background image for the top (or side or bottom) in one color to give a semantic content block a little colored heading (from the article on mountaintop corners). I always wondered how they did that.
  • Make layouts resize gracefully with elastic design (now with concertina padding!) I like the line numbers on code snippets in the second link.
  • In addition to ordered and unordered lists, there are also definition lists. New tag for me.

With that bit of reading under my belt, it's time to put some things in practice, so somewhere in the next few "hurrah web design" ramblings here will hopefully be sketches of designs I'm thinking of.