A mobile-first design checklist verifies that a site works best on the smallest screens and weakest connections before it is enhanced for larger screens: readable text without zooming, tap targets large enough, navigation that is easy to open and close, short forms with the right keyboards, no horizontal scroll, fast loading on mobile data, and correct behaviour in iOS Safari as well as Chrome on Android.
For most of the stores and service sites I build, most visitors arrive on a phone. This checklist supports my landing page structure pillar.
What does mobile-first design mean?
Mobile-first means the base design and CSS are for small screens, and larger layouts are added with min-width media queries. It forces priorities: on a phone there is room for only the essential content and one clear action, so you decide what matters before adding extras for desktop.
.grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
1. Layout
- No horizontal scrolling on any page at 320–430px widths.
- Content not cut off at the edges; consistent side padding.
- Long words, URLs and product names wrap (
overflow-wrap: anywherewhere needed). - Tables scroll inside their own container or reflow into cards.
- Images and embeds scale (
max-width: 100%,height: auto). - Equal-height cards do not create huge empty gaps.
A quick way to find what causes horizontal overflow, in the browser console:
document.querySelectorAll('*').forEach(el => {
if (el.scrollWidth > document.documentElement.clientWidth) console.log(el);
});
2. Typography
- Body text around 16px or larger.
- Line length comfortable; line height generous (about 1.5 for body text).
- Headings scale down sensibly;
clamp()helps:
h1 { font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem); }
- Text contrast meets WCAG requirements (4.5:1 for normal text).
- Arabic text has enough line height (see Arabic ecommerce).
3. Tap targets
- Buttons and links large enough and spaced apart. WCAG 2.2 sets a 24×24 CSS pixel minimum at AA; platform guidelines recommend larger targets, so aim for about 44px.
- Inline links in body text distinguishable without relying on colour alone.
- No hover-only interactions; touch screens have no hover.
4. Navigation
- Menu button clearly labelled (icon plus text or an accessible label).
- Menu opens and closes reliably and traps focus while open.
- Submenus usable by tap, not hover.
- Key actions (call, WhatsApp, cart, contact) reachable quickly.
- Sticky headers stay small, so they do not eat the screen.
5. Forms
- Correct
type,inputmodeandautocompleteon fields. - Inputs at 16px or larger to avoid iOS zoom on focus.
- Labels visible; errors inline and clear.
- Submit button visible above the keyboard or easy to reach.
Details: contact form best practices.
6. Images and media
- Responsive images with
srcsetso phones download small files. - Modern formats, see WebP and AVIF.
- The hero image is not lazy-loaded.
- Videos do not autoplay with sound; background videos are avoided on mobile.
7. Performance on mobile
Phones have slower CPUs, and networks vary. Check:
- Mobile PageSpeed Insights results for key templates.
- Limited JavaScript; heavy widgets delayed, see reducing TBT.
- No layout shifts while loading.
Full guide: Core Web Vitals.
8. Overlays and pop-ups
- No pop-up on arrival covering content.
- Cookie banners compact and dismissible.
- Floating buttons (chat, WhatsApp, back-to-top) do not cover the add-to-cart or submit buttons.
- Every overlay closable with a visible, tappable button.
9. iOS Safari quirks
- Viewport height:
100vhon iOS Safari can be taller than the visible area because of browser toolbars. Use100svhor100dvhwhere supported, with a fallback. - Safe areas: on phones with notches and home indicators, use
env(safe-area-inset-bottom)for fixed bottom bars, withviewport-fit=coverin the viewport meta tag. - Input zoom: inputs below 16px trigger zoom.
- Backdrop filters and position: sticky generally work in current versions, but test, because older iOS versions linger on some devices.
- Never disable user zoom (
user-scalable=no); it is an accessibility problem.
.bottom-bar {
position: fixed;
bottom: 0;
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
10. Orientation and odd sizes
- Landscape on phones still usable.
- Small phones (around 320–360px wide) and large ones both checked.
- Tablets do not get a stretched phone layout or a cramped desktop one.
11. Real-device testing
Browser emulation is a good start but misses touch behaviour, real performance and Safari quirks. My minimum:
- One iPhone with Safari.
- One mid-range Android with Chrome.
- Mobile data, not just office Wi-Fi.
- Light and dark mode, if the site supports both.
- For bilingual sites, both language directions.
Go through the main tasks: find a product or service, read a post, submit a form, check out.
Why mobile-first matters for search and sales
Google indexes and ranks the mobile version of your pages; its mobile-first indexing guide explains that content missing on mobile is effectively missing for search. In Egypt and the Gulf, a large share of visitors arrive from social apps and WhatsApp links on phones, often on mobile data, so the phone is not a secondary screen: for many businesses it is the main storefront. A layout designed for desktop and squeezed afterwards usually shows it, with cramped buttons, oversized images and key information pushed below long hero sections.
Mobile-first for Arabic and RTL layouts
- Set
dir="rtl"andlang="ar"on the document, and use logical CSS properties (margin-inline-start,padding-inline-end) so spacing flips correctly without duplicate styles. - Arabic text needs slightly more line height than Latin text at small sizes; check that diacritics and descenders are not clipped in buttons and menus.
- Mirror directional icons (back arrows, sliders) but not universal ones such as play buttons or logos.
- Test Arabic numbers, phone fields and mixed English/Arabic strings, which often reorder unexpectedly in narrow containers.
- Keep the off-canvas menu opening from the correct side for the language.
Thumb zones and one-handed use
Most people hold a phone in one hand and reach with the thumb. Primary actions such as “Add to cart”, “Call” or “Send” are easiest to reach in the lower half of the screen, which is why a slim sticky bar with one main action often works well on product and service pages. Keep destructive or rarely used actions away from that zone, leave enough spacing between adjacent links, and never place two different actions so close that a slightly wide tap triggers the wrong one.
Measuring mobile performance properly
Lab tools are useful for finding problems, but real-user data tells you what visitors actually experience. Check the Core Web Vitals report in Search Console and the field data in PageSpeed Insights, focusing on Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift; Google’s Web Vitals documentation lists the current thresholds. When you test in the lab, throttle to a mid-range phone and a slow 4G connection rather than trusting results from a fast laptop on office Wi-Fi.
A practical mobile review routine
- Open the five most important pages on a real mid-range Android phone and an iPhone.
- Complete the main task on each: find a service, submit a form, add to cart, check out.
- Rotate the phone, zoom to 200%, and switch to dark mode if your site supports it.
- Repeat on the Arabic version, if you have one.
- Note every moment you had to pinch, scroll sideways, wait or tap twice, and fix those first.
Frequently asked questions
Is responsive design the same as mobile-first?
Not exactly. Responsive means the layout adapts to screen sizes; mobile-first means you design and write CSS for the small screen first, then enhance for larger screens. Mobile-first usually produces lighter, more focused pages.
Should the mobile version show less content?
No. Prioritise and reorganise content, for example with accordions, but keep the same information. Hidden content can hurt both users and search visibility.
Do I need a separate mobile site or an app?
For most businesses, a fast responsive website is enough. An app makes sense only when customers use your service repeatedly and need features a website cannot provide well.
Common mistakes
- Designing desktop first and “squeezing” it down.
- Hiding important content on mobile instead of prioritising it.
- Tiny close buttons on pop-ups.
- Testing only in Chrome’s device toolbar.
Need a mobile review of your site? Contact me.
Frequently asked questions
What does mobile-first design mean?
It means designing and building for small screens first, with base styles for mobile, then adding layout enhancements for larger screens with min-width media queries.
What size should tap targets be?
WCAG 2.2 sets a minimum of 24 by 24 CSS pixels for target size at level AA, with exceptions. Platform guidelines from Apple and Google recommend larger targets, around 44 to 48 pixels.
Why does my site zoom in when I tap a form field on iPhone?
iOS Safari zooms into inputs with a font size below 16px. Setting form inputs to at least 16px prevents it without disabling user zoom.
Is responsive design the same as mobile-first?
Responsive design adapts to any screen. Mobile-first is an approach to building responsive designs, starting from mobile. A site can be responsive without being designed mobile-first.
