/
04 - Responsiveness and Zoom

04 - Responsiveness and Zoom

Owned by Edward Pritchard (Unlicensed)
Last updated: Jul 26, 2018

Even though responsive design was invented primarily for small screens and mobile devices, responsive design greatly benefits people with low vision who need to zoom in on content. Zooming in reduces the amount of screen real estate available, creating conditions essentially identical to the small screens of small mobile devices.

When the screen real estate is limited, it's best if the design can adapt by becoming simpler and "slimmer," fitting in a single column, rather than in two or more columns. Text should reflow to fit the smaller screen size, and horizontal scrolling should be eliminated, if possible. In short, the design should be optimized for viewing in mobile or zoom conditions.

Responsive Design

Forms 

  • SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.

Images 

  • SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.

Objects/plugins 

  • SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.

Tables 

  • SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.

Text 

  • SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.

UI components 

  • SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.

Video

  • SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.

Content Features 

  • MAY be simplified, reduced in size, or eliminated when magnified or when viewed on small viewports.

Interface Features 

  • SHOULD be simplified, reduced in size, or eliminated when magnified or when viewed on small viewports.

Zoom

Text zoom:

  • The page SHOULD be functional when only the text is magnified to 200% of its initial size.
  • The page SHOULD be readable when only the text is magnified to 200% of its initial size.

Mobile zoom: 

  • The page MUST allow users to zoom in on mobile devices.

Magnification visual quality:

  • Text SHOULD magnify losslessly, or with minimal visual degradation, to retain readability.
  • Icons and graphics SHOULD magnify losslessly, or with minimal visual degradation.

Target Size

The click/touch target size

  • SHOULD be large enough to facilitate easy use with a finger, without risking activating an adjacent link or button.


Created 05/09/18 by Edward Pritchard (edward.pritchard@domail.maricopa.edu) - Information sourced from Deque Systems, Inc and Deque University