Why do websites not use entire width of browser?

by kensen john   Last Updated May 10, 2018 17:16 PM

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?



Answers 6


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.

Deco
Deco
December 12, 2011 06:22 AM

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

Chamika Sandamal
Chamika Sandamal
December 12, 2011 06:22 AM

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.

Peter O.
Peter O.
December 12, 2011 06:27 AM

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.

ghoti
ghoti
December 12, 2011 06:32 AM

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.

Antony Scott
Antony Scott
December 12, 2011 17:21 PM

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.

Tom
Tom
May 21, 2014 07:51 AM

Related Questions



Best way to display a PDF and a web form together

Updated July 21, 2016 08:06 AM

CSS border not showing up?

Updated July 07, 2015 12:46 PM


Visual Indicators

Updated July 09, 2015 13:07 PM