In 2012, .net magazine listed Responsive Design as the #2 Top Web Design Trend for 2012. A year later, Mashable called 2013 the Year of Responsive Design. The reason Responsive Design has become important so quickly is because of the Mobile Web, or, more accurately, what some are now calling the Multi-Device Web. In this post, I’m going to talk about how the devices we use to connect to the Web drive how we design for the Web, and how the emergence of a Multi-Device Web has led to the current need for flexible solutions like Responsive Design. *
Computers and Laptops
When I started my web design career (longer ago than I care to admit to), I only had to worry about two devices: the desktop and the laptop. As well, I only had to consider one screen resolution. I began my career in a simpler era when design targets were specific:
- Two similar devices (in terms of accessing the web)
- One resolution
This specificity allowed for simple design solutions such as fixed-width design. Simple didn’t last for long.
Around the time I was getting comfortable designing for the Web, desktop monitors started to get bigger as did their screen resolutions. Suddenly, designs targeted for 800 x 600 resolutions were no longer acceptable. Instead, designs had to take into account older monitors, but also scale for new modern wide-screens. The devices (in this case, monitors) users were using to access the internet had changed, and web designs had to change with them. I learned to develop fluid and elastic layout designs. These designs would display on smaller resolutions, but expand to take advantage of larger resolutions. My learning didn’t stop there: more changes were in store for me and for our industry.
In 2007, Apple launched the iPhone and changed the mobile landscape forever. The iPhone was by no means the first phone to access the internet, but its mobile browser was one of the first that really tried to bring as much of the real Web as possible to a small screen. The Mobile Web arrived in 2007, and its growth shows no signs of slowing down. According to analytics firm StatCounter, users accessing the Web through mobile devices have almost doubled every year since 2009. The new spike in users accessing the internet with their smart phone devices drove the need for new web design techniques.
Thus the era of adaptive web design strategies was born. Adaptive web designs were created to target specific devices using a predefined set of layout sizes based on the device’s screen size. Usually one design was created for desktop/laptop, and another was created to target the most popular smart phone devices of the era (iPhone, Blackberry, and Android).
In 2010, the launch of Apple’s tablet, the iPad, proved to be another game changer for the Mobile Web. The iPad offered users a new, slicker way to consume web content and they loved it. As of October 2012, Apple had sold at least 100 million total units, and is expected to sell 33 million more in 2013. The popularity of the iPad drove competition and innovation, and soon the mobile landscape was littered with tablets of various screen sizes and varying resolutions.
Fortunately, the initial introduction of the tablet didn’t immediately force us to vary our design techniques. The first tablets could be designed for by leveraging our knowledge of adaptive designs and “just” adding new media queries to handle the addition of tablet screen sizes.
Everything But the Kitchen Sink (though I’m not ruling it out)
So far, all the designs I’ve talked about have handled the so-called mobile web. The landscape was fairly simply divided into easily defined buckets (smart phones, tablets, and monitors) and media queries could be used with confidence to target the most common screen sizes within each bucket.
Not so long ago we designed as if the mobile landscape looked like this:
But in reality, it looks like this:
Device fragmentation has increased, and shows no signs of stopping. Different screen sizes, retina displays, new mobile-aware devices – the list continues to grow on a daily, if not hourly, basis.
And that’s where the term “multi-device web” comes in. It’s a term that attempts to capture the reality that users are accessing our content from an astounding number of different screen sizes from all sorts of different devices:
- Game systems
- Even refrigerators!
This new multi-device web forces us to consider all the ways a user is accessing the web and how best to tailor the experience, not only to the device they are using, but also to the context in which they are using the device. When I’m on the go and use my iPhone to access a company’s site, I might only be looking for a sub-set of their information, such as their address; but later in the same day, I might access the same site from the comfort of my couch, wanting to see a full inventory of the company’s products. Any design has to take into account both scenarios!
Adaptive techniques are no longer enough, as creating media queries and content to target each specific device’s screen size is next to impossible. The next big learning curve for web developers and web designers (and me) will be responsive web design; this means learning how to create designs that adapt their layouts to the user’s viewing device and the context they are using it in.
The multi-device web is the current challenge; I can’t wait to see what we’ll need to learn in order to evolve to meet the next leap forward in technology.
* For a more in-depth look at Responsive Design, stay tuned for Suzanne Ferguson’s upcoming blog post on September 9.