Page layout - Design guide

Table of contents

Grids

Grids have been around for a long time in print publishing, and have now moved to the Web. A grid is an invisible CSS wireframe used to achieve visual cohesion. It's like a lattice that divides space into sections used to hold content such as headings, text, lists, images and so on.

Correct use

  • Grids should be used for all layouts except when representing tabular data in a table format.
  • Use when modifications to the default design increase the value to the user and/or content experience.
  • Avoid using this CSS for strictly cosmetic or decorative purposes.

Demo

Grids cells are invisible but have been coloured in for demonstration purposes:

1

2

1

View all grid options

Screen size show and hide

Content can be hidden from small, medium and large screen users with CSS.

Class name Large screens (e.g., desktop)
Viewport: 960px+
Screen: 1024px+		 Medium screens (e.g., tablet)
Viewport: 768px to 959px
Screen: 768px to 1023px		 Small screens (e.g., smartphone)
Viewport: 0px to 767px
Screen: 0px to 767px
.large-hide Hidden Visible Visible
.large-show Visible Hidden Hidden
.medium-hide Visible Hidden Visible
.medium-show Hidden Visible Hidden
.small-hide Visible Visible Hidden
.small-show Hidden Hidden Visible
.mobile-hide
(small + medium)		 Visible Hidden Hidden
.mobile-show
(small + medium)		 Hidden Visible Visible

Note that small-screen-*, medium-screen-* and large-screen-* classes were introduced in WET 3.1.

Correct use

  • Since there is no Full site feature available to small and medium screen (mobile) users, only decorative content or other supporting information should be hidden from them. Actual content should be available to small, medium and large screen users so there is no loss of information.
  • Additional information can be presented to the mobile user to improve the mobile experience.

Demo

This image has mobile-hide applied to it, so it will not show in resolutions < 959px.

Sunflower

A mobile jump menu will appear below in resolutions < 959px.

Form layout

In 2006, Matteo Penzo conducted a study to determine which layout (of three common form layouts) was the most successful. The study incorporated timing users on their form completion time, eye-tracking software, and heat maps. Yahoo Web manager, Luke Wroblewski, further discusses this in his book, Web Form Design: Filling in the Blanks.

Refer to the highlights from his book below:

Option 1: Recommended

Place the label above the input field.

This is the recommended layout. This layout allows users to capture both labels and input fields with a single eye movement. While this is the simplest of layouts, users can actually process the information ten times faster than if the information is left-aligned, as demonstrated in option 3. However, this solution uses more vertical space. This does not impact the user experience, but may not suit your specific layout needs. Although this layout is the recommended option, you can also use the layout provided in option 2, to reduce vertical space.

Demo

Option 2: Alternate

Place the label right-aligned to the input field.

This is the alternate layout option. Use it when there is a need to reduce vertical space by placing the form objects side-by-side. There are not many situations when you need this option, as studies have shown that users don't mind scrolling. Therefore, use this option 2 layout sparingly.
The reason this solution is preferred over left aligned labels (option 3), is that eye tracking studies have shown that it creates a clear association between label and field, which reduces the number of fixations the user has (the eye jumping from spot to spot) by nearly half. As a result, the reduced eye moments and clear association reduces eye strain and improves cognition. This translates to a 50% faster form completion rate.

Demo

Option 3: Never use

Place the label left-aligned to the input field.

For the reasons mentioned in options 1 and 2, never use this layout.

Demo

-

Page length and scrolling

Renowned usability expert, Jakob Nielsen, has numerous studies about how users behave.

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.

During the Web's first years, users often didn't scroll Web pages at all...Today, users will scroll. However, you shouldn't ignore the fold and create endless pages for two reasons:

  • Long pages continue to be problematic because of users' limited attention span.
  • The real estate above the fold is more valuable than the stuff below the fold for attracting and keeping users' attention.

So, yes, you can put information below the fold rather than limit yourself to bite-sized pages. In fact, if you have a long article, it's better to present it as one scrolling canvas than to split it across multiple pageviews. Scrolling beats paging because it's easier for users to simply keep going down the page than it is to decide whether or not to click through for a next page of a fragmented article. But no, the fact that users scroll doesn't free you from prioritizing and making sure that anything truly important remains above the fold. Information foraging theory states that people decide whether to continue along a path (including scrolling path down a page) based on the current content's information scent. In other words, users will scroll below the fold only if the information above it makes them believe the reset of the page will be valuable.

-Jakob Nielsen
Scrolling and Attention

Other articles on this topic include: