2. 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.
4. Research
SMARTPHONE TRAFFIC
AS % OF TOTAL
global mobile traffic is rapidly
increasing
Cisco 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%.
TABLET TRAFFIC
AS % OF TOTAL
Germany
38% now
52% in 2017
1.84% now
22% in 2017
UK
41% now
56% in 2017
1.49% now
21% in 2017
France
40% now
52% in 2017
0.91% now
19% in 2017
Russia
25% now
59% in 2017
0.50% now
16% in 2017
US
48% now
52% in 2017
2.08% now
28% in 2017
5. Research
PHONE
tablets are used more like PCs
„
70% more pages viewed on tablet vs. smartphone
The State of Mobile Benchmark, Adobe 2013
„
MINI TABLET
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.
TABLET
6. Research
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 but
2 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.
SHARE
SEARCH
7. 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 sales
online 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.
8. 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
10. 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
11. AVAST
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.
WEBROOT
12. INTEL
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)
TARGET
13. additional case studies
BOSTON GLOBE
WORLD WILDLIFE FUND
NIXON
MICROSOFT
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.
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 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.
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.
14. Technology
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.
15. technology comparison
Technology
SEPARATE SITES
ADAPTIVE DESIGN
RESPONSIVE DESIGN
enabling technology
Server-side redirect
CSS/JavaScript/Server
CSS3
resources needed
HTML/JS developers
HTML/JS/ Server developers
HTML5/JS developers
LOW
LOW - MEDIUM
HIGH
no constraints
few constraints
content/feature parity unless adding adaptive elements
HIGH
LOW - MEDIUM
LOW
manage multiple sites
may be same effort as responsive
one set of content to manage
HIGH*
MEDIUM - HIGH*
LOW - MEDIUM*
building multiple sites
building alternate components
content parity but testing may increase cost
FEWEST
SOME
SIGNIFICANT
depends on enabling technology
one set of code/assets delivered to all devices
ux design constraint
maintenance cost
implementation cost
performance concerns
optional knowledge of css framework (ie. Bootstrap)
* There are various scenarios where each could be more effort than another option
16. ux comparison
Technology
ADAPTIVE DESIGN
RESPONSIVE DESIGN
100% control
more control than responsive
less control
tightly coupled code to design causes problems
customizable - content & features
can be unique across devices
customizable - content & features
can be unique across devices
content & features remain
the same on all devices
LEAST
LESS
MOST
design separate sites
for each device
designs for each major
device type
design all layouts for breakpoints set
flexible design strategy
navigation is
optimized for each site
navigation is
optimized for each site
should design mobile-first,
may be navigation usability issues
degrading from desktop to mobile
SEPARATE SITES
pixel perfect design
content parity
design layout
instances
navigation
17. Technology
responsive
„
„
„
separate sites
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
„
„
VS
„
„
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
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
18. 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
19. Technology
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.
