Google switched to mobile-first indexing in 2023 — the mobile version of your site is what gets crawled and ranked, even for desktop searches. If your site doesn't work well on phones, you're losing both users and rankings.

The viewport meta tag

This is the most basic requirement. Without it, mobile browsers render your page at desktop width and shrink it down.

<meta name="viewport" content="width=device-width, initial-scale=1" />

This tag tells browsers to match the page width to the device width. Every mobile-friendly page needs it.

Responsive design basics

Use relative units

Replace fixed pixel widths with relative units:

width: 100% instead of width: 960px
max-width to prevent elements from getting too wide
rem or em for font sizes instead of px

Use CSS media queries

/* Mobile first - default styles for small screens */
.container { padding: 1rem; }

/* Larger screens */
@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 1200px; margin: 0 auto; }
}

Make tap targets large enough

Buttons and links need to be at least 44x44 pixels with enough spacing between them. Tiny links that are hard to tap frustrate users and hurt your mobile usability score.

Common mobile issues

Text too small to read — Base font size should be at least 16px
Horizontal scrolling — Content wider than the viewport forces side-scrolling
Fixed-width elements — Images or tables that don't resize with the screen
Unplayable content — Flash or formats that don't work on mobile
Slow loading — Mobile connections are often slower. Optimize images and reduce JavaScript

Testing mobile-friendliness

Open Chrome DevTools (F12), click the device toggle icon, and test at different screen sizes. Start with 375px wide (iPhone SE) as a baseline.

Check your mobile experience

PageGrader runs 8 mobile-specific checks including viewport tag, tap target size, font readability, and responsive design. Scan your site to see how it performs on mobile.