120dpi websites

Things used to be easy, everyone used a dpi of 96 except Apples who used 72 and who cared about them at the time. Now since XP and the increase in use of very high definition wide-screens especially on laptops computers can be set to a default of 120dpi. So who cares?

Well anyone who has to design anything with a visual interface and that obviously includes web designers. To put things in a simple context if I create a clickable button with the word "Click" on it I want the button to be large enough for the word "Click" to be visible; sounds obvious doesn't it. However I also want to make the containing button small enough so as I can fit other items on the screen, so what size should the button be? Well it depends on the size of the text for the word "Click". If I use, say, this default size than "Click" try something bigger and "Click" or even "Click". Of course it's up to me what size the text is, well no it isn't. If I set the font to be this size, if you've altered your computer settings or changed the dpi then the OS will over-ride your setting and change it to "this". That ain't good. Heck you can't even set the size in pixels rather than fonts the OS spots this ruse and adjusts them too and percentages are relative to the screen itself and not the text therein. There is thankfully a way around this.

Instead of measuring everything in pixels or points you use ems. It should be easy you create all your text with reference to 1em, as that will be the height of whatever sized font is being used on the target computer. If you want to set out items such that they have heights you use em's again; okay strictly speaking you should use ex's, but as those correspond the height of lower case letters and ems to the full-width of letters switching between the two might give you a headache just go with ems.

So job done you set all your container's widths and heights in em and if someone's using a different font-size the containers all expand or contract while keeping everything in proportion.

Now comes the hardship - let's pretend you want to do something clever, say put an image behind some text - piece of cake just use background-image and you're done. Nope because if the container alters its size because of the font the background image won't change and hey would you look at that you can't set the size of background-images (until CSS3 anyway). So the simple elegant solution is out, instead you have to add another container put the image inside that then position it so it appears behind your text and when you're having to code for all the bugs in IE6&7 relative and absolute positioning can give you more headaches.

Okay you've got your image, positioned it and made it work in that damnawful Internet Explorer, all done?

Nope see now you want a repeating image behind your text, so guess what's easy to do with a background-image that you can't do with a normal image - yup you can't make it repeat. So you create yet another container position it and make your image so it covers the entire height you want. But what if you don't know the height, what if it's changeable; tada you make the image ultra-long and use overflow: hidden and it'll automatically clip off the bottom for you. Unless you use IE6 in which case it probably won't.

All done, nope not quite because it can still go wrong. The prompting for this entry was the fact that I had a div with an img in it centred horizontally on the screen all set out in em. Did you think it expanded - nope; another image further up in the same hierarchical situation did, but not this one. See you have to set the width of the div and the img to make it alter, you can't trust that the container will expand or contract to meet the size of the image. It's dumb, but at least it's working now.

So no pixels or points do everything in em (or ex) and make sure everything is marked up correctly and your design should remain in proportion no matter how much it's shrunk or enlarged.