On ems and why I gave up on them

One of the things I found interesting when I started writing code for this website was the possibility of using em sizing instead of regular pixel sizing. I won't bother explaining what it is that ems are, instead just read this fine article on clagnut. When I realized that I could make my website (or any other website for that matter) scalable I was very excited. The problem nowadays is that when you increase text size in the browser the whole thing falls apart. So I used this cool method described on clagnut and started doing all widths and all heights in ems. It worked for a long time actually and I did manage to get most of my site to look the same in all browsers. I also had this cool idea to have a background image in the header that would be sized in pixels but have the header itself sized in ems so that when you'd increase the text size you would reveal more of the background image. I thought about hiding some text messages in these images and overall it worked. But three things occurred to me in the process.

First of all I realized that if one of the main features of my site (I spent a shitload of time on this thing) is some background image that is showing only to people who increase text size (people with impaired vision) then I'm really missing the point here. It was a nice little gimmick that I wanted to have but in reality not really worth it since a very small percentage of people would ever see it.

Second thing that happened was the new Firefox browser. The 3.0 version introduced zooming and now if you decide to increase text size it actually just zooms in on the entire page. There is the option to turn that off and use the old fashioned way by just sizing the text but it's becoming apparent that browsers are going to be the ones doing the sizing for us now. I am still not sure as to which would be better. The upside of the browser doing all the zooming is of course the fact that us designers don't have to code the whole thing to fit various sizes. The downside is the fact that sometimes you really just want to increase the size of the text, maybe you don't want the navigation, the header or footer to go way out of proportion. You just want the bulk of the content to be a little bit bigger. Zooming renders this impossible since it literally zooms in on all the content. Another thing it does is takes away our control over what we want to be scaled and what not to be scaled. As someone who gets to decide how the whole website should look I think it should be important that I can also decide how it should scale. The good thing of course is the fact that right now the user has control over this behavior, and in the end if we code our website with ems and percentages and you do disable the zooming then you can get that extra benefit. So it's actually only up to us to make sure our sizes are flexible.

But the third reason and the one that really forced me to give up on ems was none other than IE. As you can read in the article above things start getting messy when you have things like unordered lists for navigation items, since ems determine their actual size by the size of their parent element this means you have to work with decimals. And browsers interpret these things differently. So since my navigation is done with list items and since it has more than a few em sized parts it got messed up in IE. Not a whole lot though, just one pixel actually. That's right, it was just one pixel short of what it should have been. I spent hours and hours trying to figure out how to fight this but in the end I knew that even if I managed to fix this one issue I would have to fight with it again and again on many other places. Ems simply don't give you the exact precision of pixels yet and that is to be expected of them. They are after all, relative measures and they should be used as such. If you want pixel sharp precision you should use pixels.

However the good thing is that most layouts (including this one) don't really require everything to be sized exactly. In fact most of the heights on this page are still done with ems as are the font sizes. It did render some problems with sIFR but nothing that couldn't be fixed. So the solution that would have the best of both worlds would be to just have as much sizing as you can done with ems and use pixels for everything that has to have more than two decimals if using ems. Right now if you turn off the zoom feature in Firefox my site doesn't really scale all that well, but I intend to go back and look at all the heights and widths and see what I can do. I guess I will also get around to checking out how this site fares in IE6 although I really want to figure out a way to install it alongside with IE7 somehow.

So much for now, hope some of you don't find this whole shit boring

Posted on January 7th at 14:32 by Dovla Previous entry | Next entry