Checklist Design
📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand
👋 Check-Ins
Checklist Design
🏠 Home📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand🛎 Check-Ins
🎚

Responsiveness

Topic

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.

Checklist

Fluid layout

Your content must be visible and accessible on any device size

⭐️ Grids and column help you ratio your content appropriately

Breakpoints

Identify when to change your structure and how it will look

⭐️ Focus on ultra wide, desktop, tablet and mobile

Typography

The size of your text on each device size

⭐️ Scale your headings (a H1 should not be the same size on desktop and mobile)

Change in selection area

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

Scalability

Minimising content and adding to it at the right screen size

⭐️ Keep content and visuals simple and minimal as possible on mobile, with a top down view

⭐️ Desktop and tablet can be more abstract and grander in visuals as more is visible at one time

Optional

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.

Inspiration
Articles
15 Best Practices for Responsible Responsive Web Design
Income Diary
Responsive Design – Best Practices and Considerations
Toptal
Best Practices & Examples of Excellent Responsive Design
UXPin
Other
topics
View all
Purple arrow indicating card for topics content is a link

🌑

Dark mode

🔤

Typography

🚹

Accessibility

🎨

Colors

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).