Responsive vs. Adaptive

Responsive,

Adap.ve,
Mobile

Which
Path
is
Right

for
Me?

Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Agenda

•  Mobile Trends
•  Types of mobile sites
•  Adaptive Web Design verses Client Side Responsive
•  Closing Notes

Milestone
at
a
glance

Drive online revenue and profitability for our clients
Silicon Valley ~ Chicago ~ India
180 employees ~1500 Clients
Digital marketing software and services for hospitality

Mobile
Internet
is

growing
fast!

Understand
the
user

intent…

§  Desktop User
§  Office hours
§  Research about property,
specials, events, reviews
and detailed information
§  Mobile User
§  Lunch breaks/Starbucks
§  Looking for property location,
maps and directions, click to call
reservations, local area guide
§  Tablet User
§  Evening hours
§  Looking for visual
content about
property and
destination

Mobile
search
and

hospitality
industry

•  Global smartphone use will
reach 2 billion by 2015
(Bloomberg)
•  Across all industries, mobile
traffic is increasing by 3.5
percent per month (Televox)
•  Of the estimated 30 billion
annual mobile searches, about
12 billion are local searches
(Search Engine Land) – hotel
search is a local search
•  Local mobile searches (85.9
billion) are projected to exceed
desktop searches (84 billion)
for the fist time in 2015
(eMarketer)

What
are
mobile
users

doing?

Desktop is a Cash Cow, Mobile is the Rising Star

Mobile
conversions

can
be
big!

•  Multi screen search behavior

Mobile
visitor

behavior

Use Google Analytics
1. Go into Traffic > Search Queries
2. Select Mobile Filter

3
op@ons
for
your

mobile
sites

RESPONSIVE CLIENT SIDE
1.  Same website & URL
2.  Different layout but same
elements resized
3.  Same content for desktop, mobile
& iPad
4.  Sites are download heavy
Adaptive Responsive (RESS)
1.  Same URL and website
2.  Different layout, different
elements
3.  Different content /same
content served according to
device for desktop, mobile and
I-pad.
4.  Site speed is good and server
side caching is effective
SEPARATE MOBILE SITE
1.  Different URL
2.  Different layout
3.  Different content for desktop and
different for mobile.
4.  Sites are download heavy
5.  Need canonical and rel=alternate
tags to be implemented
1 2 3

Breakpoints:

Responsive
vs.

Dynamic
serving

Client side Responsive/RWD/ Adaptive /Dynamic Server side/RESS
Responsive design is client-side, meaning the whole page is
delivered to the device browser (the client), and the browser then
changes how the page appears in relation to the dimensions of the
browser window
Adaptive design is server-side, meaning before the page is even
delivered, the server (where the site is hosted) detects the attributes
of the device, and loads a version of the site that is optimized for
device type
Same web URL consistent across all devices Same web URL consistent across all devices.
Content stays the same across all devices Same content can be shown across all devices or ability to
customize meta and content shown per device
Both desktop and mobile devices download the entire web page Render only those components viewable on requested device
With responsive, the device itself does the work with media
queries to display the re-sized images and optimized layout
With adaptive, the server does the work and delivers the page
already optimized.
Small images are loaded first and then replace with larger images
designed for broadband/desktop experience.
Images can be further optimized for mobile and tablet experience
Page load time is high Page Loading time can be controlled based on device type
CSS/JS changes require to make site compactable for new devices RESS leaves the heavy lifting to the server rather than requiring
relatively low powered device to do all the work
Require 25-30% more development (compare to RESS) to build and
maintain
The server side approach saves on development time

Adaptive Responsive
•  Same URL with two options
•  Same Content
•  Different Content
•  Different elements based on
device type
•  Server-side content
optimization to reduce
download time
•  Integrated with CMS and
analytics
Separate Mobile
•  Different URL
•  Different layout
•  Different content for desktop
and different for mobile
•  Integrated with CMS

Search
engines
are
focusing
on

mobile
experience

http://googlewebmastercentral.blogspot.in/2013/06/changes-in-rankings-of-smartphone_11.html

Separate
mobile
site

•  Desktop Pages – Rel Alternate
(assuming every desktop page has
mobile equivalent)
•  Mobile Page – Rel Canonical tag on
the mobile site pointing back to
desktop site
•  Selectively do 301 redirect for pages
which do not exist on the mobile site

Responsive
Site

Mobile
Tablet
Desktop

Client
side
responsive

design

•  Requires multiple CSS
stylesheets so that site
displays correctly on
the following
viewports:
•  320 × 480 Phone
(portrait)
•  480 × 320 Phone
(landscape)
•  480 × 800 Small Tablet
(portrait)
•  800 × 480 Small Tablet
(landscape)
•  768 × 1024 Large
Tablet (portrait)
•  1024 × 768 Large
Tablet (landscape)
•  1280 × 800 Desktop

Adap@ve
Responsive

•  New Gestures
•  Jquery Swiping (photo gallery)
•  Pixel Width of average finger
DESKTOP
SITE
TABLET
SITE
MOBILE
SITE

Wireframes
for

Diﬀerent
Devices

How
Does
Adap@ve

Works?

User goes to website
Server-side script renders HTML referencing the
JavaScript and CSS files for device
Server-side script detects
user’s device type
Tablet.css
Tablet.js
Phone.css
Phone.js
Desktop.css
Desktop.js
We serve
appropriate JS and
CSS based on users
browsing device

Adap@ve
Responsive
is
preferred

Impact
of
download
@me
on
conversion

Just One Second Delay In Page-Load Can Cause 7% Loss In
Customer Conversions
1sec = 7%Load Delay Conversion Drop

Using
Page
speed

Insights
to
test

http://developers.google.com/speed/pagespeed/insights/

Mobile
Integra@on

•  Manage desktop, mobile, tablet from one interface
•  Device-specific preview option
•  Option to manage meta tags based on device type
Mobile integration

Key
Take
Aways

•  Know your audience search behavior
•  Decide best mobile solution for your business
•  Do not 301 redirect all pages to mobile home
•  If you decide to do separate mobile site, do rel alternate and
rel cononical
•  Do performance testing
•  Adaptive Responsive (RESS) can be good if done carefully

Know
Great
People?

http://jobs.milestoneinternet.com
•  Director of Client Services (Chicago)
•  Recruiter (Chicago)
•  Sr. Manager, Paid Search (Chicago)
•  Account Managers (Chicago and
Santa Clara)
•  Social Media Team Lead (Santa Clara)
•  Social Media Account Manager
(Chicago)
Top Reasons to Work for Milestone
•  Great place to learn with
phenomenal growth opportunity
•  Work with a fun, amazing,
talented team
•  Benefits: Medical, dental, vision,
401K, vacation, sick and holiday
pay
•  Exciting and innovative work
environment
•  Breakfast and Happy hour every
Friday
•  Monthly events and quarterly
outings

Thank
You

Questions?
Benu Aggarwal
benu@milestoneinternet.com
www.milestoneinternet.com
blog.milestoneinternet.com
twitter.com/milestonemktg
facebook.com/MilestoneInc
google.com/+MilestoneInternet

Back
up

Page
speed
insights

for
mobile

•  PAGE ABOVE THE FOLD MUST RENDER UNDER A
SECOND on a mobile network.
•  Majority of users access the page from a 3G network. Typical
breakdown of a second while accessing a page
•  Research shows any delay longer than a second will not keep
user engaged

To
meet
the
1
sec

criteria

1.  Reliable hosting provider
Server must render the response (< 200 ms) – This is the server
response time that it takes the server to return the HTML. This
factors in the network transport time
2.  Minimize redirects
Number of redirects should be minimized – One additional HTTP
request can add one or two extra network round trips (A good
time to look into all the redirects we are doing)
3.  Use inline CSS above the fold
Avoid external blocking JavaScript and CSS above-the-fold
content
4.  Browser layout and rendering (200 ms)
This is the time required to parsing the HTML, CSS & JS.
5. Optimize JavaScript execution and rendering time

Java
Script
and
CSS

comparison

Mobile
website
QA

tools

•  Other tools are used for testing
•  User agent switcher for Firefox & Chrome
•  http://quirktools.com/screenfly/
•  http://responsivetools.com/site-url/
•  Mobilizer
•  Physical devices Ipad & Iphone

hTp://quirktools.com/
screenﬂy/

Responsive vs. Adaptive

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (15)

Similar to Responsive vs. Adaptive

Similar to Responsive vs. Adaptive (20)

More from Benu Aggarwal

More from Benu Aggarwal (20)

Recently uploaded

Recently uploaded (20)

Responsive vs. Adaptive