Considering that mobile and tablet users constitute an ever-growing share Internet traffic, designing websites with a mobile-first strategy is crucial to a sites success. This paper considers the two UX design techniques that can bring beautiful web design to the smaller screen.

1. RESPONSIVE & ADAPTIVE DESIGN
DECEMBER / 2014
DELIVERING WEBSITES THAT DELIGHT YOUR USERS

2. WHAT IS UX?

3. 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

4. WHY IS TODAY’S USER EXPERIENCE DIFFERENT?
>

5. 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 THEIR 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%

6. RESPONSIVE DESIGN
ADAPTIVE DESIGN?
or

8. 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
Responsive design: one site, multiple configurations
adapting a website layout to fit different screen sizes, widths, and resolutions

9. 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.
RESPONSIVE 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

10. PROS
RESPONSIVE
ADAPTIVE
• One code base to maintain.
• One website fits multiple devices, including devices that have not yet come to market.
• Resulting site is totally independent of
browser resolution.
• Does not require
database integration.
• Can yield a website that delivers context-relevant content to a variety of users.
• Often loads faster on mobile devices, especially if serverside scripting is involved.
• Provides better user experience for those who don’t have the latest browser or device.

11. CONS
ADAPTIVE
RESPONSIVE
• Does not deliver customized content to different user contexts.
• Slows load times by delivering large files, such as images, inefficiently.
• Renders an incomplete or frustrating experience for users accessing site on older browsers or devices.
• Can rely too much on
JavaScript, which some users may disable.
• Can rely heavily on server- side scripting, which adds time and cost to project.
• Frequently presents more challenges during the implementation stage.
X

12. CHOOSING
THE BEST WEBSITE UX

13. 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 notice when studying analytics is that 80% of our traffic 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? What percentage of the site’s traffic comes from mobile devices? Does the site get any traffic from 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 that 80% of traffic comes from a narrow selection of devices.

14. 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 final product, other than ensuring a mobile integration process that is both more difficult and expensive than 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
infinfinfinfinfin
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.

15. 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 specific 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
Multiple sites, depending on device
Responsive Design
Adaptive Design
Usability testing dictates how to organize, stack, and classify all the content on
a site.

16. 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
31% of global users
1366 px
13% of global users
1920 px
10% of global users
2560 px
Most Common Personal Computer Monitor Widths Around The World
4
THINK BEYOND THREE BREAKPOINTS

17. 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.
Screen Size Ratios Common Website Breakpoints
RESPONSIVE
FORMS
GEO-LOCATION
VIDEO NOT FLASH
320px 768px 1280px 1920px

18. 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

19. 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?
● ☐ 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 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:

20. 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:
● • Making the ticket booking process smooth and simple.
● • Providing customers with vital information in easy to access formats, including flight times, trip information, prices, luggage check-ins and itinerary planning.
● • Increasing the number of customer-facing digital touchpoints with a cohesive and consistent user experience uniting all of them.
● • Prioritizing digital features according to the use cases, devices, and browsers that best suit them.
Our deliverables include:
● • Digital ecosystem discovery and strategy.
● • Information architecture and design.
● • Booking engine architecture and design.
● • Measurement and SEO strategy.
● • Governance, guidelines, and training.
● • Data-driven user experience design and front/back-end optimization.
● • Campaign development.
case study
EMIRATES AIRLINES
1

21. 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.
case study
GUINNESS AMPLIFY
2
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.

22. 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/

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