Blog

When I first did the “rainbow” design on this site, I kinda ignored the whole low res screen problem. I’m using a nice widescreen laptop, and most visitors to this site use similar. But adding a decent alternative layout that would work well at low screen res / high text size has been on my to do list for a while.

And lately I’ve been driving myself nuts trying to figure out how I would be able to implement this. Arghh!

Alternative layouts

For anyone who doesn’t know what I’m on about, some websites have different versions of their layouts, tailored for different user setups and preferences. For example, you might have one layout for web browsers set to 1024px wide and above, and another for browsers at lower resolutions (narrower browser window).

It’s good to be able to take advantage of extra screen real estate when you have it - it’s nice to have lots of room to layout a page in. An example of this would be http://www.med.govt.nz - notice how the right hand “Useful Links” block shifts either on the right or below the main content, depending on the width of your browser window.

Those who are accessibility minded sometimes have a layout option labeled “high contrast” or “low vision”, which the user can choose. See http://juicystudio.com. (Heaps of great accessibility resources there too.)

Universal design

My understanding of “universal design” is that it’s where you design the main or only version of something so that everyone can use it. I think it’s a good starting point, though one which does need you to use some restraint. Probably easier to explain this using an example.

Because my existing design for this site had quite a bit of trickery for various browsers, it would have been very hard to add over the top of all that, another alternative layout. So basically I’ve started again with a “universal” layout which should be OK at whatever window size, screen res, text size etc.

When I’ve got time, I’ll add a “widescreen” layout, which will have the homepage in columns, bring back the rainbow banner, and the pretty font for Magnificent Paws.

How might this work for bigger sites?

Often in a commercial project, you do the “fancy version” first. This might involve lovely visual design, a user interface with scripting, maybe some Flash or AJAX. Usually the intention is to make it as accessible as possible, for example by creating fallbacks, but often there just aren’t resources, or the motivation to spend time on the fallback versions which most users will never see.

I’m wondering how things might work, if you ran a web project so that the “universal” version was the first thing that got done, not the last?