Responsive vs. adaptive vs. device-specific: which one is best?
-
Upload
catalyst -
Category
Technology
-
view
208 -
download
2
description
Transcript of Responsive vs. adaptive vs. device-specific: which one is best?
© 2014 Catalyst May 22, 2014
Responsive vs. adaptive vs. device-specific:
The best mobile strategy for your website
Justin Morelli, UX [email protected]
2
30%-60% of Web traffic is mobile
It’s a given that you need a mobile version of your site.
But how do you deliver the best mobile experience to drive conversions and meet business goals?
3
Responsive design
Uses CSS (cascading style sheets) to resize your site layout and content, based on the window size of the Web browser.
4
Responsive design Pros:
No advanced scripting requiredRestructures your content to any size window or deviceRequires only one set of codeA single page URL is good for SEO (vs. one for desktop, another for tablet, a third for mobile)Mobile and tablet browsers support it
Over 85% of all browsers support it regardless of deviceIE 8.0 doesn’t … but you can use a static width without affecting mobile at all
5
86.93% of browsers support CSS3 Media Queries
6
Responsive design
Cons:If you didn’t design for it, your current page templates will probably need to be redoneDoesn’t always play nice with a CMS (Content Management System) because the code in many CMSs is not easily modified (this is changing though)Large images are only scaled for mobile, which can have an impact on load times over the airAll content is loaded regardless of device:
Can slow down load times
7
Adaptive design Like responsive, adaptive resizes and restructures content, but in a different way.
It detects which device you’re using and loads only the content specific to your device.
It’s done on the client side with JavaScript or on the server side when a page is requested.
8
Adaptive design
Pros:Loads quicker and more efficiently because it loads only the content or images for your device, browser width, or pixel density (e.g., iPhone® retina display)Can load to completely separate templates, based on device. Good if your existing templates are incompatible with responsiveSingle URL for each page is good for SEOMost browsers support it
9
Adaptive design
Cons:Requires a more technical approach. May require application developers for server-side requestsRequires JavaScript for client-side use (usually not a major concern)May require significantly more time to maintain and update multiple templates and code bases
10
Device-specific sitesRedirects you to a separate mobile page or mobile site. Typically associated with mobile phones vs. tablets, but can be used with either.
Often direct you to the most important information you may need on the go, such as store hours, phone numbers or top links. Usually followed by an option to view full site content.
11
Device-specific sites
Pros: A very focused experience to speed a user to his/her end goalThe experience is directly created for the specific device and not concerned with supporting other devicesCan be quickly set up to support top content
12
Device-specific sites
Cons:Not good for a full site experience, because a user will not be able to find the same content easily on different devicesBad for SEO for the same reasonNot a flexible approach
13
At a glancecomparison
14
Which is best?
Responsive design is the most flexible solution.
It offers a single point of maintenance and allows for support of new devices that may be released … effectively working on any size screen.
SUMMARY – Responsive design
15
Which is best?
Adaptive design may allow for the most optimized experience.
It loads only the elements needed for your device. If done properly it can speed download times for mobile devices.
SUMMARY – Adaptive design
16
Which is best?
A device-specific site is best used as a launching point for specific site experiences.
You may need a separate version of the site for a landing page interstitial or mobile banking, but it’s not great for most full sites.
SUMMARY – Device-specific site
17
Best solution: Use all three together
Example – mobile banking: You may want a device-specific landing page to get the user to the branch locator or other frequently used pagesFor users who move on to the full site content, you may want a responsive layout for the bulk of the site content to make sure it is accessible (and easy to maintain) You may have some pages that would be best served using adaptive design, such as a loan calculator
18
Design for the small screen first
In all cases, rethink your Web strategy to design for the small screen first:
Think about the content your customers wantThink about the context in which they are experiencing your contentDon’t assume your customers want less on a phone or tabletDo assume they want it to be quick and easy – on any device
About the author: Justin is a
multichannel marketing strategist, UX
designer and business analyst who
specializes in aligning user experiences
with business goals.
19
About Catalyst: Catalyst is a direct and
digital marketing agency that helps
clients acquire, retain and develop
long-term relationships with their
customers.
For more information, contact Justin
Morelli, UX Designer, at
www.catalystinc.com
Twitter: @scienceplussoul
Facebook: facebook.com/scienceplussoul