1. Chicago
•
November
4–7,
2013
•
#SESCHI
@SESConf
Responsive,
Dynamic,
Serving
Mobile
Which
Path
is
Right
for
Me?
Benu
Aggarwal
Milestone
Internet
MarkeBng
Inc.
President
and
Founder

2. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Agenda
• Mobile
Trends
• Types
of
mobile
sites
• Dynamic
Server
Side
verses
Client
Side
Responsive
• QA
tools
• Closing
Notes

3. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Milestone
at
a
glance
Drive online revenue and profitability for our clients
Silicon Valley ~ Chicago ~ India
150 employees ~1500 hotels
Digital marketing software and services for hospitality

4. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Mobile
Internet
is
growing
fast!

5. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Device
behavior
at
different
parts
of
the
day

6. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Understand
the
user
intent…
§ Desktop
User
§ Office
hours
§ Research
about
property,
specials,
events,
reviews
and
detailed
informaUon
§ Mobile
User
§ Lunch
breaks/Starbucks
§ Looking
for
property
locaUon,
maps
and
direcUons,
click
to
call
reservaUons,
local
area
guide
§ Tablet
User
§ Evening
hours
§ Looking
for
visual
content
about
property
and
desUnaUon

7. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Mobile conversions can be big!
Multi screen search behavior

8. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Mobile
visitor
behavior
Use
Google
AnalyUcs
1.
Go
into
Traffic
>
Search
Queries
2.
Select
Mobile
Filter

9. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
3
opUons
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
RESPONSIVE
SERVER
SIDE/
DYNAMIC
SERVING
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
effecUve
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

10. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Breakpoints: Responsive vs. Dynamic
serving
Client
side
Responsive/RWD/
AdapBve
/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
relaUon
to
the
dimensions
of
the
browser
window.
AdapUve
design
is
server-­‐side,
meaning
before
the
page
is
even
delivered,
the
server
(where
the
site
is
hosted)
detects
the
aeributes
of
the
device,
and
loads
a
version
of
the
site
that
is
opUmized
for
its
dimensions
and
naUve
features.
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
enUre
web
page
Most
OpUmized
page
size,
Render
only
those
components
which
are
viewable
on
requested
device
With
responsive,
the
device
itself
does
the
work
with
media
queries
to
display
the
re-­‐sized
images
and
opUmized
layout,
With
adapUve,
the
server
does
the
work
and
delivers
the
page
already
opUmized.
For
images,
small/mobile
images
are
loaded
first
and
then
replace
with
larger
images
designed
for
broadband/desktop
experience.
Images
can
be
further
opUmized
for
mobile
and
tablet
experience
by
taking
advantage
of
the
extra
features.
Page
load
Ume
is
high
Page
Loading
Ume
can
be
controlled,
further
improving
their
experience.
CSS/JS
changes
require
to
make
site
compactable
for
new
devices
RESS
leaves
the
heavy
liling
to
the
server
rather
than
requiring
the
relaUvely
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
Ume
and
also
saves
on
code
management
and
extension
once
the
iniUal
site
has
been
created,
with
less
risk
of
introducing
bugs
and
the
ability
to
target
devices
based
on
fine
grained
device
detecUon.

11. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Comprehensive
Responsive
• Same
URL
with
two
opUons
– Same
Content
– Different
Content
• Different
elements
based
on
device
type
• Server-­‐side
content
opUmizaUon
to
reduce
download
Ume
• Integrated
with
CMS
and
analyUcs
Separate
Mobile
• Different
URL
• Different
layout
• Different
content
for
desktop
and
different
for
mobile
• Integrated
with
CMS

12. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Search
engines
are
focusing
on
mobile
experience
http://googlewebmastercentral.blogspot.in/2013/06/changes-in-rankings-of-smartphone_11.html

13. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Separate
mobile
site
• Desktop
Pages
–
Rel
Alternate
(assuming
every
desktop
page
has
mobile
equivalent)
• Mobile
Page
–
Rel
Canonical
tag
on
the
mobile
site
poinUng
back
to
desktop
site
• SelecUvely
do
301
redirect
for
pages
which
do
not
exist
on
the
mobile
site

14. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Mobile
Tablet
Desktop

15. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Client
side
responsive
design
Requires
mulUple
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

16. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Dynamic
serving
for
different
devices
Mobile
Tablet
Desktop
www.interconUnentalboston.com

17. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Wire Frames for different Devices

18. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
How
does
Responsive
Design
Server
Side
work?
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

19. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
RWD Step-by-step Process
1
2
3
Research
• Keywords (same as desktop)
• Content writing (same as desktop)
5
4
Design
• Follow w3 guidelines
Programming
Testing/QA
• Validate site in simulators and emulators
7
Site live on same URL
Promotion
• PPC, Mobile Directories

20. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Responsive
dynamic
serving
is
preferred
Impact
of
download
Ume
on
conversion
Just
One
Second
Delay
In
Page-­‐Load
Can
Cause
7%
Loss
In
Customer
Conversions
1sec
=
7%
Load
Delay
Conversion
Drop

21. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
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

22. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
To
meet
the
1
sec
criteria
1. Reliable
hosBng
provider
Server
must
render
the
response
(<
200
ms)
–
This
is
the
server
response
Ume
that
it
takes
the
server
to
return
the
HTML.
This
factors
in
the
network
transport
Ume
2. Minimize
redirects
Number
of
redirects
should
be
minimized
–
One
addiUonal
HTTP
request
can
add
one
or
two
extra
network
round
trips
(A
good
Ume
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
Ume
required
to
parsing
the
HTML,
CSS
&
JS.
5.
OpUmize
JavaScript
execuUon
and
rendering
Ume

23. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal

24. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Java
Script
and
CSS
comparison

25. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Using
Page
speed
Insights
to
test
hep://developers.google.com/speed/pagespeed/insights/

26. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Mobile Integration
• Manage
desktop,
mobile,
tablet
from
one
interface
• Device-­‐specific
preview
opUon
• OpUon
to
manage
meta
tags
based
on
device
type
Mobile integration

27. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Mobile
website
QA
tools
• Other
tools
are
used
for
tesUng
– User
agent
switcher
for
Firefox
&
Chrome
– hep://quirktools.com/screenfly/
– hep://responsivetools.com/site-­‐url/
– Mobilizer
– Physical
devices
Ipad
&
Iphone

28. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
hep://quirktools.com/screenfly/

29. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Closing
Notes
• Know
your
audience
search
behavior
• Decide
best
mobile
soluUon
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
tesUng
• Server
Side
Responsive
can
be
good
if
done
carefully

30. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Know
Great
People
• Director
of
Strategies
Client
Facing
• Sr.
Web
Analyst
• hep://jobs.milestoneinternet.com

31. Chicago
|
November
4–7,
2013
|
#SESCHI
|
@SESConf
@milestonemktg
@benuaggarwal
Thank
You
QuesBons?
Benu
Aggarwal
benu@milestoneinternet.com
www.milestoneinternet.com
blog.milestoneinternet.com
twieer.com/milestonemktg
facebook.com/MilestoneInc
google.com/+MilestoneInternet