Responsive design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes. Designers size elements in relative units (%) and apply media queries, so their designs can automatically adapt to the browser space to ensure content consistency across devices.
Best Practice & Considerations for Responsive Design
With responsive design, you design for flexibility in every aspect – images, text and layouts. So, you should:
- Take the “mobile first” approach:
- Scale up phone-sized designs to suit larger screens.
- Always remember that mobile users need large (>40 points) buttons. Also, your design must be twice as intuitive as desktop equivalents, since the need for well-sized elements on smaller screens can cause cramping and confusion.
- Create fluid grids and images:
- Create images in their native dimension. If you don’t have enough space, crop them to maximize impact.
- Include three or more breakpoints (i.e., design for 3+ devices).
- Prioritize and hide content to suit users’ contexts. Check your visual hierarchy and use progressive disclosure and navigation drawers to give users needed items first. Keep nonessential items (nice-to-haves) secondary.
- Aim for minimalism.
- Apply design patterns – To maximize ease of use for users in their contexts and quicken their familiarity: e.g., the column drop pattern fits content to many screen types.
- Aim for accessibility with font sizes/styles. Use contrast and background effectively. Make headlines at least 1.6 times bigger than body text. Make all text responsive so it appears in these proportions. As some users rely on screen readers, make all your text “real” instead of text within images.