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