Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 accomodate the display in all types of browsers, or are there design reasons for this decision?

share|improve this question
26  
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 '11 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 '11 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 '11 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 '11 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 '12 at 13:58
show 1 more comment

migrated from stackoverflow.com Dec 12 '11 at 6:35

This question came from our site for professional and enthusiast programmers.

6 Answers

up vote 24 down vote accepted

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.

share|improve this answer
    
I wonder how we can use fluid layout prototypes... –  jrosell Dec 12 '11 at 14:43
3  
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 '11 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. –  tajmo Dec 13 '11 at 17:59
1  
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 '12 at 3:11
add comment

Fixed width is silly. Fluid should be the standard unless you're displaying some kind of console, graph or game screen in a portion of the browser.

The only complaint you hear about fluid is that "It's hard to read on such a wide screen" and you're right, but the user can control the width of his browser and often does. It makes no sense that users want a web page to be 800 wide but keep their browsers full screen.

In a fluid layout, the user can choose to make it smaller or maybe he likes having wide sentences. There are only a few things to consider technically like using percentages instead of pixels for a couple of width attributes on your page. You can also make a page "fluid" to a point and then stop, like at 1200.

share|improve this answer
2  
I don't enjoy resizing my browser every time I navigate to a new page which might have different fonts or font sizes, different leading, or different paragraph lengths, which is what you appear to be advocating. Websites should consider their layout based on typographical principles - the user should not be required to do the work. –  dhmholley Jun 25 '12 at 15:37
2  
It's also not true that users often control the size of their web browser. The data that I have access to implies that the vast majority of users keep their browser windows maximised. –  dhmholley Jun 25 '12 at 15:40
    
I agree that users don't resize their browsers as it is too much effort on them.Responsive design can be a very expensive option if you have a complex system. –  Adriaan Jun 26 '12 at 20:43
    
I agree that users don't resize their browsers as it is too much effort on them. Responsive design (fluid layout) can be a very expensive option if you have a complex system. –  Adriaan Jun 26 '12 at 20:43
    
DrDread, welcome to UX.SE. Here, we try to provide answers based on research studies have published and our personal experience with the problem at hand (i.e. if you ran your own tests on it). Unsubstantiated opinions, like this answer, are considered to be bad and are usually downvoted by the community. –  dnbrv Jun 28 '12 at 4:55
show 2 more comments

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

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.

share|improve this answer
add comment

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.

share|improve this answer
    
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 '13 at 12:41
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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