I just finished the TIP Group website a few days ago and realized that I (unconsciously) borrowed some design elements from this website. That just won’t do, I thought. And anyway, my old design was getting old. So over the last two days, I redesigned this site from scratch. What makes this noteworthy (to me) is that I did it using HTML 5 and microformats and I’m intending to figure out ARIA this weekend and make the site accessible. More on this after the screenshots.

The old design

The new design

As you can see, this is a very plain design. No more sunburst or whatever the rays of like background I used to have is called. I’ve always loved minimalist blogs. It’s harder to do than one would think. I’ve tried several times but they always come out looking amateurish or get crowded and turn into the last design (which started out very austere). But I think that this one turned out quite well. The site uses Helvetica Neue and Verdana (though I might try Arial and see how that works, Verdana is getting overused online and it makes Arial actually look unique when you see it). The icons are modified versions of these dark denim icons. I don’t have all the sidebar space that I used to have, so I’ll be integrating my Twitter stream into the post stream. This is something I’ve wanted to do for a while anyway.

To update to HTML 5, I followed these wonderful directions from SmashingMagazine. It’s not really a huge change from XHTML 1.0. I still code XML style though you have the option of HTML-style coding. I figure that as I went to all the trouble of breaking the HTML 4.0 habits, there’s no point going back. Plus, I like lower case tags. The new elements are nice, but <article> isn’t really all that different from <div class="article">. I really only did it because I could.

I don’t know how much work accessibility will turn out to be. I gather that (for a blog) it is mainly just a matter of tagging certain elements with role attributes. I don’t need to figure out keyboard accessibility like I would in a more interactive site.