Responsive content

Responsive web design makes use of flexible layouts, flexible images, and cascading style sheet media queries. The goal of responsive design is to build pages that detect a customer’s screen size and orientation and reflow the layout to match the user’s preferences.

Design considerations

Content is legible at all browsers zoom levels including below 100%, at 100% or up to 200%
Pages are fully responsive and consumable on screens sized from 320x wide and above
Allow users to adjust their preferred browser font size and reflect that option in the page content

Content is legible at all browsers zoom levels including below 100%, at 100% or up to 200%
Pages are fully responsive and consumable on screens sized from 320x wide and above
Allow users to adjust their preferred browser font size and reflect that option in the page content

Developer considerations

Developers must ensure that the page font size is set to 100% in the code
It should also not decrease in size when browser zoom or text zoom is applied
Pay special attention to dynamic content, buttons, and modals
Use adaptive design sparingly
If you have adaptive content, be sure no meaning is lost
Support both portrait and landscape phone orientations

Developers must ensure that the page font size is set to 100% in the code
It should also not decrease in size when browser zoom or text zoom is applied
Pay special attention to dynamic content, buttons, and modals
Use adaptive design sparingly
If you have adaptive content, be sure no meaning is lost
Support both portrait and landscape phone orientations

Explore the experience

Change the Browser Zoom with Ctrl += (Windows) or Command+= (Mac OSX) to 200%
Change the text font size settings in browser or OS settings

Example: Mac OSX Firefox 78: In the top navigation go to “View” menu > “Zoom” > “Zoom Text Only” and increase to 200%

Change the Browser Zoom with Ctrl += (Windows) or Command+= (Mac OSX) to 200%
Change the text font size settings in browser or OS settings

Example: Mac OSX Firefox 78: In the top navigation go to “View” menu > “Zoom” > “Zoom Text Only” and increase to 200%