1 in 4 people have some sort of vision impairment that makes reading on the web more difficult.[1]

Elastic layouts and coding using em

With the default text size on most major browsers set at 16px many people like to make their text larger to make it easier to read and I believe the number is set to go up as monitors get larger. Plus I’m sure that many people don’t realise they can increase the text size of a web page by holding ctrl + or selecting zoom via a menu.

To cater for users increasing the text size in their browsers web designers and developers can set the size of the elements in their designs using values of em instead of % and px.

“An em is a unit of measurement in the field of typography, equal to the point size of the current font. This unit is not defined in terms of any specific typeface.”[2]

Em is said to equal the width of the character M in which ever type face you are using as this is usually the widest character. However with the ever varying typefaces entering the typography world this isn’t always the case.

Em vs px vs %

The problem with coding in px opposed to em is that elements width is fixed and so when a user increases the text size  the text will move out of the box. With %  the dimensions of the elements in the layout will only change as the user changes the size of the browser window or view port and again has no relation to the text size:

An element which has it’s size set in em’s has it’s height and width worked out depending on the size of the text. So if a user increases the text size the width and height of that element will increase in proportion to the text.

Coding using em

It helps if you think each character as being in a box. At browser default text size this box will be 16px wide and so 1em is equal to 16px. If you increase the text size to 18px then the box increases in size and 1em becomes 18px. So 2em will now equal 18px x 2 = 36px and so on.

There is a way to simplify creating layouts using ems which I first read about from Andy Budd’s book CSS Mastery.

You can make 1 em = 10px by setting the overall font size to:

body{font-size: 62.5%}

62.5% of 16px (the default browser size) is 10px. So now you can just divide the pixel size you want to use by 10. So a button 150px long will become 15em long and will now scale as the text size increases! Hoorah!

If you want to learn more about creating Elastic layouts I recommend Jon Tagerine’s - The Incredible Em & Elastic Layouts with CSS

Now you know a little bit about elastic layouts and coding in em I’m going to ruin your fun and tell you that many of the latest browsers have a feature called page zoom.

What’s Page Zoom?

It’s best to think of page zoom as magnification. The browser takes the whole of the site and scales everything on the page relative to each other just as if you were looking through a magnifying glass. This means even a fixed width site coded in pixels would scale up nicely and takes the process of scaling out of your hands.

For a good comparison into text zoom and page zoom check out this article by Jeff Atwood – The Two Types of Browser Zoom

So does this mean we can drop em and elastic layouts?

In the long term yes but at the moment there are still plenty of browsers out there which don’t support page zoom. Currently the only browsers
which have full page  zoom are:

Name [versions] – browser market share

Chrome 2 – 0.8%, IE 7 & 8 – 26.5%, Opera 6 to 10 2.2%, Safari 4 – no results yet and Firefox 3 – 44.3%.

So if you don’t mind 25% of the people viewing your site not being able to scale it up correctly then ditch em and elastic
layouts. Lets just hope it’s not the 25% of people who actually need to use it.

Can we can drop liquid layouts?

No, page zoom doesn’t have the same benefits as a liquid layout. Liquid layouts are coded using percentages which makes the layout  scale depending on the size of the browser window where as Elastic Layouts and page zoom are reliant on the user scaling the layout.

Liquid layouts are still useful to make sure your site scales down when the user resizes their window to have more than one application on their screen. Or if your users  access your website on a low resolution device like a net book.

So in summary here’s 10 tips on page zoom:

1. 1 in 4 people have some kind of visual impairment which make it hard to use a website.
2. The default text size is 16px but people can increase the size in most modern browsers.
3. To test how your site fairs with text size changes open it in firefox, select view – zoom and tick ‘zoom text only’.
4. You can cater for people changing the text size by coding your layouts in em.
5. To make it easier to do this you can make 1em equal 10px by making the overall font-size 62.5% then divide your widths by 10.
6. Page zoom in browser takes control of the scaling and will scale everything in relation to each other so no need for elastic layouts.
7. However 25% of users have browsers that don’t  support page zoom so lets not drop them just yet.
8. Liquid layouts and elastic layouts are often confused. Liquid layouts are coded using percentages rather than em.
9. Liquid layouts are useful as the browser window is scaled or to keep your site useable on low resolution devices.
10. So at the point we drop em layouts we should still code some liquiditiy into our designs

Refering documents:

[1]  Page Zoom In IE7 – IEblog
[2] Em and Typography – Wikipedia
Zoomfusion – JeremyKeith
Page zoom with images – Thomas Baekdal
Em calculator

Interact:
- Will you be dropping elastic layouts?
- Do you have any tips on coding elastic layouts for our readers?
- Have you seen any sites which cope with increases in text size well or badly?

If you enjoyed this article please follow me on twitter and RSS Thanks!

Fill out your twitter feed and rss reader with some of the top creatives and thinkers from the www.  24ways is a yearly web developer advent calender. Each day providing an interesting and inspiring article. I’ve compiled a list of links to each authors blog and twitter. A great starting point for fledgeling web designers and those who want to find inspiration from highly regarded people in their field.

A

Rachel Andrew – Twitter & Blog
web developer and writer over at edgeofmyseat.com.

John Allsopp – Twitter & Blog
software engineer, speaker, writer, educator and surf lifesaver, with a long standing interest in CSS.

B

Gavin Bell – Twitter & Blog
social software designer.

Kimberly Blessing – Twitter & Blog
a computer scientist, a Web developer, a standards evangelist, a feminist, and a geek.

Paul Boag – Twitter & Blog
primary web strategist at Headscape and one of its three founders.

Mark Boulton – Twitter & Blog
years of experience in designing or redesigning a large range of outputs from websites to applications.

Andy Budd – Twitter & Blog
managing director of clearleft, renowned web developer and designer.

C

Andy Clarke – Twitter & Blog
contributor to the Web Standards Project  and  Invited Expert to the W3C’s CSS Working Group.

Dan Cederholmes – Twitter & Blog
a recognized expert in the field of standards-based web design.

Simon Collison – Twitter & Blog
web designer/developer and author. Runs Erskine Design.

D – E

Mike Davies – No Twitter & Blog
a senior web developer for Yahoo Europe, based in London.

Dustin Diaz – Twitter & Blog
User Interface Engineer at Twitter who enjoys writing JavaScript, CSS, and HTML.

Natalie Downe – Twitter & Blog
experienced usability consultant and project manager, her first loves remain front-end development and usability engineering.

James Edwards – No Twitter & Blog
web-developer based in the UK, specialising in client-side programming, with a strong focus on accessibility.

F – G

Derek Featherstone – Twitter & Blog
a well-known speaker with a reputation for inspiring and exciting the audience with practical demonstrations.

Brian Fling – Twitter & Blog
entrepreneur, a designer, a mobile expert, speaker, author and idea guy.

Ian Forrester – Twitter & Blog
XML, Open Standards, The Commons and Data Portability advocate.

Patrick Griffiths – Twitter & No Blog
been doing the professional web developer thing since 1999.

H

Christian Heilmann – Twitter & Blog
International Developer Evangelist – working for the Yahoo Developer Network in the lovely town of London, England.

Michael Heilemann – Twitter & Blog
30-year-old Computer Game Developer and Interface Design Enthusiast.

Jon Hicks – Twitter & Blog
handles the new-fangled media projects: Interface design, icons, websites. Currently working full-time with Opera Software.

Molly E. Holzschlag – Twitter & Blog
a well-known Web standards advocate, instructor, and author.

I – J

Shaun Inman – Twitter & Blog
successful designer and developer living and working out of Chattanooga.

Roger Johansson – No Twitter & Blog
Swedish web professional who has been working with the web and other interactive media since 1994.

K

Jeremy Keith – Twitter & Blog
an Irish web developer living and working in Brighton, England.

Peter-Paul Koch – Twitter & Blog
freelance front-end consultant, agent, and trainer.

Nate Koechley – Twitter & Blog
One of the first web developers at Yahoo!. Been instrumental in creating and defining the practice of Web Development and Frontend Engineering.

L

Stuart Langridge – Twitter & Blog
designer for a developer for a media firm in the UK.

Patrick H. Lauke – Twitter & Blog
known to rant and evangelise about accessible and usable web sites.

Marcus Lillington – Twitter & No Blog
Headscape’s business development director has experience in commercial, consulting and project management roles.

Ian Lloyd – Twitter & Blog
full time as a senior web developer for Nationwide Building Society.

M

Ethan Marcotte – Twitter & Blog
a web designer/developer living in Cambridge.

Drew McLellan – Twitter & Blog
has been hacking on the web since around 1996 following an unfortunate incident with a margarine tub.

Ann McMeekin - Twitter & Blog
knitter, shoe obsessive and freelance web, design and accessibility consultant.

Eric Meyer – Twitter & Blog
has been working with the Web since late 1993 and is an internationally recognized expert on the subjects of HTML and CSS.

Cameron Moll – Twitter & Blog
designer, author, speaker, or any combination of the three.

N – P

Mark Norman-Francis – Twitter & Blog
a professional web developer from London.

Brian Oberkirch – Twitter & Blog
a marketing consultant focused on social media and product/service development.

Veerle Pieters – Twitter & Blog
graphic/web designer living in Belgium. CEO of Duoh! n.v.

R

Matt Riggott – Twitter & Blog
one part amateur photographer, one part programmer, and ravenous devourer of political news.

Dan Rubin – Twitter & Blog
graphic designer, web developer, musician and Apple enthusiast.

Gareth Rushgrove – Twitter & Blog
professional web developer, currently working mainly with Python and Django.

Richard Rutter – Twitter & Blog
production Director at Clearleft.

S

Jason Santa Maria – Twitter & Blog
graphic designer living in sunny Brooklyn.

Dave Shea – Twitter & Blog
a Vancouver local and a freelance designer.

Jonathan Snook – Twitter & Blog
creator of striking designs, impeccable markup and code, and forward-thinking ideas and applications.

Matthew Somerville – Twitter & Blog
lives in the UK, working from home planning, designing and programming websites.

Elliot Jay Stocks – Twitter & Blog
designer, an illustrator, a speaker, an author, and occasionally a musician.

Brian Suda – Twitter & Blog
master informatician… (your guess is as good as mine).

T – V

Jon Tan – Twitter & Blog
creative director at OmniTI and sometime writer and speaker in Bristol, UK.

Andrew Turner – Twitter & Blog
a neogeographer involved in helping build the geospatial web.

Tim Van Damme – Twitter & Blog
interface designer, based and raised in Belgium. Design interfaces as a freelancer at Made by Elephant.

W

Ben Ward – Twitter & Blog
works at the Yahoo Developer Network, admin and author at microformats.org.

Henriette Weber – Twitter & Blog
founder of Toothless Tiger where she acts as the social marketing rebel extraordinaire.

Meri Williams – Twitter (private) & Blog
an Information & Decision Solutions manager and web developer.

Simon Willison – Twitter & Blog
co-creator of the Django Web framework.

Y – Z

Kevin Yank – Twitter & Blog
technical director of sitepoint.com.

Jeffrey Zeldman – Twitter & Blog
was one of the first designers, bloggers, and independent publishers on the web, and one of the first web design teachers

Interact:
- Please recommend any designers, developers and creatives you follow in the comments below.
- If you follow any of the above and have feedback let me know.

If you enjoyed this article please follow me on twitter and RSS Thanks!

The genius concept for layer tennis was created by Coudal Partners and regular games are played on a Friday afternoon to keep the guys over there entertained. It involves two people adding elements to a document using all the usual Adobe packages in volleys – each player trying to out play the other. They usually play for about 5 rounds and each player has about 15 mins to prepare a volley. After all the rounds a winner is picked! You can follow the matches live at layertennis.com

It sounds like much fun and I would like to organise a game with you guys – with rounds spread over a few weeks rather than an afternoon!

So here is how to play:

1. I’ve created a photoshop file, put a little something inside and posted it below.
2. Download the file and add something to it in which ever program you like.
3. Change it all you like but try to keep it on a theme.
4. Send your volley back to me at dialdfordesign[at]googlemail.com, tell me why you made the changes you did and links to any attributions you need to make for elements you used.
5. After a bunch of files get submitted I’ll post pics of all the entries and pick 3 to put back up for the next round.
6. Bring it on and spread the word!

Click Here To Download Round 1!

A few things to remember:  Try and keep the layers intact, don’t worry about making it look too fancy and have fun!

Keep up to date follow me  on twitter or add me to your RSS feed.

(original image by zoomar)

Related posts:

1. Brew Time Titbit: What is Doctype?

Related posts:

1. Design Inspiration: UNKLE – Heaven video remix by We Love You So
2. Design Observation: Beautiful Animation

If you have a side bar on your twitter background I recommend getting the Firefox web developers tool bar and checking to see what your profile looks like by using the resize function:

If your side bar is cut in half at 1024 x 768 then there’s no point in displaying it as it doesn’t provide any function. Best hide it and have it appear at any resolution above 1280 x 960 in a Peek-A-Boo fashion.

To make a Peek-a-Boo sidebar you need to utilise the space between left-hand edge of the twitter container at 1024 x 768 and at 1280  x 960:

For my background I took it a step further to support 1440 x 960 and made a 3 stage design which hides a kind of easter egg. When people move from a low resolution to high resolution and return to my twitter page it should put a smile on their face (unless they’ve read this and I’ve given it away dammit!). The images below shows what happens as the resolution progressively gets bigger:

So there you have it. If you carefully position your details, check your background at different resolutions and use my Peek-A-Boo method your profile page should look great to a larger amount of users.

If you’re itching to have a go copy the picture below and use it as a guide for your own background widths:

Here’s a couple of things to remember:

* Check your twitter public profile page rather than your twitter home page – the sizes are slightly different.

* 800 x 600 and resolutions below won’t have space for any sidebars.

* The Peek-A-Boo method doesn’t cater for people  covering up the sidebar by manually resizing their browser but I don’t think anything can.

If you enjoyed this article please follow me on twitter (more design, less crap) and add D4DD to your rss reader! Thanks!

Related posts:

1. Design Observation: Beautiful Animation
2. Design Inspiration: James Hewlett Beatles Animation

Good vs Great Design by Cameron Moll - Free PDF Download

Web Fonts Now (how we are doing with that) by Jeffery Zeldman  – Article

Contract Killer by Andy Clarke -  Tutorial

10 Nice To Have Skills For Front End Developers by Louis Lazaris- Article

Chrome Experiments - Showcase

Got any suggestions for interesting articles? Let me know by dropping them in the comments! Thanks!

Related posts:

1. Futher Reading 2: Men Need Speed, The 10 Minute Rule and Bye Bye 960px
2. Futher Reading 1: More Twitter, Firefox 3.5 and Progressive Enhancement.

Have you considered people using magnification programs when building your hover images or navigation? Here’s a quick look into a common problem with magnifiers and a simple fix to keep your users smiling.

This post came about after a dilemma involving my site design. I’m going to be adding icons on the sidebar which when hovered over change colour and have text appear next to them for example,”feed me”,  ‘tweet me’, ’shout me’.

Now for screen readers I don’t see this being a problem as can give the text a large minus left-margin: left-margin: -10000px; which pops into the required place when the icon is hovered over. This mean the text is still is readable in the html unlike using display: none which hides the text from screen readers. So I’m sorted for accessibility right? Well not necessarily.
When reading accessibility articles I feel the limitations of magnification programs are often overlooked. When someone is using a magnifier hover images like the ones I’m implementing can be a pain in the arse.

To demonstrate the image on the left shows an example screen area of someone who is partially sited navigating the website using a magnification program. They can see the icon but only partially see the description. In the next image the user has moved the mouse to view the description which cause the text to disappear.

Luckily by happy accident the Eric Meyer’s CSS method to create  hover buttons provides a solution to this problem. For the pop up to work the text has to be enclosed in the same <a href> tag as the object you are hovering over.  This means the text becomes a link as well and will stay displayed when the mouse is moved over it:

So if you’re looking to use hover images, drop downs or tool tips have a thought about people using magnication programs and how you your navigation will work for them to.

Related posts:

1. Applied Design: foxholebank.com – Paper Prototype

Another fine selection of articles including usability studies, brain rules and whether it’s time to move onto larger displays.

Men Need Speed by Web Optimization (via Jeffery Zeldman) – Usability Study

Creating Consistently Colourful User Experiences by Andrew Maier (via Script&Style) – Tutorial

The Ten Minute Rule by John Medina -  Article

Is It Time To Move Beyond 960? by Cameron Moll - Article

The Ultimate Guide To Using Wordpress As A Portfolio by Cameron Chapmen – Article

Got any suggestions for interesting articles? Let me know by dropping them in the comments! Thanks!

Related posts:

1. Futher Reading: free downloads, killer contract & web fonts
2. Futher Reading 1: More Twitter, Firefox 3.5 and Progressive Enhancement.

What is doctype?

Doctype basically tells applications like your browser or online code validator what type of markup you’ve coded the page in. The majority of users will either use HTML or XHTML, Transitional or Strict versions. Transitional is used for old markup which has been coded for older browsers. Strict requires the markup to be well coded and standards compliant moving the page towards working with more browsers and screen readers.

Why do we need it?

If a browser is given a doctype it can interpret the markup you’ve used to render the page correctly. If it’s not given a doctype it will try to interpret the markup as best it can and therefor the page may not render correctly. For example: If IE6 isn’t given a doctype it works in ‘quirks’ mode and doesn’t honour CSS auto margins. If you start designing your pages with XHTML strict in mind you are giving yourself a helping hand to code more elegant, robust and standards compliant markup.

Where can I get it?

To add a doctype to your document it’s as simple as copy and paste. Below are the doctypes for XHTML transitional and strict. Paste them above your HTML tag in your document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To view more types of doctype to add to your document check out the W3C recommended list of doctypes.

For further reading I recommend:

University of Minnesota Web Design References
Transitional vs Strict Markup by Roger Johansson
Fix your site with the right DOCTYPE! by Jeffery Zeldman

If you found this helpful add me to your RSS reader! Thanks.

Related posts:

1. Brew Time Titbit: Layer Tennis. Fancy A Game?