I totally fell in love with relative units

You know, “responsive web design” is a pretty hot topic these days. One of its key points is the usage of relative units, em and %. The first one in particular assures that spaces are directly tied to related page elements. For example you have a <h2> headline with at font-size of 2em and a top-margin of 1em. The margin now is directly tied to the size of the headline – if you enlarge the latter the former is also increased. By using the absolute unit px this margin would remain the same, which could of course in some cases also be the preferred behavior. But if you go one step further and set all the distances and widths of a layout in ems it is nothing to adapt the whole thing afterwards with the change of a single figure. I use this approach at css3files.com to enlarge the whole site as soon as the page width is larger than 1024 pixels – just by increasing the font-size of the <body> from 62.5% to 68%. This way the legibility is increased for devices with large screens.

Directly related to the usage of ems are percentages. They too ensure that everything remains flexible and are the main ingredient to easily adapt a website to different screen sizes using media queries. Of course you could also build a different layout for every major screen width – 640, 768, 1024 pixels and so on – but it’s much easier to rely on a flexible page layout that automatically adapts to the various sizes. Of course that’s no one-fits-all approach and sites that looks great at 1024 pixels won’t also be usable at 640 pixels without adaptions most of the time. But this way only minor accommodations have to be made – move some page elements, adjust some distances etc. – for an optimal display.

At css3files.com these breakpoints are at 640, 800 and 1024 pixels whereby the “main” screen size is from 800px to 1024px. That means the main part of the styles take care of this range, the rest below and above is handled by adaptions through media queries. While the page gets fixed to a certain width as soon as the window (or device) size is larger than 1024px the true strength of this approach is unleashed at a width lower than 640px. Since everything is set in percentages all page elements automatically react to a resize of the window respectively devices that fall into this range.

Of course that doesn’t mean that fluid, responsive layouts are impossible to achieve with absolute units but it involves much more work and planning. That’s why I proceeded to exclusively use em and % for my page layouts. Although it requires me to do more math it gives me the total freedom to easily alter the dimensions and the behavior of my websites even if they are already finished.

How do you handle the dimensions of your websites? Are you in favor of absolute units or would you die for relative ones?