Affordable blog Design fresh from Bristol, UK

Recently over at , Adii gave a preview of his latest free theme. The preview sparked quite a debate about how the dimensions of a theme should be defined. Adii’s choice was to choose what’s known as a fixed approach. Essentially, this defines setting the dimensions of objects in pixels (px). This means the dimensions do not change from one platform to another, giving the designer a lot of control but causing potential issues for the end user.

Because the width of the layout is fixed, it will not alter for users viewing the site on a low resolution monitor. In Adii’s case, his theme would force a horizontal scroll for 800×600 users and a certain amount of the layout would not be visible without scrolling to the right. Adii’s argument for this was that very few people are currently using 800×600, newer computers work at resolutions upwards of 1024×768 pixels. However, there is a hole in Adii’s argument. A lot of people choose not to browse at full screen, perhaps because they’re multi-tasking and have more than one window open. So while the user may have a screen resolution higher than 800×600, they may not necessarily have any more space in the browser available.

AJ, of devlounge fame, argued for the case of flexible layouts. To achieve a flexible layout, you simply set the dimensions of objects in percentages (%). This means that the width of columns and other objects are based on the width of the browser window. You can set min-width and max-width’s to avoid scenarios where they may be too few or too many words on a line or other issues that may break the layout. However, there’s not a huge amount of browser support for this and you can easily end up in a situation where you have no control over how your site is being displayed and your content is becoming unreadable.

At this point I stepped in with the mighty sword of victory, also known as elastic layouts. Elastic layouts combine all the benefits of the first two approaches. By setting the dimensions of objects based on the users font size, using em’s. You’re able to retain a level of control close to a fixed width layout but the user can also manipulate the width of the layout by increasing and decreasing their browser’s font size. By default, the browsers font size is set at 16px. So by setting your body’s font size at 0.75em, 1em becomes 12px. Setting an objects width at 10em will then result in a width of 120px, but if the user sets their font size to twice the default, the width of the object will be 240px.

While em layouts are a great option, there are a few reasons I only use them on specific projects. First of all, if you set the dimensions of an object in an amount of em’s that don’t equal a whole pixel value, the browser will take much more time and resources to render the item correctly. Secondly, using em’s takes significantly more time so we restrict their use to higher budget projects that would see a return on the investment. Finally, if a user has some form of visual impairment they’ll like be using a large browser font size, but if they’re also using a low resolution the layout will be much wider than their resolution permits.