RESPONSIVE & ADAPTIVE DES IG N

DECEMBER / 2014

DELIVERING WEBSITES THAT DELIGHT YOUR USERS

WHAT IS UX?

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 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%

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

Responsive design: one site, multiple configurations

adapting a website layout to fit different screen sizes, widths, and resolutions

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

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

CONSADAPTIVERESPONSIVE

• 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

CHOOSING THE BEST

WEBSITE UX

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.

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 in

f in

f in

f in

f in

f in

Separate web and mobile sites

2008 2011 2014Website 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 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.

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

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

VIDEO NOT 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

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 QUESTIONSRESPONSIVE, 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:

● • 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 studyEMIRATES AIRLINES

1

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

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 by

JANE MUDER

edited by

DANIEL CHARNESS

designed by

CHRISTINE CANDIA

WWW.BBDO.COM

WWW.PROXIMITYWORLD.COM

WWW.DIGITALLABBLOG.COM

WWW.ATMOSPHEREBBDO.COM