Module 8 – Zoom and responsive design
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.
- 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
Code begins
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0; user-scalable=1">
Code ends
-
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.
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.
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.
- Text containers should resize as the viewport size changes to prevent text from overflowing the viewport.
- Avoid static, fixed container sizes.
- 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.
- 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
­
to break long words
- Transform tables at small viewports to prevent horizontal scrolling.
Page UI Components reorder and resize to maintain readability.
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.
- Enable users to view your content in the orientation (portrait or landscape) they prefer.
- Do not restrict the page orientation.