2005 / November 21^st/ Resolution dependent layouts are not the future

There’s been a bit of a scuffle lately around resolution dependent layouts. I’ve heard such phrases as “revolutionary” and “the future of the web.” Sorry folks, no.

Academics

By no means am I demeaning or looking down on this approach, but merely pointing out that it’s a practice in academics, and not a practice in reality. It’s a great approach and really highlights the benefits of the marriage between Javascript and CSS. It’s one of those things that you look at and instantly think “Wow that’s amazing. I want to use it so bad.” But then time goes by and you just don’t use it.

Diminishing Returns

Why? First and foremost it’s a work in diminishing returns. It takes a significant amount of work to first design a layout that can be one or two or three columns, and a significant amount of work to style accordingly. The result? Well… pretty much no one will notice. According to statistics I monitor on completely non-webmaster related sites, 800×600 is hovering around 15% and dropping, with the remaining being taken up by larger resolutions. I don’t even see 640×480 on the map anymore. That means more people are browsing with 1600×1200 than with 640×480 (according to my metrics and my applications). So you just spent your third weekend in a row in the office and less than 15% (and declining) of your browsing population notices? Forget that.

Larger resolutions

Sure, sure I can hear those people with the 30″ cinema displays already crying in the background - what about designing for more than 800×600! I’m sorry - but any layout designed for anything more than 1024×768 does not appeal to me. Line lengths get too long and make the design completely unreadable. I’m pretty sure we won’t see layouts passing 1024 in mainstream for the rest of our lives. Do people often read novels on 11″x17″ paper? We could easily print on paper this size - but we don’t. Size and line length are integral in the human sense of design. Just because we have space doesn’t mean we should feel obligated to use it.

Mobile devices

Sorry folks, mobile devices deserve completely differenetly designed websites than normal sites. No amount of style switching is going to change the fact that it’s a completely different experience. Different experiences deserve different design. Period.

Application

But surely there is use for this, is there not? Definitely! But not in the revolutionize-the-web kind of way. More the advertising-directors-dream-come-true kind of way. Advertisements are where this is going to be applied. If the user has more screen space available, why not fill it up with ads? Sounds like a good idea, and I’ve seen this approach implemented a lot of places before.

Another tool in the toolkit

So, it’s not revolutionary but it sure could be useful. I’ll file this away in my “useful for that one project down the road” bin. I still have yet to see people use immensely practical javascripts on a regular basis such as Behaviour, prototype, zebra stripes (by class), and FlashObject (and its dervitives). These are the applications of Javascript I see changing the internet.

1. 

   Avinash

   November 21^st | #

   I know what you mean, personally I found it strange that people were coding for 800×600 back a few years ago, let alone now.
   Readability and aesthetics (in my opinion) come second when people design like this…
   Excellent article, by the way.

2. 

   James AkaXakA

   November 22^nd | #

   You’re completely right. Good article.

   However, you can still design for 8×6 while keeping good legibility, it just depends on the distribution of your margins/padding. Using visual tricks to make it seem like 10×7 does help with aesthetics though.

3. 

   Chris

   November 22^nd | #

   Excellent points. This is a far more serious issue than people make it out to be, and I, for one, feel that there is a general misconception among designers regarding the whole idea.

   As you mention, humans can really only handle a certain line length before things become almost totally illegible. I think I read somewhere that the perfect line length is something that allows for around 12 words per line. On 1024×768 views, you get like 855 pixels (in width) to work with, and that leaves PLENTY of room for anything you’d ever want to do. Designing to these specs will also help keep your content legible, which is CRITICAL for keeping your audience (I think).

   Fluid-width layouts completely screw those of us who view at higher resolutions. I’m running 1400 x 1050 on my laptop (which I just LOVE), and I can’t stand fluid-width layouts because the lines get way too long, and things just look crappy. I never want to see content in more than a 600 pixel box, and I’ll probably never bother with your site again if you can’t accommodate me.

   And what the hell do you do on your 30″ HD Mac screen with a fluid layout? Punt?

4. 

   Wired

   November 22^nd | #

   I?m pretty sure we won?t see layouts passing 1024 in mainstream for the rest of our lives.

   Ok Bill Gates :)

   Eventually we may see web designers design more for ratios and less for exact numbers. e.g. 16×10 for my 2005FPW, and less for 1680×1050.

5. 

   Volkher Hofmann

   November 22^nd | #

   Great points. Lately I’ve been tempted by all kinds of new coolness but once I redesign, I’m sure it’s going to be for a 1024*768 again.

6. 

   Roger Johansson

   November 23^rd | #

   And what the hell do you do on your 30? HD Mac screen with a fluid layout? Punt?

   We (Mac users) generally don’t maximise our browser windows.

   And elastic layout is an excellent alternative to fully fluid layout.

7. 

   Ronald van der Wijden

   November 24^th | #

   Although maybe not earth-shattering or even ground-breaking, it’s an interesting thought.
   I’ve been toying with the idea of serving up text in the center section of a three column layout in a single column for lower window widths, and two adjacent text columns for higher widths. Admittedly, I still have to try it on a working example, though, similar to your “I might be using it in the future” sentiment.

8. 

   Paul D

   November 24^th | #

   We (Mac users) generally don?t maximise our browser windows.

   That is precisely true. I find something just slightly larger than 1024×768 to be a comfortable size for my browser window no matter how large a screen I have. I think that will be the default size for a long time. There’s no need to go larger, even if some people have much larger screens.

9. 

   Hector J

   November 25^th | #

   I’m not a developer, but a client. I’ve had several web pages developed for different projects that I’ve done.

   The only thing that I see as being of any use out of this whole exercise is the ability to perhaps… maybe… possibly… run two columns of text in the centre column of a page design. At 10 x 7 it is not really necessary, though I could see how it would be applicable to higher resolutions.

   Given the rise and rise of converged devices and mobile phone browsing, I’d be looking more at designing for those applications. That’s a whole different world to designing for 16 x 12 resolution, or worse, dual-screen browsing.

   I read through the linked article and figured it for a developer with a cool toy but little in the way of market research, or regard for its real implications. Techies tend to use the web differently to the average punter, so their idea of a cool trick may simply be a pain in the neck to the average user with a slower connection and no wish or need to mess with html/rtf settings, etc.

10. 

    steve

    December 7^th | #

    The mistake that designers, especially young ones with good eyesight, often make is to design for the aesthetic and not for their audience. Now if your audience is a handful of coders and gamers and don’t mind reading 8 pt type at 1280 x 960 (my laptops res), then by all means give it to ‘em. But the www isn’t just happening in geek forums, it’s happening on commercial sites that will need to design for an aging, sight-challenged, baby-boomer generation. The trend may be to see 800×600 dropping by the wayside for now, but I think that will reverse itself over the next decade. My anecdotal evidence is from 2 (my parents) out of 6 billion people in the world, and their screen res is at 640×480; it’s painful for me to look at and the horizontal scrolling is outrageous, but it works for them.

11. 

    Rob Poitras

    December 20 | #

    What about sites focused on images and video?
    I have a 20″ widescreen monitor in the portrait position, I would love to view flickr with more pictures displayed per page and make the thumbnails bigger.

    I think in the future, the user will have more control on how they view content. Why not let the user drag and resize different parts of the site to their liking? Instead of having the designer pick how its viewed?

12. 

    Matt Cassarino

    December 20 | #

    Nicely done Kyle, I agree with your points across the board. It was a relief to read that 1024 is the max width you see in the future for websites! I think that you are right, even as monitors and resolutions increase as they have over the last few years. Keep up the good work.

13. 

    David Simmer

    May 7^th | #

    Not sure how the mention of large resolutions supports your argument … straight-up percentage-based layouts are the problematic ones when it comes to line length. Resolution-dependent layout tricks can avoid ridiculously long line lengths on large-resolution displays.

    Agreed that mobile devices need a different experience, but given how much can be done merely through different CSS, judicious RD layout can provide a significantly better experience for small devices. The Man In Blue’s example, changing the content to a single column at smaller widths, hints at this idea.

Name

Email (will not be published)

Website (optional)