This document discusses adaptive web design and responsive web design. It provides examples of different devices and screen sizes that websites must accommodate, from smart watches to large televisions. It also summarizes the key differences between responsive and adaptive design approaches. Responsive design focuses only on browser width, while adaptive design can consider other features like location services or touch capability. Adaptive design removes assumptions about features and adds support progressively.

1. 1
Adap%ve Web Design
Ben
Seymour
Has Responsive had its day?

2. 2
A
plethora
of
devices…

3. 3
…
just
a
laptop?

4. 4
Google
Chromebook
Pixel
• SIM
card
• Touch
screen
• Hi
Res
display
(2560x1700)

5. 5
iPhone
6
Plus
hPps://www.apple.com/uk/iphone-­‐6/
1920
x
1080
px
4G
:
up
to
150
Mbps
Within
an
arm
length

6. 6
Smart
TVs
hPp://www.samsung.com/uk/consumer/tv-­‐audio-­‐video/televisions/
1920
x
1080
px
Many
meters
away
Lower
effecve
pixel
density

7. 7
Graphics
and
Text

8. 8
Graphics
and
Text

9. 9
The
example
5K
image
on
the
Apple
site
is
http://www.apple.com/uk/imac-with-retina/5k.html
5120
x
2880
px
=
14.7
Million
Pixels
iMac
with
Rena
5K
display
6.4MB

10. 10
http://www.apple.com/uk/watch/apple-watch/
320
x
400
px
Apple
Watch
*
Rumoured
*

11. 11
http://www.apple.com/uk/watch/apple-watch/
‘Digital
Crown’
Designed
with
zoom
in
mind
Apple
Watch

12. 12
It’s
not
just
about
trackpad,
mouse
or
touch
gestures

13. 13
It’s
not
just
about
touch
gestures,
and
tradional
screens

14. 14
It’s
not
just
about
touch
gestures,
and
tradional
screens
https://www.google.com/glass/start/

15. Consoles
1
in
5
16-­‐24
year
olds
use
a
console
to
visit
websites
Ofcom
Internaonal
Communicaons
Report
2011
Credit
:
Anna
Debenham
:
Wealth
of
resources at: http://console.maban.co.uk/
18%
of
people
in
the
UK
access
the
internet
using
games
console
Ann
Debenham,
2014

16. “The
web
is
an
inherently
unstable
medium”
Credit:
Tom
Maslen
:
Ethan
MarcoPe

17. 17
Mul%-­‐screen
journeys

18. Device
preferences
through
the
day

19. Shopping
begins
during
the
day,
and
finishes
at
home
21% of users who multi-screen, account for nearly 44% of all
online transactions, i.e they browse at day and transact at
night…
Source - eBay 2013

20. 20
Mul-­‐screen
journeys:
Consistency
is
key
to
reducing
fricon
Don’t
break
the
URL

21. 21

22. 22
Review of
Responsive Web
Design

23. 23
hPp://alistapart.com/arcle/responsive-­‐web-­‐design
hPp://www.abookapart.com/products/responsive-­‐web-­‐design
Responsive Web Design : Ethan MarcoCe
Responsive
Web
Design
is
an
approach
for
making
sites
that
work
well
across
many
browser
environments

24. 24
• Fluid
Layouts
• Flexible
Images/Media
objects
• Media
Queries
Ethan’s
definion
is
constrained
to
3
specific
techniques
media="screen and (max-device-width: 480px)”

25. 25
RWD effec%vely means that the same HTML
code is delivered to each device, but the CSS
tweaks the layout to fit the browser.

26. 26
Greatest
advantage:
Single
Codebase
• greater
consistency
across
all
devices
• less
maintenance
• less
synchronicity
risk
• increased
complexity
Greatest
disadvantage:
Potenal
performance
impact
• Can
lead
to
addional
unnecessary
content
being
delivered
to
a
mobile
context

27. 27
Review of
Adap%ve Web
Design

28. 28
Adapve
Web
Design:
Aaron
Gustafson
May
2011

29. 29
Aaron
Gustafson:
“To
me
‘adapve
web
design’
is
just
another
term
for
‘progressive
enhancement’”

30. 30
Browser
Capability
User
Experience
Progressive
Enhancement

31. 31
5
core
layers
of
Adapve
Web
Design:
1. Text
2. HTML:
emphasis,
structure,
extra
info.
3. Audio-­‐Visual:
CSS,
Images,
Audio,
Video
4. Interacve:
Javascript
(Flash)
5. Enhanced
Semancs:
WAI-­‐ARIA
Web
Accessibility
Iniave’s
Accessible
Rich
Internet
Applicaons
spec

32. 32
Responsive
is
just
a
subset
of
adapve
Concerned
only
with
browser
width
Adapve
can
consider
other
feature
availability
e.g.:
Locaon
(GPS)
Touch
events
HTML5
canvas
Bandwidth
Removes
assumpons
about
these
features.
Instead
adds
in
support
where
relevant

33. 33
HTML
and
CSS
fallback
very
nicely
Browsers
just
ignore
what
they
don’t
understand
i.e.
built
in
tolerance
for
faults
and
errors

34. 34
Progressive
enhancement
versus
graceful
degradaon
An
escalator
which
can
sll
be
walked
up
even
without
power,
as
opposed
to
building
alternave
stairs
for
an
elevator

35. Content First
Content
first
on
BBC
news
site:
e.g.
if
an
image
was
central
to
a
story
then
it
would
always
be
included,
otherwise
considered
oponal
“Cupng
the
Mustard”
Tom
Maslen
What
does
it
mean
for
Internet
Retailers?
“Content
:
Enhancement
:
Leqovers”
Andy
Hulme

36. 36
Some examples

37. CharloPe
Olympia
Benefits:
• Great
experiences,
on
all
devices,
and
in
all
contexts

38. Tom
Ford

39. Tom
Ford
mobile

40. Tumi

41. Tumi

42. Tumi

43. Consistent
but
different
experience
43

44. Different
but
consistent
experience
44
Consistent brand experience,
adapted media
1. Brand
media
2. Interacons
3. Product
engagement
4. Call
to
acon
for
more
content

45. “Adapt
content
for
the
journey
the
user
wants”
45

46. Image
Templang
Dynamic
Image
request
using
‘transformaonal
template’
$3col_ss$
or
$3col_rena$

47. Image
Templang
• Business
Control
• Sepngs
such
compression
and
sharpening
can
be
managed
via
the
back
office.
• Opmise
without
code
release.
• Flexibility
to
more
easily
affect
changes,
or
run
tests.

48. Adap%ve Media:
Enhance the experience
to op%mise engagement

49. Adap%ve Media:
Enhance the experience
to op%mise engagement

50. Adap%ve Media:
Enhance the experience
to op%mise engagement

51. Enhance
the
experience
to
opmise
engagement

52. Very

53. Very – javascript disabled

54. Very – javascript disabled

55. 55
Don’t fork the
content

56. Content Forking
‘Adapve
Content’

57. Single
Master
Asset
57
At request %me
image
variants
Control
dimensions,
quality,
sharpening,
crop…
…bag.jpg?w=400&qlt=75&unsharp=0,1,1,7

58. TTs: Page Load Performance
If
your
analycs
suggested
list
on
mobile
is
loading
slowly.
Time = Money

59. Dynamic
Imaging:
Roundels
59
layer0=[w=600]&layer1=[src=/i/playground/click_and_collect&w=150&right=20&top=20&anchor=TR]

60. Image
Localisaon
60
&locale=fr-­‐FR
&locale=en-­‐US
hPp://i1.adis.ws/i/benco/tv.jpg?locale=cy-­‐GB
&locale=en-­‐CA,en-­‐US,en-­‐*

61. Content
Services
61
hPp://c1.adis.ws/c/bendemo/Summer-­‐Wardrobe-­‐Intro
With
this
summer
in
full
swing
and
the
sun
connuously
shining
it’s
me
to
give
your
wardrobe
a
high
summer
refresh.
This
gorgeous
new
collecon
is
made
up
of
blurred
floral
print
tops
and
dresses
in
feminine
pink
hues.

62. Textual
Content
Services
-­‐
Localisaon
62

63. Content
Services
hPp://c1.adis.ws/c/bendemo/Summer-­‐Wardrobe-­‐Intro?locale=cy-­‐GB
Gyda'r
haf
hwn
yn
ei
anterth
ac
mae'r
haul
yn
tywynnu
yn
barhaus
mae'n
amser
i
rhoi
adnewyddu
yr
haf
uchel
eich
cwpwrdd
dillad
.
Mae'r
casgliad
newydd
hyfryd
yn
cynnwys
o
topiau
a
ffrogiau
print
blodau
aneglur
mewn
arlliwiau
pinc
benywaidd.

64. Content
Services
:
64
Homepage
waterfall:
32
.js,
13
.css
On
the
roadmap:
Payload API
.js/.css
concatenaon
and
minificaon
support

65. 65
Content re-­‐use

66. Get
more
from
your
exisng
content
Action on cuepoint
Product details

67. (DI
in
IM)
Dynamic
Imaging
in
Interacve
Merchandising

68. DI
in
IM

69. DI
in
IM

70. DI
in
IM
Same
Assets,
but
opmised
via
TTs
$MOBILE_module_TT$
$DESKTOP_module_TT$

71. Review your key browser dimension, and profiles
Review
key
browser
dimensions:
-­‐
Content
and
Visitor
perspecves
-­‐
Measure
against
success
metrics
Also,
track
ranges
of
browser
width.
Are
there
certain
visitor
device
profiles,
which
are
underperforming
for
your
customer
base?

72. 72
John’s Demo
(Next gen IM)

73. 73

74. 74

75. 75

76. 76

77. 77
Shop
the
Look
Datafeeds
via
Content
Services
SDK
Carousel

78. 78
So, has
Responsive
had its day?
….. No

79. 79
But
it
is
just
the
p
of
the
iceberg
@bradfrost
http://bradfrost.com/blog/post/the-principles-of-adaptive-design/

80. 80
You’ve got to
adapt
to survive

81. 81
You’ve got to be
adap%ve
to prosper

82. 82
Thank you for
your %me
Any ques%on?
ben@amplience.com
@bseymour