Upload
effectiveui
View
109
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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