Your thoughts on web design for 16:9 screens

Question

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 1

16:9 screens are not really restricted vertically if you think about it. In my experience with these monitors, their native resolutions are typically 1920x1080. The vertical space is still larger than most resolutions (1024x768, 1280x1024, etc..)

I have however started writing liquid layouts to handle the horizontal space. Some web designers like to stick with 960px fixed width. It all depends on what you are trying to present to the user.

Answer 2

I stick with developing for the majority, which is still using 4:3 monitors. If I wanted to create 16:9-specific content, I'd probably provide a link to the "Enhanced for widescreen monitors" version, sort of like the label on the back of DVDs from the days when not all of them were anamorphic.

Answer 3

I do not worry much about old screens these days and whenever 800px is not enough I easily switch to 1000px. However you should not design intentionally for something wider, like 1920x1080 resolutions. The number of users with such screens is not that much. Even if it were not the case, too wide designs affect usability. Read texts stretched horizontally to ~1500px is not really nice.

Answer 4

The vast majority of web users are still on standard, non-widescreen monitors (see stats and my comment below), so I'd design for them. I personally optimise for 1024x768 resolution.

http://www.thecounter.com/stats/2009/January/res.php

Answer 5

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

I'm definately sticking with the old model because most widescreen users I know including myself want a tall and slim page so that two web sites can be displayed next to eachother on a widescreen display - or next to some other application I want visible documentation on while I use it.

The obvious exception are smaller resolution screens like a netbook 1024x600 or whatnot but that's basically not many hundred pixels from a normal width page anyway so there's really no need to widen it a bit just for that...

...also you have to remember the actual content - text is simply unreadable if the lines are too long. You'd have to divide the page into several text content columns if you make it too wide. This is why I personally do not understand the use of "floating" layouts except for web applications where you have perhaps an excel-like matrice of data to display or a large image rather than actual readable text/body.

Answer 6

As a user and designer, I hate fixed-width sites. Lots of sites could be made fluid, but are not because it's "the easy way out". Then follows all sorts of rationalizations that are fitted (pun intended) to support that view.

Newsflash: Short line lengths is a myth that dates to early newspaper research. See this summary for details and make your own judgment.

Very wide lines may be unreadable to some (I don't find that as much of an issue, personally), but so are ~900px fixed layouts with three columns, such that each line is about eight to ten words.

I've always tried to design for reasonable resizing by looking at the demographics of a site (for example, via Google Analytics) and seeing who tends to visit...

Answer 7

In addition to the other comments...

Most users are not using widescreen monitors yet. More importantly, many users who DO use widescreen monitors do not have their web browsers maximized.

Answer 8

I do all of my development on 30" monitor and preview it on a 20" monitor as a quick sanity check. On a recent application release I did, I had a JS send back the stats of what my target audience was using, and I come back with a a lot of random numbers smaller than 1024x768. Of the hundred or so stats I collected, only 5 or 6 users were running full screen on anything larger than a 1440x900 screen.

Answer 9

Here is a link to another SO question which might contain some useful info.

book-recommendation-web-user-interface-design

Answer 10

Here are some principles I would recommend as a user but also as a web designer and developer:

1. Try to avoid horizontal scrolling. Most people have a mouse scroll wheel that only works one direction. Horizontal scrolling is often considered very irritating. Vertical scrolling is usually acceptible now.
2. Column size matters in long paragraphs. I would normally recommend a width of about 15-20 words, but feel free to experiment. The link from alphadogg is an interesting read, but I'd have to say it's hard to go by the term "inches" in web development. Words or characters is perhaps a better measurement, which leads me to the next item:
3. Use relative units for width. This lets you keep the width at a certain amount of words in most cases.
4. Helpful hint: the problem with a relative unit is that the page can be expanded past the width of the page. You can reign that in with most browsers by specify a max-width property in css of 90% or so. So when the text is big on someone's display, they still don't have to horizontally scroll.

Again it is not recommended simply to flow content to 100% of the browser width most of the time. And I think as displays get larger, you'll see a lot fewer people maximizing browser windows anyway.

Answer 11

One thing to consider is your application's posture. Is it a sovereign app, where the user would be expected to devote their entire attention to it for a while? I recently redesigned a page in our web app which allows the user to perform translations into other languages. In this case, the user was going to be "diving in" to this part of the application for a while, so I stripped out the usual navigational elements which would be a distraction to allow more real estate for the task at hand.

In this case, the user base was limited to people inside my company, who I knew all had widescreen monitors, so it was easy to make the decision to go wide. In general, I'd say that one should still design for non-widescreen monitors, but in cases where there is a significant advantage, make the design capable of taking advantage of the additional space. I've seen some pages that were laid out for regular screens, but used JavaScript to detect whether the page was wider and rearrange some page elements if it was. That way, the default configuration was always usable, but users with wide screens and JavaScript would get a better use of their space.

Answer 12

Design your site so that it is the content that matters, not how it looks. Then you can provide alternate CSS style sheets for the user to pick from.

This can sometimes be more difficult for the designer. For instance, using tables for layout doesn't work.

Answer 13

Please don't.

Design for 4:3, maybe 800 to 900 pixels wide max.

Many computer I use (like nearly every one at my work) are 4:3. Only my laptop is 16:9 (actually 16:10 I think, but close enough).

I don't like having my web browser as wide as my monitor, it's a waste of space. You can't read text that wide. On my desktop 4:3 LCD (which I'm using right now) the width is 14". You can't read 14" wide text, the eye loses track of which line it's on. It's a horrible pain. Most sites restrict the width of the real content. StackOverflow's main content column for me is about 8", a great reading size.

So when you go 16:9, things get worse. Now instead of the 14" you might have 16". That's huge. So what do you DO with all that space? You can't just put text, unless you want to have two articles side-by-side (like two newspaper columns) and I doubt you want to do that. That means you just fill it with unimportant nonsense. More sidebars, more ad columns. Basically you're forcing content in to fill space.

Not everyone runs 1920x1080. Not everyone keeps their web browser maximized. Filling nearly half my screen with unimportant columns does not appeal to me.

Answer 14

Don't assume vertical resolution is OK on wide screen. 1440x900 seems to be a popular resolution, and while it's bigger than 1024x768, it's noticeably shorter than 1280x1024.

Also, don't assume all those new wide screen monitors are being used properly. I've seen quite a few setups where the monitor is not being used at its native resolution. People either are unaware that anything is wrong, or they appreciate the extra large characters even if it makes things a little fuzzy.

Answer 15

Don't forget that just because a user has a widescreen monitor, it doesn't mean that they have their windows maximized either.

Answer 16

I always use 964px as my width for websites. Approximate, varying from site to site, but I keep it under 1024px wide, taking into consideration vertical scrollbars. This leverages the site is not overly large for an 800px wide screen, but is just big enough to look nice on a 1024, and 1280px wide screens.

I have found in my experience, that even users who use rather large widescreens (I myself having dual 22" (1680x1050) screens, I still prefer a fixed width layout, at approximately 1024px wide for readability.

I very much so dislike reading very large spans of text, and I like to keep it at "book width". Most websites I find attractive, and have a large user base are around these sizes.

Hope this helps.

Answer 17

As a regular user of widescreen monitors, I do not want to see designers making their sites any wider. I run 24 inch widescreens (1920x1200) and when I'm browsing the web I usually run two browsers side by side. If anything, making some sites a little bit narrower would be best. Most sites will run fine in 960 pixels, but it's annoying when I have to pop a site open wider or scroll around to see everything.

Answer 18

Please consider the rapidly growing audience of netbook users who are using 1024x600 screens. I think that should be your minimum design size for current projects.

Answer 19

In my design course we had a rule-of-thumb that line length should not be greater than 40 times line height. The reason is obvious: when your eyes trace back to the beginning of the next line you want to be sure it is the next line, not the same line again or the next plus one.

For this reason I always use fixed-width design. My current monitor has an active area 43cm wide. Line height on this SO page is 5mm. If SO would use fluid design the ratio line length / line height would be an unacceptable 84.
And things are even worse on 30" monitors.