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.

Nahuatlan

Answer 1

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...

Cleek

I think you mean 1280x800, not 1280x1024. – Concavity

Answer 2

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...

Petrolatum

Not "the easy way out", but limitations of HTML/CSS. It's either you do fixed width layout or screw complex UI design. – Malorie

Here's some more data on fluid/elastic layouts: princeantony.blogspot.com/2007/05/… – Petrolatum

BTW, how do you "screw complex UI design" with a fluid layout? – Petrolatum

Form UI is still perfectly doable with liquid layout. You will usually end up using tables to lay them out, but it's hardly the end of the world. – Lots

Bobince, you just opened up a whole new can of worms: tables vs. css... :) – Petrolatum

It's worth noting that the research you cited consistently found that users preferred moderate line lengths, even when they were able to read longer lines more quickly. I've also seen research that showed higher information retention for moderate lines over long ones, in spite of slower reading. – Oligochaete

Moderate being 6-9 inches for 12pt type. At a PPI of 120px/inch, that would be something like 700-1100 pixel for one single column! – Petrolatum

Actually, moderate being about 5-6 inches. 12pt type in the stuff you cited, don't recall from the paper I read (trying to find it). FWIW, I prefer a column of text to be specified in em's rather than pixels. This lets the user pick a comfortable text size without messing up line length. – Oligochaete

Couldn't find the original article that I mentioned. I did come across some similar research though: edlab.tc.columbia.edu/files/eye-tracking%20article.pdf – Oligochaete

Also: psychology.nottingham.ac.uk/staff/mxh/Papers/… – Oligochaete

This one seems to support the "longer is better" argument: psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp – Oligochaete

If you look at the more recent computer screen studies, then you'll see that the average is longer. Agreed on the em argument though. I did not address that. – Petrolatum

Maybe we have different things in mind -- my initial comment about moderate line lengths was meant in the context of reader preferences. The article you link to actually states this as being 4-5 inches (at the very end). Most of the research included a line length in the 4-6 inch range. – Oligochaete

A follow up to the original article: humanfactors.com/downloads/feb03.asp – Oligochaete

It's also worth taking a look at some of the research cited in the original article. The author of the article skips some interesting details. – Oligochaete

Well, splitting angels on a hairy pin now! :) A 5in line is still about 600px. That's one col. In your typical three-column layout, with maybe two columns for content and one for nav/widgets could easily surpass 1200px and still shouldn't impact readability. Point is: no harm in going fluid/wide. – Petrolatum

That's fair. I've certainly seen plenty of sites that do almost exactly what you've described, and it seems to work well enough. – Oligochaete

Here's the inflammatory way to say it: fixed layouts are like totalitarian states; they think they know what's best for you. I read long lines day-in day-out. I often read books that are wider than five inches. I'd like my eyes to capture a sentence without line-feeding every eight words, dammit! :) – Petrolatum

Answer 3

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.

Gandy

I've been using an app which was designed precicely for 1024 height. On my notebook I have 900 so the submit buttons have now 'disappeared' off the bottom. – Nahuatlan

@paul: this app you're using was designed poorly. Screen resolutions aren't guaranteed and any software that is incapable of coping with different resolutions needs to be redesigned. – Pitre

@welbog: sure - it's what made me start this discussion! I made me wonder what the 'right' approach might be. – Nahuatlan

Answer 4

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.

Quibbling

Voted up. I agree. Adds well to what I posted. "Inches" does require a little mental calisthenics. The average PPI of typical monitors is 100-120. So, it's pretty easy to convert average inches to average pixels. – Petrolatum

Definite agreement on relative units. Please avoid using px! Although Firefox 3 is using virtual pixels these days, which makes everything better for those of us on 150 dpi screens. – Pasteup

Answer 5

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.

Yanez

Precisely. Don't design for a screen size; design for a window size. – Restricted

I have just started using a widescreen (1920x1080) monitor and tend to let almost every single window take half the horizontal space allowing two windows beside each other fill out the whole screen. That gives an outer width of 960px and inner width (if scrollbars are present) of 943px. These dimensions causes horizontal scroll bars on most web pages that I visit, which is highly annoying. – Hutt

Answer 6

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.

Malorie

Answer 7

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.

Efficiency

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.

Pastore

Not that your are wrong, but your example case may not be the general case. For example check this guy's data:rtur.net/blog/post/2008/03/20/Fixed-vs-fluid-CSS-layout.aspx. A sizable number of people use wide or large screens. – Petrolatum

AlphaDog, that data only shows screen size, not window size, and so it says nothing related to Bad Dawg's data. – Restricted

I didn't think to check my Google Analytics. It looks like the vast majority of my users have widescreens. Interesting sub stat... I have 4 iPhones visting my site as well. – Pastore

@Rob: Yes. You are totally right. I always assume most people browse at full or near-full size. This is admittedly purely empirical. – Petrolatum

Answer 9

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.

Pasteup

Answer 10

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.

Stavro

Answer 11

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.

Incombustible

Answer 12

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.

Pronounced

Answer 13

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

Grum

Do you have numbers to back that up, particularly the 4:3 assertion? I haven't even seen a 4:3 monitor in years. Even my parents have one, which is the metric by which I judge general adoption... Also, I think 1280x800 is the new 1024x768 (which was the new 800x600, which was the new 640x480) – Cuthbertson

that was unclear... I meant my parents have a 16:9. And it's like 1680x1050 resolution. and they've had it for over a year. – Cuthbertson

The vast majority can be wildly different than what any one site may actually have as visitors. The problem with over-generalizations is that they are always wrong. :) – Petrolatum

According to the latest stats from thecounter.com (thecounter.com/stats/2009/January/res.php), at least 82% use "standard" aspect resolutions (800x600, 1024x768 and 1280x1024). – Grum

Our entire place (including ~30 developers) uses old 4:3 monitors still, although often two of them side-by-side. – Cleek

Answer 14

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

book-recommendation-web-user-interface-design

Nahuatlan

Answer 15

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.

Wexler

Answer 16

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

Damnedest

Answer 17

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.

Goddess

Answer 18

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.

Abdella

Answer 19

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.

Denten