Big news: Mobile internet traffic has grown by 30% in the last year, up to 1.5 billion users worldwide. Devices for internet access are on the rise as well; there are 135 more average screen resolutions today than just 3 years ago. With these rapid changes taking place, it's no suprise many sites are turning to new display formats. We see the diversification of internet experiences handled in two design formats: mobile and responsive.
Let's start with a look at mobile design. I'll take any excuse to talk about pizza, so let's take a look at the Domnino's website in desktop and mobile formats.
Say you've had a long week, and you're in the mood to kick back with a cheese pizza. At work, you check out Dominos.com to see what deals they have going on. The site looks like this:
Unfortunately, you're pulled back to work and don't get a chance to order. So, while sitting in traffic on the way home, you check out Dominos.com on your smartphone... and get a totally different site:
See the difference? This is mobile design in practice.
Rather than making users zoom, scroll, and search through their desktop website displayed on a mobile device, many site are opting to create entirely unique mobile experiences.
Generally, these mobile sites are optimized around action and cut out less relevant information (as demonstrated by Domino's above). They are completely separate from desktop sites, although they usually feature the same content in a mobile-optimized format.
The guiding principle here is user experience: the site is optimized around providing painless access to information, quick links to action items, and an easy-to-digest visual layout on smartphone and tablet devices.
Now that you know what mobile design is is, you'll start to notice it everywhere. In my humble opinion, a lot of mobile sites bear much resemblance to apps.
But mobile design isn't the only answer to mobile traffic - and mobile devices and desktops aren't all created equal. My iPhone may not display in the same format as your Galaxy S, just like your 40-inch monitor shows content differently from my laptop screen.
So how do we create an experience that fits on all devices, and looks good doing it?
Responsive design has emerged as an alternative to traditional and standard mobile sites, and provides a more holistic approach to online experiences in diverse contexts.
Here's an awesome infographic I found on Social Media Today which does a great job covering the concept:
To sum it up: mobile design creates a separate site, responsive design displays the same site in different formats.
The benefits and pitfalls section of this image does a great job illustrating that responsive design provides solutions to several developmental and user experience problems, but it still leaves some inconveniences on the table.
Thus, neither mobile or responsive design should be considered universally "better", it really depends on your site's needs and visitors' goals.
When deciding which of the two design options to go with, consider these questions:
- Do I have the resources to build out a separate mobile site?
- Can my CMS create a responsive layout to display across all devices?
- Will I be able to remove sections of my website to condense for mobile? Or, do I need them all visible in a responsive environment?
- Do I want a unique experience for different devices, or are my visitors goals the same in all environments?
Distilled has a flowchart that can help you decide, as well.
If you opt for a responsive design, you'll likely find that initial costs are higher than that of building a separate mobile site. However, the improved user experience and consistency accross devices will likely justify this investment (if it's relevant to your audience).
Furthermore, mobile sites raise some concerns for SEO purposes which aren't an issue on responsive sites.
In the end the decision will all circle back, as it so often does, to your personas and marketing goals. Use your persona information and analytics to determine which format best fits your site's needs. And let me know how it goes in the comments below!
Image credit: http://www.flickr.com/photos/89334594@N07/8240904818