responsive & adaprove design
TRANSCRIPT
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