BBDO Whitepaper—Responsive & Adaptive Design

RESPONSIVE &
ADAPTIVE DESIG N
DECEMBER / 2014
DELIVERING WEBSITES THAT
DELIGHT YOUR USERS

sk ten different people what “user
experience” means. They will have ten
different answers, and the majority will
recite a list of deliverables, including
site maps, user interface mockups or
customer personas. No matter what
people associate with UX, the discipline
is undeniably a blend of creative artistry
and forward-thinking tech, merged as
a discipline with an ultimate goal of
creating seamless, easily understood,
and pleasant experiences for users.
Today’s users visit websites on screens
of all sizes and capabilities, from wall-
sized projections to tiny wearable
computers and everything in-between
— and every single user expects a
smooth, fast browsing experience. In
today’s complex online environment,
the quality of a website user experience
can make or break the success of a
holistic digital marketing strategy. In this
Thought Paper, we’ll explore a couple
different modern approaches to user-
focused digital design — along with
some points to consider when deciding
which approach is best for developing
a website that is beautiful, flexible, and
intuitive to users.
A

WHY IS
TODAY’S USER
EXPERIENCE
DIFFERENT?
>

obile and tablet users comprise a large
and ever-growing share of all Internet
visitors. Digital experts predict that web
traffic from mobile devices will surpass
web traffic from personal computers
this year. Consider these statistics:
Between 2012 and 2014, smartphone
ownership grew almost 62% while household
TABLET OWNERSHIP GREW AN
ASTONISHING 96% in that time period.
Meanwhile, household personal computer ownership
grew just over 1.2%
As of 2014, 37% of mobile phone owners
USE PHONES AS THEIR PRIMARY
POINT OF INTERNET ACCESS.
SMARTPHONE SHIPMENTS WILL
COMPRISE 70.5% OF TOTAL DEVICES
SHIPPED IN 2017— and large phones or
“phablets” will comprise an increasingly greater share
of that percentage.
Users spend an average of 34 HOURS AND 17
MINUTES A MONTH ON THEIR MOBILE
PHONES while devoting just 27 hours and 3
minutes to their desktops.
M
1.2%
25% OF ALL SEARCHES ARE
CONDUCTED ON MOBILE PHONES.
ON MOBILE
PHONES
34 HOURS
70.5%
27 HOURS
ON DESKTOP
COMPUTERS
37%
25%
48%
96%

RESPONSIVE
DESIGN
ADAPTIVE
DESIGN?
or

Responsive design principles focus on
adapting a website layout to fit different
screen sizes, widths, and resolutions so
that one code base delivers a singular
website that expands and contracts
fluidly across a variety of browsers
and devices.
RESPONSIVE WEBSITES OFTEN CONTAIN THE FOLLOWING FEATURES:
• Layouts — including visual elements and text — that adapt
readily to the broadest number of screen sizes and devices.
• Design schemas that offer greatest ease of navigation and
content exploration with minimal effort on the user’s part.
• Flexible, grid-based layouts that adapt to a wide range of
current and future screen sizes and resolutions.
• Images and graphics that scale beautifully to any size.
• Style sheets that target different devices and browser
proportions.
RESPONSIVE DESIGN
v
adapting a website
layout to fit different
screen sizes, widths,
and resolutions
Responsive design: one site, multiple configurations

The adaptive approach to web design
prioritizes users above browsers to deliver
an experience customized to each context
in which a user may engage. Such websites
can also feature multiple code bases that
respond to different potential user browsers
and serve specific content accordingly, or
server-side scripting that detects the user’s
browser and context of use and signals
the presentation layer to show only what
is needed.
ADAPTIVE WEBSITES OFTEN CONTAIN THE FOLLOWING FEATURES:
• A layered code base capable of delivering experiences
ranging from pure content to deep, rich interactive
experiences, depending on the scenario.
• User interfaces that can adapt, based on user needs, to a
variety of different devices.
• Different user experiences across different contexts,
depending on how the user visits and interacts with the site.
For example, the desktop site has a horizontal menu, while
the mobile site has a hamburger menu on the left-hand side.
• Often, mobile web design tailored to the specific activities
users perform on such devices — for example, "touch-to-call"
icons and location finders centered on a primary screen for
mobile users.
• Highly efficient website performance, owing to design and
content streamlined to each use case and point of access.
ADAPTIVE DESIGN
an experience
customized to each
context in which a
user may engage
Adaptive design: multiple sites, depending on device

PROS
RESPONSIVE ADAPTIVE
• One code base to maintain.
•
devices, including devices that
have not yet come to market.
•
independent of
browser resolution.
•
• Can produce a site that delivers
context-relevant content to
a variety of users.One website fits multiple
Resulting site is totally
No database integration
is required.
• Content loads faster on mobile
devices, especially if server-side
scripting is involved.
•
for those who don’t have the latest
browser or device.
UX/UI performance is better

CONS
X
RESPONSIVE
• Does not serve customized
content in different contexts.
• by delivering
large files, such as images,
inefficiently.
Slows load times
•
for any user accessing site on an
older browser or device.
Renders incomplete experience
• Can use a lot of JavaScript
which some users disable.
•
scripting can take longer and
cost more to build.
Designs reliant on server-side
•
present more challenges.
Implementation of site can
ADAPTIVE

Studying users’ browsing habits offers a better
understanding of why they visit a particular website. And
certain trends begin to emerge. One trend we typically
comes from a narrow selection of devices; perhaps
25% of all devices on the market. Prioritize designing
for those devices and browsers.
Another factor to consider is where the traffic comes from.
Are users visiting the site from desktop-based Google
searches, or does the majority of the traffic come from a
mobile app?
social media sites, such as Facebook or LinkedIn?
Perhaps the most important datapoint to consider is how
user behavior differs across devices, or if it differs at all.
Sometimes, mobile and desktop users visit a website for
the exact same reason. In other cases, mobile users visit
a website primarily to look up directions to a particular
destination, while computer users primarily visit to read
longer articles or information pieces.
1 LOOK AT CURRENT USER DATA TO DETERMINE WHAT ROUTE TO TAKE
One trend we
typically notice is
that 80% of our
traffic comes from
a narrow selection
of devices.

Because the majority of traffic growth on the web today comes from
mobile and tablet devices, brands must now prioritize mobile users
in their strategy. There is good reason to prioritize a mobile-first
approach. When people plan a website redesign with desktop as
the ideal target, they often include a lot of features and interactivity
that add little to the ﬁnal product, other than ensuring a mobile
anticipated. The resulting site tends to break down when viewed on
all mobile devices — and many tablets, too — while competitors are
investing in streamlined UX that accommodates a wide variety of
devices, browsers, and platforms.
The beauty of the mobile-first approach is that it treats mobile users
as the default users of a website, while deploying progressively larger
or more complex experiences to users visiting that site on personal
computers. Often, this approach includes treating content and media
units as discrete modules that can be rearranged in a variety of ways
with stylesheets, scripting, or database queries to suit multiple users
in a wide variety of scenarios.
The best approach to designing a website depends intimately on
why mobile users visit the site and what they do when they arrive.
If half or more of an organization’s website traffic comes from mobile
phones — or mobile users visit the existing site for a select few tasks or
pieces of content — an adaptive design path that yields two different,
distinct user experiences for mobile and desktop often works best.
However, if website visitors overwhelmingly use computers or standard
tablets, or tend to access the same content and functionality regardless
of device, a responsive design approach might best suit the new site.
2 LET “MOBILE FIRST” DESIGN LEAD THE WAY
f in
f in
f in
f in
f in
f in
Separate web and mobile sites
2008 2011 2014
Website and separate mobile app Mobile-first website suits all devices
Prioritizing for
mobile treats
mobile users
as the default,
while deploying
more robust
experiences to
desktop users.

With data from analytics in tow, it’s easier to bucket site content into specific
categories. To start, it helps to consider the site’s core message. Does the
current site communicate that message or does it need some work? While
reviewing the current layout, we like to consider whether visitors can easily
find the content they’re looking for. We ask questions like: Do we need to
move a couple features or pieces of content up higher in the site navigation
hierarchy? Or perhaps move them higher on the home page? Would our users
rather watch videos or read articles?
UX designers will typically conduct a series of user tests to determine how
well a website’s information architecture is working. Often, a quick usability
study can be completed in one day by walking customers through a couple
core tasks and watching how easily and fluidly they navigate and engage
with the site. These insights will dictate how to organize, stack, and classify
all the content on a website.
Remember: Content does NOT need to be in the same location for computer,
tablet, and mobile users. In fact, the experience is often much improved if
site content is arranged based on the speciﬁc tasks users visit the site to
perform on each device.
A logical and user-friendly navigation is an integral component of the website’s
overall success. Does the organization’s existing site have a complex, multi-
level navigation or a simple, single-tier nav? And what would the ideal-state
navigation look like. We like to consider how the navigation might look and
feel on a desktop computer, various sizes of tablets and mobile phones, and
even wide-screen displays. We imagine how it stacks, and what links are top
priority for each user scenario.
3 PRIORITIZE WHAT USERS VALUE
One site, multiple configurations
Responsive Design
Usability testing
dictates how to
organize, stack,
and classify all
the content on
a site.
Multiple sites, depending on device
Adaptive Design

Phones/Phablets
DEVICE RESOLUTION
Apple iPod 1136 x 640
Apple iPod 4th generation 960 x 640
Apple iPod Touch 1136 x 640
Apple iPhone 4 and 4S 960 x 640
Apple iPhone 5 and 5S 1136 x 640
Apple iPhone 6 1334 x 750
Apple iPhone 6 Plus 1920 x 1080
Samsung Galaxy II 800 x 480
Samsung Galaxy III 1280 x 720
Blackberry 10 1280 x 768
Blackberry Z10 1280 x 768
Tablets
DEVICE RESOLUTION
Apple iPad 2 1024 x 768
Apple iPad with Retina display 2048 x 1536
Apple Mini 1024 x 768
Kindle Fire (1st gen) 1024 x 600
Kindle Fire (2nd gen) 1024 x 600
Kindle Fire HD 7 1280 x 800
Kindle Fire 8.9 1920 x 1200
Samsung Galaxy Tab 10 1280 x 800
Samsung Galaxy Tab 7 and 7 Plus 1024 x 600
Acer Iconia Tab 1280 x 800
Blackberry Z10 1280 x 768
PREVALENCE WIDTH
15% of global users 1280 px
Most Common Personal Computer Monitor Widths Around The World
4 THINK BEYOND THREE BREAKPOINTS

OTHER WEBSITE FEATURES TO CONSIDER
• Smart forms, which store and thus “remember” user information after it is entered once.
• Geolocation enabled maps, content, reviews, or contact information.
• Layouts tailored to how your users hold their devices — portrait or landscape.
• Video content independent of Flash, so it can play on any device.
• Content and imagery tailored to high resolution devices — think vector images, simple graphics and
small file sizes.
• Articles formatted as distinct web pages instead of clunky PDFs or PPTs.
• Content formatted to its intended function — for example, form fields that are fluid and responsive
verses buttons that should remain the same general size for ease of touch.
• Features tailored to the intended audience and device, such as videos for tablet/desktop users and
contact icons for mobile users.
• 3 or more breakpoints, based off the most common devices/screen sizes used by visitors.
Common Website BreakpointsScreen Size Ratios
RESPONSIVE
FORMS
GEO-LOCATION
USE VIDEO OVER FLASH
320px 768px 1280px 1920px

The right approach to a website redesign depends on
who its users are, why they visit the site, and what they
do when they arrive. In addition, the right approach
to a redesign is intimately tied to the format and
presentation of the website’s content. We find that
we get a great snapshot of customer behavior — as
well as some insight into how users engage across
various digital touch points — by discovering how typical
users find the site, engage with it, and move through
it. Bottom line: For a website to succeed, you have to
develop a clear picture of who its users are.
Bottom line: For a
website to succeed,
you have to develop
a clear picture of
who its users are.
5 BUILDING AN EXPERIENCE THAT DELIGHTS ALL USERS

Are there specific features they might be more likely to access on a mobile device, such
as a store locator, or features they might prefer to access on a personal computer, such
WHAT ARE USERS’ BROWSING PATTERNS AND HABITS?
☐ What browsers are most and least popular among the user base?
☐ Which devices?
☐ Why do people come to the site?
☐ What are their top 3 to 5 visited pages or content areas?
☐
as a shopping cart?
HOW ARE THEY FINDING THE SITE?
☐ Which keywords are they using?
☐ Do targeted, keyword-rich URLs currently exist?
☐ Are there separate URLs for mobile and desktop devices?
☐ Should the new website be better integrated with social media?
WHAT TYPES OF CONTENT DOES THE CURRENT WEBSITE CONTAIN?
☐ How should it be formatted?
☐ Is the website full of PDFs or content-heavy articles?
☐ Is most of the content in interactive format?
☐ Do customers need to enter a password to access content?
☐ Does the content need to be rewritten or reorganized?
WHAT TYPES OF MEDIA DOES THE WEBSITE CONTAIN?
☐ Does it display videos?
☐ Will the site include high-resolution photographs or interactive GIFs?
☐ Will the design strategy rely on flat icons or graphics?
KEY GUIDING QUESTIONS
RESPONSIVE, ADAPTIVE, OR HYBRID?
CHECKLIST:

In 2012, Atmosphere Proximity forged a partnership with Emirates Airlines to devise and execute a multi-stage digital design
and strategy engagement. The goal of our partnership is to engage airline customers at multiple digital touch points while
ensuring they can research and book air travel on multiple devices, in any location, and under a broad variety of circumstances.
Atmosphere Proximity’s UX department currently steers the process of developing and launching new Emirates Airlines
digital/interactive properties that accommodate customers traveling around the world. One recent offering is different
online ticket-booking experiences tailored to users on computers and mobile devices.
Our work includes:
luggage check-ins and itinerary planning.
all of them.
Our deliverables include:
case
EMIRATES AIRLINES
1 study

GuinnessAmplify.com is an example of the mobile-first perspective that is increasingly a chief focus of
good responsive design. By using the same hamburger menu for mobile and desktop breakpoints, the
agency team was able to make excellent use of space while developing features that worked equally well
on mobile phones and widescreen monitors. One example of a responsive feature is the website footer,
which spans its entire width on desktop, and wraps around snugly to fill the compact space when users
access the site by mobile phone. Another example of the team’s mobile-first thinking concerns website
data submission. Only users on desktop or tablet devices had the ability to log into their self-created
accounts and enter data about participating bands or venues, ensuring precision while reducing the risk
of error, since any user-entered data about a band or pub was pushed live as soon as it was entered.
GUINNESS AMPLIFY
In Summer 2014, AMV BBDO launched a new website aimed at music lovers, bands, and pub/venue
owners across Ireland. This website, called Guinness Amplify, provides a platform to champion up-
and-coming musicians across Ireland while connecting fans of live music with new bands that want
an audience. The site also hooks venues up with potential acts they can book, allows musicians to
attend workshops featuring panels of music experts, and finally, gives each band a chance to enter
a February 2015, Guinness-sponsored showcase of the best live acts in the nation.
2 case study

REFERENCES
1. http://www.smashingmagazine.com/2010/07/19howtousecss3mediaqueriestocreateamobileversionofyourwebsite/
2. http://www.uie.com/brainsparks/2012/07/20/aarongustafsonadaptingyourdesignswithprogressiveenhancement/
3. http://www.guypo.com/uncategorized/realworldrwdperformancetake2/
4. http://www.undertone.com/wpcontent/uploads/2013/07/ResponsiveDesign_WP.pdf
5. http://www.pewinternet.org/factsheets/mobiletechnologyfactsheet/
6. http://www.smashingmagazine.com/2014/07/22/responsivewebdesignshouldnotbeyouronlymobilestrategy/
7. http://www.nielsen.com/content/dam/corporate/us/en/reportsdownloads/2014%20Reports/thedigitalconsumerreportfeb2014.pdf
8. http://www.idc.com/getdoc.jsp?containerId=prUS24314413
9. http://bjango.com/articles/designingforretina/
10. Interview with Tom Sunshine, Friday, August 15th, 2014
11. Interview with Michael Moroney, Friday, August 15th, 2014
12. http://caniuse.com/#search=media
13. http://alistapart.com/article/responsivewebdesign
14. http://www.techrepublic.com/blog/webdesigner/whatisthedifferencebetweenresponsivevsadaptivewebdesign/
15. http://www.smartinsights.com/mobilemarketing/
16. mobilemarketinganalytics/mobilemarketingstatistics/
17. http://hbr.org/2013/01/howpeoplereallyusemobile/ar/1
18. http://mobithinking.com/mobilemarketingtools/latestmobilestats/e#appwebsubstitute
19. http://www.slideshare.net/bryanrieger/rethinkingthemobilewebbyyiibu
20. http://www.slideshare.net/nstop/adaptivemobileuxdesignextendedversion
21. http://mobiforge.com/designdevelopment/mobilewebcontentadaptationtechniques
22. http://blog.cloudfour.com/cssmediaqueryformobileisfoolsgold/
23. http://mobithinking.com/mobilemarketingtools/latestmobilestats/
24. http://tripleodeon.com/2010/10/notamobilewebmerelya320pxwideone/
25. http://www.ciop.com/commonresolutionsformobilephonesandtablets/
26. http://www.websitedimensions.com/
27. https://www.apple.com/iphone6/

written and illustrated by
JANE MUDER
edited by
DANIEL CHARNESS
designed by
CHRISTINE CANDIA
WWW.BBDO.COM
WWW.PROXIMITYWORLD.COM
WWW.DIGITALLABBLOG.COM
WWW.ATMOSPHEREBBDO.COM

BBDO Whitepaper—Responsive & Adaptive Design

More Related Content

What's hot(20)

Similar to BBDO Whitepaper—Responsive & Adaptive Design(20)

Recently uploaded(20)

BBDO Whitepaper—Responsive & Adaptive Design