55

Screen are getting wider and wider. Almost every interface uses a fixed width and content is centered in the screen.

I know we can't read a too long line easily, but there are solutions to fill the extra space : columns, grid, ...

It looks like a huge waste of space.

Why it is not becoming a trend to produce wide interfaces, leaving the vertical interface for a horizontal? I only know a few websites that use wide interface.

Are there limitations? Why everybody stick to their 1000px wide website?

5
  • 8
    MS Word now puts documents into a "Reader" view when I view them from emails. This sticks multiple pages together and displays them next to each-other. I hate it. So much so I usually take a few seconds to convert to Edit mode and then zoom the page enough to show a single page width in the middle of the screen (usually with wide margins)... Call me crazy :) I'm interested to know what the answer is to this question.
    – m-smith
    Mar 6, 2014 at 16:20
  • We tried this already, with many web pages. It was a massive failure. Mar 6, 2014 at 20:48
  • 3
    It's hard to make layouts that look good in every possible window size: imgur.com/fT2wSeA Mar 6, 2014 at 20:53
  • @MooingDuck Disagree. The same layout for all screens can't work well, but you can create responsive/adaptive layouts that. With column support in CSS it's actually easy to make use of the full width on wide screens. I'm interested in examples for the massive failure you talked about, could you provide one?
    – danijar
    Apr 1, 2014 at 9:22
  • @danijar: I don't mean a site was a massive failure, I mean every website is a partial failure. Apr 2, 2014 at 2:35

9 Answers 9

41

I think it's just a case of a standard which was imposed due to the general resolution being a maximum of 1024 px wide earlier (now the common resolution is 1366 x 768) and designers preferring to have some space in their designs rather than stretching it all the way to 1024px. Also the fact that a smaller screen can be viewed perfectly on a large screen has contribution to this.

To quote this article

it’s not surprising that many desktop layouts (like this one) are designed to suit a 1024x768 resolution. It’s a leftover from an earlier era, when designs were constrained to the screen resolution that was most prevalent amongst users. Today, with the majority of desktop users on screens that are wider than 1024 pixels, a maximized browser window can turn that carefully considered 960-pixel layout into a monolith in a field of whitespace.

More people are accessing the internet with a mobile device every year, and so it makes sense to concentrate budgets and timelines on creating good user experiences for smaller screens. Mobile layouts can be perfectly usable on larger devices, but the same cannot always be said for desktop layouts viewed on small screens.

Also there are mathematical constraints to what is the preferred width at which you can design. To quote this article:

Most web designers don’t want the site to be 100% fluid. That is, they don’t want to design for ALL widths – just a handful. Also, it’s nice to have a little window “chrome”, or dead space that lies outside of the website body for things like backgrounds and fixed-position goodies.

Perhaps the most important reason we typically design for 960px max-width is mathematical. You see, 960 (as a number) has a lot of factors (28, to be exact).

enter image description here

All these numbers evenly divide into 960. So a max-width of 960px has more layout options, such as 16 equally-wide columns. If we round 960 to 1000, you’ll see it has far fewer factors (16).

enter image description here

Now coming to why it's relatively harder to design for larger screens,

  • While 1366 x 768 is the most common resolution, higher resolutions than that are still not so common and a website designed at 960 px max width will scale just fine in a 1366 px monitor
  • If we go for full width, the readability of text is another concern as you rightly pointed out and as width increases the number of characters in a line increases and reduces the readability. To quote this article

The glaring issue with this approach is having super-wide columns of text. A body of text 30cm wide isn't going to do your layout any favours aesthetically, but, more importantly, the readability will also be reduced.

The width of a line of text is typographically referred to as the "measure", and in order to preserve readability should aim to be around 45 to 75 characters in length. Too many characters and it becomes difficult for the reader's eye to move back across the text and locate the beginning of the next line. This can be combatted by increasing the line-height (leading), easy enough to implement at the appropriate moments through media queries, but it's not a complete solution.

  • The third question that comes up why can't we just increase the size of the content to scale for the increased size. While that is a viable option, it again affects the readability as quoted in this article:

We view screens most comfortably with a viewing angle of around 30°.

enter image description here

Which effectively means;

The larger the screen, the greater the optimum comfortable viewing distance.

Hence a smaller scanning range will work out better for easier readability and users won't be forced to sit away from the screen to be able to scan content.

11
  • 2
    I wouldn't say that's the "standard" resolution, merely the most common Mar 6, 2014 at 20:50
  • Good catch, I'll update it
    – Mervin
    Mar 6, 2014 at 20:52
  • 4
    @AndrewGray No, stating that a number x evenly divides into another number y is equivalent to stating x|y, or that there exists some integer n such that nx=y. Mar 7, 2014 at 1:44
  • 1
    Interesting. I have a widescreen monitor, but chat windows, conky, and a few other things are in the right-hand side, so the browser has never taken the full width. So I just checked, and it turns out my browser window is 962px wide - which was chosen just by dragging the windows until it looked right.
    – Izkata
    Mar 7, 2014 at 2:55
  • 1
    Also to note: I use a 27" 1440p monitor (2,560 pixels wide). Unless it's a video, I never maximize my web browser - it only fills 1/2 of the screen (1280x1440). I suspect many people do similar things (i.e. having two windows open at once)
    – SSumner
    Mar 8, 2014 at 23:07
16

After a comment, I realised that I hadn't explained my position well enough, but only argued for a single facet of my opinion. Here is a fuller version.

Executive summary

There are cases where making a wide design can be beneficial, and a good designer will use these opportunities. But such conditions occur rarely. If they are not present, both a narrow fixed-width design and a combination of a space filling design for wide screens and narrow design for narrow screen are good, legitimate choices. Creating a wide version only and delivering it to everybody is never good.

Background

A designer has to design for some width, which I will call the primary design width. The designer will aim to maximize the usability at the width chosen; I will call the achieved amount of usability the full usability of the design.

It is frequently a requirement that the design keeps as much of its baseline usability as possible when the width is reduced (responsive design). This works by making "stretchy" designs and sometimes changing the design elements (e.g. reducing the number of columns when a very narrow width is recognized). But it is recognized that at some point, each design will degrade (have reduced usability as compared to the baseline) when the width gets too small. Even a simple text column will be less readable at, say, 1 cm width.

It is humanly impossible to design and test at all widths at once, but a good designer will usually work on the narrower and wider widths in parallel to the primary one, or at least keep them in mind and make design choices at the primary width which allow for easy transition to wider and narrower.

Reasons for not filling up the space when there is more width available than the primary design width

Because more space efficiency does not automatically lead to higher usability. "Wasted space" is not a negative factor in usability. Even the "above the fold" rule is losing credibility, and when vertical scrolling is needed anyway, a few extra turns of the wheel are typically not a problem.

The designer has already achieved full usability at the picked primary design width. She can try to increase it within the increased freedom provided by the larger space, but unless the space was already a severely limiting bottleneck at the chosen primary design width, it is unlikely that the usability will be increased above full usability to some state of extra usability. Of course, if the designer has found a solution which increases the usability when compared to the narrower width, she should use this solution.

An example of designs which do benefit from the added width would be the Remember the milk web application and the Mendeley desktop application, which don't use the classic master-detail pattern, but place the detail editing form in an extra column. This allows the user to select multiple masters and set one or more detail fields for them simultaneously to the same value.

But such examples are rare. In most cases, width is not a limiting constraint, and filling up a wider space does not increase usability. The designer can, of course, create a more space efficient version which gets delivered to users with wide screens. But if the usability remains the same between the wide and narrow version, there is no need to use the wide version. It is the designer's (or her customer's) choice whether to make a wide-screen-optimized version, to let the primary design width version stretch dynamically, or to leave the design at a fixed width so that a wider window is filled with the empty background pattern. When there is no difference in usability, the only criterion is aesthetics, and this will differ between people, there is no way to pick one which pleases everybody.

In the worst case, making a more space efficient version will even reduce usability. A user performing a specific tasks has specific information needs. Any information and functionality not needed for the current task is actually distracting. If you have ever complained of "bloated" software, you know what I mean by saying that packing more information or buttons on the screen can be detrimental. And even if there is no distraction, clutter and lack of white space will typically reduce the usability of the design.

But why not pick a primary design width larger than the classic ~1000 px @ 100 dpi?

(I am personally a proponent of 960, but have seen many people who use 1024 too)

Simply: Because it punishes users who don't conform to your expectations of a desktop computer with a modern wide screen. Basically, the more assumptions you make about minimal screen width, the closer you get to earning the dreaded "Works on my machine" distinction.

  1. One major advantage of a wide screen is that it is possible to have multiple windows, tiled. If the (web?) designer makes the assumption that the user will always maximize the window, he/she stands in the way of some very efficient workflows. Basically, just because the user bought a large screen, they didn't give you the permission to occupy all of it with your application.

  2. There is a multitude of devices and platforms (and has always been). Just because desktop computers tend to get larger screens lately, this doesn't mean that all devices which run your application have them. This is especially true of web applications, which have to run on all kinds of platforms, but it can happen that users want to run your Windows desktop application on a netbook sized computer, a small screen embedded somewhere in an industrial setting, and so on.

  3. Users are not obliged to buy the latest and greatest hardware. Many non-IT-affine people out there still use ten year old monitors in a 3:4 form factor and low resolution. And they have an expectation that your application runs at their computer too.

  4. With the advent of higher dpi screens, more applications start allowing decent scaling. The more applications allow pixel-independent scaling, the more it gets likely that users with worse eyesight, or users who have placed the monitor farther from the eyes due to space restrictions on their desk, will want to zoom in your application. If it is too wide, it will have no space to zoom into. (Admitted, this is something of a future worry, because most applications are very far from good pixel-independent zoom yet, and operating systems don't have a good native support for it - the option exists on Macs, but I think it needs third party software).

  5. And don't forget that most websites out there are still about text. Longer lines are very detrimental to readability. The optimal reading configuration contains 60-70 character wide lines which follow vertically in a linear manner. And while the user is engulfed in reading, he doesn't want to have anything beside the text. But if you put something else there, he will ignore it anyway. This is a special case (applications can sometimes make a good use of a right column, see Remember the Milk and Mendeley for decent examples), but it is a very common case.

And why start with a narrow primary design width at all?

Keeping the full usability at reduced width gets trickier when the difference between the primary design width and the reduced width grows. It is likely that the designer will have to introduce more element changes as opposed to simple shrinking/reflowing. This is more effort for the designer and ends up in a less consistent design (and consistency itself is a factor of usability, through increased learnability). For this reason, a designer will prefer to choose a primary design width which is as small as possible (so that reduced widths can't get much smaller) while still allowing enough freedom to establish a really good baseline usability.

The distribution of widths available to the user is far from smooth; there are large jumps at standard display sizes. So a designer will frequently pick a standard size for the primary design width, as opposed to just a few pixels less (this will restrict the designers freedom, without reaching more users).

Of course, the primary design width shouldn't be chosen too narrow either, or it won't be sufficient to achieve full usability. There are people who design mobile-first (picking a primary design width corresponding to a smartphone screen size), but they will typically also make a desktop version with substantial changes, which will also have increased usability.

Why users' calls for a wider designs are not always a good reason to deliver them

The first reason can be applied to practically everything in design and requirements engineering. It stems from the fact that evaluating the usability of a finished product is easy, but evaluating the usability of a proposed design is a difficult learned skill. It is a situation of "I can't tell what [a usable design] is, but I will know it when I see it". It can be that a user pays money for a new, wider screen, then sees lots of white space on it and feels that the space is somehow wasted. He comes up with the solution "just put some design in there", evaluates it for downsides, and sees none. In many cases, the user will also have previously experienced occasions where going from a low width to a large width increased usability (e.g. when he upgraded a 13 inch monitor to a 17 inch one) and will not notice that this effect does not hold for all width increases. Then he can start demanding a wider design. We designers cannot expect our users to know what is good for them, but we are also not required to fulfill their wishes when they are not leading to a situation which is good for them. (Unless there is a contract which says that we have to do just that).

The second reason is specific to screen width. The majority of people start learning computers, achieve a state of intermediate knowledge, and are not willing to put more effort for achieving more advanced skill levels. This is a very efficient learning strategy for a non-changing or slow changing technology, as learning the skill to an advanced level is subject to diminishing returns. In computers, we are faced with a situation where tiling windows would be a great improvement over using each window maximized, but this was not so 10 to 15 years ago due to the small screens and low resolutions prevalent then. So people who have long ago achieved a comfortable level of computer literacy don't ever think of tiling and never try it. OS creators don't have much incentive to offer proper tiling, as no users demand it. As a result, while using two or more windows tiled on the current large monitors would frequently lead to much higher usability than having one application using up all the space, users just don't think of that, and demand the suboptimal "fill my expensive space with your application/website" solution instead.

5
  • 1
    This answer just made me realize that SE, slightly zoomed out, fits very nicely on the left half of my primary monitor. Game changer!
    – Mike G
    Mar 6, 2014 at 20:57
  • 2
    You can use media queries to display your wide-optimized UI only when the actual browser window is that wide. So pretty much every objection you raise is irrelevant and doesn't address the question being asked.
    – Jonah
    Mar 6, 2014 at 20:58
  • 4
    -1 Hopefully it's obvious that the OP isn't saying that interfaces should be fixed width. They should use the extra width if it's available. This takes care of your points 1-4. And the OP addresses point 5 in the question. Mar 6, 2014 at 21:35
  • @BennettMcElwee I am not saying that they should be fixed width, I am saying that they only should use the extra width if there is also an increase in usability. If there is no increase in usability, it is up to personal taste whether to choose a fixed width or a space filling design. See my expanded answer for details.
    – Rumi P.
    Mar 10, 2014 at 11:43
  • 1
    I still feel that this answer is too long and misses the point of the question. Even so, there's a lot of good information here -- maybe you should turn it into a blog post. Mar 10, 2014 at 21:03
8

We do, it's called Responsive Design:

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.

  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.

  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

  • Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.

That said, I would also say that the reason that most responsive sites don't extend past a ~1000px width is because it's fair to say that most people don't hire physical developers that know what they're doing.

Instead, they go to one of a plethora of template sites and purchase a template so they can try to do it themselves or they sign up with a Content Management System like Wordpress, Joomla, Drupal, DNN (formerly DotNetNuke), etc., and use their system and pick one of their templates.

Most of those typically don't have super wide templates to choose from. To get that customization you need to hire developers/designers that can give you what you want. The simple fact is that sites built that way are in the minority. It won't change until the user base decides that's what they want.

11
  • 5
    To be fair, we often will put in max-width settings into responsive layouts. There often are practical maximum widths.
    – DA01
    Mar 6, 2014 at 16:28
  • 1
    If it's done correctly, there aren't maximum widths set. The media query would be such that it applies to any width over a specific number. Mar 6, 2014 at 16:29
  • 5
    I wouldn't call that the 'correct' way. Just 'one way'. Again, there are often very practical reasons to limit the width of the layout from an informational and visual design standpoint. If it's a long article of text, for example, you wouldn't want to stretch the text beyond readable line lengths, nor would you want to clutter the margins with distractions.
    – DA01
    Mar 6, 2014 at 16:32
  • 1
    I hear you, but your reasons have nothing to do with the media query itself. All a media query does is allow you to put styles that apply to that specific query. For example, for a greater than x query, maybe instead of set pixel widths you switch to percentages. You still get to decide how the content will be shaped. It's up to you to make sure the margins aren't cluttered or that text doesn't stretch beyond readable line lengths. All I'm saying is that in RWD, you should have a media query that takes into consideration all widths wider than x. Mar 6, 2014 at 16:41
  • 1
    You correctly point out that techniques are available to use very wide layouts. But the OP was asking why, in fact, websites generally don't. (I don't have the heart to downvote since there aren't any upvotes yet. :) ) Mar 6, 2014 at 21:38
6

IMHO - Having it bare on the sides, called whitespace, allows the user to focus on the content. Too much can be too distracting.

Also, I'm sure Gutenberg knew what he was doing when he designed the margins to the Golden ratio.

enter image description here

5
  • 5
    Screens aren't built for highlighting or note taking in the margins though.
    – WernerCD
    Mar 7, 2014 at 0:27
  • Highlighting yes. Writing in the margins, no.
    – Pdxd
    Mar 7, 2014 at 1:00
  • I have a feeling that you have a wrong assumption about the role of wide margins in books. Could you please point out some references about the fact that they "hightlight". Most classical multi-column typography is done in such way that all the intercolumn spaces and horizontal margins have the same width.
    – yo'
    Mar 8, 2014 at 22:06
  • 1
    Many people highlight as they read on screen (quora.com/…). I do that myself all the time. As per classical typography because it's a more tactile experience, there are different things to consider. (thebookdesigner.com/2013/08/book-layouts-page-margins) I understand the book experience is different from the screen experience but in terms of layout, there are some elements that remain universal like the use of white-space for focus and clarity of content.
    – Pdxd
    Mar 10, 2014 at 14:14
  • As Gutenberg was working at the start of the history of printing with movable type, he is unlikely to have got things just right.
    – Raedwald
    Jul 11, 2014 at 19:06
6

No matter how wide screens become, our eyes are only so far apart.

Most sites have text to read, and reading text requires our visual focus. The problem we have is that our central vision has a limited area; basically it's the distance between the pupils, which is about two inches or so.

This limitation has to with our evolution; we needed sharp central vision for stalking prey but it didn't need to have a large area for detecting other predators. It's not a coincidence that other land-based predators at the top of their food chains share our visual anatomy (ie, eyes in front of the face and fairly close together).

The asker acknowledges that we can't follow long lines too easily. That's because we have to shift our eyeballs to do so; it's instinctive but still requires muscle movement. Also making site text elements too far apart can result in the user not seeing them.

3
  • OTOH, in most cases, you have something useful to show. I don't say that the following site has a genuine design, but it shows that there is a way ho to use cleverly the space: lilypond.org/doc/v2.12/Documentation/user/lilypond/…
    – yo'
    Mar 8, 2014 at 22:08
  • @tohecz that's actually a great example as to why a max-width setting is rather important. The line lengths on that site get way too wide to be comfortably read when stretched out on a large monitor.
    – DA01
    Mar 9, 2014 at 3:30
  • @DA01 I know. Still, on my computer, it looks fine and fills the space reasonably. Which I can't say for instance about the whole SE network.
    – yo'
    Mar 9, 2014 at 20:09
4

It depends entirely on the application, of course. Many applications have always let you use the full width of your screen. Excel being a simple example.

In terms of web sites, there's a lot of practical reasons:

  • as you state, reading long lines of text can be problematic.
  • just because people have a wide monitor, does not mean they have a wide browser
  • in fact many people with wider monitors tend to have narrower windows, albeit multiple windows open
  • scanning a single column top-to-bottom is something we are used to (even pre-dating web) and is easier than scanning multiple columns side-by-side
  • the more extreme widths you decide the support, the more variances one has to build in to their responsive layout strategy
2

You said:

Almost every interface uses a fixed width and content is centered in the screen

This statement is not correct. This is probably correct only for text content sites. Here are some examples of sites that do use full width:

  • Pinterest uses the full width of the screen (at least the 1920 I'm using)
  • Kizi - which my kids use all the time - also uses all the screen
  • New Relic uses most of the page's width to display app stats.

And I'm pretty sure there are many more examples.

As stated in many of the answers above, it is hard to create good text-based sites that use full screen width because of our human limitations, but when the site is not text-based, I see no problem.

0

While screens are getting larger, users still have a narrow range of visual focus. For immersive content like videos, animations, artwork, etc...these large displays are GREAT. For things like completing tasks on a website, users will still only be able to focus on that same 1000px (give or take) area.

-1

I think the answer essentially comes down to laziness, considerably mixed in with need or requirement for the information being displayed, and a perceived lack of audience (what percentage of people have wide screens).

Earlier answers suggest that templates for blogging sites don't support wide-screens, thus 'people' do not support wide screens. I would argue in that case that a blogging site does not benefit hugely from an ability to place several blog posts next to each other...and considering that some posts could be very short and some quite long I imagine that the logic involved in choosing how to display that in columns sensibly would be quite hard.

So, if we want to think about the sort of website that might realistically be able to scale to wider screens, I suspect one important element is being able to have stuff you can fit fairly easily into a grid. And Amazon's front page does this (partially), making use of the width of my 2560 pixel wide display to display several products across. Above about 1800 I would say that all the extra width is absorbed with additional padding, so viewing the site does get a little silly (especially if I widen the browser across both my monitors :) )

It turns out that even Amazon have not made useful steps forward with the display on their product pages, which on a wide-screen do take the whole page and are almost single column for product description and reviews, which can make for some pretty long lines and it is a bit of a design failing. I think they would have struggled to collate the wildly varying information on the product page in a way that looked good?

Another potential example of 'wide screen' usage is that used by the News App in Windows 8, which essentially fills the screen (ok, that's NOT the wide part) but scrolling sideways scrolls in the rest of longer stories, or new ones on similar topics. Clearly this is not quite the same thing, but I would think that News Stories have the potential to be something that could be tiled across a large display very effectively - and certainly if editorial policy is to have minimum and maximum lengths suitable for the format.

Not the answer you're looking for? Browse other questions tagged or ask your own question.