50

What reasons might a website not use the entire width of the browser, like Gmail does?

For example, StackOverflow does not use the entire width — it has left and right margins. This means the entire contents of a page are presented in a column, with white space on the left and right.

Is it a technical reason in most cases, such as to accommodate the display in all types of browsers, or are there design reasons for this decision?

Improve this question
7
  • 32
    I for one think it's hard to track a sentence across 1900 pixels left to right, then back left again to get the next sentence. The fixed width aids in reading paragraph content and also makes the presentation more uniform on different screen sizes.
    – Jared Farrish
    Dec 12, 2011 at 6:20
  • 1
    It's more of an aesthetic choice, but also can be deemed partially technical as (in my case) I have a 25" monitor, I can't imagine I'd enjoy using SO as much if it were splayed across the entire screen. Gmail does use 100% width (I use it every day). So really it's a little of everything.
    – Kyle Sevenoaks
    Dec 12, 2011 at 6:23
  • 4
    There was a post here about optimal paragraph length with some interesting responses: ux.stackexchange.com/questions/3618/…
    – JonW ♦
    Dec 12, 2011 at 8:48
  • 2
    @Jared, I agree that wide lines are too hard. Given that, why would you make your browser wider than what you can comfortably read? Wouldn't the best design principle be: use all and only the space the user has given you (large or small)?
    – Monica Cellio
    Dec 12, 2011 at 19:38
  • 2
    @kensen john, Get a 55" widescreen TV, set it to an enormous resolution, open up gmail and try to read a long email without physically moving. White space is not wasted space.
    – zzzzBov
    Jun 26, 2012 at 13:58

7 Answers 7

Reset to default
33

The difference you're talking about is often referred to as "fixed width" versus "liquid" or "fluid" layout.

Fixed width layouts are MUCH easier to design than liquid ones. When you design a liquid layout, you need to control many more aspects of the display. What happens when windows shrink beyond a minimum width? What parts of the window can stretch, and what should be fixed-width columns? Is there a maximum for "body" after which layout will look bad? (I've seen liquid layouts that were almost unreadable on a 1920x1080 display.)

A second reason, vying for the position of most-important, is that fixed width layouts are predictable. In a largish company with a "creative director" or "graphics designer" who is different from the person implementing a web site, the wireframe or example site will likely be done in Photoshop, approved by a manager, and handed off to a web programmer to implement in a CMS (for example). The web programmer doesn't care about fixed width vs liquid, he just wants to get the site implemented the way it was approved by his manager. And variations will require additional approvals, and it becomes impossible to improve a layout that will be different for each browser.

And a third less-important factor... There are a number of web site analytics tools that measure a "heat map", and heat maps are virtually impossible to implement in liquid layouts, since links do not appear in predictable locations on the page.

Improve this answer
5
  • 1
    I wonder how we can use fluid layout prototypes...
    – jrosell
    Dec 12, 2011 at 14:43
  • 4
    css3's flexible box model will make fluid layouts and content maps work in harmony, especially with box cardinal order rules.
    – Vic Goldfeld
    Dec 13, 2011 at 9:08
  • 4
    A fourth reason is that good typography is much more difficult to manage across a large screen. Wide lines are hard to read.
    – Taj Moore
    Dec 13, 2011 at 17:59
  • 2
    One other factor that occurred to me recently is that we've seen in recently years web applications (Google.com, Google Docs, Hotmail, Basecamp, etc) that aim to be fluid, with web presentations (Google's business sites, almost every static site). This follows the standard windows desktop model - you size your application to your preference. Apps with fixed sizes feel very Window3.1ish. Perhaps "web 2.0" will gradually spill over to sites used essentially for marketing. How about text that automatically goes to two or three columns in wide windows?
    – ghoti
    Jan 27, 2012 at 3:11
  • I don't think the question is asking about "fixed width" versus "fluid" design. Lots of fluid websites still make the decision to present reading content in narrower columns. Especially on a UX site, I think it's more reasonable and interesting to interpret the question as a design question: "why choose narrower presentations of text content?", instead of pretending it's all due to an implementation challenge, which I'm not convinced is the most popular reason.
    – theonlygusti
    Oct 9, 2021 at 18:17
31

I agree with the user Jared Farrish: it's to make the content more readable. If a paragraph spans the entire width of the browser window, it can be taxing on the eye to move from the end of one line to the start of the next line if the paragraph takes up many pixels in width. Many websites tend to limit the width of the page for this reason. In addition, some Web sites use media queries to change the font size if the user's browser window width is very large.

Improve this answer
1
  • 3
    Personally I believe this to be the most important reason. Technology can change as much as it likes to, but our eyes and brains won't for a very, very long time. Sure, there are instances when a website or app can make great use of a 27" widescreen display, but more often than not, that's not the case. It's commonly accepted that the "ideal" measure (the length of a line) for a single column of text is around 65 characters. With default settings in Chrome the measure of these answers seems to be just over 100 characters, so already past the ideal range of 50-80.
    – bernk
    May 1, 2013 at 12:41
7

I'm with Peter O and Jared Farrish on this one. It's more to do with how easy us humans find it to track a line whilst reading and then move on to the next line. So it's more to do with tracking back to the beginning of the next line. It's why newspapers print their stories in columns and not across the entire width of the paper.

Certainly media queries can be used to good effect here. Depending on the content of your site you can change the number of columns for varying widths of display, you can also juggle around any navigation/supplementary information to suite wide/narrow screen accordingly.

Improve this answer
1

It all depends on the website. Some will be as a "recommended/minimum" resolution so that the layout stays nice without looking "stretched" on higher resolution settings, and others will be for pure aesthetics.

The "flavor of the month" about 6 years ago was websites that were a middle column only that had large borders of whitespace/gradient on the sides.

Improve this answer
1

I think "nobody likes to read long lines" is a lame excuse. There is a great gulf between current practice and excessive length, and I think a principal reason for such narrow windows as we see, is that sites are written to fit cellphone limits. Who wants to bother with the effort to develop the cellphone version AND the "desktop" version of the same site? So you write the site to fit cellphones, and let the desktop users suffer.

Some images may help confirm this:

  1. How much (how little) space is actually used:

wasting vast amounts of space

  1. What we usually get from sites:

what sites usually do

  1. What sites ought to do. Are lines too long? Newspapers solved that problem centuries ago by using MULTIPLE COLUMNS. "Desktop" sites could do that, but they don't: write it once, and only for cellphones, tough darts.

the way desktop users would prefer.

Improve this answer
0

it is because of the multiple resolutions. if you want to use entire page, you have to resize the content based on the resolution(like gmail) but is is not possible in each situation.that is the reason to use fixed width for website

Improve this answer
0

One of the best reasons to justify a fixed width layout is readability. For a line of text to be read easily, it should not exceed 70-80ish characters.

Besides that, it's a lot of work to create a fluid layout that performs well on all screen sizes. It's not just a matter of scaling things, entire blocks need to be changed and moved to provide good UX.

Think of navigation menus that collapse to a button [☰] on mobile devices. Not that difficult conceptualize and implement, but you can imagine what it will take to do this for all the elements in your website...

TLDR; Lines of text probably shouldn't be much longer than 70-80 characters, and sometimes a fluid layout isn't worth the effort/cost.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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