UX5: Sketches, wireframes and forms
Mobile-first and responsive layout
🎯You'll be able to
Design for a small phone screen first, then adapt the layout for larger screens, and check it at 320 pixels wide.
🏠The everyday picture
Packing for a small suitcase forces you to choose what really matters. If it fits the small case, the big case is easy.
📘What it really is
-
Mobile first: design the smallest common screen first. It forces priority, and in the kit's survey 95 of 120 respondents (79%) booked on a phone.
-
Breakpoints are widths where the layout changes, for example one column on phones and two on tablets.
-
Fluid layouts use percentages, flexible grids and maximum widths instead of fixed pixel widths. A grid that says "as many 7rem columns as fit" adapts by itself.
-
Reflow: content should work at 320 CSS pixels wide without scrolling sideways (WCAG 2.2 success criterion 1.4.10), which also covers people who zoom in to 400% on a desktop.
-
Thumb reach: on phones, the main action near the bottom or in easy reach; avoid tiny targets at the top corners.
- Content order: on narrow screens, things stack in reading order, so the HTML order should match the order of importance.
📝A worked example
Input: the reference prototype.
Steps:
- Open
http://localhost:8080/prototype/and make the window 320 pixels wide (browser developer tools have a device toolbar). - Scroll each page and look for anything that needs sideways scrolling.
Expected output: no sideways scroll on any page. The slot grid uses grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)), so it
shows two columns at 320 px and more on wider screens. Test 8 of npm run test:prototype checks every page at 320 px.
🌍Where it's used
- Indian consumer apps, where many users have budget phones with small screens.
- Government services, often used on phones in places without a computer.
- Email newsletters, designed for phones first because that's where most are opened.
📝Case scenario
An exam-results page had a fixed-width table. On phones, students had to scroll sideways to see their marks, and many zoomed and lost their place. Stacking each subject as a card on narrow screens fixed it.
🖱️Try it
Open any website on a phone or at 320 pixels wide. Find one thing that breaks (sideways scroll, cut-off text, tiny targets) and sketch a fix. Success: your fix keeps all content and works without sideways scrolling.
⚠️Common mistakes
- Desktop first, squeezed later. Sign: long rows of buttons that wrap badly. Fix: design the phone layout first.
- Fixed widths. Sign:
width: 600pxon a container. Fix:max-widthand flexible units. - Hiding content on mobile. Sign: features missing on phones. Fix: re-order and simplify, don't remove.
🛠️For your project
Project 2's test 8 fails if any page scrolls sideways at 320 pixels.
✅Quick check
Why design for phones first?
Show the answer
It forces priority, and most of the kit's survey respondents booked on a phone.
At what width should content reflow without sideways scrolling?
Show the answer
320 CSS pixels.