Use responsive layouts and don't restrict the layout to portrait or landscape

The same website on desktop, tablet, and mobile size screens
Image description: The same website on 3 different screens: on a large desktop computer, a tablet device, and a mobile device. The website on the computer has a logo at the upper left that says, "Hell yes!" with navigation on the left column, and content that says, "We love bananas AND we love grapes.” The tablet version is shrunk down to fit the screen, with smaller left navigation. The mobile device is shrunk even further to a single column. All screens have a blue background and decorative black lines.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Responsive layouts are accessible to people with low vision, physical disabilities, and to a wide variety of screen sizes and devices.

People with low vision may need to view the page on a larger screen or change the orientation to landscape mode to make elements bigger.

People with physical disabilities may mount their mobile device in a fixed orientation (i.e. so that it is always in portrait or landscape mode) therefore the content should be able to adapt to either orientation.

With the expansion of mobile and touch devices, there is now a wide variety of screen sizes to account for. Rather than building for fixed sizes, modern web development specifies responsive layouts as the most efficient solution.

The WCAG guideline also cautions against reflow specifically, which refers to scrolling in both directions. This makes interacting with content very difficult and can be avoided by using responsive layouts.

This references WCAG criteria 1.3.4 Orientation (Level AA) and 1.4.10 Reflow (Level AA).


How to Implement This

How to prevent reflow

Ensure the content is responsive and fits within the viewport (i.e. the area of a web page that's visible to the user). If the user resizes the viewport, make sure that this doesn’t hide content or cause scrolling in two directions.

CSS for a container that is constrained to the full width of the viewport:

.container {
max-width: 100%;
}


.container {
max-width: 100vw;
}


CSS for a container with decorative elements that will extend beyond the viewport

.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}

How to design for responsive layouts

A responsive layout ensures that the same content can be displayed across multiple viewport sizes without wonky things happening or content mysteriously disappearing.

Examples of grid columns on different devices - desktop, tablet, and mobile phone
Image description: a desktop computer, tablet device, and mobile device (aka smart phone) laid out in a line. The desktop has 12 blue columns, the tablet has 8, and the mobile device has 4.

Typically, responsive grid column widths don't change significantly but the number of columns changes per viewport size. This usually means 12 columns for desktop sizes, 8 columns for tablet sizes, and 4 columns for mobile sizes.

Here are helpful articles for building and using for responsive grids:

They also recommend using a CSS grid instead of an HTML grid, which agrees with a general rule to use HTML for content and CSS for styling. This clean separation is more accessible for screen readers and more easily allows for style and brand updates.

Custom design per viewport

There are some specialty cases where a completely different layout applies to a different viewport size. While this isn't ideal, this may be necessary for when a specific presentation and interaction is more optimal for a specific display. For example, data tables are great for viewing and editing a large amount of information at once. This is optimal for a desktop viewport, but if it's extremely difficult to maneuver on a mobile device (especially in portrait mode).

How to Test This

This requires manual testing. Open the website or app on a desktop computer and resize the browser to see if anything breaks (i.e. if content changes in a way that is now illegible or confusing). Also test on tablet and mobile devices by opening the app changing the orientation of the device.


Credits

No credits yet. But this could be you!

Code snippets written by Michellanne Li.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.