Carousel30: Optimizing for the mobile user experience whitepaper

WHITE PAPER
Optimizing for
the mobile User
Experience:
When to use responsive design,
mobile websites & mobile apps
By Greg Kihlström, VP of Strategy, Carousel30
& Giuseppe Carabelli, Creative Director, Carousel30
August 2013

CONTENTS
Introduction 3
3 Ways To Address The Mobile
Experience 5
What Are The Ultimate Goals? 8
Types Of Websites Is a Factor In
Your Decision 10
Cases For Each Approach 11
Conclusion 14
About The Authors 15
About Carousel30 16

3Optimizing for the MOBILE USER EXPERIENCE
A Carousel30 White Paper
Introduction
“It is far better to adapt the technology to the user than to force the user
to adapt to the technology”
—Larry Marine
There’s no question that the mobile Web is increasing in usage and popularity. According to a
recent Pew Internet Project study,1
87% of adults in the United States own cell phones, with 45%
adults owning smart phones. This can only mean that Web traffic from these devices will continue
to increase.
We’ve also seen how 2013 will be the first time tablet sales will outpace laptop sales.2
According
to the Pew study, 31% of adults own tablets in the United States and according to a recent
analysis by Adobe,3
Web traffic from tablets has now surpassed traffic from smartphones.
A single presentation is
not enough
Because traffic growth is steady among
smartphones and tablets, and the sizes
and varying formats of new devices are
seemingly endless, responsive design has
recently been hailed as an excellent way
to address the mobile user experience.
Adding to that, recent successes, such as
AOL’s claim that advertising has received
a three times increase in click-through
rates (CTRs) since converting Engadget
and Games.com to responsive design.4
It might be enough to convince you that
responsive is the only way to go.
1 Brenner, Joanna. Pew Internet: Mobile. January 31, 2013. Pew Internet.
2 Bradley, Tony. Tablets threaten laptops, but there’s more to this picture. January 9, 2013. PC World.
3 White, Tyler (Adobe). Tablets trump smartphones in global website traffic. March 6, 2013. Adobe Digital Marketing Blog.
4 Robles, Patricio. AOL bets the farm on responsive design. January 10, 2013. Econsultancy.

That, however, is a misleading assumption. While we can all agree that tailoring the user
experience for desktop, smartphone and tablet users creates more engagement and can increase
interactions and desired outcomes, there is a good case for the three primary ways to address
mobile user experience:
1. Responsive design
2. Separate Desktop & Mobile Websites
3. Native mobile app
In this white paper we will discuss these three approaches and how/when to make the decision
to adopt each. You will see that there is no single solution that fits all needs, though our goal is to
show you the appropriate time to utilize each approach.
Responsive Design
Separate Desktop
Mobile Websites
Native Mobile App

3 Ways to Address
the Mobile User
Experience
“You cannot NOT have a user experience”
—Lou Carbone, Founder CEO, Experience Engineering
There are three primary ways to address the mobile user experience. Each has benefits and
drawbacks, as well as recommended times to use or avoid. We’ll discuss them below as we
illustrate how different approaches are required for different outcomes.
The important thing to remember is that there is no one best solution. It is not correct to say that
there isn’t a single good use case for a mobile app, nor would it be correct to say that responsive
design sites are the only way to go. Each website and web application should be approached with
the user experience in mind, while also factoring in the total cost of ownership.
Responsive Design
According to Kayla Knight’s article in Smashing Magazine, responsive design is defined as:
Responsive Web design is the approach that suggests that design and development
should respond to the user’s behavior and environment based on screen size, platform
and orientation. The practice consists of a mix of flexible grids and layouts, images and an
intelligent use of CSS media queries.5
5 Knight, Kayla. Responsive Design: What It Is and How to Use It. January 12, 2011. Smashing Magazine.

What this means is that the website itself “responds” to the different devices and screen sizes it is
accessed by.
Of the three methods of addressing mobile user experience, responsive design is the newest, but
it is also rapidly growing in popularity for a number of good reasons. These include a lower total
cost of ownership, easier content updates, and a degree of future-proofing against new devices
and screen formats. There is a good reason why “responsive design” has been a buzzword for a
while now.
Mobile Website
Mobile websites were the first solution to the mobile “problem.” Until responsive design was
possible, they were the only real option to have a good mobile user experience, unless you
recreated your website as an app. Doing that, discussed later, can lead to greater costs and
management time than the responsive solutions, but as we’ll see, there are still many good
reasons for making one.
A mobile website is designed specifically for mobile devices. In many cases, this means that it is
made to perfectly fit a smart phone form factor, using font sizes, buttons and other navigation
that are more appropriate for touch screen usage than a traditional website.
In most cases, content strategy for a mobile version of a site is significantly different than that
of a desktop version of a site. The mobile site is a pared-down version that includes content and
features that are geared towards the usage needs of someone who is accessing through
their smartphone.
Many times, tablets are not shown the mobile version of a site. In cases where there is only a
desktop version and a mobile version, tablet users are treated more as desktop users because of
the extra screen real estate that a tablet has. From the same Adobe study mentioned earlier, we
know that tablet users also spend 54% more time on websites than smartphone users. This means
their behaviors more closely mimic those of desktop users than phone users.
Mobile App
There’s no question that mobile apps are popular and, given their continued growth, there is
obvious demand for them. As of January 2013, there were approximately 775,000 apps in the
Apple App Store, versus 650,000 six months prior.6
That being said, there are good reasons behind
when you should create an app versus a mobile or responsive website.
A mobile app is, and should be, treated differently than a responsive design website or a mobile
website. While there are several apps that are simple recreations of an organizational website
with basic content and little to no interactivity, this is not best practice and should be avoided for
several reasons.
6 Costello, Sam. How Many Apps Are in the iPhone App Store. April 30, 2013. About.com.

Mobile apps are most successful with a single purpose, or at most two to three, which are best
performed in isolation, rather than surrounded by a full-featured website full of content and other
items. They also have the ability to better access mobile phone-specific features like camera, GPS,
address books and other items (though Web browsers are gaining here as well in a few areas).
Mobile apps are by far the biggest investment. In most cases, each version of an app (iOS,
Android, Windows, Blackberry) requires a mostly separate (sometimes completely separate)
codebase. You are essentially investing in several products, not just a “mobile app,” with
individual maintenance needs as well as the need to propagate design and content changes when
decisions to change or upgrade are made. Simpler apps can use frameworks such as PhoneGap or
others, but in many cases, these apps do not have enough phone-specific features to truly justify
being apps vs. mobile sites or responsive design sites.

What are the
ultimate goals?
“People react positively when things are clear and understandable.”
—Dieter Rams
While the purpose of this white paper is to talk about enhancing the user experience for mobile
users, there are countless other types of goals that your website or Web application have within
your overall marketing and customer strategy. While we acknowledge they exist, we won’t be
discussing those at this time. They are, however, absolutely necessary to factor into your decision
for how to proceed.
The goals for increasing the user experience for mobile users can be plentiful as well, but here
we’ve outlined a few:
• Increase conversions from mobile users
• Increase views of content across mobile devices
• Increase mobile advertising views
• Increase repeat usage of your Web assets and cross-device usage through content
optimization
While this is from a general perspective (conversions could mean anything from product
sales, to event attendance, to online fundraising or email signups), the overall user experience
enhancement goals are usually similar.
What differ more dramatically are the goals and strategies that would influence the decision to
use one of the three ways to address the user experience. Some of these include:
• Target specific activities and users
• Manage time/cost associated with Web properties
• Provide a consistent experience across desktop and mobile vs. tailored actionable content
We’ll talk more about these and how to apply them to your decision a little bit later in this white
paper.

Other factors to keep in mind are the current usage behaviors of your audiences. For instance, if
you are convinced a native mobile app is the best solution for you, and 99% of your traffic comes
from iOS devices, you might want to first make an investment in that platform, rather than invest
in developing your first app on two platforms.
Take a look at your Web analytics and get a good sense of the popular devices, content and other
factors that would weigh into your decision. These can also include how many unique users are
visiting your Web properties from multiple devices. Going into your decision armed with data will
be very helpful and assist you in making an informed decision.

Type of websites
is a factor in
your decision
Just as goals vary based on the organization, campaign or audiences, the user experience needs
vary greatly depending on the type of website that you are optimizing the mobile experience for.
While there are many varieties of websites, we will discuss a few below in order to better set the
stage for how to make your decisions.
Organizational Websites
In most cases, responsive design is going to make the most sense for an organizational site. A
responsive site will most likely cover 95% of organizations’ mobile and tablet needs. It is also
future-proof (as different screen sizes come out) and platform-agnostic (plays nice with Apple,
Android, Windows, etc).
Generally, this is the way we approach mobile apps as well. There has to be a very strong case
that involves phone-specific features that cannot be accessed by a browser, or must involve very
specific user actions—otherwise a responsive site makes the most sense.
Web Applications
This may not be the case with your web applications, however. Many times an organizational
site is a great fit for responsive design and a very specific web application can translate well
to a mobile site or even an app, though the latter requires the development and maintenance
of separate codebases for each mobile phone platform you want to support (iOS, Android,
Blackberry, Windows, etc).
Other Types of Websites
Of course, there are several other types of Web properties, including campaign sites, games,
and more. The same management time and cost considerations apply to both. User experience
considerations also apply, though in specialized cases such as games, there may be additional
constraints and or costs to either making them responsive or porting them to multiple platforms.

Cases for each
approach
As previously said, mobile user experience is not a one-size-fits-all approach. There is a good case
to be made for each approach. Here is how we at Carousel30 generally approach things.
Case for a Responsive Site
A responsive design is going to be the most cost-effective solution of the three, though there are
some limitations in showing/hiding information on a per-device basis.
• The same set of content should be viewed across all platforms, though you want it to be
formatted and optimized for each device. Major content differences across platforms are
not needed or desired.
• You need a site that works for a wide variety of audiences and users, as well as platforms.
• Long-term cost of ownership and maintenance is a major factor in your decision.
Case for a Separate Desktop and Mobile Site
There are cases when the content presented to users on a desktop site needs to be presented
very differently on a mobile device. There are many possible reasons for this, but most of them
point to the need for a separate mobile website. This scenario requires more time and effort on
the content management front, and depending on the CMS used, may even require two separate
Content Management Systems. Thus, this scenario should be approached with caution, as in some
cases it can create double the work managing the site.
• The content should be different on each platform (desktop vs. mobile), not simply
reformatted per platform.
• Unique features are available for one platform that do not apply to the other platform.
• Resources are available to maintain two separate sets of content.
• There is a strong need for mobile phone usage (not as much of a requirement for tablet
users).
• At least 50% of all traffic is coming from mobile devices.

Case for a Mobile App
A native mobile app gives users of smart phones and tablets direct access to very specific
functionality. The best use of an app is not a recreation of an informational website, since the
maintenance of those can best be performed through a Content Management System. Mobile
apps are best when they perform more singular functions and allow users to bypass a lot of the
extraneous links and information present on websites.
• There is a limited set of functionality that the user interacts with.
• Phone-specific functionality or features are needed to fully use the site or application.
• There is a singular goal for both the user and the maker of the app, for instance:
purchasing tickets, consuming one type of content, viewing media, or playing a game.
• Push notifications are beneficial to the user and make for a better user experience.

Pros and Cons of the Three Formats

Conclusion
“Design is not just what it looks like and feels like. Design is how it works.”
—Steve Jobs
If the last few years are any indication of the next few years, we can only assume that many new devices,
screen sizes, mobile browsers and other technologies will continue to emerge and further segment our
audiences and users.
Choosing a mobile user experience strategy requires careful consideration of the various dimensions we’ve
discussed in this white paper. As stated previously, there is not a single solution that works in all cases, nor is
there one that is the sole future of mobile experience.
By staying true to your goals and audience engagement strategy, you can then factor in other things such as
cost of ownership and usage profiles to determine the best approach. If there is anything that is certain, we
know that platforms, devices, screen sizes and user needs will continue to evolve. The best solution is one that
keeps this in mind while balancing your user and organizational needs.

ABOUT THE AUTHORS
Greg Kihlström
Greg is the founder of Carousel30, a strategist, and creative director who has received numerous
awards and honors, including Webby Awards, ADDYs, American Marketing Association, iMedia
Connection Agency Award, Summit Creative Awards, and others after 15 years of experience in
the advertising industry. He has been published in best-selling books by Rockport Publishers and
Crescent Hill Books and industry related magazines such as Communication Arts and Graphis,
has exhibited work in galleries around the country. Greg has been featured in Advertising Age,
Website Magazine, Web Designer Magazine, The Washington Post, and Voice of America. He has also judged
renowned design competitions around the country. Greg frequently speaks at global industry events and has
led panel discussions at such events as Internet Week New York, Internet Summit, Mid-Atlantic Marketing
Summit, Digital Capital Week and the Virginia Tech Conference on Social Media and Tourism in Italy. He is
a regular contributing writer to iMedia Connection, a leading online publication for the digital marketing
community. While at Carousel30, he has worked along with many top brands, on a number of campaigns,
including AOL, AARP, Ben Jerry's, Geico Direct, Miller Lite, MTV, Starbucks, The Nature Conservancy, TV
One, and Washington Wizards. He is Vice President on the board of directors of the DC Ad Club — the premier
organization in Washington, D.C. for the advertising industry, where he is also serving as a mentor in the
Club's Career Catalyst program and has served on the ADDYs and Communications Committees for the past
two years. He serves on The Trust for the National Mall's Communications Advisory Committee along with a
group of marketing experts from agencies around the country. He is also an active member in the American
Marketing Association, the International Academy of Visual Arts, and the Art Directors Club of Washington, DC.
Giuseppe Carabelli
Giuseppe Carabelli brings more than 12 years of creative and strategic experience to the team at
Carousel30. Prior to joining the company, he worked in Milan as the Interactive Art Director for
Leo Burnett, one of the most renowned advertising agencies. In the U.S., he has worked as Art
Director and as Interactive Marketing Consultant for several digital agencies, and for international
clients and startups. He has experience working for clients including FIAT, Nokia, Disney, Coca
Cola, Kellogg’s, AstraZeneca, McDonald’s and Proctor Gamble, and has also worked on a $4
million dollar re-development of AstraZeneca’s Italian website, where he helped balance design creativity
within the boundaries of the BroadVision platform. He also led the design and development team for a
redesign project for Haier Europe, and oversaw a $2 million integrated campaign promoting Kellogg’s Frosted
Flakes cereal and product line via print, mobile and website engagement. In the entertainment vertical,
he worked with McDonald’s, Nokia and Coca Cola on the launch of Disney-Pixar’s movie, Finding Nemo,
by supporting the design team in creating a successful online game and promotional website. He has also
provided consulting services for a variety of organizations, most notably, EcoFusion, an agency geared towards
eco-friendly businesses, in creation of a pitch to secure funding for the launch of the Green Video platform
Empivot.com. Giuseppe also brings experience from Ecendant Interactive, the digital side of Fraser Wallace
Advertising, a nationally renowned ad agency that caters to the real estate and food wine market verticals,
where he was a user experience, design and strategic asset for the company, culminating in a variety of MAME
winning campaigns for builders such as Engle Homes, Bowen Homes and NVR. Giuseppe's international
experience gives him a perspective on creating strategic design solutions for everyday interactions.

ABOUT Carousel30
Carousel30 is a digital agency that focuses on building audience engagement and conversions
for top brands. Our diverse team translates business objectives into digital strategies that
incorporate websites, mobile apps, social media marketing, email marketing, display advertising,
and other efforts.
Since our founding in 2003, we have had the opportunity to work with and help grow our clients’ businesses,
while leading the digital marketing industry as it continues to mature. We've worked with top brands around
the world, including Toyota, AOL, Geico, CQ Roll Call, The Nature Conservancy, United Nations, National
Audubon Society, AARP, MTV, and more. We consistently provide clients with engaged audiences and tailored
experiences that connect them to the people, brands, causes and products they love.
As a full-service agency, our offerings include:
• Digital Strategy
• User Experience
• Creative
• Technology
• Digital Marketing
Carousel30 is headquartered in Washington, DC. More information is available on our website at:
http://www.carousel30.com

Washington, DC
(headquarters)
105 S. Columbus St.
Alexandria, VA 22314
(703) 260-1180
Carousel30.com
facebook.com/Carousel30
@Carousel30
linkedin.com/company/Carousel30

Carousel30: Optimizing for the mobile user experience whitepaper

More Related Content

What's hot (19)

Viewers also liked (8)

Similar to Carousel30: Optimizing for the mobile user experience whitepaper (20)

More from Carousel30 (11)

Recently uploaded (20)

Carousel30: Optimizing for the mobile user experience whitepaper