This document discusses responsive, adaptive, and device-specific design strategies for mobile websites. Responsive design uses CSS to resize layout and content based on screen size, requiring only one code base. Adaptive design detects the device and loads optimized content, requiring more technical skills. Device-specific sites redirect to separate mobile pages, best as launching points not full sites. The best solution uses all three together based on content needs. Designing for small screens first optimizes the mobile experience.

1. © 2014 Catalyst
May 22, 2014
Responsive vs. adaptive vs.
device-specific:
The best mobile strategy for
your website
Justin Morelli, UX Designer
jmorelli@catalystinc.com
www.catalystinc.com

2. 30%-60% of Web traffic is mobile
2
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
3
Uses CSS (cascading style sheets) to resize
your site layout and content, based on
the window size of the Web browser.

4. Responsive design
4
Pros:
No advanced scripting required
Restructures your content to any size window or device
Requires only one set of code
A 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 device
IE 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
5

6. Responsive design
6
Cons:
If you didn’t design for it, your current page templates will
probably 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 are only scaled for mobile, which can have
an impact on load times over the air
All content is loaded regardless of device:
Can slow down load times

7. Adaptive design
7
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
8
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 responsive
Single URL for each page is good for SEO
Most browsers support it

9. Adaptive design
9
Cons:
Requires a more technical approach. May require
application developers for server-side requests
Requires 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 sites
10
Redirects 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
11
Pros:
A very focused experience to speed a 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

12. Device-specific sites
12
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 reason
Not a flexible approach

13. 13
At a glance
comparison

14. Which is best?
14
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?
15
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?
16
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
17
Example – mobile banking:
You may want a device-specific landing page to get the
user to the branch locator 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

18. Design for the small screen first
18
In all cases, rethink your Web strategy to
design for the small screen first:
Think about the content your customers want
Think about the context in which they are experiencing your
content
Don’t assume your customers want less on a phone or tablet
Do assume they want it to be quick and easy – on any
device

19. About the author: Justin is a multichannel
marketing strategist, UX designer and business
analyst who specializes in aligning user
experiences with business goals.
19

20. About Catalyst: Catalyst is a direct and digital
marketing agency that helps clients acquire,
retain and develop long-term relationships
with their customers.

21. For more information, contact Justin Morelli,
UX Designer, at jmorelli@catalystinc.com
www.catalystinc.com
Twitter: @scienceplussoul
Facebook: facebook.com/scienceplussoul