BY JUSTIN MORELLI, UX DESIGNER
POINT OF VIEW
W
ith 30%–60% of website traffic coming from a mobile device, 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?This paper will explore the pros and cons of using responsive design, adaptive design or device-specific sites and tell you which to consider for building the best mobile experiences.
2
Page © 2014 Catalyst
Responsive design
Responsive design is a slick solution that uses CSS (cascading style sheets) to resize the layout and content of your site based on the window size of the Web browser. The easiest way to demonstrate this is to see it in action … if you resize the browser window using a desktop or laptop, you can actually see how a site changes. Try resizing the browser onbostonglobe.com
Pros:
• No advanced scripting required, uses browser-supported CSS • Restructures your content to any size browser window/device • Requires only one set of code for all browsers and devices
• A single URL for a page is good for SEO (vs. one for desktop, a second URL for tablet and yet a third for mobile)
• Mobile and tablet browsers support it. Over 85% of all browsers* support responsive design regardless of device. The ones that don’t (IE 8.0 I’m
looking at you) can fall back gracefully to a static width site and not affect
mobile at all
IE Firefox Chrome Safari Opera BrowserAndroid MobileOpera SafariiOS BlackBerryBrowser Opera Mini Chrome for Android Firefox for Android MobileIE 7 versions back 5.0 21.0 26.0 3.1 12.0 2.1 6 versions back 5.5 22.0 27.0 3.2 12.1 2.2 10.0 5 versions back 6.0 23.0 29.0 4.0 15.0 2.3 11.0 3.2 4 versions back 7.0 24.0 30.0 5.0 16.0 3.0 11.1 4.0–4.1 3 versions back 8.0 25.0 31.0 5.1 17.0 4.0 11.5 4.2–4.3 2 versions back 9.0 26.0 32.0 6.0 18.0 4.1 12.0 5.0–5.1 Previous version 10.0 27.0 33.0 6.1 19.0 4.2–4.3 12.1 6.0–6.1 7.0 CURRENT 11.0 28.0 34.0 7.0 20.0 4.4 16.0 7.0 10.0 5.0–7.0 33.0 26.0 10.0 Next version 29.0 35.0 21.0
86.93% of browsers support CSS3 Media Queries:
*= Does not support = Partially supports = Supports Key
*Global usage share statistics based on data from StatCounter GlobalStats for March 2014. Chart adapted from caniuse.com
Cons:
• If you didn’t design for it, your current page templates likely need to be redone
• Doesn’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 used on desktop browsers are the same in mobile, just scaled
down. This can have an impact on load times over the air
• All the content for desktop, tablet and mobile display is loaded regardless of device. This has a potential impact on load times (like slowing them down)
Adaptive design
Like responsive design, adaptive design resizes and restructures content, but in a significantly different way. It detects which device you are using (or which browser width you are using) and loads only the content (or templates) specific to your device. This can be done on the client side by using JavaScript or on the server side when a page is requested. It is difficult to see in action because it may appear very similar to responsive design.
Pros:
• Loads quicker and more efficiently by loading only the content or images appropriate for your device or browser width or pixel density (e.g., iPhone® retina display)
• Can load completely separate templates, based on device. This is good if your existing templates are not compatible with a responsive approach • Like responsive, a single URL for each page is good for SEO
• Again, most browsers support this just fine
Cons:
• Requires a more technical approach, and may require application developers for server-side requests
• For client-side use, requires JavaScript (usually not a major concern) • Maintaining and updating multiple templates and code bases may require
4
Page © 2014 Catalyst
Device-specific site
A device-specific site redirects you to a separate mobile page or site on a mobile browser. This is more typically associated with mobile phones than tablets, but can be used with either. In many cases device-specific sites will direct you to the most important information you may need on the go, such as store hours, phone numbers or top links. For example, many banks use this approach to help customers link to the online banking page, find an ATM or download the bank’s mobile app. Usually it is followed by an option to view the full site content.
Pros:
• A very focused experience to speed the user to his/her end goal
• The experience is directly created for the specific device and not concerned with supporting other devices
• Can be quickly set up to support top content
Cons:
• Not good for a full site experience, because a user will not be able to find the same content easily on different devices
• Bad for SEO for the same reasons • Not a flexible approach
At a glance
RESPONSIVE ADAPTIVE DEVICE-SPECIFIC
EFFO
RT
At a minimum, the CSS will be updated. Page templates may need to be redone. Design time will be needed for the responsive breakpoints and, worst case, could equal the template effort.
Amount of time will be similar to creating another website skin. Some CMS platforms have built-in support to switch out templates for different devices, which could greatly reduce the time needed.
Can be very quick for a splash page or a small site. Much larger if trying to convert a whole site.
MA
IN
TE
NAN
CE
Relatively low increase in effort, as there is still the same number of templates as before (but with a little more CSS).
Definite increase in effort. The content will still be maintained in one place, but now there can be multiple page templates to maintain. Updates to templates will have to be done in multiple places.
For just a single page or two, the effort will only increase a little. However, as a full site solution, the maintenance effort is very high due to separate templates, pages and content. D O W N FA LL
Current templates may need to be completely redone.
Additional JavaScript code needs to be developed for client-side adaptive, and back-end developers may be involved on server side.
Pages, templates and content will need to be developed and maintained separately.
BE
ST U
SE
All new sites should be using responsive techniques. It just makes sense to build it in from the start.
Use for experiences that won’t translate well to other devices by swapping out for device-specific content. Great for image-intensive sites, as you won’t want to send large images over mobile, and you can load separate “retina” images.
Best used for pages that shouldn’t exist on other devices.
WORST BEST
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.
6
Page © 2014 Catalyst
The best solution
may be to use all
three approaches
together.
About the Author
Justin’s a multichannel marketing strategist, user experience designer and business analyst who specializes in aligning user experiences with business goals. His passions are usability and interface design, particularly in wireframes and prototypes, and he’s particularly fond of his rolling whiteboard.
About Catalyst
Catalyst is a direct and digital marketing agency that helps clients acquire, retain and develop long-term relationships with their customers. We combine intellectual curiosity and inquisitiveness with hard-core analytics, deep customer insight and a measurement mindset to take the guesswork out of marketing decisions. We call it Science + Soul. Headquartered in Rochester, NY, our clients include AAA, AMC Theatres, Eastman Kodak Company, First Niagara Financial Group, Heraeus Kulzer, Oreck, Valvoline, and Xeikon, among others.
800.836.7720 | www.catalystinc.com | Facebook | Twitter | LinkedIn
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.
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 online banking, but it’s not great for most full sites.
The best solution may be to use all three approaches together. Consider the banking example described above. You may want a device-specific landing page to get the user to the branch locator, online banking or other frequently used pages. For 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.
In all cases, you should rethink your Web strategy to design for the small screen first. Think about the content your customers need to see. Think about the context in which they are experiencing your content. Don’t assume your customers want less on a phone or tablet, but do assume they want it to be quick and easy—on any device.
