New site layout with dynamic sizing

Posted by Al Twohill on 8 January 2008 | 0 Comments

Tags: browsers, css, design, html

Most designers want their websites to be pixel perfect and look exactly the same across every computer, operating system, and browser possible. Not me! I prefer usability. Introducing my new dynamic layout.

Pretty much all the positioning is done using ems, which means it scales nicely depending on the font size you want. I leave the user to set their desired font size in their own browsers, as they are most likely to be familiar with that if they need that function. I only specify a font size in px on body - the rest are percentages of that. This stops the browsers from doing weird things with my pre and code blocks, and puts browsers on an even footing to begin with. Try resizing your font - in most browsers you can hold CTRL and scroll your mousewheel to do this. IE7 seems to do it's own funny zooming so if you make the font smaller the background doesn't stick to the bottom of the window, but all the other browsers behave.

Unfortunately IE6 buggers up this styling quite badly, especially with the transparent PNG I use to create my background effect. Oh well, I'm not that worried about IE6 to be perfectly honest. I'd like them to realise that they're using a crappy browser, while still be able to access the content so with a bit of clever conditional commenting I have hidden my stylesheets from no-IE information bar. Go on, view my site in IE6 - I dare you! (Its actually a good way to see how this site layout shows without css, how Google would see it. Notice the content at the top, and the menu at the bottom?).

For those folk who have the decency to not have IE6 on their computer, here is a screenshot you can mock:

Also, largely as a result of deciding to not continue styled support for IE6, this site is now valid XHTML 1.1 with no CSS hacks. Click on the links in the footer to test this.