The Why and How of Responsive Design: Whitepaper
The Why and How of Responsive Design: Whitepaper
Responsive Design
Why you should care about Responsive Web Design and
How to make the transition successfully
Whitepaper
February 2014
Introduction
As users have become more mobile, web trends have followed them. The latest trend has
mobile web moving away from unique, scaled-down m-dot websites, in favor of responsive
design. Simply put, responsive design is the practice of creating a website that uses one code-
base that automatically adjusts its interface to whichever device, operating system, screen
orientation and resolution a user is on. Unlike past mobile-focused solutions, responsively
designed sites have the same content with the same backend for both desktop and mobile.
Responsive web design emerged in response to the rising use of mobile web. A web app needs
to be where the users are, and increasingly, those users are on small, handheld devices with a
variety of connection speeds. Around the world, 15-17% of web traffic came from a mobile
device in 2013. On Black Friday 2013, nearly 40%1 of online traffic was via a mobile device.
More than 1.2 billion people access the web on mobile and mobile web traffic is growing 8x
faster2 than the traditional web. For some people (21%3), mobile devices are now their primary
way of accessing the Internet. In short, the mobile web can no longer be a second thought.
As mobile continues to take over for traditional web consumption, companies have been forced
to adapt. It became clear early on that shrinking an existing site to fit a mobile screen wasn’t a
viable solution. It didn’t address the different usage habits mobile introduced – such as smaller
dimensions, touch screens and use on-the-go. Native apps require a large investment in
development, testing and maintenance and aren’t a perfect fit for every company. An entirely
new approach to mobile web was needed.
Companies turned to mobile-optimized sites in the form of m-dot sites to fill the gap, but this
approach still takes dedicated investment outside regular website maintenance. You need to
identify which parts of your site are important enough to include in the mobile version, build this
new site and test across a range of devices. Any updates to your main site mirrored on the
mobile site need separate implemented. In addition to extra resources, m-dot sites can
sometimes hurt as much as they help. M-dots feature forced redirects that slow down crucial
load time and can hurt SEO. Plus, a site that only works on mobile limits effective sharing –
what if a user wants to share the URL with a friend on a computer? While m-dot sites served a
purpose as companies learned how to have a web presence on mobile screens, it has become
clear over the years that an entirely separate site isn’t the best – or most practical – answer.
Responsive web design has emerged as an easier way for companies to present a unified front
on all devices while limiting the amount of effort involved and the number properties that need
maintaining. Responsive design does away with many of the major pitfalls of m-dot sites and
doesn’t require the level of work and dedication native apps demand, while allowing companies
to reach their entire user base regardless of device.
1
http://www-01.ibm.com/software/marketing-solutions/benchmark-reports/black-friday-report-2013.pdf
2
http://www.digitalbuzzblog.com/wp-content/uploads/2013/09/Infographic-2013-Mobile-Growth-Statistics-
Large.jpg
3
http://www.cnn.com/2013/09/16/tech/mobile/phone-internet-usage/
2
Whitepaper: Responsive Design
A good website on a mobile device needs to be easy to navigate, easy to consume and meet user’s
high expectation of load time. The majority of people would like websites to load within three seconds
(generous users will give your site about six seconds) and 58% of users expect mobile sites to load as
quickly as or faster than a desktop site5.
4
http://www.google.com/think/research-studies/what-users-want-most-from-mobile-sites-today.html
5
http://blog.kissmetrics.com/loading-time/
3
Whitepaper: Responsive Design
range of mobile browsers and devices to ensure a good experience). But if you create a mobile
optimized website that is an independent entity, it still adds to the collection of properties your team
needs to maintain. If you make a change on your main website, it won’t naturally transfer to a separate
mobile site. If you want the update to be available on mobile, you need to make changes to the mobile
site as well.
With responsive design, there’s only one web property to maintain. Not only does this cut down the time
and effort you team needs to put into the website, it also has SEO benefits – particularly over
independent mobile sites. Search engines aren’t huge fans of redirected links and forcing a website to
redirect to an m-dot site to fit mobile devices will hurt your page ranking. If users land on your site only
to be disappointed by a lack of content, poor layout or bad usability, they’ll move on in a matter of
seconds – telling search engines that your site isn’t what they wanted. Google specifically gives
preference to mobile optimized sites when users are searching from a mobile device. Responsive
design will keep your site consistent and boost your SEO in mobile searches.
While there’s less to do and maintain, you should still test across a range of desktop and mobile
devices to make sure changes appear correctly on multiple platforms, operating systems and browsers,
but once you have the fundamentals of your responsive design nailed down, implementing site changes
is much easier and takes a lot less effort.
Using a responsive site to shorten load time (over the load time of a heavy traditional site rendering on
mobile or a redirecting m-dot site) can have tangible benefits. A one-second delay in page response
can drop your conversion rate by 7%6 - every second counts more than you think. Additionally, the
Google study found that 66% of users are more likely to buy a product or service from a company that
has a good mobile site.
Your users are on the go more now than they ever were in the past. With instant access to the Internet
sitting in their bag at all times, they don’t have to wait until they’re back home to interact with your
company online. If you want to keep users’ attention while they’re on-the-go, you need to make it easy
for them to get the results they’re looking for while they’re out and about. If you make them wait until
they’re back at a desk, you may have already lost their interest.
Consistency
In this digital age, your web presence is an integral part of your brand’s identity. As users fragment and
interact with your brand via more channels, presenting a consistent experience and message becomes
more important – and more difficult. Responsive web allows you to perfect the look, feel, interactive
6
http://blog.kissmetrics.com/loading-time/
4
Whitepaper: Responsive Design
qualities and content of your site and have them stay consistent no matter what device your users are
on. If a user starts researching your company on a mobile device then picks up their research at a
computer they won’t be faced with additional information and a totally new layout, making the transition
natural and unobtrusive.
Plan Ahead
Don’t just jump into redesigning your site. First, take the time to understand how your users interact
with your site and what features are most important to them and to your business. Which pages are
most popular on your traditional website? How about when visitors are on mobile devices? Also focus
on the types of devices and browsers they use – this will help you understand what environments your
new site needs to stand up against and narrow down your testing requirements.
Incorporating a usability expert early in the planning process can help you identify key features and
functionalities to highlight. Having an UX expert look at a mockup or wireframe of your new site design
can help you make sure you’re on the right path and hitting key usability components.
When planning, remember to account for different types of interactions. Users will be accessing your
site with a mouse on a large screen and fingers on a small touchscreen and neither should have
trouble. When designing the layout and navigation of your site, build in tap target areas of at least
44x44 pixels. Anything less will leave your mobile users frustrated and result in accidental clicks.
Also take note of the current load time of your websites. The best responsive sites limit data size to
ensure fast load times on all devices. Having a benchmark of your current sites’ performance will help
you know how much work you need to do in this area.
Part of starting from scratch is giving your content a refresh. Too much content crammed together on a
single page is hard to read – especially on a mobile screen. With good responsive design, the size of
5
Whitepaper: Responsive Design
your text should be easy to see no matter the screen size, but making visitors scroll through paragraphs
of information isn’t a very user-friendly experience. Short, concise paragraphs and clearly separated
sections are best. When a user visits your site from a mobile device, the content will stack, so keep in
mind how it will look not only side by side but vertically as well.
A responsively designed site doesn’t have to be restricted to a handful of pages, it just needs to be laid
out in an intuitive way that is easy for your users to navigate. Navigation needs to be easily accessible
and intuitive. Don’t show so many navigation options that it is hard for users to interact with your site,
but don’t make it too difficult for them to find what they’re looking for either.
Key Components
Responsive design is about more than just scaling. There are defined methods behind the approach.
Key features implemented in responsively designed sites include:
Flexible Grid: Whether you create a custom grid or use one from the wide range of existing
responsive libraries (such as Foundation, Bootstrap or Gridulous), the flexible grid of
responsively designed sites usually include column based classes and may also include
baseline-ing stylesheets.
Responsive images: This can be as simple as giving all images a style of “max-width: 100%”
(used by most responsive libraries) or as complex as javascript or server-side image
replacement. Right now, no perfect responsive image exists. However, the W3C has some
proposals in the works, so keep an eye on the latest innovations if you want your site to stay
cutting edge. Until the formula for a perfect responsive image is discovered, developers rely on
imperfect solutions that can require extra work and time. Images are an important part of a
successful responsively designed site, though, so be patient and work until it’s right on a range
of devices.
Media Queries: Though most flexible grid libraries come with media queries for their columns,
they’re not perfect. To complete the experience, you’ll need to write your own media queries for
complex or custom designs related to headers and footers and complex page items. Most
responsive libraries already target common devices and will work well on a variety of mobile
phones and tablets. If your audience uses a specific or less common device, you may need to
write your own media queries. Teams often find themselves working on custom media queries
when their audience favors small desktops, specific devices (such as Kindle Fire or 7 inch
tablets) or often print online material.
HTML5: The majority of mobile devices feature support for HTML5 and CSS3. This means you
can selectively add elements to better serve mobile devices, such as new HTML5 form
elements and types. But just because you can use these elements doesn’t mean all your users
will get the full benefits. To ensure your site is usable by everyone, use an HTML shiv whenever
you use HTML5 or CSS3 elements. This will make sure you equally support older browsers.
6
Whitepaper: Responsive Design
Many companies struggle with image size. Serving a picture for a huge desktop that spans the entire
screen is great, but when you force someone who is on a low reception cell network to load a huge
image it drastically impairs load time. Because of this, many server-side image replacement systems
seek to server smaller image sizes. At the moment, it’s an imperfect solution that requires a lot of work,
but an incredibly important component if you want your site to be usable and not frustrate your users.
Planning ahead comes in particularly handy in this case. If you don’t have the resources to dedicate to
extra work, design your site to be less dependent on images. Recognizing that your site won’t be able
to support a hero image while you’re still early in the planning phases can save you a lot of time, effort
and frustration later and result in a better site overall.
Your site will look and act a little bit differently on each operating system and browser.
Interaction methods differ depending on device and OS. Browsers support different CSS3 and
HTML5 specifications differently. The point of testing is to make sure your site looks and acts in
a way you like and find acceptable on all the major variations you’re targeting.
Functional testing, usability testing and load testing are all extremely important when launching
a new responsive site. (Not to mention, security testing, which is just as important as it is for any
website.) Remember, you’re starting from scratch and your testing needs to as well. A
responsive design (or redesign) is not worth much if your users are unable to access what they
want on your site intuitively. Different devices and screen sizes can drastically change what your
users see and can do with your site, testing on a wide range of devices can make sure you’re
not caught off-guard.
7
Whitepaper: Responsive Design
Conclusion
Users no longer differentiate between mobile and traditional web use. They have the same
expectations no matter what device they’re using and those expectations are high. Having a site that
performs well on all sizes of desktops and mobile isn’t easy, but it’s incredibly important to any
company that has an online presence. Responsive design can help you get there.
To find out if responsive design is something you should invest time, effort and resources into, look at
your traffic analytics. Does a decent amount of your traffic come from smartphones and tablets? If it
does, you really have no time to waste. If the majority of your traffic still comes from traditional web,
making the investment in responsive web design now still isn’t a bad idea. Mobile web use is only going
to continue to grow and you want to be prepared when your users make the switch, because one day
they will. If you’re not ready, your company could find itself losing users and developing a reputation as
uncaring, lazy and behind the times.
8
Whitepaper: Responsive Design
About uTest
uTest provides in-the-wild testing services that span the entire software development lifecycle –
including functional, security, load, localization and usability testing. The company’s community
of more than 100,000 professional testers from 200 countries and territories puts web, mobile
and desktop applications through their paces by testing on real devices under real-world
conditions.
uTest, Inc.
100 Pennsylvania Ave.
Framingham, MA 01701
1.800.445.3914
[email protected]
www.utest.com