Embed Size (px)
Citation preview
1
Adap%ve Web Design
Ben Seymour
Has Responsive had its day?
2
A plethora of devices…
3
… just a laptop?
4
Google Chromebook Pixel
• SIM card
• Touch screen
• Hi Res display (2560x1700)
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
Smart TVs
hPp://www.samsung.com/uk/consumer/tv-‐audio-‐video/televisions/
1920 x 1080 px
Many meters away Lower effec\ve pixel density
7
Graphics and Text
8
Graphics and Text
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 Re\na 5K display
6.4MB
10 http://www.apple.com/uk/watch/apple-watch/
320 x 400 px
Apple Watch
* Rumoured
*
11 http://www.apple.com/uk/watch/apple-watch/
‘Digital Crown’ Designed with zoom in mind
Apple Watch
12
It’s not just about trackpad, mouse or touch gestures
13
It’s not just about touch gestures, and tradi\onal screens
14
It’s not just about touch gestures, and tradi\onal screens
https://www.google.com/glass/start/
Consoles
1 in 5 16-‐24 year olds use a console to visit websites Ofcom Interna\onal Communica\ons Report 2011
“The point of creating [responsive] sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts.” ~ Brad Frost
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
“The web is an inherently unstable medium”
Credit: Tom Maslen
: Ethan MarcoPe
17
Mul%-‐screen journeys
Device preferences through the day
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
Mul\-‐screen journeys: Consistency is key to reducing fric\on Don’t break the URL
21
22
Review of Responsive Web Design
23 hPp://alistapart.com/ar\cle/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
• Fluid Layouts • Flexible Images/Media objects • Media Queries
Ethan’s defini\on is constrained to 3 specific techniques
media="screen and (max-device-width: 480px)”
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
Greatest advantage: Single Codebase • greater consistency across all devices • less maintenance • less synchronicity risk • increased complexity
Greatest disadvantage: Poten\al performance impact
• Can lead to addi\onal unnecessary content being delivered to a mobile context
27
Review of Adap%ve Web Design
28
Adap\ve Web Design: Aaron Gustafson
May 2011
29
Aaron Gustafson:
“To me ‘adap\ve web design’ is just another term for ‘progressive enhancement’”
30
Browser Capability
User E
xperience
Progressive Enhancement
31
5 core layers of Adap\ve Web Design: 1. Text 2. HTML: emphasis, structure, extra info. 3. Audio-‐Visual: CSS, Images, Audio, Video 4. Interac\ve: Javascript (Flash) 5. Enhanced Seman\cs: WAI-‐ARIA
Web Accessibility Ini\a\ve’s Accessible Rich Internet Applica\ons spec
32
Responsive is just a subset of adap\ve Concerned only with browser width
Adap\ve can consider other feature availability e.g.:
Loca\on (GPS) Touch events HTML5 canvas Bandwidth
Removes assump\ons about these features. Instead adds in support where relevant
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
Progressive enhancement versus graceful degrada\on An escalator which can s\ll be walked up even without power, as opposed to building alterna\ve stairs for an elevator
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 op\onal
“Cupng the Mustard” Tom Maslen
What does it mean for Internet Retailers?
“Content : Enhancement : Leqovers” Andy Hulme
36
Some examples
CharloPe Olympia
Benefits: • Great experiences, on all
devices, and in all contexts
Tom Ford
Tom Ford mobile
Tumi
Tumi
Tumi
Consistent but different experience
43
Different but consistent experience
44
Consistent brand experience, adapted media 1. Brand media 2. Interac\ons 3. Product engagement 4. Call to ac\on for more content
“Adapt content for the journey the user wants”
45
Image Templa\ng
Dynamic Image request using ‘transforma\onal template’
$3col_ss$ or
$3col_re\na$
Image Templa\ng
• Business Control
• Sepngs such compression and sharpening can be managed via the back office.
• Op\mise without code release.
• Flexibility to more easily affect changes, or run tests.
Adap%ve Media: Enhance the experience to op%mise engagement
Adap%ve Media: Enhance the experience to op%mise engagement
Adap%ve Media: Enhance the experience to op%mise engagement
Enhance the experience to op\mise engagement
Very
Very – javascript disabled
Very – javascript disabled
55
Don’t fork the content
Content Forking
‘Adap\ve Content’
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
TTs: Page Load Performance
If your analy\cs suggested list on mobile is loading slowly. Time = Money
Dynamic Imaging: Roundels
59
layer0=[w=600]&layer1=[src=/i/playground/click_and_collect&w=150&right=20&top=20&anchor=TR]
Image Localisa\on
60
&locale=fr-‐FR
&locale=en-‐US
hPp://i1.adis.ws/i/benco/tv.jpg?locale=cy-‐GB
&locale=en-‐CA,en-‐US,en-‐*
Content Services
61
hPp://c1.adis.ws/c/bendemo/Summer-‐Wardrobe-‐Intro
With this summer in full swing and the sun con\nuously shining it’s \me to give your wardrobe a high summer refresh. This gorgeous new collec\on is made up of blurred floral print tops and dresses in feminine pink hues.
Textual Content Services -‐ Localisa\on
62
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.
Content Services :
64
Homepage waterfall: 32 .js, 13 .css
On the roadmap: Payload API .js/.css concatena\on and minifica\on support
65
Content re-‐use
Get more from your exis\ng content
66 Action on cuepoint
Product details
(DI in IM) Dynamic Imaging in Interac\ve Merchandising
DI in IM
DI in IM
DI in IM Same Assets, but op\mised via TTs
$MOBILE_module_TT$
$DESKTOP_module_TT$
Review your key browser dimension, and profiles
Review key browser dimensions: -‐ Content and Visitor perspec\ves -‐ Measure against success metrics Track browser width:
<script type="text/javascript"> var width = window.innerWidth || document.body.clientWidth; var height = window.innerHeight || document.body.clientHeight;
width = Math.round(width/100)*100; height = Math.round(height/100)*100;
var size = width + "x" + height; _gaq.push(['_trackEvent', 'Browser Size', 'Range', size]);</script>
Also, track ranges of browser width.
Are there certain visitor device profiles, which are underperforming for your customer base?
72
John’s Demo
(Next gen IM)
73
74
75
76
77
Shop the Look
Datafeeds via Content Services
SDK Carousel
78
So, has Responsive had its day?
….. No
79
But it is just the \p of the iceberg
@bradfrost http://bradfrost.com/blog/post/the-principles-of-adaptive-design/
80
You’ve got to
adapt
to survive
81
You’ve got to be
adap%ve
to prosper
