Abandoning elastic design
Back in 2004 (yes people, that's almost 5 years ago), Patrick Griffiths wrote an article on A List Apart, entitled Elastic Design. A whole new awareness grew within the web development community as people saw the advantages that elastic layouts brought to the end user. Perhaps it's time (5 years people) to revise those ideas and take a look at the hands we've been dealt over these last years.
An introduction
All in all, the concept of elastic design is really neat. When I first discovered this technique a few years back, I was absolutely astonished. Being able to zoom your entire website instead of just the text? Awesome! On top of that, the company I worked (and still work) for was (and still is) doing Information Architecture and User Experience Design for the web. Needless to say, everything we have done since the introduction of Elastic Design has used this technique for accessibility reasons and we will probably keep on using it for quite some time.
So what's wrong with it?
Every light side has a dark side, and so has this technique. If you have ever made an Elastic webpage, you probably know what I'm talking about:
- Try calculating em's
- Gradients. Try zooming that.
- Rounded corners. *sigh*
- Cross-browser calculation of em's and percentages.
There's probably a lot more to add to this list, but this already gives an idea of what I'm talking about. Using elastic layouts puts an extra burden on developers. Period. Nonetheless, it's part of the job. Or is it?
Back to square one
Or back to one square. A pixel that is. Wouldn't that be something?
Apart from the obvious benefit to the visually impaired, what does elastic design give us? Nothing but headaches and more work. Imagine for a second what would happen if we all took a step back in time and use pixel-based designs again.
- Your average end user wont notice a thing. Seriously, ask your friends and family (those who are not into web development) if they ever use the text-zoom in their browser.
- Your tech-savvy web development visitors probably use a browser that supports visual zoom (IE7, Firefox, Opera), or an operating system with hardware zoom (os x).
- The visually impaired visitor can't zoom your site without breaking the layout. Oh ow! Not good.
- Your semantic and accessible markup is still perfect for screen reader users.
Change your point of view
As a user experience designer, it is often important to see things from the end user perspective. Right now, we seem to have an accessibility issue concerning the visually impaired visitors, so let's try and see things through their eyes.
If I were suffering from a visual disability, but still would like to browse the web, I would make sure that I have the best tools available to do so. Since most websites are not elastic, I'm either using a modern web browser that allows me to visually zoom the pages that are not optimized, or I'm using a screen magnifier because I need it to fully operate my computer. Unrealistic assumption? I think not.
Why would you sit around and wait for every website to become accessible if you can just use another browser? On top of that, people suffering these kinds of disabilities are constantly receiving information from specialized organizations and from people they know that are having the same difficulties. I think we can even consider this specific audience as early adopters (alongside web developers) when it comes down to new technologies that have improvements related to their disability.
Bye bye elastic design
Even though I will still do elastic designs for the company I work for, I'm fully abandoning elastic design for personal use. Feel free to leave a comment below if you think I'm completely out of my mind or if you think that pixels are the new black. I'm more than willing to discuss this topic with developers and end-users alike.
Where do we go now?
You can browse through the recent articles or go to the archive for older items.
About
SocialGeek is not a weblog, it's a stereotype. I often feel awkward presenting myself as a true geek, especially when in lively company, enjoying a worldly discussion. It just doesn't feel right. The not-so-geeky part of me didn't like it, so the geeky part went on a quest for a solution. Up comes SocialGeek, the perfect description for the unnatural clash in my head. I still like solving Rubik's Cubes, don't get me wrong, but I also like a cold beer in good company.
There are 11 comments for this article
Jonathan Cooper on Dec 1, 2008
I agree that elastic design can be a pain sometimes - e.g. when you navigate from a "wide" to a "narrow" page and a block of text is so stretched out that it is hard to read. I think non-elastic design is now viable from an accessibility point of view because modern browsers (well, Firefox3 and IE7 anyway) zoom THE WHOLE PAGE, including divs and images etc., when you press ctrl (or cmd) + .
John Faulds on Dec 2, 2008
For a while I did only hybrid fluid/elastic designs - ones constrained by a max-width so line lengths didn't get too long. I've been doing a lot of subcontracting work lately working on other people's designs and they've all been fixed width, and I must admit with Firefox now supporting the same sort of zoom as Opera & IE7 (sort of), I've been thinking that there's less need for the sort of scalability that elastic designs provide.
Where I do think fluid/elastic designs can still be useful is that they also compensate for smaller window sizes, although as you'd probably still use a min-width wider than most handheld devices to stop the layout falling apart if the window got too small, maybe that's not such a pro anymore either.
Jonas on Dec 2, 2008
It's nice to see that I'm not the only one who thinks that liquid/elastic layouts have lost a bit of their sweetness due to browser- and OS innovations.
On the other hand, it would be interesting to hear some serious pro-elastic arguments.
Jason Grant on Dec 2, 2008
I agree with you. I have worked on 2 sites which used elastic design and it was a nightmare.
I prefer zoom layout if having to use ems or full screen layout if going for 100% usability thing.
Divya on Dec 3, 2008
I agree totally! Elastic designs are ony good for an ego-trip not for anything else (since Zoon is supported even by IE 7 now).
Jonas on Dec 3, 2008
Divya,
Don't get me wrong here. I never said that Elastic Design wasn't useful. As a matter of fact, I have been using em-based layouts for quite some time and I am fully aware of all the benefits, especially when you need your site to be accessible for all audiences.
Also, don't forget that IE6 still has about a 20% market share. This means that you are denying 20% of your audience the possibility to increase or decrease the font-size of your website without breaking the layout.
What I did say was that perhaps we should revise a 5-year-old opinion due to the increased capabilities of all major modern browsers and the possible early adoption rate of these new browsers by the audience that benefits most from their improved functionalities.
Either way, I stick with my decision to abandon elastic layouts until i read or hear some decent reasons not to.
ChrisJF on Dec 4, 2008
I completely disagree with you. Let me explain why I love elastic designed sites.
My laptop's display has an extremely high DPI. It is 15 inches with 1680x1050 resolution. Usually 15 inch laptops have a resolution of 1280x800. This means that text on my screen is tiny. No, really it's TINY!
I use my computer for about 10 hours everyday (Software Engineering Student) so by the end of the day my eyes are bloodshot from reading that tiny text.
I did two things to resolve this: 1. I increased the DPI Scaling in Windows Vista from 96 to 120 DPI and 2. Increased Firefox's minimum font size to 16 points. I don't zoom in on pages because then my images are pixelated. (Even most non-elastic sites are fine with the relatively small 16pt increase. However, it's mostly navigation lists that break due to their confined containers.)
FYI: I am by no means disabled. I have 20/20 vision and am only 20 years old. I just use my computer A LOT.
Anyways, I realize that I am a very small minority but more and more laptops have increasingly high DPI displays. That means a lot more (non-disabled) people are going to increase just the font size. Elastic designs are still valid despite Browser zoom features.
Tyler on Dec 4, 2008
Roger Hudson and Russ Weakley from the web standards group did a scientifically rigorous experiment concerning web accessibility in 05 by bringing in impaired web users of all types and doing usability studys with them. The results were basically that disabled users almost never take advantage of any of the developers accessibility features built into the site (access keys for example). Its a really interesting presentation, you can hear it here:
http://webstandardsgroup.org/audio/mp3/other-051209-1.mp3
michelangelo on Dec 5, 2008
Tyler, you are seriously oversimplifying and misrepresenting Hudson and Weakley's position. Also it is inaccurate to call it a "scientifically rigorous experiment" as the authors were quick to point out (although it is a perfectly satisfactory set of usability tests). Here is a text version of the same content
Bjarni on Dec 7, 2008
I was surprised to see that a lot of sites that I did build as an elastic site would of functioned no different in Firefox these days as if sized up with pixels as its main measurement.
Sam on Dec 24, 2008
What I would love is a decent qualitative study into the issue of elastic designs and how useful they are. I certainly recognise that there can be an advantage to being able to increase just the text size on a site without zooming right into the layout.
But it is possible to build layouts that aren't elastic, but simply have enough room to accommodate some text resizing. My opinion is definitely on the side of the non-elastic layouts at the moment, simply because I can't see a great deal of users taking advantage of advanced browser features. Many users I've observed don't even really register the fact that they are using a browser at all, to them it's just "the internet".
But this is just my experience, and I would love to have an authoritative answer on this issue on which to base my actions. Most articles(including the seminal ALA article) glibly state elastic layouts "aid accessibility" or some such without any real evidence.