¶ There’s an different approach to web page layout which is gradually getting some traction. The idea is that the layout is changed to best accommodate the window size. As you might expect, it is accomplished by using JavaScript to change the CSS of the webpage. Here are some examples:
Collylogic
Simon Collison’s two column layout is changed to a three column layout for wider windows. Simon has published the code which controls his website layout – in his case the script changes a class on a wrapper div.
There is some interesting chat in the comments. In particular, in reference to John Allsopp’s Dao of Web Design, Simon points out (tongue somewhat in cheek) that the layout does indeed adapt to the browser window [...] as the designer my need for pixel-perfection is not compromised, and as such I achieve the designer vs reader “enlightenment”
.
Rosenfeld Media
Designed and built by Dave Shea, this site has three fixed width layouts based on the same design. The script in this case is based on work by Cameron Adams and instead of changing a class, switches to an alternative style sheet.
I’m not entirely sure why this site wasn’t just built using a liquid layout with some min-width and max-width functionality attached, as the layout does not fundamentally change for different window sizes. I know that Dave is not the world’s biggest fan of liquid layouts so I guess this is the compromise he came up with.
Mint
The web stats application, Mint, displays many tables of data, arranged side by side. As you can see from the demo the tables are liquid in width and rearrange themselves to an optimum layout depending on window size. This is a particularly effective use of the technique as it really does make best use of the screen estate for displaying large amounts of data in the most readable way.
UX Magazine
UX Magazine uses a style switcher technique, similar to Rosenfeld Media. The way the large right hand column (on windows >1024 px) drops down below and slots in perfectly with the grid is impressive. Here the tight grid design really benefits from the change in layout, particularly as a liquid approach to this design would not really do it justice.
Clagnut example
Based on Simon Collision’s code, I’ve put together a four column example which goes through four layout changes depending on window size. The idea was to have a liquid layout that adapted to keep the photography at a sensible size. In truth a variable fixed width approach would probably be more appropriate here and it actually ended up a bit all over the place – think of it as an example of what not to do.
Non-JavaScript examples
A few people have been experimenting with a similar idea but using CSS alone – essentially by combining floats with min-width. See work at Muffin Research and morethanseven.net.
Comments
1
Tongue most definitely “in cheek”, Rich. Anyway, a very good round-up of all the current methods I can think of. I personally hope this approach gains even more momentum, and it’s great to have another layout approach available to us…
2
i use something similar in http://www.estadobeta.com
Font size is changed according to screen resolution and I use the same javascript trigger to move an entire column altogether via DOM (homepage).
3
While I’m a big fan of the script in question, I’m also cautious about changing the layout that much. It’s potentially confusing. Here’s the example I give:
Picture the average user. Modest home computer, perhaps a higher end computer at work. They use your web site in both places. They like the layout on the work computer and having that extra column. They have no idea why their home computer won’t render it the same way. This is the average user, remember, so screen size/browser window size never comes up as a possibility. It’s just two different computers, rendering the same web site differently, and it’s frustrating.
So to answer your question about Rosenfeld Media, user confusion is one reason. Since this is a relatively new thing, I wanted to test the waters instead of diving in head first. Yes I could have gone a lot further. But for the reasons above, I chose not to.
The other reason is, of course, control. At times I’ve been known to say that I think liquid is more in keeping with the spirit of the web. But for all the usual reasons, it’s not perfect. I think the Javascript method is the best of both worlds, between predictable control of the layout, and flexible design to accomodate varying window sizes.
So I actually prefer this script over traditional CSS liquid layouts, and traditional CSS fixed-width layouts. A little bit of extra work up front, but worth it.
4
Thanks Dave – I was hoping to nudge you into a response :-)
And I totally forgot to mention the usability issues inherent with significantly changing layouts without warning. As you say there could easily, and often be a case of ‘where’s that colum gone?’ or ‘that link used to be on the right now it’s disappeared’.
As with all such novel techniques – use with caution, care and consideration.
5
Nicely done Richard.
Dave does bring up a good point about user awareness, however. Perhaps a nice little addition to a script would be to have it insert a link to a page explaining why the page looks different than the user may expect:
Positioning such a link (or even a notice) in an obvious place may help people understand why it’s happening.
6
I’ve been doing the JavaScript-free blend of this technique for a while at my personal site. I really do think it is a flexible technique that could lend itself to a lot of uses.
7
I happen to prefer non-scripting methods for this sort of thing, aka. liquid layouts. Pat Collins, who I see has chimed in here, has a great example of what can be accomplished without Javascript over at leftlane.org. I’m a big fan of it.
At the same time, the other methods, especially Dave’s, are quite nice.
8
Got to agree with Dave, give the user a consistent experience viewing your website, no matter the device/browser size/resolution etc.
Personally I do it by using an elastic design (all measurements in ems including images) and then using a little bit of javascript to adjust the font size so the site fills the browser window. See http://nickcowie.com/2005/elastic-images/ as an example.
Couple of problems:
Advantages:
9
Very interesting techniques here. I do agree that usability can be greatly hampered by an inconsistant web layout (in this case, base on resolution). The interesting question to ask is how often would each individual be affected by it. I think something worth researching (if possible) is how often the average user views a site outside of their normal resolution. If the frequency is relatively low, usability concerns may not be as paramount.
10
It does open new possibilities. But with a lot of caution, and test towards all your website’s public. And of course, toward those with non javascript UA.
11
The leftlane.org example in the comment above works well, and infact does the resize in a way which makes perfect sense to me.
Last week someone showed me the KLM website at http://www.klm.com/travel/gb_en/index_default.html which has similar resize functionality, but goes a step further from just moving a single column to morphing to an entirely new layout when the window size changes.
12
Agree with the concerns. One thing that popped into my mind was issues of support or communication between users.
User 1 (or support guy): Now look in the right hand column.
User 2: What right hand column?
I still think used well it has potential, especially with the growth in use of widescreen monitors.
13
I’d just like to point out that CSS3’s support for columns could be very helpful in these types of layouts. Gecko (in FireFox 1.5) already supports the functionality – in a preliminary way, using the -moz- prefix that the Mozilla people use for CSS functionality that isn’t quite ready yet.
Example:
http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html
14
Nick, I was interested to see your example of resizing text with the browser window. I was experimenting with a similar script just last week, except that you can set maximum and minimum sizes, and it works by setting the font size in proportion to the width of a specified element.
You can more easily see what I mean by looking at another example using Matthew Levine’s Holy Grail layout.
15
Last year, themaninblue.com wrote about Resolution Dependent Layout (demo) which is another JS-based example.
16
I made a similar demo to the clagnut one last year:
http://www.brandspankingnew.net/specials/adaptLayout/adaptive_columns_01.html
It’s explained here:
http://www.brandspankingnew.net/archive/2005/12/dynamic_layouts_with_css_javascript.html
I also got the columns to keep a consistent length using the following CSS
padding-bottom: 32767px;
margin-bottom: -32767px;
and by setting the overflow attribute of the containing element to hidden.
17
I think the concept is really neat. But user should be in control. And it seems to me that not a lot of people give explanations and ability to turn the feature off.
18
I recently used a technique similar to the one used by Simon on a clients site. Instead of changing the layout it allowed a horrible big tower banner space to be shown on higher resolutions.
19
The usability concerns are something I completely forget to give thought to as well (this is the great thing about discussion), as Aaron Gustafson said, an explanation could dispel any issues though, I would go with a thin strip directly replacing the column, “Where did the right column go?”, in combination with UX Magazines squished (but in a good way) column positioning. I am seriously considering doing something like this, an making an effort to make it as useable as possible. Would love to see the technique used more often.
DJ
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.