The Why and How of
Responsive Design
Why you should care about Responsive Web Design and
How to make the transition successfully
Whitepaper
February 2014
100 Pennsylvania Ave. | Framingham, MA 01701 | Suite 500 | 1.800.445.3914 | www.utest.com
Whitepaper: Responsive Design
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
Why You Should Care
If you want to capture the attention of the growing number of mobile web users, you need to give them
something worth looking at and interacting with. Users have high expectations and they’re losing faith in
other mobile web practices. Visiting a mobile site that pushes the company’s native app can be
annoying and users have largely caught on to the issues presented by m-dot sites. If they can’t switch
to your more comprehensive website, they may abandon their efforts all together. If users aren’t visiting
your m-dot site, the extra maintenance required to keep it up-to-date is a waste – but you can’t let the
site lapse. This can lead to a Groundhog Day type circle of frustration where no one is happy.
Responsive design has looked at these issues over the years and evolved to address many of them –
and then some.
High User Expectations
As users move to mobile web, they keep their high expectations for the performance, usability and load
time of your site. According to a study by Google, 48% of users said that when they encounter a site
that doesn’t work well on mobile they feel like the company doesn’t care and 52% report that
encountering a bad mobile site would make them less likely to interact with the brand in the future4.
Despite this high stakes, 96% of users say they have come across a site that doesn’t work well on
mobile.
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.
Cover a Range of Devices
One of the biggest challenges of developing for mobile is dealing with the range of screen sizes and
resolutions, operating systems and mobile browsers. From the smallest smartphone to the biggest
tablet and every phablet in between, mobile websites need to work perfectly on every one. Add the
different mobile operating systems and even more available browsers and creating and testing a mobile
site can seem like an impossible task. In the past, companies would design to have a good experience
on the smallest screen or pinpoint the most common device among their users and optimize for that,
but that would inevitably give some users a less-than-optimal experience. With responsive design, you
don’t have to pick one device and hope for the best. Every user on every device can have a
consistently pleasant experience that is exactly what you want to put forward.
Less Maintenance & Better Payoff
On top of giving all mobile users a top-notch experience, maintaining a responsive website eases the
burden on your web team. Everyone knows that native apps take a considerable amount of work
because you need to create a specific app for each OS. Mobile web has long been the easier, one-
size-fits-all answer to the segmentation of mobile apps. Develop one mobile website and it is usable
across operating systems without separate development or optimization (assuming you tested on a
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.
Better Conversion Rate
Getting visitors to interact with your website is the ultimate goal. Whether it’s getting them to click on
articles or complete a purchase, you want users to stick around. To optimize your conversion rate you
want to present the best website possible. If it is easier for users to find what they’re looking for and
interact with your content, they’re more likely to engage with your site and take the actions you want
them to – no matter what device they’re on.
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.
What You Need to Know
Implementing responsive web design may be a simple decision, but it’s not a simple undertaking. You
need to understand the principles of responsive design as you start planning to ensure your
development follows the right course. Then you need to rework your entire website to keep it in the
spirit of responsive design. This can sometimes result in pushback from others in your company
because pieces and parts of your old site will be cut, content and pages will be eliminated and old
features may be abandoned. Have honest discussions about these decisions to determine if you’re
making the right choices, but don’t get pushed into including unnecessary legacy elements that will hurt
the responsiveness of your site.
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.
Start from Scratch
Giving up your current website may be hard, but the best way to approach responsive web design is to
start fresh. Odds are your current site is too bulky, code heavy and crowded to flow nicely in a
responsive framework. Take a critical eye to you site (and your analytics) to decide what should make
the move and what you should leave behind. Focus on pages that are important to explaining your
company, spreading your message or getting visitors to act – then tighten up your messaging.
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.
Limit Data Size
Stating from scratch, honestly evaluating your content and implementing the key features of
responsively designed sites will naturally help limit the size of your new site and the data it uses.
However, there are certain elements that need special attention in terms of data size, namely images.
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.
Testing, Testing, Testing
The whole point of moving to a responsive web design is to optimize visitors’ interactions with
your site no matter what device they’re using. Your users need to be able to access the full
version of your website in a view that allows ease of navigation no matter what the screen size
is (and there are a myriad of variations). The only way to be sure you succeed is to test your
new site on a wide range of operating systems, browsers and devices. This includes desktops,
smartphones and tablets of all sizes and on different network connections and connectivity
levels to ensure you site will work well for all your users everywhere.
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.
This is difficult – border-line impossible – to do in house. The number of device combinations
you’d need to cover would take up a warehouse if you kept each one in your test lab. Even then,
you’re not accounting for the fact that your new site needs to work around the world (this is why
testing on different network connections sand connectivity levels is important). Test simple
things in-house to catch simple bugs. Once initial testing is done, move your testing into the wild
for broader coverage. Testing under real life conditions will give you a better idea of how your
responsively designed site looks on real devices that are put through the ringer everyday. It also
gives you the chance to see how motion, connectivity and different networks affect your site’s
performance.
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.
Thousands of companies – from startups to industry-leading brands – rely on uTest as a critical
component of their testing processes for fast, reliable and cost-effective testing results.
More info is available at www.utest.com and blog.utest.com.
uTest, Inc.
100 Pennsylvania Ave.
Framingham, MA 01701
1.800.445.3914
[email protected]
www.utest.com
