Module 4 · 4.2

English

Nederlands English Deutsch

Mobile first and the viewport

Module 4: Speed, mobile and https · Reading time: 10 minutes

Learning objective: After this lesson you can explain what mobile-first indexing means, recognise and write a good viewport setting, and avoid the pitfalls that make your mobile page show less or work worse than your desktop page.

Key concepts: mobile-first indexing, smartphone crawler, responsive design, dynamic serving, separate mobile site, <meta name="viewport">, width=device-width, initial-scale, blocking zoom, equivalent content, intrusive pop-ups (interstitials), tap targets

Google looks with a phone

For a long time, Google viewed a website the way a computer does. Those days are over. For indexing and ranking, Google uses the mobile version of your pages and fetches it with Googlebot's smartphone crawler. This is called mobile-first indexing. In October 2023 Google wrote that the switch was complete: for almost all sites it is now simply "indexing". Since July 2024 Google has also crawled the last sites that were still visited by the desktop crawler with the mobile crawler; anything that cannot be reached on a phone at all can then no longer be indexed.

What does that mean in practice? If it isn't on your mobile page, it doesn't exist for Google. If you leave out a piece of text, a table, your opening hours or your structured data on phones "because the screen is small", Google won't see that part either.

Three ways to build for mobile

Approach	How it works	Google's advice
Responsive design	One address, one HTML; the styling (CSS) adapts to the screen width	Recommended: the easiest to build and maintain
Dynamic serving	One address, but the server sends different HTML to a phone than to a computer	Possible, but error-prone: the content must stay the same
Separate mobile site	Its own address, for example `m.example.com`	Possible, but the most work and the most pitfalls

Almost all modern website builders and WordPress themes are responsive. A site made with the AI Builder is responsive too: one page that adapts. If you have an old site with a separate m. version, switching to responsive is often the biggest improvement you can make.

The viewport: the line that makes everything work

A phone browser doesn't automatically know that your page was made for a small screen. Without instructions, it pretends the screen is much wider, for example 980 pixels (the example given in the MDN documentation), and shrinks the whole page until it fits on the screen. The result: tiny text you have to zoom in on. A responsive design won't work either, because the CSS thinks the screen is wide.

The solution is one line in the <head> of every page:

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

width=device-width says: make the page as wide as the device's screen. Then your CSS can work with screen widths.
initial-scale=1 says: start without zooming in or out.

This is exactly the line that Lighthouse (the check in Chrome and PageSpeed Insights) recommends. Lighthouse fails a page if the viewport line is missing or has no width=.

What you'd better not do

Some sites add more:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

This means a visitor can no longer zoom in. It seems tidy ("the layout stays intact"), but for someone with poor eyesight it's a barrier. The accessibility guideline WCAG 2.2 requires in success criterion 1.4.4 (Resize Text, level AA) that text can be enlarged up to 200 percent without losing content or functionality. The official W3C test rule, "Meta viewport allows for zoom", fails a viewport with user-scalable=no or with a maximum-scale lower than 2. So leave those parts out. (Safari on the iPhone ignores them by default these days, but other browsers don't.)

A fixed width, such as width=1024, is also wrong. The phone then pretends again that the screen is 1,024 pixels wide, and your responsive design is useless.

Equivalent content on mobile and desktop

In its documentation on mobile-first indexing, Google lists a few things that must be the same on both versions. On a responsive site this happens automatically; with dynamic serving or a separate mobile site you need to check:

The content itself. On mobile, text may sit in an expandable section or a tab, but it must be in the page.
Title and meta description (lesson 3.1) must be equivalent.
Structured data (module 5) must be on both versions.
Images with the same alt texts and in good quality.
No content that only loads after an action. Google says it literally: don't load main content only when the visitor swipes, clicks or types; Googlebot doesn't do that.
robots.txt must not block the mobile pages or their CSS, JavaScript and images. Without CSS, Google can't see what the page looks like.

Pleasant on a small screen

A few points that Google lists as questions for a good page experience, and that you can check on your own phone:

Readable text without zooming in.
Tap targets (buttons, links in a menu) big enough and not too close together, so you don't tap the wrong one by accident.
No intrusive pop-ups. Google writes that elements that block the content (a newsletter window covering the whole page as soon as you arrive) annoy visitors and damage trust, and that they make it harder for search engines to understand your content. Use a small banner instead. Legally required windows, such as an age check, fall outside this guideline.
No horizontal scrolling: an image or table that is too wide pushes the whole page sideways. Give tables their own scroll bar.

Google retired the separate "Mobile-Friendly Test" and the Mobile Usability report in Search Console at the end of 2023. You now check with your own phone, with the mobile view in your browser's developer tools, and with Lighthouse or PageSpeed Insights (lesson 4.3).

In practice: see for yourself

Open your site in Chrome or Firefox on your computer, press F12 and click the phone and tablet icon (device toolbar). Choose a narrow device and browse through your most important pages. Look out for text that falls off the screen, buttons that overlap and parts that are missing on mobile. Then check the source code (Ctrl+U) to see whether the viewport line is there.

The AI Builder adds the viewport line width=device-width, initial-scale=1 to every page automatically. WordPress themes do this too, as do most other website builders. On a self-built or old site it's worth checking: it's just one line, but without it none of your mobile design works.

Summary

Google indexes and ranks the mobile version of your pages; whatever is missing there, Google doesn't see.
Responsive design is the recommended approach: one address, one HTML.
Every page needs <meta name="viewport" content="width=device-width, initial-scale=1">.
Don't block zooming: no user-scalable=no and no maximum-scale below 2 (WCAG 1.4.4).
Keep content, title, meta description and structured data the same on mobile and desktop, and avoid pop-ups that cover the page.

Quiz

Exercise

Exercise A4.2: Does your page have a good viewport? Enter the address of a page (for example your homepage). The program reads the HTML and checks whether there is exactly one <meta name="viewport"> in the <head> with width=device-width, and whether zooming is not blocked (user-scalable=no or maximum-scale below 2). Then look at the same page yourself in your browser's mobile view. No site of your own? Use www.wikipedia.org.

Cookies at WebOké

Cookie settings

Necessary

Marketing