Sam Brown

Zoom Layout for Low-Vision Users

“Doug Bowman over at Stop Design posted an article at the end of last week about Zoom Layouts. Creating websites that are readable and accessible for low-vision users, not just people using screen readers.”

Web Standards are becoming more and more popular on the web with a lot of sites now being Standards Compliant. Whilst this technique of web design enables blind people to read a website with more ease, we need to think about low vision users that a lot of sites currently are not considering.

What not to do

I have chosen an example site, one that I created last year as an example of what not to do. This website has a lot of small text, particularly the menu items, this at the time was what we wanted, it looks nice and we could fit the content into the small boxes. However, for someone who cant read the text that small was to increase the text-size with their browser (View menu increase text size), the menu items become completely unreadble.

How it should be done.

My site(this one), I created with creating a solution to this problem in mind. You are able to increase the text size and decrease the text size to your hearts content and everything increases and decreases with it. Creating the illusion of a Zooming Layout.

I have used this technique on several other sites too, left.bz & mb.bz. Increasing the text size on these sites increases everything, and scales things nicely too.

How is this done?

Creating this technique isn’t hard. It involves using percentages, infact I have used em’s in all my examples. em is the font size of the relative font. So if you have defined your body font to be 10px then 1em = 10px. You then use em’s for the rest of your width, heights and font-sizes accordingly for all elements.

Perhaps I’ll write a more technical article when I have time but for some more examples look at these sites:

Post a link to this on Twitter ↩

Comments

There currently aren't any comments on this post, leave the first?

Commenting has closed for this article. Feel free to me.

Sam Brown co-founded Iterate, and was previously VP of Design at Foursquare. Based in NYC.

DribbbleEndorseFacebookFoursquareInstagramTwitter