Responsiveness

Topics

Checklist

0 out of

5

Reset

Fluid layout

Content must be accessible on any device size

Grids and columns help you ratio your content appropriately as screen size changes

Breakpoints

Identify when to change your structure and how it will look

Key breakpoints are mobile, tablet, desktop and ultra wide

Typography

The size of your text across breakpoints

Example is your headings — a H1 should not be the same size on desktop and mobile


Selection area for actions

The area for a user to select an element e.g. text field or button

Mobile devices can afford larger space to select a button or text field as desktop devices typically have a mouse in use with finer accuracy and reach

Hierarchy

Content and visuals may adapt structure based on relevant screen size