The Mobile Web and the Rise of Responsive Design

Pull out your phone, open almost any business website, and you expect it to just work: readable text, buttons you can tap, no sideways scrolling. That expectation is surprisingly recent. Less than two decades ago, most websites were designed only for desktop computers, and looking at them on a phone meant pinching, zooming and squinting.

The shift to mobile changed web design more than almost anything since the web's invention. It produced a new approach called responsive design, and it eventually changed how Google itself looks at websites. Here is how that happened, and what it means for your site today.

Before and After the iPhone

Phones could reach the internet before 2007, but the experience was limited. Screens were small, keypads were awkward, connections were slow, and many phones could only display specially simplified pages. For most businesses, the "real" website was the desktop version, and mobile was an afterthought, if it was considered at all.

On January 9, 2007, Apple introduced the iPhone at Macworld in San Francisco. Apple's announcement described it as three products in one: a mobile phone, a widescreen iPod with touch controls, and an internet communications device with "desktop-class email, web browsing, searching and maps." It went on sale in the United States on June 29, 2007.

The key phrase was "desktop-class web browsing." Instead of a stripped-down mobile web, the iPhone's browser displayed full websites, shrunk to fit the screen, and let users zoom in with their fingers. That was impressive, but it also exposed the problem: sites designed for a wide desktop monitor were tiny and fiddly on a phone. Other smartphones with touchscreens and capable browsers followed, and mobile browsing grew quickly.

The Era of Separate Mobile Sites

Many businesses' first answer was to build a second, separate website just for phones, often on a subdomain beginning with "m." (sometimes called an "m-dot" site). The server detected that a visitor was on a phone and redirected them to the mobile version.

This worked, but it created new headaches:

• Two websites to design, update and pay for
• Mobile versions that often left out content or features found on the desktop site
• Redirect mistakes that sent mobile visitors to the wrong page, or to the home page
• No good answer for tablets and the growing variety of screen sizes

Responsive Web Design Arrives

On May 25, 2010, the web designer Ethan Marcotte published an article called "Responsive Web Design" in the online magazine A List Apart. Instead of building separate sites for each device, he argued, one site could adapt to whatever screen it was viewed on. He named three technical ingredients:

1. Fluid grids: layouts built with proportions, such as percentages, rather than fixed pixel widths, so columns stretch and shrink with the screen.
2. Flexible images: images that scale within their containers instead of spilling off the edge.
3. Media queries: a CSS feature that lets a page apply different styles depending on things like screen width, so a three-column layout can become a single column on a phone.

The idea caught on because it solved the maintenance problem. One website, one set of content and one address could serve phones, tablets and desktops. Responsive design soon became the normal way to build new websites.

Google Pushes the Web Toward Mobile

Search engines noticed the shift too. On April 21, 2015, Google began rolling out what it called its mobile-friendly update, which boosted the ranking of mobile-friendly pages in mobile search results. Google described mobile-friendly pages as those where text is readable without tapping or zooming, tap targets are spaced appropriately, and the page avoids unplayable content and horizontal scrolling.

The next change went deeper. In November 2016, Google announced it had begun experiments to make its index "mobile-first." Until then, Google's systems had typically looked at the desktop version of a page; from now on they would primarily use the mobile version to understand and rank it. Google started moving sites to mobile-first indexing in March 2018, made it the default for new websites from July 1, 2019, and announced on October 31, 2023 that the move to mobile-first indexing was complete.

For site owners, the message was clear: whatever is missing from your mobile site may effectively be missing from Google. Google's own documentation says it recommends responsive web design "because it's the easiest design pattern to implement and maintain."

A Short Timeline

• January 2007: Apple introduces the iPhone; it goes on sale in the US that June.
• Late 2000s: Many businesses launch separate "m-dot" mobile sites.
• May 2010: Ethan Marcotte publishes "Responsive Web Design."
• April 2015: Google's mobile-friendly update rolls out.
• November 2016: Google announces mobile-first indexing experiments.
• July 2019: Mobile-first indexing becomes the default for new websites.
• October 2023: Google announces the move to mobile-first indexing is complete.

Mobile-First Thinking Today

Today, designers often work "mobile-first": they plan the small-screen experience first, then add layout and detail as screens get larger. This forces useful decisions about what really matters on each page, because there is no room for clutter on a phone.

Mobile-first thinking is about more than layout. Phone users are often on slower or less reliable connections, so page speed matters. They use fingers, not a mouse pointer, so buttons and links need to be big enough to tap. They may be standing in a shop or sitting in a car park, so key information such as your phone number, address and opening hours should be easy to find.

What This Means for Your Website

If your site was built before responsive design became standard, or still uses a separate mobile version, it is worth checking how it performs on a phone today. Load it on your own phone and ask a few simple questions. Can you read the text without zooming? Can you tap every button easily? Does anything force you to scroll sideways? Is all the important content from the desktop version also there on mobile?

If the answer to any of these is no, a responsive redesign is likely to help both your visitors and your search visibility. As far back as 2016, Google noted that most people were searching on Google using a mobile device, so for many businesses the mobile version is, in practice, the real website.

Key takeaways

• The iPhone, introduced in January 2007, brought full websites to phones and exposed how poorly desktop-only designs worked on small screens.
• Separate mobile sites were an early fix, but they doubled the work and often left content out.
• Ethan Marcotte's 2010 article defined responsive web design: fluid grids, flexible images and media queries.
• Google's 2015 mobile-friendly update and its move to mobile-first indexing, completed in 2023, made the mobile version of a site the one that counts.

Sources

• Apple, Apple Reinvents the Phone with iPhone (press release, 2007)
• Ethan Marcotte, Responsive Web Design, A List Apart (2010)
• Google Search Central Blog, Rolling out the mobile-friendly update (2015)
• Google Search Central Blog, Mobile-first indexing (2016)
• Google Search Central Blog, Mobile-First Indexing by default for new domains (2019)
• Google Search Central Blog, Mobile-first indexing has landed (2023)
• Google Search Central, Mobile site and mobile-first indexing best practices