Why Mobile-Friendly Matters

Over 60% of web traffic is mobile globally. Google uses mobile-first indexing — the mobile version of your site is what Google primarily evaluates for search ranking. A non-mobile-friendly site ranks lower and loses users who leave immediately when pages are hard to use on a phone.

Core Principles of Mobile-Friendly Design

  1. 1

    Set the viewport meta tag

    Add this to the <head> of every page: <meta name="viewport" content="width=device-width, initial-scale=1">. Without this, mobile browsers render the page at desktop width and then scale it down — making everything tiny and unreadable.

  2. 2

    Use a flexible layout with relative units

    Replace fixed pixel widths (width: 800px) with percentage or relative widths (width: 100%, max-width: 800px). Use rem or em for font sizes rather than px. This allows the layout to flex at different screen sizes. A container with max-width: 1200px and width: 100% works at any screen size.

  3. 3

    Add CSS media queries for breakpoints

    Media queries apply different CSS at different screen widths: @media (max-width: 768px) { .sidebar { display: none; } .main { width: 100%; } }. Common breakpoints: 1200px (desktop), 768px (tablet), 480px (phone). Start with mobile layout and add complexity for larger screens (mobile-first approach).

  4. 4

    Make tap targets large enough

    Buttons, links and form fields need to be at least 44×44px to be easily tappable on a touchscreen. Tiny tap targets are one of the most common mobile usability failures. Add padding generously to interactive elements.

  5. 5

    Optimise images for mobile

    Large images are the main cause of slow mobile loading. Use the srcset attribute to serve smaller images to smaller screens. Compress images with tools like TinyPNG or Squoosh. Use next-gen formats (WebP). Images should load in their display size, not a large image scaled down by CSS.

  6. 6

    Test and validate

    Test in Chrome DevTools: press F12 → click the device icon (Ctrl+Shift+M) to toggle device emulator. Test at 375px (iPhone), 390px (iPhone 14 Pro), and 768px (iPad). Also test on a real device. Use Google’s Mobile-Friendly Test tool (search.google.com/test/mobile-friendly) to confirm Google can render your page correctly.

WordPress, Wix and SquarespaceIf you use a website builder or WordPress, choose a responsive theme — most modern themes are responsive by default. The mobile layout is controlled by the theme’s CSS. Use each platform’s built-in mobile preview to check how pages look on phones before publishing.

Frequently Asked Questions

Mobile-first is a CSS approach where you design for the smallest screen first (writing CSS for mobile), then use media queries to add complexity for larger screens. The opposite (desktop-first) designs for large screens and uses media queries to simplify for mobile. Mobile-first tends to result in cleaner, faster code because you start with the minimum and add rather than start with everything and try to hide/remove it for mobile.
Google Search Console (free) shows Core Web Vitals data for your site split by mobile and desktop. PageSpeed Insights (pagespeed.web.dev) gives a detailed score and specific recommendations for both mobile and desktop. The three Core Web Vitals are Largest Contentful Paint (loading speed), Interaction to Next Paint (responsiveness), and Cumulative Layout Shift (visual stability).