Best practice

Zoom

Content should appear in a single column with no horizontal scrolling and no loss of information or functionality when adjusting your browser window:

  • to 320 pixels wide by 256 pixels high, or
  • to 1280 pixels wide by 1024 pixels high then zooming the content to 400%.

Implement a responsive design.

When designing content to reflow in a single column:

  • The main content fills the viewport.
  • Horizontal scrolling doesn’t happen.
  • Avoid using multiple columns. The short line length is hard to read.
  • Avoid using CSS floats. They also create short line length, unless the floated element is very small.
  • Avoid using CSS fixed widths and minimum widths. They tend to cause horizontal scrolling.

Responsive design

  • Use CSS “media queries” to determine user's screen size and serve distinct layouts to different screen widths at breakpoints.
  • Set the viewport via the <meta> element in the head:

    HTML

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0; user-scalable=1">
    • width=device-width instructs the page to match the device's width, allowing the page to reflow content to match different screen sizes.
    • initial-scale=1.0 sets the default zoom level of the page.
    • maximum-scale=2.0 sets a maximum of 200% zoom on pinch-to-zoom on mobile.
    • user-scalable=1 enables the user to pinch-to-zoom on mobile.
  • Test breakpoints using viewport emulators.
  • Users with low vision often zoom to trigger mobile layouts on large displays, enabling quite large text.

Responsive forms

As the viewport changes size, ensure:

  • form fields do not overflow, and
  • form fields and labels are not separated by wide areas of whitespace:
    • In the default desktop view, labels are positioned to the left of the control, flush right. (This layout is preferred when there’s a need to conserve vertical space.)
    • In the small screen view, labels are positioned directly above the control, to maximize screen area for each.

Responsive images

images can be made responsive in one of four ways:

  • Technique 1 – Style the image with CSS width: 100%
  • Technique 2 – Style the image with CSS max-width: 100%
  • Technique 3 – Serve different sizes of the image to different screen sizes using the srcset attribute
  • Technique 4 – Serve different images to different screen sizes using the <picture> element.

Responsive text

  • Text containers should resize as the viewport size changes to prevent text from overflowing the viewport.
  • Avoid static, fixed container sizes.

Responsive objects and plugins

  • Objects and plugins can resize as the viewport size changes so they do not overflow the viewport.
  • Set CSS max-width="100%" on the container.
  • Use the <img> element to embed a picture, <iframe> element to embed HTML, and <video> and <audio> elements to embed media content.

Responsive tables

  • Wide tables that overflow the viewport are not responsive. Follow these tips to help prevent overflow:
    • Use percentage instead of fixed pixels to set the width of columns and tables
    • Break large or wide tables into multiple small or narrow tables
    • Display a horizontal scroll bar if the table overflows the screen
    • Make tables more narrow by:
      • Reducing the number of columns
      • Merging columns
      • Using acronyms or abbreviations for long words
      • Inserting soft hyphen markup &shy; to break long words
  • Transform tables at small viewports to prevent horizontal scrolling

Responsive UI components

Page UI Components reorder and resize to maintain readability.

Responsive videos

Videos resize as the viewport size changes so they do not overflow the viewport. Either:

  • set the CSS max-width:100% property on the video’s container element, or
  • set the CSS width: 100% property on the <video> element.

Static sizing can break page layouts.

Orientation

  • Enable users to view your content in the orientation (portrait or landscape) they prefer.
  • Do not restrict the page orientation.
Back to top