The iPhone and the Mobile Web: How 2007 Changed Every Website
The iPhone arrived in 2007 with a real web browser in your pocket. See how smartphones, responsive design and mobile-first indexing changed how sites are built.
On 9 January 2007, Steve Jobs presented the first iPhone, and it went on sale in the United States on 29 June that year. It was not the first smartphone and not the first phone with a web browser. But it was the first to make browsing the ordinary web on a phone feel natural, and the effect on website design has lasted ever since.
The mobile web before the iPhone
Mobile browsing existed in the years before 2007, but it was a poor experience. In Japan, NTT DoCoMo launched its i-mode service in 1999, which offered a special set of mobile pages and became popular there. In Europe and elsewhere, the Wireless Application Protocol (WAP) gave phones a stripped-down version of the web written in a separate markup language, WML, which was limited and slow. BlackBerry devices were popular for email, and Palm and Windows Mobile devices had small browsers. Site owners generally built a separate, simplified "mobile site", often on an address beginning with m., if they built one at all.
What the iPhone did differently
- A full browser. Safari on the iPhone rendered ordinary web pages, rather than a reduced version of them.
- Multi-touch. Pinching to zoom and dragging to scroll made big pages usable on a small screen.
- A large screen and Wi-Fi. Wi-Fi support and a bigger display made the experience better than earlier phones.
The first iPhone did not allow third-party native apps. Jobs's message to developers was to build web applications, which would run in the browser. The App Store opened in July 2008 with the iPhone 3G, after developers and users demanded native apps, and it changed the balance, though the web remained essential. Google's Android system, whose first phone, the HTC Dream, shipped in October 2008, used a browser based on the same WebKit engine.
Responsive web design
As phones and tablets multiplied, building a separate site for each device became impractical. In 2010, the designer Ethan Marcotte described an approach he called responsive web design in an article for A List Apart. It combined three techniques:
- Fluid grids, in which widths are expressed as proportions rather than fixed pixels.
- Flexible images, which scale within their containers.
- CSS media queries, which let the stylesheet apply different rules according to the screen width.
One page, one address and one set of content could now adapt to any screen. This was a better fit for search engines as well, since there was no duplicate content on a separate mobile address.
Google and mobile-first indexing
As mobile traffic grew, Google started to give weight to mobile-friendliness. In 2015 it announced a ranking change that favoured pages that worked well on phones. Later, it began moving sites to mobile-first indexing, which means that Google primarily uses the mobile version of a page for indexing and ranking. A page that is hidden or cut down on mobile can therefore be judged by what the phone version shows.
What changed for site owners
| Before 2007 | Now |
|---|---|
| Design for a desktop monitor of fixed width | Design for the smallest screen first, then enhance |
| Separate mobile site, if any | One responsive site |
| Hover menus and tiny links | Large touch targets and simple navigation |
| Speed was a nicety | Speed on cellular networks is expected |
Mobile devices also made performance more visible. A visitor on a cellular connection, with a modest processor, is sensitive to large images, heavy scripts and slow servers. Features such as caching, compression and a CDN carry real weight in that setting.
A mobile checklist
- Include the viewport meta tag, so that the browser scales the page to the device width.
- Test the site on real phones, not only in a resized desktop window.
- Make buttons and links large enough to tap.
- Compress images and use modern formats.
- Avoid pop-ups that cover the content on small screens.
- Check forms: use the right input types so that the right keyboard appears.
Apps, the web and progressive web apps
For several years a debate ran between native apps and the web. Apps could use device features and were easy to find in an app store, but they had to be built separately for each platform and approved by the store owner. The web reached everyone with a link and needed no installation. Progressive web apps, introduced around 2015, tried to combine the two: a site could be added to the home screen, work offline and send notifications, using web technology. For most businesses the practical answer is to start with a fast, responsive website and only consider an app if you have a clear need that the web cannot meet.
Another effect of mobile was on behaviour. People check a phone for quick questions in the moment, such as opening hours, a phone number or directions, so these details should be easy to find on your site without scrolling or zooming.
The lesson for site owners
For many businesses, most visitors now arrive on phones, and a site that only looks good on a desktop is working against itself. Choose a modern responsive theme, keep pages light, and use a fast, reliable host. Zebra Hosting plans include Plesk and free SSL, and you can add Cloudflare's CDN on hosted sites to improve load times for visitors on any device. Details are on our CDN page, and our WordPress hosting suits responsive themes well.
