Going elastic with ems, layout techniques
Most sites on the web are coded using pixels for widths, which is acceptable, however these sites make it harder for users with poor eyesight to increase the text size whilst keeping the layout in place and usable.
That is where ems can help. This guide will explain ems, and show you how to convert a layout to utilize ems.
Title changed, I made a mistake, liquid is for % layouts, ems is elastic. Sorry for the confusion, and thanks to Mike Cherim for pointing out my mistake.
What are ems?
An ‘em’ is a unit of measurement that is relative to the base font/font size. Basically, where pixels are fixed (a pixel is always the same width), an em’s width can vary, depending on the font size. This makes them very powerful, as by using ems you can essentially make the widths change depending on user preference.
Example sites
Visit the two sites listed below, and resize the text in either firefox or internet explorer (see browser support to learn how to do this).
Notice anything different between them?
BBC.co.uk has a static, pixel based layout, meaning when the text resizes the layout stays the same. As you can see, resizing too much breaks the layout and ruins the usability.
Mailsift on the other hand, was coded (by me) using ems, meaning as text resizes, the layout does too, keeping the text in pretty much the same place, avoiding the problems on the bbc site.
Other examples of sites that use ems include
- Blue anvil (your looking at it)
- Designbit
- cssliquid.com
5 reasons why ems can improve accessibility
- Internet explorer has trouble resizing pixel font-sizes
- Pixel layouts often break when increasing the font size.
- Visually impaired people can in effect ‘zoom in’ to your page.
- People with large monitors can make your site larger by increasing the size.
- People with low resolution can make the text smaller, to fit in their windows.
Browser support
Increasing the text size in the manner I have shown is supported primerily by Firefox and Internet explorer, Opera has its own resizing method (covered in Future).
To resize in firefox go to view > text size, or use the shortcut keys (control and + or -).
In IE6 go to view > text size, and select a text size.
How I convert a site to make it elastic
This is how I personally make a site elastic with ems. Before trying this please backup your existing css stylesheet, I don’t want your hate mail if you cock it up!
- Firstly, you need a layout done in CSS (see example 1). The example shows a basic page using pixels for font sizes and the actual layout. Nothing is resizable in IE6.
- Now to get your hands dirty. Add the following to the ‘body’ style.
body { font-size:62.5%; }This is the base font size. I have chosen 62.5% as it is round about 10px, which will represent 1em. See example 2.
- Now you have a base font size you can make all other font sizes relative to this value. Example 3 shows how I have done this, paragraphs are set as 1.4em, headings are 2em. You can resize the text (in IE) in this example, but the layout is static.
- Next we need to work on the layout. Convert the px values to em, divide the value by 10 and add em after it. For example, the container div has a width of 716px, this should be converted to 71.6em, it should look roughly the same. See example 4.
And that’s basically it, look at example 4 and try resizing, the layout should change with the text.
Testing & what to watch out for
The main thing to watch out for when setting em widths is that due to inheritance in css, if you change a font size in a div, the width of the ems will need modifying to keep it the same. For example, If I set the font size the 1.4em in the container, the containers width itself would increase. You can avoid this by not changing the font size in divs with widths, or by dividing the width by the new font size. Example; original container width – 71.6em, divided by new font size (1.4em) makes it roughly 51em to keep it the same width.
Making images resize with ems
Images can also be resized with the layout, albeit tricky. To achieve this you shouldn’t set a width for the image in the html, you should set it in css. Look at example 4 again; notice the image stays the same size as you resize the text.
By removing the html width and height attribute, we can manipulate this image in css. Add a class of ‘image_size’ to the image in the html:
<img class="image_resize" src="lens.jpg" alt="Lens" />Now in the css add the following:
.image_resize{
float:left;
margin-right:8px;
margin-bottom:4px;
width:12.5em;
}Now the image will resize with the text (see Final example). *Note that using this method requires a different css style for each image if their sizes are not the same.
In the future
We are already seeing accessibility tweaks regarding resizing, notably in Opera and IE7. These browsers have a built in zoom function, meaning they can resize any page. These improvements mean that in the future we may not need to make our layouts and text sizes increase in the way described in this article, as the browsers will handle it. But for now, If you are keen on accessibility, you should make your site easy to read for the visually impaired, whatever their browser of choice.
Found this post useful? Why not buy me a coffee!
Sreekanti says:
Thanks a lot Mike. Great article! I was asked to fix a site where the text spilled out on zooming the text in IE and Firefox. I knew that the issue was with the CSS layout code, but did not know how to convert and which aspects to take care of. Your article explained crisp and clearly the steps to convert a site into elastic form and it worked beautifully for me.
thanks again,
Sreekanti
Comment made on February 9, 2007 at 6:03 pm