© 2014 Catalyst May 22, 2014

Responsive vs. adaptive vs. device-specific:

The best mobile strategy for your website

Justin Morelli, UX Designerjmorelli@catalystinc.comwww.catalystinc.com

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

jmorelli@catalystinc.com

www.catalystinc.com

Twitter: @scienceplussoul

Facebook: facebook.com/scienceplussoul