Designing a Flexible and Adaptive Layout

Grouping Content

To format content in a way that is easy to understand:

  • Group related content together.
  • Add headings to sections.
  • Reduce unnecessary clutter.
  • Use negative space to visually separate sections.
  • Supplement bodies of text with meaningful images to support visual learners.
  • Keep important notifications, such as error messages, in context.
A photo of several dogs passed out napping together on a concrete floor supplements a paragraph with the heading "The Power of Canine Socialization"

An image presented alongside related text enhances its meaning and can increase engagement.

Responsive Layouts

Design for flexibility of viewport size by creating multiple versions including large (desktop), medium (tablet), and small (phone) sizes. Keep in mind that variations in user settings for zoom and font size may impact layout, so ensure meaning is not easily lost when elements change size or shift position. Be careful of fixed or sticky elements that may overlap and obscure content.

A webpage layout on three different viewport sizes. Each has a site header, along with page content that includes images and text, laid out a little differently at each size..

This page layout adjusts elegantly with each device size, without elements overlapping or overcrowding each other.

Keep it Simple

Consider designing with a mobile-first approach, laying elements out for a small screen before larger, more complex layouts. This encourages a simplified, linear layout that naturally aligns with accessibility.

Reading Order

Consider the visual order of elements and whether it easily follows a logical sequence. Keep in mind that screen readers read content linearly, ignoring columns.

Two sections of content each have several text elements positioned next to an image. Each element in the first section is numbered, starting with its title and other text, and ending with the image. The numbers continue onto the following section.

The contents of each section pictured here can easily be read in a logical order, starting with the title.

The Developer Handoff

To ensure accessibility work is not lost, include developers in the conversation. Consider adding annotations to designs to indicate things like reading order, focus order, landmarks, and semantic elements.

WCAG 2.1 AA Success Criteria