Laying out Web Content

There are only so many ways to properly lay out content, whether in a newspaper or on the web, but there are two, sometimes conflicting, objectives you should follow. The primary objective is to provide the most readable environment for the content possible. The next objective is to present the content with style, so that it is pleasing to the eye, and, thus, the reader will enjoy reading it. Here are some rules for laying out web content.

If you were to place the world’s 100 biggest-selling English-language newspapers in a row, you would find no more than two or three different layout styles for the front page. There are only so many ways to properly lay out content, whether in a newspaper or on the web, but there are two, sometimes conflicting, objectives to follow.

The primary objective is to provide the most readable environment for the content possible. The next objective is to present the content with style, so that it is pleasing to the eye, and, thus, the reader will enjoy reading it.

When you use a word processor or an email package, what color is the text, and what color is the background? In the vast majority of cases, the text is black, and the background is white as should be content on a web site, particularly when you’re asking the reader to read a lot of text.

There are a number of simple rules in relation to laying out content on the web. Breaking them is not really the sign of an artist, but rather of an amateur. Remember, classic novels are not classics because every second page has a different color and font but because of the power of the words.

Before long, a few standard layouts for content will become the norm on the web. The quality of the content itself is what will differentiate one web site from another.

Here are some rules for laying out web content:

  1. Never underline body text, as a reader will think it’s a link.
  2. Avoid using bold within the body of the text for the same reason.
  3. Avoid using italics because it is difficult to read on a screen.
  4. With copy that is more than a couple of paragraphs long, use a 10-point font, as anything less will make the text difficult to read.
  5. The font style that works best on the web is sans serif; it looks sharper on the screen and is therefore easier to read.
  6. If you’re laying out a document summary on a home page, make the heading of the summary a link, which the reader will expect.
  7. If the body text is in a 10-point font, then the heading should be 14 point.
  8. If there is an image as part of a document summary, then the image should also link to the document.
  9. On a home page, you may go down to 8 point for the body text as this will allow for more text on the page. In this case, the heading size should be 10 point.
  10. When presenting an article or other document, the number of words per line of text should average between 9 and 12 in the central column. (The longer a line of text is, the more difficult it is for the eye to follow down to the next line.)
  11. If the document is longer than 10 paragraphs, a table of contents should be placed below the heading. The table should be generated from subheadings found in the main body of the document.

Reading on a screen is still more difficult than reading on paper. Flashy design may look well on the surface; however, when your readers get down to the job of reading on such a site, they will not thank you for it.

Subscribe to get your daily business insights

Whitepapers

US Mobile Streaming Behavior
Whitepaper | Mobile

US Mobile Streaming Behavior

5y

US Mobile Streaming Behavior

Streaming has become a staple of US media-viewing habits. Streaming video, however, still comes with a variety of pesky frustrations that viewers are ...

View resource
Winning the Data Game: Digital Analytics Tactics for Media Groups
Whitepaper | Analyzing Customer Data

Winning the Data Game: Digital Analytics Tactics for Media Groups

5y

Winning the Data Game: Digital Analytics Tactics f...

Data is the lifeblood of so many companies today. You need more of it, all of which at higher quality, and all the meanwhile being compliant with data...

View resource
Learning to win the talent war: how digital marketing can develop its people
Whitepaper | Digital Marketing

Learning to win the talent war: how digital marketing can develop its peopl...

2y

Learning to win the talent war: how digital market...

This report documents the findings of a Fireside chat held by ClickZ in the first quarter of 2022. It provides expert insight on how companies can ret...

View resource
Engagement To Empowerment - Winning in Today's Experience Economy
Report | Digital Transformation

Engagement To Empowerment - Winning in Today's Experience Economy

2m

Engagement To Empowerment - Winning in Today's Exp...

Customers decide fast, influenced by only 2.5 touchpoints – globally! Make sure your brand shines in those critical moments. Read More...

View resource