Elastic or not?
I am looking for your views on an issue I am having with a design for a new website at work. I am a fan of elastic design (which you might of noticed if you are reading this via my blog). The original intention was to have a basic design for the smaller (< 900px wide browser windows) and use javascript to provide a 3 column elastic site, where the overall width of the site is relative to the font size. So the design remain consistent across various font sizes, line length remains readable and the site works in large screens with high density pixels, ie those 1920px by 1200px, 17″ laptop screens. This works well with my blog (though I do need to fix they way the javascript works), because the audience, is generally tech savy, makes use of large screens (10%+ 1600px+) and I assume most have reasonable vision.
However, with the State Library website, the audience is very different, < 1% use 1600px+ screen, over 10% use 800px by 600px (though half of these are within the library and due to be replaced soon), less tech savy, are generally older and more likely to need larger font sizes. Which is more likely to push the width of the design larger than the user’s screen and force the user to scroll horizontally or miss some of the content.
I am thinking instead of using ems for horizontal measurements, use percentages. With the exception of the page container, which is sized in ems. Then use javascript to reduce the width of the page container, to the width of the browser, if the user’s font size is larger than normal and would force the page wider than the browser window.
In theory it would work like this:
- If the browser is less 900px wide, or no javascript the user gets the base stylesheet.
- If the browser is great than 900px wide, an elastic design based on the user’s font size.
- If the user’s font size would force the page wider than the browser width. The page and design, scale to fit the browser width.
Or am I just over designing the issue, should I just use one design either for 800px or 1024px screens and use that? Your thoughts?
May 24th, 2008 at 6:19 pm
Can you not use max-width instead of javascript for constraining the width of the container?
May 25th, 2008 at 11:49 am
John, yes I had considered max-width, unfortunately a large number of users including all internal users are on ie6 :-(
May 25th, 2008 at 10:14 pm
Interesting, I had to decide on this for my new blog design. I used a combination of percentage widths and min/max pixel widths. There’s only actually a 250px range, but I catered to 1024x768 as my lowest resolution. 800x600 sees the main content and second column, but has to scroll for the third column.
For your audience though, as described here, I think avoiding horizontal scrolling is a higher priority. So it sounds like your solution is about right.
BTW, there is an IE6 filter for max-width… depends if you’re willing to use filters or not :)
June 27th, 2008 at 2:58 am
“I assume most have reasonable vision.”
My vision is roughly 1/3 of yours — If I’m zoomed 3x, I see AS WELL as you. I need not be STRICTLY an outlier, though.
Most users compute “hunched.” Most users squint. Visit a busy computer access area for verification, if you must.
A site: ez for me is enjoyable for better eyes, too.
Though (as I’ve probably made clear) I know very little about code/developing I know good web design when I see it! The simplest solution would be: columns. Horizontal scrolling is then PERFECTLY OK, as everyone already has right/left buttons.
Just let the page BE, add modularity so that horizontal is simply an ADDITIONAL navigational feature. Who doesn’t like efficient & ez navigation?
Yes, COLUMNS! Back to Old School.
:::::::::THIS PAGE » COLUMNS:::::::::
ARTICLE: LEFT
EVERYTHING ELSE: RIGHT
Zooming would essentially transform the 1 page into 2, with horizontal-access to tie them together.
A zoomed page allows for more comfortable, reclined reading, and who doesn’t want to be comfortable?
November 9th, 2008 at 1:17 pm
Wrap the critical body (main div) information only. Let the toolbars, sidebars, and navigation elements float and expand outside the defined window.
Alternatively, allow navigation elements and sidebars to expand on mouseover — wrapping it all-in-one.