Why do many sites leave half of each webpage empty? Isn't this a waste of screen space?

One nice example of this is the Stack Exchange Network sites:

Screenshot of UX Stack Exchange with annotations

As you can see, there is a ton of whitespace left on both sides of each page.

Does the whitespace make sites compatible with certain screen sizes?
Does leaving the space help make sites mobile friendly?
Does space make pages seem less crowded, and thus, more usable?
Or, is there no good reason and people just do it because they don't realize they shouldn't?

I've worked on sites that use both designs and haven't had users complain either way.

Examples of sites that have space: Stack Overflow, GitHub, Facebook
Examples of sites without space: Amazon, Chase, Gmail

  • 120
    Because no one wants to read a 27-inch-long line of copy. – Martin Bean Feb 9 '17 at 9:54
  • 9
    Amazon, Chase, and Linked in all use space - maybe you need a bigger monitor... – Brad Werth Feb 9 '17 at 18:16
  • 8
    @MartinBean, Some of us do want that space used (e.g. on Stack Exchange I have a user script that changes it such that the space is used). Allowing the user to define the space used is part of what having windows is all about. By not adapting to what the user has selected for a width (by resizing the browser window), the site is usurping user agency. It can imply arrogance on the part of the web sites' designers' that they know better what the user wants than the user. Note: that this applies to both wide and narrow views. – Makyen Feb 10 '17 at 0:06
  • 11
    This can't be fully serious, can it? – Spork Feb 10 '17 at 23:54
  • 27
    Whitespace is not wasted space, it's an important element in typography and design. See here: seguetech.com/whitespace-web-design – Andrea Lazzarotto Feb 11 '17 at 1:19

13 Answers 13

up vote 123 down vote accepted

There are many reasons, but the main ones are visual cluttering and hierarchy of information on one side, and structural consistency on the UI side.

Visual Cluttering

Clutter is an important phenomenon in our lives, and an important consideration in the design of user interfaces and information visualizations. Many existing visualization systems are designed to reduce clutter by filtering what objects or information the user sees, or using non-linear magnification techniques so that objects in the center of the screen are allowed more display area. Tips for designing web pages, maps, and other visualizations often focus on techniques for displaying a large amount of information while keeping clutter to a minimum through careful choices of representation and organization of that information. [Rosenholtz et al., 2005]

Simply put: the idea is to avoid visual and therefore cognitive overload by presenting elements in a logical way. This logical way is related to the next point:

Hierarchy of Information

Information has a hierarchy, and it's the most important part of what you want to show. Namely, the difference between failure and success.

The hierarchy of information is a universal design principle that should be used in all forms of design, including e-Learning design. By definition, it is the arrangement of elements or content on a page/screen in such a way that it reveals an order of importance (either ascending or descending).

Take a look at the boxed model below:

enter image description here

As you may see, it's quite clear that the hierarchy is structured and understandable by most people. Please note that in responsive mode this hierarchy will stack all the elements as expected, so the mobile advantage is very clear

Now, the same layout, transformed to full-width:

enter image description here (try seeing it full size)

Now, hierarchy 1 has gone, and user's eye will probably scan 2 and 3 first. And then 6 and 7! Basically, our most important element is down below the hierarchy. We can change it so the order is something like 3-1-2-4. Then we'll also have issues when stacking on responsive models (not only devices, even screen resizing), because 3 will be the first element, so again, we're creating issues rather than solving problems.

As you can see, the issues are quite big, and these are just the main ones.

But then we also have the UI or layout side:

Structural Consistency

Let's say you have a full width page. No matter what, it will be 100%. 100% for the person on a small laptop and 100% on a 24 inches monitor. It's easy to see that the person on a laptop will see condensed information, with a certain structure that will show elements in a very specific way with a very specific amount of information in the screen.

Now, the user on that 24 inches monitor will see something extremely different. First of all, chances are the user will feel as in a tennis match, with her head going from one side to the other. Visual saturation and friction will be incredibly high, of course. But the vertical display of information will be different as well. See below:

1366x768 enter image description here

Now 1920x1200 (24 inches monitor) enter image description here

Quite a difference, huh? Images have been enlarged (and this could be yet another issue!) and text kept his size, almost doubling the amount of text. Now think on this multiplied by the incredible amount of screen sizes that exist, and those that still don't exist and will maybe show up in the next months

In other words: instead of preserving control, we're giving it up in favor of randomness.

Of course, we're talking of general rules, not extremely specific cases, so there will be exceptions here and there

One final note:

I want to make clear that from your examples with full width, only Amazon uses it, and it took them years of testing (there was a very interesting article about this I can't find right now) with countless A/B tests. But here you have hierarchy working: they're selling products where they can't know hierarchy before hand since most products will hold a similar approximated weight , so you'll do your best to match user's search.

As for Google, they use a boxed model and align content to the left with a small gap of white space on the left. LinkedIn main pages are boxed and centered, although it's true the landing page for non logged in users has a full width element. But if you pay close attention, everything else is boxed, even on that page

  • 5
    1+ @Devin Very informative and comprehensive answer. Keep up the good work! – Kristiyan Lukanov Feb 9 '17 at 6:49
  • I might be mistaken, but even Amazon doesn't use full-width. or at least, they don't fill the page with 100% content, there still can be found quite some white space. amazon.com/s/… – Rvervuurt Feb 13 '17 at 9:19
  • @Rvervuurt, that's why I mention they're constantly testing. For example, I have a quite big monitor. When I clicked your link on Firefox, it gave me a boxed, centered layout. After I logged in, I got a page with around 90% of space used, aligned to the left. On Safari, logged off, I got a 100% width. This kind of inconsistency (so to speak) is typical of Amazon, but most pages out of results page are usually at 100%, no matter if logged in or out. Results pages are quite random – Devin Feb 13 '17 at 23:19
  • I disagree that we are giving up control, and I disagree that the result is randomness, when we do not attempt to constrain the outer bounds of the content. We are acknowledging our lack of control over the user's greater workspace layout, and affirming the user's prerogative in organizing that, using tools that all users either have, or don't need. The result is not random, or even arbitrary. The result, is the layout that the user believes is best suited for their task at hand, in which your product may be a small, insignificant part despite it's overall potential. – Dan Ross Feb 14 '17 at 3:40
  • 1
    Just to throw in my 2cents, full width is super tricky to pull off without it looking like mess, nobody wants to read such a long line and most of text would fall into single line which is not great, also in my case, only <2% uses screen resolution so big that empty space on sides is noticeable. – Awfor Feb 16 '17 at 16:34

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

source

Keeping a website clean (and simplistic) is a design trend, but it also has usability values. There is less noise and users can find stuff more easily.

But adding a max width to your content is primarily good for readability. Just take a look at reddit and you'll notice why line length matters.

  • 21
    Although this is true, I think the question behind is why not fill the empty space with other elements. – Alvaro Feb 8 '17 at 15:49
  • 6
    Many people (I'm one) still use the 768 x 1024 form factor, whether because they prefer it, or they don't want to discard a perfectly good monitor, or they don't have the money to buy a decent widescreen. The sites that do spread their stuff out such that a widescreen monitor is required are sites that don't get a lot of traffic, I'd bet (how many people are willing to scroll back and forth?) – MMacD Feb 8 '17 at 16:04
  • 9
    @MMacD Sites can be made responsive though and use as much space as possible, and get smaller if the screen is smaller. – Tot Zam Feb 8 '17 at 16:07
  • 5
    @TotZam Perhaps there are no more page elements to fill the space. Perhaps because it just doesn't look good. Keeping stuff above the fold so it will be noticed isn't that important (anymore). – Paul van den Dool Feb 8 '17 at 17:21
  • 1
    @TotZam I here on SE a logo, five links and a button. It fits on the same width as the rest of the container. I see no need to push those items all the way to the side. – Paul van den Dool Feb 8 '17 at 17:59

There is a reasonable limit in the amount of information the user should see at once.

If the view is filled with more information than the user can assimilate/understand it becomes overwhelming. This will depend on the kind of content and the way the information is displayed.

It is not a matter of leaving empty space, but of using the amount of space needed, not more.

To illustrate the point with your example:

enter image description here

As websites can make use of scroll, there is no need to put as much information as possible in a single screen.

Now, how to distribute the content?

enter image description here

enter image description here enter image description here

Depending on the site the content might be centered or left aligned (this last one probably due to reading Left to Right). There is another alternative which is not to distribute the space in the boundaries of the containers, but instead inside the elements. This kind of layout might be useful if there are several columns inside the containers and there is a sidebar in each side. In other words, it is worth if there are enough columns, and at some point the consistency of each element (each row) will start to break due to the information being too far apart. And when we reach that point we are back to continue adding that empty space in any of the previous ways.

enter image description here

  • 12
    Why make users scroll extra if they don't need? True, you are able to scroll, yet it is still more work for users. A lot of times it's much easier if you see more information at once. – Tot Zam Feb 8 '17 at 15:29
  • 27
    I think it has to do with overwhelming the user with content as well. If a website would utilize my full 27'' screen at 1920x1080, filling it with SO questions or news articles, I would be absolutely overwhelmed. Not to mention it's a lot more uncomfortable to read things at the edges or corners of your screen. Compare it to the standard now, where you can keep your focus at a small area in the middle of the screen, and instead of moving your focus all the time, you can move the content that's in your focus with the scrollwheel. – Ivo Coumans Feb 8 '17 at 15:32
  • 1
    @Alvaro Also, I thought of this question after I saw the discussion about the new SO top-bar. One of the main problems there is that their isn't enough space, so I wouldn't say they are using the amount of space needed and don't need more space. – Tot Zam Feb 8 '17 at 15:39
  • 3
    @Alvaro I fully agree that whitespace in general is crucial, yet my question is just asking about the huge space on the sides of some pages. If you get rid of that space, you then have the room to add more space around and between the actual elements. – Tot Zam Feb 8 '17 at 15:49
  • 6
    @Ivo Coumans: Also I have other things on my screen besides the browser window, so I don't want it taking up the full width of the screen. – jamesqf Feb 9 '17 at 0:09

As a web developer speaking for the sites I've made: we didn't design for large width display. And white space is what defaults when you scale the browser width up (or whatever the CSS background color is).

The costs of designing and developing a responsive and scalable website across desktop and mobile are already quite high. Our analytics show that 90%+ of our users view our site in <1400 px wide resolution.

At the end of the day, it's not worth it to spend the time and money designing and implementing for the <10% of users who browse our sites at >1400px wide resolution.

Related: https://webmasters.stackexchange.com/questions/7932/what-is-the-standard-width-for-a-website-in-pixels

  • 2
    -1 @y3sh How this answers the question? You are talking about your target audience, like its the same with every other site. And the question is not what resolutions your users have or how costly is to design for mobile and desktop. – Kristiyan Lukanov Feb 9 '17 at 6:54
  • 4
    @KristiyanLukanov the question is "Why do many sites leave half of each webpage empty?" And the answer that it's not for usability or UI reasons but for cost is a reasonable one. Especially with many people having mobile devices, it's not worth it to develop any Website UI for a few tablet or Widescreen user if they only makeup a small fraction. – HopefullyHelpful Feb 9 '17 at 12:45
  • @HopefullyHelpful But y3sh talks about his user group and how it is not feasible to design for desktop if you have only 10% desktop visitors. The argument may be valid but for other question. He does not even mention white space. – Kristiyan Lukanov Feb 9 '17 at 13:10
  • 5
    @KristiyanLukanov I assumed it was widely known that white space is the default when you don't design for something on a webpage (or black space if your body background is black, etc). I can add it. – y3sh Feb 9 '17 at 15:44

Academic studies on white space

Yes, white space is used to increase readability and reduce visual clutter [1], [2].

The more objects are on the screen the more the eye and the brain has to process [3]. With empty space we reduce the required attentional resources to process the page. However, too much (more than 50%) of it can have a negative effect on readability and user satisfaction [4].

Does the whitespace make sites compatible with certain screen sizes?

Not really. If the page has no white space (and is stacked with content), when designing for different resolutions it will become a huge problem how to position all elements of the page for the different resolutions.

Does leaving the space help make sites mobile friendly?

Well not exactly. On mobile resolutions you can notice there is not that much white space. They have different layout structure because of the limited screen space available on mobile phones.


References:

[1] Chaparro B. et al., Reading Online Text: A Comparison of Four White Space Layouts, 2004

[2] Coursaris C. and Kripintris K., Web Aesthetics and Usability: An Empirical Study of the Effects of White Space, 2012

[3] S. Luck and E. Vogel The capacity of visual working memory for features and conjunctions, 1997

[4] Bernard M., Chaparro B., & Thomasson R., Finding Information on the Web: Does the Amount of Whitespace Really Matter?, 2000

  • 1
    So are you saying it is better to leave a huge white space at the sides, rather than filling up the page and adding more space between the actual elements? – Tot Zam Feb 8 '17 at 18:28
  • 1
    Maybe the monitor should be a big ball that you stick your head inside, and there should be content everywhere you look. Add good speakers and some scent and voila! Immersive websites! Now, just carry it in your pocket. Doh! – user67695 Feb 8 '17 at 19:09
  • @TotZam Nope, both approaches are valid. – Kristiyan Lukanov Feb 9 '17 at 7:14
  • @TotZam Not generally. But how would you add all that space from the sides in between the elements here and still preserve visual coherence? – Konrad Rudolph Feb 9 '17 at 13:54

Because some people browse like me, with the monitor turned 90°.

enter image description here

Other people are on tablets, phones, and Win 3.11 with 640*480 resolution and 8 bit colour. The best websites are generally designed to look readable on all devices, not look great on any particular device.

  • I wonder if designers really have rotated screens in mind, but this is still an interesting idea. – Tot Zam Feb 10 '17 at 20:37
  • 2
    @TotZam: My point wasn't rotated screens per se, but rather differing screen widths. See the text below the image. – dotancohen Feb 10 '17 at 21:12
  • 1
    @TotZam - probably the designers simply had the still-quite-common 4:3 aspect ratio screens in mind, rather than the 16:9 screen aspect ratio yours appears to be. I do most of my web viewing on a 1280x1024 monitor (I find a 17" 4:3 monitor fits nicely on my desk alongside a 24" 16:9 as the primary display) and stack exchange's design works nicely on that. There's a bit of whitespace on either side (about 90 pixels), but not so much as it appears wasted, and seems like a natural amount to have to me, so I think this is the resolution the site was optimized for. – Jules Feb 11 '17 at 1:01
  • 1
    Your example shows that your vertical screen is still some pixels too narrow (or the website is a few pixels too wide), as there is a horizontal scroll bar. – Paŭlo Ebermann Feb 11 '17 at 8:45
  • 1
    @PaŭloEbermann: My point wasn't that "my preferred screen layout is the target audience" but rather "no particular screen layout is the target audience. – dotancohen Feb 11 '17 at 11:44

If the content is naturally that wide, then by all means make the page wider. So for example, a large table, would be much more usable if it used as much width as it needed, than by being cramped in a narrower column. I have used google docs spreadsheet full screen in the past, and that's useful.

But as others have said though, there's a limit to how long lines of text should be before they get hard to read. It's because it becomes difficult to find the start of the next line as your eye moves back to the left, so text columns should only be so wide.

Another argument for not having wide webpages is that I didn't buy a huge monitor just so I could see more of any one website. As screens get larger people become less likely to maximise windows, so the browser isn't that wide anyhow.

I bought a huge monitor (actually, two huge monitors side by side, and I'd have more if my machine would drive them) so that I could have multiple windows, browsers, editors, etc side by side. That way I don't have to constantly switch between apps, I can just glance from one to the other, which makes things much more efficient. This is likely most true for sites like stackexchange, which are often used in work contexts, where people are working on other things at the same time. It's almost certainly much less important for entertainment sites.

So, as with any usability question, think about the context your users are working in. Is your site the only thing they're looking at, or is it just one part of what they're doing? Can you really be sure of that? Have you logged that info for example?

Even if it is the only thing they're doing, there's still no point in putting things on screen unless they actually serve some purpose. Otherwise they're just noise which detracts from the thing you actually want them to be looking at (or indeed, they want to be looking at). So, if it's genuinely useful then go ahead. But don't just fill space for the sake of it.

  • I like how this answer shows a use for both designs and gives examples of when it would be appropriate to go full screen and when it is excessive and better to stay small. – Tot Zam Feb 8 '17 at 21:57

That design is easily found and changed using bootstrap, the example is here: http://getbootstrap.com/css/#grid-example-fluid

Simple answer for the UI is that paragraph width is comparable to the amount of unforced movement an eye can make from left to right - also it's comparable to a sheet of paper.

Normally the readable area of a paragraph should be no wider than an average sized hand.

  • So are you saying that it is always better to leave space and never fill up a whole screen? In what cases would you say I should use each design? – Tot Zam Feb 8 '17 at 18:08
  • Paragraph or article text should always meet the criteria above. Layouts can use fluid containers but can contain fixed containers to support paragraph readability. Also fixed containers are helpful to support the invisible "guidelines" of the layout when using jumbotrons, h1's, large ad placements, etc. – user96861 Feb 8 '17 at 19:20
  • 1
    Also it isn't about space, mostly about left to right width for readability. I'd say the white space should be kept blank and especially for bootstrap usability, there is no native way to fill the white space. You'll also notice the side margins shrink and respond to the viewport to conform to the "readability requirements" so it's not consistently available space. – user96861 Feb 8 '17 at 19:24

I was really surprised to see this question and the interest for the subject. This seems to me to be part of the old debate around the question "Is white space wasted space?"

I think this is a myth and there are a lot of arguments that sustain the idea that white space is the key to successful design.

The most important argument for limit the width of the main block of content and have layout white space is it makes the design more usable and helps users focus on the most important elements. I can tell you from experience I simply leave those websites with so much info in a page that I have that feeling I will never find what I need. It is exhausting to see information all over the screen and I don't understand how I could focus on the middle column with text on the left side and the right side.

I know this is a little subjective, but on the page with a lot the info in the page, I have the feeling the developers didn't want to spend more time to add a button with "more" or synthesize what is important. It feels like a punishment and it feels cheap.

White space helps to:

  • focus on the most important content;
  • improves reading comprehension;
  • create the look and feeling of minimalism and elegance.

In this article, Why White Space Is Crucial To UX Design, I found an interesting opinion:

White space has been proven to increase comprehension up to 20%.(...)

White space helps create mental maps.(...)

The power of white space comes from the limits of human attention and memory

Update: To be more specific, the alternative to having margins on the left and on the right is to have more columns or have a main box with a bigger width.

The problem with the first option is that it is hard to prioritize the important information and with the second one is it is hard to read a text with a big width.

A good argument to limit the width of a column is presented here and this reference is important to be mentioned:

Is there an ideal line length for content?

To quote a passage from “Web Style Guide – Basic design principles for creating web sites”.

The ideal line length for text layout is based on the physiology of the human eye…

At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.

Web Style Guide – Basic Design Principles for Creating Website Patrick J. Lynch and Sarah Horton 2nd edition, page 97.

  • My question is not asking about whitespace in general. I agree that whitespace is critical to good design. My question is asking specifically about the whitespace on the sides of the page. – Tot Zam Feb 9 '17 at 5:48
  • @TotZam I understood. Maybe I didn't write this in every sentence, but I also augmented why layout white space is important and why having multiple columns or a lot of content make the user feel uncomfortable. – Madalina Taina Feb 9 '17 at 6:09

I would say field of vision plays a role. You can easily read a piece of paper and the width of the website is about the same size. This way you don't have to move your head as much in the horizontal direction while reading or parsing the page.

Also even if you tried to reduce the whitespace, then how would you do it? It's not necessarily easy. Most of the questions are already quite short. 2 Pages next to each other ? How would that work with inifinte scroll or scrolling in general ?

  • This is a good point. I've commented above that the site seems optimized for 4:3 screens, but it's worth pointing out that 4:3 aspect ratio was (AIUI) originally selected as what we can comfortably see all of without needing to shift our vision from place to place. The more modern 16:9 screens are derived from cinematographic formats that were designed to intentionally place action in peripheral vision in order to create a more immersive feel. – Jules Feb 11 '17 at 1:13

I have read all the answers above, but didn't see anywhere any mention to responsive issues that might occur.

Although I still don't get the 'mobile first' design, if you are to design a web application responsive, the same content has to look nice from 320px up to.. whatever. I am mainly working with dashboards, so, a lot of space is needed, but most of the times I still can't stretch content so much that would responsively look good along all the resolution tiers.

Always keep in mind that the longer the container width is, that content will be stacked in smaller resolution tiers and the larger the height of the content block in those resolutions. For example a single line of text in a 1920px width container, consumes 140px of height on a mobile screen view - that's 30% of a small phone screen height and that's excluding browser UI. I am currently on a 21:9 3440x1440px screen. Imaging having items that stretch from side to side on my screen.. Let alone that sometimes I have to turn my head to see desktop from side to side! :D

Here is an example: https://jsfiddle.net/cjj1Ln36/1/

By experience, anything more than 1400px is an overkill especially for rich content, eg combination of a title, text and a chart. Usually, the logical thing to do in higher resolutions, is to break content in columns, however, depending on the resolution and by experience, these columns end up being either too barren or too dense depending on the resolution. It is also highly unlikely that two blocks of code will contain the same content - likely impossible to predict in dynamic websites, so the content of a column might be dense and the other sparse.

For photo-rich websites, things are even worse.

a) If photos use full container width of 1400px, but have to keep a common ratio, like 4:3, then it would most likely occupy all of the screen's height and most likely exceed it.

https://jsfiddle.net/mg965au8/1/

b) If the photo is used on the side of the text, then going from a resolution of 1400px down to a resolution where the photo makes sense to sit above the text (eg > 768px), most probably the content would start too sparse and will probably exceed the image's height while shrinking. I have created a fiddle to illustrate the issue. Try expanding from a low resolution up to the maximum 1400px (imagine without a container!). Does it look nice to all browser widths? Probably not.

https://jsfiddle.net/2xnt3mk2/

Also, what all the others above said - too overwhelming, etc

  • but didn't see anywhere any mention to responsive issues that might occur. Take a look at the accepted answer, it took me quite some time to write it and consider what you mention in your answer, I even included images! – Devin Feb 11 '17 at 19:26
  • @Devin but didn't write this to oppose your wonderful answer. What I am describing is the fact that designers are unable to fill the whole screen because of responsive issues - content that has to fit in small screen sizes cannot be stretched infinitely - after some point it becomes too sparse and too ugly. – scooterlord Feb 11 '17 at 21:29

Especially in text-heavy websites, a narrow column of text is more pleasant to read than a full-width wall of text. Also, if the text is not a novel, you will find that more than half the lines of text don't reach full width so it creates an unpleasant and uneven "text blot".

Think about how text is displayed in a (physical) novel vs. a dictionary. Dictionaries are usually displayed in two columns. It allows the reader to focus better on what is being read because it's important. It's not so important to retain all the words in a novel, as well as not as difficult because we assume the reader is already interested in the story.

In short: humans have poor attention spans and retain focus better if given little information at a time.

  • There are already several answers on this question that basically say the same thing as this. Can you expand and state what differenciates your answer to the others that mention line-length? If everyone just answers with the same thing that that negates the usefulness of the post as a whole. – JonW Feb 10 '17 at 11:06

It also depends on a content type, its size and on a distance of a user from the screen.

For videos, dashboards with large photos or presentations - full screen is the best option.

For the text content and small to middle pics it is critical to take a comfortable perception field into account.

How wide would be a comfortable perception field without a need to move your eyes from left to right for a normal PC or notebook with 50 to 65 cm (20 to 26 inches) distance to a sitting user?

Eyes are too valuable and get tired quickly, so people prefer to fix the extensive degrees of freedom from 2-D motion to 1-D motion and scroll the page vertically and let the eyes stay fixed in their position.

Scrolling the page vertically is easier for people, as moving the eyes back and forth from left to right and additionally re-fixing the vertical position of the current/next content. Some content can simply be lost, if it is placed outside the main perception field.

As a result the overall visual impression from a page may suffer.

protected by Community Feb 10 '17 at 3:53

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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