At last, I’ve finally knocked this site into a shape I’m happy with. You’ll find no crufty div soup round here. It’s all HTML5 goodness and it works on IE8 and IE7 using Remy Sharp’s magic HTML5 enabling script.
I found HTML5 to be a bit odd at first, but as I started experimenting with it, the simplicity and meaningfulness of HTML5 mark-up started to sink in. The best way to think of the new elements is something like this:
- use <header> and <footer> in the obvious places, this negates the need for <div id=”header”> and <div id=”footer”>
- use <section> for the main sections of the page eg. <div id=”content”>
- use <article> where you would have <div class=”post”>
- use <aside> where you would have information related to an article, eg. <div class=”date”>
- use <nav> for your navigation links
Then, instead of using IDs and classes, you use CSS selectors to select parts of the document tree to style. I found the W3C’s table of CSS3 selectors invaluable for this. I’ve mainly used CSS2 selectors for compatibility with IE and older versions of Firefox.
I’ve also made use of the @font-face selector to embed Museo font for the heading styles. There’s a good list of free fonts available for embedding on the Web Fonts Wiki.
I must give credit to Croc Camen and Alex Gibson for their inspiring work with HTML5. I haven’t had this much fun with web design in years.
Dammit… I knew I was pushing my luck with IE5/Win and that graphic to the left. For those of you using IE5.0, you’ll notice that this image has gone a bit awry. This is because I decided to put a drop shadow on the image and the only way to blend it in was to incorporate some of the table formatting in the bitmap itself. Of course, if Microsoft bothered to implement png compatibility into IE5.x/Win, I wouldn’t have this problem; I’d just create an image with partial transparency in Fireworks, save it as a 32bit png file and Bob’s your uncle. I might just do it anyway and suggest that people on a PC use Netscape 6 instead. It also looks as though IE5/Win is resizing the table cells on the left even though I have told it not to. Hmmmm. Bare with me while I iron out the flaws… normal service will resume soon.
OK. So it’s redesigned and it validates, but I’m not there yet. Now I’ve got a layout done in HTML tables, I’m going to replace them with CSS formatting in the near future. I suppose I’ve been working with tables for so long, it’s tricky to stop using them.
Phew… it’s been a struggle, but here it is: the all new frownland.com. This site is now more standards compliant than ever before [validated to XHTML1.0] and should load like the proverbial ‘muck’ off a shovel now that I have streamlined everything. However, I have absolutely no idea what the page looks like on anything other that IE5 for the Mac… I’ve only got the W3C HTML Validator to trust. In an ideal world, this should be all I need… unfortunately, life isn’t like that is it? Maybe one day.
I’ve still got a bit more work to do though, like get the archives linked up, replace those images on the right [stuff from the old design], and add some more content to the bottom of the page, but that’s about it. Overall, I think it’s an improvement… more ‘chunky’ I reckon. Anyway… enough geek talk, standby for more of the usual – comment and links on stuff that matters: art, design, photography, science, technology, music, everything.
Buy a limited edition ‘Obey Jakob’ t-shirt from mememachine. You never know, it might be worth a fortune in 50 years time… then again it might not.
Redesign imminent. “Less is more” – Ludwig Mies van der Rohe
More raw material for Nielsen parody purposes. Lookin’ good Jakob.