layout

Responsiveness

Learn to design and optimize content for all screen sizes. Apply best practices to ensure layouts and components adapt seamlessly for a great experience across devices.

Requirements Best Practices

Requirements

Small Screens

Our products are currently designed to work seamlessly across a minimum viewport of 1024px (1x, standard resolution). For viewports <1024px, our products will gracefully degrade, meaning, while not optimized for mobile, will pass the following guidelines for >320px (1x, standard resolution) or 1280px (4x zoom) to meet WCAG 1.4.10:

  • Fully functional
  • Content is readable
  • Tab order remains logical
  • Not appear broken or abandoned
  • Not contain horizontal AND vertical scrollbars at the same time

    Exceptions include images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.

Touch Targets

Users navigating with their fingers and thumbs require larger targets. Follow these rules for implementing actions in mobile experiences.

  • 44px target size

    This meets WCAG 2.5.5 target size requirements.

  • 16px or more spacing between actions

    This ensures balanced information density and usability.

  • Do not enlarge target sizes for links within a sentence

    The target size requirement does not apply to inline links (links within a sentence or a block of text). Footnote or help links at the end of a sentence are also exempt from these target size requirements.

Best Practices

All content should reflow in response to smaller browser widths or zoomed-in views by wrapping text and stacking elements, ensuring everything fits within the viewport without requiring horizontal scrolling. Always test at 320px or 1280px at 400% zoom to ensure your product meets reflow requirements.

  • Wrap text gracefully by reflowing to multiple lines or truncating

    Use a combination of text wrapping and truncation to ensure content is visible and easily accessible. Wrap text for essential information or when space allows, and use truncation with a way to view the full text for less vital information. For interactive elements, use tooltips. For non-interactive elements, use an expandable action to ensure accessibility for keyboard users.

  • Use grids and breakpoints so content rearranges, resizes, and adapts as the viewport changes

    Follow our Grid guidelines for specifics on grid responsiveness.

  • Ensure images, videos, and other media elements are completely visible and accessible

    Scale content to fit the smaller screen. If the content requires a two-dimensional layout for clarity or usability and cannot be condensed, place it within a scrollable container that supports both horizontal and vertical scrolling. This ensures all content remains accessible.

  • Ensure modals and flyouts become full screen on small viewports

    Avoid leaving background content visible behind the component. Dialogs are an exception because they consist of brief messages and simple actions that don’t require the entire screen. Utilize our Ripple components to adhere to this behavior.

  • Consider converting buttons with icons to icon-only buttons

    This can help actions fit within the smaller area.

  • Reduce margins and padding on layout containers for smaller viewports in order to display more content within the space

    Adjust the margins to 16px (left/right) and 12px (top/bottom) for smaller breakpoints, specifically at 768px or 414px. The exact breakpoints may vary based on the content.

  • Content should not overflow past the viewport horizontally, unless noted as an exception

    Ensure content remains in view without the need to add horizontal scrolling. Exceptions include tables and media elements such as images or videos.

  • Do not keep headers and footers sticky on smaller viewports when the height is limited

    Always check that the content area has enough space when using sticky headers and footers on smaller viewports. If the space becomes too limited, remove the sticky behavior to ensure that the content takes full advantage of the available viewport height.
Back to Top