Your thoughts on web design for 16:9 screens

paul picture paul · Feb 5, 2009 · Viewed 10.6k times · Source

I design web apps mainly for desktop use (not PDAs, phones etc) by co-workers and customers. As more users become equipped with 16:9-type screens the traditional screen layouts are no longer ergonomic.

For example, a long vertical navi bar might not fit completely or a complex form might need to be scrolled in order to move to the next input field.

How are you coping with this development? Are you spreading out more horizontally or sticking with the old layouts? Is it not really a problem?

UPDATE

Thanks for all the replies. I have found them useful. Here are some thoughts which occurred to me:

  • I take the point that the 4:3 format may still be the most widely used, but I expect that to change.

  • Also, most users I visit here in the company have all their windows maximised (really!) so the idea of sizing the browser to fit the content doesn't help there.

  • In my case, most web apps involve search and display of information or data entry (some of which can involve large and complex forms). It's mainly the data entry apps which I'm concerned about. Perhaps AJAX and Tabbed controls might be a way forward there.

Answer

Oskar Duveborn picture Oskar Duveborn · Feb 5, 2009

Mostly the resolution has just increased horisontally over the board when we look at widescreen adoption. 1024x768 laptops go 1280x800, 1600x1200 displays go 1920x1200 and so on. The vertical size is still available as usual.

It's time I update this answer to adapt to the changes on how, where and with what people surf the web. I'm tending towards responsive designs which are fluid to a certain degree but thanks to media queries and other useful techniques gives the designer a lot more control over presentation re-flow, while still have the capability to adapt to any view/screen size.

Adapting and collapsing content when the available view is less than a certain limit, and keeping text at a maximum line width but expanding and re-arranging other elements are things I've started to do.

This is not only limited to shrinking a site to a mobile device, but also to adapt and fit elements onto a fullscreen browser on an HDTV - or simply to fill up and look good on a smaller tablet with an off-size akin to a netbook.

I still don't personally understand the use of traditional "fluid" layouts where a center text column could expand to 2000 pixels without hesitation, except for in web applications where you have excel-like matrices of data to display or a large image rather than actual text content. Personally I've stumbled on too many such sites where the margin is also too small, and if I widen the browser, the margin doesn't increase even at full 1920 width and is still too small - a designer imposed an uncomfortable margin on me and I can't fix it by less than changing the site's CSS with the browser's dev tools ^^

The first steps in a responsive design to me was to take the infamous 960px fixed width I love so much and have it adapt in three steps when the view was smaller. This made it pleasant on smaller devices all the way to a phone screen. However, my current challenge is widening the design past around the 1200px mark where stuff gets too wide for my taste and another element re-flow needs to be done - but many sites lacks any content to even use for that...