Mobile Website Design: Responsive, Adaptive, or Both?

there is no– one size, fits all strategy� Leverage the right balance of technology options to fit the audience’s & website’s specific needs

� Skilled developers can combine techniques to tailor a mobile solution to fulfill the design requirements and deliver on performance expectations

� In all cases, the website solution needs to consider the purpose of the website, the goals of the business, and the goals of the target audience.

research:behavior trends & device differences

Research

global mobile traffic is rapidly increasingCisco VNI Global Mobile Forcast, 2/2013

� North America leads Europe in mobile traffic, However Japan and Korea are the countries with the most mobile traffic.

� Business mobile data traffic in 2012: North America's grew 59%. Western Europe's grew 34%. Central & Eastern Europe's grew 48%.

� Consumer mobile data traffic in 2012: North America's grew 65%. Western Europe's grew 47%. Central & Eastern Europe's grew 74%.

UK

Germany

France

Russia

US

SMARTPHONE TRAFFICAS % OF TOTAL

38% now52% in 2017

1.84% now22% in 2017

41% now56% in 2017

1.49% now21% in 2017

40% now52% in 2017

0.91% now19% in 2017

25% now59% in 2017

0.50% now16% in 2017

48% now52% in 2017

2.08% now28% in 2017

TABLET TRAFFICAS % OF TOTAL

PHONE

MINI TABLET

TABLET

Research

tablets are used more like PCs� 70% more pages viewed on tablet vs. smartphone The State of Mobile Benchmark, Adobe 2013

� 3 times greater conversion rates on tablet vs. smartphone The State of Mobile Benchmark, Adobe 2013

� Top activities: reading news & entertainment, searching for information, and watch videos

2012 Mobile User Survey, Keynote Systems

While tablets have touch screens, the user goals & tasks associated with the tablet ux are more similar to the user goals associated with the desktop ux than the smartphone ux.

SHARE

SEARCH

phones are social & search tools� 46% of smartphone users use their phone to access social media vs.

16% of tablet users. State of Media: The Social Media Report 2012, Nielson and NM incite

� 79% of respondents have their phone on or near them for all but2 hours of their waking day.

Always Connected, Facebook sponsored 2013 IDC Research report

� Top activities: accessing local information, searching for information & participating in social media.

2012 Mobile User Survey, Keynote Systems

Provide smartphone users with easy ways to search and sort information, and tools to share and email content.

Research

it’s a multi-device experience� 54% of digital consumers in the US engage on both computer & device Marketing to the Multi-Platform Majority, comScore 2013

� 26% of research & decision activity conducted in tablet will drive salesonline via desktop computer

A Mobile Path to Purchase Retail Report 2013, xAD, Telmetrics, and Nielsen

� the full impact of mobile cannot be measured without tracking conversion activities beyond the mobile device

Marketing to the Multi-Platform Majority, comScore 2013

The brand experience & information architecture should be consistent across all devices but relevant to the user’s device.

Research

mobile best practices� remove distractions not content, start with function over form

� include only vital fields on forms and make fields and buttons larger-easier to tap

� think about how the device will be held & how that impacts navigation and button placement

� optimize content for devices (readable text, shorter descriptions & less scrolling for phones than tablet & PCs) users can find more information by drilling down through options.

� build lightweight mobile sites with fast performance(82% of smart phone users expect a web page to load within five seconds)

2012 Mobile User Survey, Keynote Systems

� provide security reassurance (explain to users that their data & financial transactions are safe)

� take advantage of geolocation (mobile location tracking) and one-touch calling (tap phone # to call)

� simplify checkout process by offering fewer steps, showing progress, offer guest checkout

Research

technology:options & limitations

Technology

technology overview� review case studies that showcase technology considerations

� compare technology options (responsive, adaptive, separate sites)

� compare technology from a user experience stand point

� highlight considerations for decision-making

responsive case studies: Avast & Webroot

MOBILE DISPLAY PROBLEMS MUST BE

DEBUGGED

The Avast site displays the desktop site for

mobile for the business section & the cart.

Avast & Webroot compare tables have

some display issues on mobile.

LEVERAGING MOBILE SOCIAL FEATURES

CAN BE DONE WITH RESPONSIVE

Avast & Webroot don’t leverage social tools

(like, share..) on product or content pages

LEVERAGING ROBUST SEARCH TOOLS

CAN BE DONE WITH RESPONSIVE

Avast & Webroot don’t have a search

feature on the site. Search is especially

useful to mobile users when there is a lot of

pages and content to parse.

CONTENT PARITY MAY NOT PRODUCE

THE BEST UX

Avast & Webroot should be optimized for

mobile and show only content relevant to

the device. (example: mobile sites should

only show downloads that are relevant to

the mobile device)

For both, contact is positioned in the same

place and represented the same amount on

all devices (contact should be weighted

more on mobile- especially for business)

For Webroot, promotional banners on the

mobile UX push down content significantly

For both, very long content should be

sectioned so that users can drill into or

expand for more content. This helps

mobiles scan easier.

AVAST

WEBROOT

separate sites case studies: Intel & Target

SEPARATE SITES WORKS WELL FOR

OPTIMIZING ROBUST SOLUTIONS

Intel & Target presents different content

specific to desktop and mobile . Mobile

solutions are more visible on the mobile

device. Content that is not as desirable on

mobile is removed or minimized.

TAKES ADVANTAGE OF OPTIMIZED

FEATURES FOR EACH DEVICE

The Intel homepage has an interactive

module that is replaced with a vertical simpler

version on mobile. This shows the benefit of

optimized features.

Target’s homepage content is geared towards

the device audiences. Mobile products are

featured on the mobile experience. Target has

a mobile optimized gift finder and a desktop

optimized gift finder.

Intel compare tables are represented

differently & optimized for the best desktop

and mobile display.

Intel & Target allow users to share at the

product level. This is especially useful to

mobile users

Intel & Target’s search improves all

experiences but is especially beneficial on

mobile

TABLET EXPERIENCE SHOULD BE

OPTIMIZED FOR TABLETS

There should always be special considerations

for tablets (don’t just use the desktop version)

so that portrait display and navigational

elements are optimized. Intel doesn’t do this.

OPTIMIZED NAVIGATION

Intel & Target leverage intuitive navigation

optimized for mobile considerations. (Intel

navigation slides over page content, Target

uses an off-canvas navigation)

INTEL

TARGET

additional case studies

BOSTON GLOBE

The Boston Globe is an example on an effective

responsive design solution. Allows users to save

content for later. Fast performance due to it being

image light. The navigation is harder to use on mobile

because it doesn’t show the same depth as the

desktop version. Handles search well.

MICROSOFT

Microsoft is a good example of a responsive design

with adaptive elements that has effective mobile

navigation. Microsoft uses a mobile first responsive

only model for navigation. It handles deep navigation

gracefully on mobile but it only surfaces deeper

navigation on click on the desktop experience.

WORLD WILDLIFE FUND

World Wildlife Fund is a good example of a well

executed responsive solution that uses an adaptive

navigation module. The navigation is a tailored

experience for mobile.

NIXON

Nixon is a good example of a simple responsive

ecommerce site that uses an adaptive elements. The

off-canvas navigation (adaptive element) on the

smartphone design leverages a popular mobile design

trend that was first used by Facebook. Grid filtering is

handled well across all devices. Search & social media

are being handled effectively.

definitions

Responsive Design creates a layout that scales to the browser by using fluid, proportion-based grids, flexible images, and CSS3 media queries. The same media is delivered to all devices and adjusted at the time of display, which may impact performance on more limited devices.

For Example, column and text size adjusts and reflows based on page width. (Example site: http://thenextweb.com)

Adaptive Design detects the characteristics of a device to select among several available variations of site elements. Adaptive design may be implemented with either server-side or client-side (JavaScript) logic and can optimize the set of delivered media for the device.

For Example, a collapsed, self-contained navigation replaces page navigation for smartphones. (Example site: http://www.screamingfrog.co.uk)

A Separate Sites approach involves creating different sites for mobile and desktop web users optimized for each device.

Mobile-First Design is a mobile friendly technique to creating a website whereby you start with the smartphone first and then optimize it for tablets and desktops, rather than trying to degrade a complex, image-heavy desktop site to work on mobile phones. Mobile-First Design is a best practice for responsive design.

Technology

technology comparison

Technology

LOWno constraints

ux design constraint

enabling technology

maintenance cost

implementation cost

performance concerns

SEPARATE SITES RESPONSIVE DESIGN

HIGHmanage multiple sites

Server-side redirect

LOW - MEDIUMfew constraints

LOW - MEDIUMmay be same effort as responsive

CSS/JavaScript/Server

HIGHcontent/feature parity unless adding adaptive elements

LOWone set of content to manage

HIGH*building multiple sites

FEWEST

MEDIUM - HIGH*building alternate components

SOMEdepends on enabling technology

LOW - MEDIUM*content parity but testing may increase cost

SIGNIFICANTone set of code/assets delivered to all devices

CSS3

resources needed HTML/JS developers HTML/JS/ Server developers HTML5/JS developersoptional knowledge of css framework (ie. Bootstrap)

ADAPTIVE DESIGN

* There are various scenarios where each could be more effort than another option

ux comparison

SEPARATE SITES RESPONSIVE DESIGNADAPTIVE DESIGN

Technology

100% control

content parity

pixel perfect design

navigation

design layoutinstances

less controltightly coupled code to design causes problems

content & features remainthe same on all devices

customizable - content & features can be unique across devices

should design mobile-first,may be navigation usability issues degrading from desktop to mobile

MOSTdesign all layouts for breakpoints set

flexible design strategy

navigation is optimized for each site

LESSdesigns for each major

device type

more control than responsive

customizable - content & features can be unique across devices

LEASTdesign separate sites

for each device

navigation is optimized for each site

Technology

responsive� Responsive design should be less costly to

maintain but your CMS may have role in weighing the difference

� Responsive design requires the same content and features are used on all experiences(or a smaller set) unless adaptive is added

� SEO should be ideal for responsive, but there may be work arounds with the other solutions

separate sites� May be quicker route for design & approval process

� Content & design can be entirely different across separate sites

� Most CMS can accomodate serving single set of content to seperate sites

� May be able to leverage an existing solution from a development standpoint

VS

Technology recommendation requires understanding the full set of technology constraints and the desired solution

Timeframe for each option is dependent on the resources available and capabilities of the CMS

Technology

responsive & adaptive design overlap� The terms "responsive" and "adaptive" tend to be used inconsistently in the industry, sometimes even interchangeably.

Our working definitions are captured in these articles: http://www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/ http://www.rasmussen.edu/degrees/design/blog/web-design-101-adaptive-vs-responsive-design/

� Most websites designed to serve multiple devices use some mix of responsive and adaptive techniques. This is not an either-or decision. For example, RESS (Responsive Design with Server-Side Components) is essentially a blend of responsive and adaptive strategies. For an example, see http://www.nd.edu

mobile technology considerations� some features (i.e. navigation, comparison tables) can be adaptive modules within a responsive

design if you would like to customize or optimize some portions of the ux across devices

� responsive design techniques can still be used in combination with adaptive design

� responsive design should adopt a mobile-first approach

� to avoid changes to existing solution, use adaptive or separate sites

� performance will be a consideration for any mobile solution

� the technology decision should be informed by UX solution and dev team capabilities

� if content parity is desired, responsive is a good choice.

� if you have concerns about your CMS and want a high degree of separation between UX/visual design/ UI development, then separate sites are a good choice.

Technology