Skip to main content

Optimizing Web Layouts

Best Practices

When thinking about your website content it's important to keep your target audience in mind. Who is the page for? What information are they likely to be looking for first? This approach of prioritizing your content can then help you structure your pages in a way that helps your visitors find what they need as efficiently as possible.

Text-heavy pages

Pages with lots of content may benefit from an intro paragraph describing what follows on the page and using anchor links to help visitors skip to the most important information. Accordions can be an important tool for limiting what visitors need to process when they land on the page and allowing them to choose where they focus their attention first. Adding right or left-aligned images will make the page longer, but can keep visitors engaged, especially if the image is relevant to the content.

Visually engaging components

Images and components with lots of color can draw the eye in. If these aren't used carefully they may become red herrings that distract people from the content they are trying to find. On the other hand, these can be important tools to break up long stretches of text and draw attention to important information that you expect to be relevant to the majority of visitors. 

It's best to use these sparingly so they can maintain the impact they are meant to have. As a rule of thumb, if everything looks important, nothing will look important. Be aware that if these components are included high up on the page, many people won't end up scrolling past them to find subsequent content underneath. Examples include:

Considerations for mobile devices

Mobile devices are ubiquitous and it's best to assume that at least some of your visitors will want to view your content on a device other than a desktop/laptop computer. There are constraints to keep in mind to ensure that your page is still easy to navigate on small screens.

  • Mobile speeds can differ widely based on where the person is. Including lots of images and videos is very likely to cause the webpage to load more slowly, so be judicious with your inclusion of media.
  • Users on both mobile and desktop are susceptible to so-called "false floors" where visitors may think page content is complete too early as a result of the design elements used. Don't overuse content with different backgrounds or include them too high up on pages so that visitors don't prematurely assume the page is complete.