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

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

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

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%

Explore more

Explore more