Alex Hardy

I thought I’d kick off a new section. As I mentioned in a previous post, I’m going to keep a record of things I find interesting or inspiring. It might be anything - a website, movie, videogame or something further afield like an interesting art or design book, an exhibition, a piece of architecture or something from the natural world (there are some pretty wild designs there!).

It’s a Friday and I’m feeling unwell, so I’ll make my first post a brief one. It’s a website from my home town.

It’s the Manchester City Galleries website by Manchester agency Reading Room.

The graphic design is clean and simple, not really much to write home about (or indeed post about), so why am I drawing attention to this site?

Go to your browser options, and increase the text size. Notice how, instead of the usual effect (the text getting larger and the page layout breaking), the whole layout enlarges - images and all. In some cases you observe some wrapping as elements get too large, but it works well for the most part.

For the web designers among us, they’ve done this by setting body {font-size:62.5%;} in CSS, which makes 1 em = 10 pixels. They then specify the dimensions of everything with ems. So the image of the front entrance is sized as {width:16em; height:15.2em;} - in effect 160px x 152px. So because ems are a measurement that scales when you enlarge the text everything grows proportionately.

This is great for people who have poor eyesight who habitually enlarge text, or perhaps just those on fancy high resolution screens.

Very clever indeed.

Posted on Friday, February 9th, 2007 at 2:45 pm under Accessibility, Design, Inspirational, Web standards. You can post a comment, or trackback from your own site.