Responsiveness 🎚

Users access products in all sorts of ways in all sorts of sizes that need to be catered for. Someone should be able to visit a page on a desktop monitor or mobile, and have an experience as similar as it can be.

This checklist ensures you're designing responsively responsibly.

• Fluid layout

  Your content must be visible and accessible on any device size

• Breakpoints

  Identify when to change your structure and how it will look

• Typography

  The size of your text on each device size

• Change in selection area

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

• Scalability

  Minimizing content and adding to it at the right screen size

• Vector files for images

  An SVG allows any visual to be at 100% resolution at any size. One file fits all device sizes in being perfect in quality.