Design can be fun

Over the past month, I've been working to design the new skin for ZetaBoards. It's been one of the best designing experiences I've ever had, for one reason: I have a wonderful designer with whom I'm working. I'm a rather competent coder, but I have little design skill, as far as picking good colors, making sure that elements are logical, and creating graphical components. Nicola changes all that. I can slap up the HTML in 30 minutes flat, and then she adds the styles and graphics that make the difference between a hideous skin and an amazing skin. When I don't have to worry about what my code looks like, I can spend extra time making sure I pull out all the stops in adding as many HTML hooks for skinners as I can possibly cook up. A standards-compliant skin not only looks great in all the browsers, but it ensures that search engines rank sites higher. I predict quite amazing leaps for many sites after the upgrade.

One of my favorite parts of the new skin is its semantic correctness. The emoticon list? It's a list, not a table. The custom profile fields? They're not <span>'d and <div>'d to all ends; they are simple yet elegant definition lists. Table headers aren't just <td>'s with classes applied to them; <th>'s are used where they were intended.

Let's have one example of the elegance semantic HTML and a bit of unobtrusive JavaScript offers. Here are the first six emots of the IPB 1.3 emoticon list:

<table class='tablefill' cellpadding='4' align='center'>
<tr> <td align="center" colspan="6"><b>Clickable Smilies</b></td> </tr>
<tr align='center'>
<td><a href='javascript:emoticon(":huh:")'><img src="http://67.18.37.14/html/emoticons/huh.gif" alt='smilie' border='0' /></a> </td>
<td><a href='javascript:emoticon(":o")'><img src="http://67.18.37.14/html/emoticons/ohmy.gif" alt='smilie' border='0' /></a> </td>
<td><a href='javascript:emoticon(";)")'><img src="http://67.18.37.14/html/emoticons/wink.gif" alt='smilie' border='0' /></a> </td>
<td><a href='javascript:emoticon(":P")'><img src="http://67.18.37.14/html/emoticons/tongue.gif" alt='smilie' border='0' /></a> </td>
<td><a href='javascript:emoticon(":D")'><img src="http://67.18.37.14/html/emoticons/biggrin.gif" alt='smilie' border='0' /></a> </td>
<td><a href='javascript:emoticon(":lol:")'><img src="http://67.18.37.14/html/emoticons/laugh.gif" alt='smilie' border='0' /></a> </td>
</tr> <!– table continues –>
</table> And the equivalent HTML in the new skin:

<ul id="emotlist">
<li><img src="gfx/emots/happy.gif" alt=":)" /></li>
<li><img src="gfx/emots/sad.gif" alt=":(" /></li>
<li><img src="gfx/emots/whoa.gif" alt=":O" /></li>
<li><img src="gfx/emots/meh.gif" alt=":/" /></li>
<li><img src="gfx/emots/cry.gif" alt=":'(" /></li>
<li><img src="gfx/emots/fear.gif" alt=":ph34r:" /></li> Notice how clean the HTML is (no inline JavaScript or repetitive elements) and its accessibility (alt tags are used for their intended purpose). The new emot list is usable even from things like my PalmPilot browser.

Having this project made so easy for me has even made me want to redesign this site! I have some rockin' new ideas based on the things I've researched and learned while working on this project. And you know that's something, because normally I view web design as a burden, because of that pesky design element. I would like to do a layout that makes better use of the screen space that most of my visitors have, without this fixed-width and whitespaced column. Something a bit bolder-colored, but not too much so. Of course, that's only if Nic will lend me a hand again :angel:

So the moral of the story is this: If you're talented in one area, but not another… find someone who complements you. And you might find that you become ten times better and more productive.

Dewdles by Sam