July 16, 2012

Content Delivery – Part 1: The Value of White Space

Posted by Simon Paul

The internet and its content are in constant evolution. Websites from the early 1990’s look completely different from what we see today. Technology has been a large part of that change. We now have new and better ways to control how websites look, function, and perform. But we also have a much larger range of devices used to view those websites. The internet has one constant during all this change: its goal is to deliver content. Content is the most important, but also the most abused element of the internet.

In a series of posts I will be reviewing common issues and best practices for delivering your content. One of the most important factors in delivering content is white space.

Websites from the ‘90s often tried to deliver as much content as possible in a small amount of space. More focus was put on how much content can we deliver, rather than how well we can deliver it. This pattern continued for over a decade and still exists today on some websites. It’s a classic issue that refers back to the nature of Newspapers known as “above the fold.” In web design, there is a constant battle for what content gets put in the viewing area without scrolling. Stakeholders want their content first so users engage with it, resulting in a lot of content crammed above the fold. Unfortunately, this creates an undesired outcome for the stakeholders: user confusion and abandonment.

With a large amount of content crammed into a limited space, it becomes harder for the human eye to decipher between sections and logical breaks in the content. Imagine reading a book where the text is edge to edge on the page and with no line breaks for new paragraphs or chapters to separate sections of the book. It can become quite tiresome and difficult to read as your eye and your mind have no way to take “breaks” and segregate the ideas written in the content. Logical breaks and organization are even more critical on websites because often the reader is only looking for a specific section of content. They are goal oriented and your website needs to provide the easiest path to their goal.

The simplest way to provide breaks and communicate sections of your content is to create space between them. This space is commonly referred to as “white space.” However, that does not mean the space has to be white. It just defines an area of the page or layout that does not contain content. On a website, this space can help define the navigation from the body content, parts of the body content, actionable items, and various other sections of website. Using white space proportionally also creates a visual hierarchy of separation. For example, in a book, the space between paragraphs is smaller than the space around the edges of the page, which is smaller than the space between chapters.

Implementing white space on a website is relatively simple. Managing margins and padding with CSS is the best way to create space between blocks of content. There is no magic formula to how much space you should provide but in general, 20-30px is a minimum to effectively separate the blocks of content. Usually a layout with greater white space feels more comfortable and friendly to the user. Be sure to keep in mind that proportions do have an impact on how the viewer separates the content. While scrolling down the page will increase, the user will be more engaged in the content therefore willing to scroll to read more and interact with the content.