Designers who are working up layouts for web projects need to stop being pixel-precise and begin working in such a way that designs can work in various resolutions. Gone are the days when you can specify that the layout is x pixels wide and y pixels high.
Why? Because people are using a massively varied range of devices to browse the internet. Despite the ubiquity of iPads and iPhones, there are a huge number of devices out there which have different resolutions to these market leaders. You only need to see the image above to realise the amount of work required to provide a series of precise Photoshop files for every screen size.
In the past, the concept phase of a web design began with a Photoshop file, where design elements were laid out precisely and with pixel-based definitions. The distance between elements would have to be 18px; the text size would have to be 11px; and so on. The programmer had a precise list of rules and definitions to convert into CSS, so that the layout matched the Photoshop file precisely.
This methodology can’t work any more: anyone visiting a website using 11px text with an iPhone will know why. Where text at this size can be legible on a desktop monitor, it’s totally illegible at the default zoom setting on a smaller device. Set a three-column layout to add up to 1024px and the sides will be cut off on an iPhone or even on a full-sized iPad in vertical format.
So how can a designer plan for all these devices? The first step is to understand how proportions work and plan the design using proportional units. A three column layout might’ve previously been defined as two columns of 280px, a central column of 600px, and space between the columns of 20px to add up to 1200px. Add full-width header and footer elements, and you get the following layout.
Exactly the same result can be achieved by using proportional units: instead of pixels, use percentages. In this case, the full width (100%) is 1200px, so the smaller columns are each equivalent to 23.333333333333% of the total width. The centre column is 50% and the gutters between the columns are 1.666666666667% each.
A pain, huh? Not for CSS programming; the units are easily calculated. But as a designer, you might want to save yourself some brain power and use easier units: instead of these kinds of odd values, stick to easier ones. Define the large column as 50%, the small columns as 23% each and the gutters to 2% each.
Scale the design down to a smaller size and the proportions still work. On an iPad in horizontal orientation (1024px), the columns will scale down automatically. Using the more complex percentages above, the equivalents will be 512px for the centre column, about 239px for the smaller columns, and about 17px for the gutters.
You need to be precise when calculating the percentages, as sub-pixel rendering is important in the most modern browsers. If the percentages don’t add up to precisely 100%, your layout will break at certain sizes: Google Chrome is particularly fussy in this respect.
What does this mean? It means that a designer needs to get better at mathematics :) It also means that the design will work on an iPad in horizontal format (1024px maximum width) and on a 30-inch iMac screen (2560px maximum width). The proportions will be retained no matter how wide the screen is.
In the next article on this subject, I’ll go into detail about how to plan for various heights and how to ensure that the typography of the website – the font sizing and legibility – can also be planned responsibly.
The photo accompanying this article is by Luke Wroblewski, a leading developer in this field, and is used under the Creative Commons Attribution license.
Leave a Reply