Elastic Layouts Still Have Issues
A List Apart’s Elastic Design by Patrick Griffiths in early 2004 was an influential article for a lot of web designers looking for that cutting edge CSS layout technique. Interestingly enough, I remember my first ever commercial CSS layout attempt, about a year before, worked in a similar way although my intentions weren’t exactly to do that for any particular reason. It just happened because I’d been thinking through the thousand or so tutorials and other articles I’d scoured before embarking on it.
Intuitively, and I think this was quite obvious right away, the option of elastic design seemed flawed to me. Horizontal scrolling off the side of my viewport just didn’t seem like the elegant solution it was later marketed to be on A List Apart. After some less than affirmative feedback from friends and peers I put on special gloves and stopped touching myself in that place immediately. My point is that most of my problem with elastic layouts came from an intuitive reaction to my first experiment along those lines. You could call it my first usability test with such a layout.
Nevertheless, a lot of designers headed off into the elastic horizon and experimented with the idea that this would be the way to layout salvation…
So, getting to my point eventually, Alastair Campbell has written a truely comprehensive article about elastic layouts which is a must read for the day (including all the comments if you have time) titled Elastic layout – wrong term? First, he questions the terminology of elastic – is it really elastic or something else? I don’t think that bothers me that much in itself but I see his point. Then he digs into what the weaknesses of such a layout can be from a usability and accessibility perspective – horizontal scrolling, long line lengths, and usability testing shows that
People with a visual impairment often combine a low resolution (800/1024 wide) with large font sizesAlastair Campbell
The problem really comes with Internet Explorer’s lack of support for max-width. Because that’s the effect your elastic layout needs to have to avoid all these issues. Alastair suggests the best way at the moment is the use of percentage based widths using max-width and min-width while providing Internet Explorer with a fixed width alternative. This is the track I’ve found over the years works best, too.
If you have a spare 10 minutes today Alastair’s article is definately the must read out there for standardistas, particularly those making CSS layouts and wanting to make the best educated decision. Done well I see there’s a place for elastic layouts but they still aren’t for me at this time. Its not that they’re a bad idea just that they’re often implemented without that educated background knowledge. After all, the objective we should have is the best user experience possible as opposed to the most cutting edge technique possible. User trumps technique. Wash, rinse and repeat regularly.
