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%