/CSS/ Creating scalable layouts
30/06/2008 | Filed under Develop > CSS
Craig Grannell is a master of getting around varied screen sizes and resolutions that affect how users view websites. This issue, he shows you a flexible method
The web is a moving target. As technology marches on, users have increasingly disparate set-ups, with a huge range of screen sizes and resolutions that you must cater for. Laptops have screen resolutions more or less on a par with desktop monitors from a few years back, but with form factors shrinking, the number of pixels per inch (or per centimetre, for metric fans) continues to grow. And even with large monitors, some users find default browser set-ups uncomfortable, and therefore have fun zooming things in!
When it comes to typography, this has caused a number of problems for web designers, most often due to Internet Explorer being the browser equivalent of a stick-in-the-mud. It took until IE7 before a decent zoom function finally yomped on in, but even now the old View > Text Size options still don’t enable a user to zoom text that’s sized in pixels. To get around this, it’s becoming common for web designers to size fonts using ems. A popular trick is to set the default font size for the page to 62.5 per cent and then define em values as a tenth of the target pixel size, to get an equivalent value at default browser settings (so, 1.2em is used to target a size of 12px). Unlike pixel-sized text, type defined in this way can be zoomed in IE via its Text Size menu. The level of faffing isn’t too high, and everyone goes home happy.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
The London 2012 logo is… Better than most people think
Click here to download the support files
Click here to download tutorial PDF
Comments
Andrew Woods / 30/06/2008 / 20:48
I've read about the 62.5 percent trick. the value 62.5 is significant because it assumes the browser text is 16px .and the 62.5 makes it 10px. That makes the math simple for web designers when using em's. I guess I see this method as fragile. When the user makes updates the default size to be 18pt or 20px instead of 16px the you suddenly get a very different experience than what the designer planned. But maybe that's ok since ems are a relative measurement.
Sean / 01/07/2008 / 08:10 / http://createsean.com/blog/
Thanks for this tutorial. It was an interesting and informative read - I've been using ems for font size for sometime now, but hadn't thought about using them for sizing other elements.
<blockquote>The level of <b>faffing</b> isn’t too high, and everyone goes home happy.</blockquote>
What is faffing? I've never heard this before.
Mike / 01/07/2008 / 13:44 / http://www.trcreative.co.uk
Not used this technique before, but I'll give it a try - thanks.
Mark / 03/07/2008 / 12:20 / http://www.collectiveid.co.uk
Spot on tutorial. I have been thinking about using this technique for some time and this helps provide the motivation for cracking on with it.
The technique would be perfect for our new portfolio site (www.collectiveid.co.uk), which depends on fixed height boxes and pixel-perfect font sizes (yes I know its naughty).
The IE7 zoom makes our site look pretty at most zoom levels, but of course in most other browsers we're stuck with text overflowing out of our boxes when a user resizes text. By sizing everything in EMs we'll acheive something close to the IE7 zoom behaviour, keeping everything in proportion.
A question though - can embedded, scaleable Flash elements be sized in EM's? This would be the icing on the cake.
Jamessy / 10/07/2008 / 15:27 / http://www.xlweb.co.uk
Excellent stuff. Seems simple when you explain trying to get the font sizes exact using the 62.5% rule - I'll be using it from now on, cheers!
Pete / 14/07/2008 / 08:23 / http://www.broadband-advisor.co.uk
Good idea and tutorial. I definately like the zoom layouts and have been using a mixture of em's and percentages so far.
Craig Grannell / 24/07/2008 / 15:58 / http://www.reverttosaved.com
"What is faffing?"
It's a British word, which largely means to waste time doing things that are tiresome or unnecessary. 'Dilly-dally' and 'dwindle' are synonyms. 'Faff' is, however, an excellent word, and should be absorbed into every form of English immediately.
flashist / 10/08/2008 / 20:07 / http://www.bozboz.co.uk
If your intersted in helping out people then em is definately the way to go I agree. I always found it hard to work out how an em related to a pixel though, the 62.5% trick is great advice!
