Not too long ago, if you built a website, it was a fairly safe bet that whoever visited it would be on some kind of desktop computer. It was easy to make a lot of assumptions about that person. They probably had a fairly large screen, a mouse, and of course, a Flash plugin.
Things were fairly simple.
Then Apple introduced the iPhone, and a lot of people bought them and started using the internet with them. Suddenly, there was a new character in our story – a user with a small screen, less time and a slow connection.
We need to be mobile!
The kneejerk response to this new character was to build a separate, “mobile” website, designed specifically for the iPhone’s screen and feature set.
Mobile websites typically present users with a subset of the content and features present in their desktop counterparts. Based on the assumption that mobile users are always on-the-go and connected to a slow wireless network, this was a fairly reasonable strategy.
The iPhone was really the only blip on the radar at the time, and as Android and other smartphones began to appear, mobile websites mostly worked. Blog posts were written, books were published, and the concept of the mobile web was born.
The iPhone was just the beginning.
Today, though, the web is everywhere, all the time.
From phones to tablets to televisions, even “Smart Refrigerators”, people are using the web with an enormous multitude of devices. A growing percentage of the population is eschewing the desktop altogether in favor of a phone or tablet.
In fact, in the last quarter of 2012, a full 23.1% of users are browsing the internet on a mobile device (be it a tablet or phone). That’s 1 of every 4 visitors on the web coming from a handheld device, a smaller screen, in an unknown browsing scenario. On some of the sites we manage, we see numbers in the 30s and 40s.
We need to respond.
Do we start making tablet websites and television websites? What about the fridge? It’s clear that the separate “mobile” site approach isn’t a tenable one. So what can we do?
No more separate URLs, no more handicapped features and abbreviated content. Responsive websites aim to be device-agnostic in terms of both content and presentation.
It all starts with fluid layouts and CSS media queries, which allow designers to adapt their design to a wide range of screen sizes. Rather than creating separate, fixed-width layouts for each screen size, the layout stretches and compresses to fill the space available on any given screen.
On the smaller end of the spectrum, which is usually a phone or handheld device, site navigation is often presented as an expandable menu and page content is rendered in a single, fluid-width column.
As we go up in screen size to larger devices like tablets, multiple columns can be introduced and more of the navigation can be revealed.
Even further up the scale, we can increase the number of columns and the complexity of the layout, and present the full navigation up front.
People want a website that works, whenever they access it, on whatever device they happen to be using, and the list of internet-connected devices is growing a brisk pace.