Image courtesy of Shutterstock
Device Agnostic Design How to get your content to go anywhere
by Anna Dahlström | @annadahlstrom UCD London, 25 Oct 2014 #UCD14
www.flickr.com/photos/activeside/2192411612
Before 2007 we mostly thought about pages
That was when browsers were our biggest head ache
www.flickr.com/photos/jorgeq82/4732700819
Today it’s browers & a whole bunch of devices
www.flickr.com/photos/adactio/12674602864
“ For the first time ever there are more gadgets in the world than there are people. ”
- Source: Independent
http://www.businessinsider.com/vatican-square-2005-and-2013-2013-3
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
“ We have seen 18,769 distinct devices download our app in the past few months. In our report last year we saw 11,868. ”
- Source: Open Signal
We go onlineeverywhere and anywhere
www.flickr.com/photos/luigimengato/5963540855
…and theseare the game changers
https://www.flickr.com/photos/jfingas/10104822523
https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”
2010Ethan Marcotte, Responsive Web Design
Now…it’s Device Agnostic Design
https://www.flickr.com/photos/jfingas/10104822523
“ Today’s popular devices aren’t tomorrow's so building something which works on any device is better than
building something which works on today’s devices. ”
- Combined wise words from @oneextrapixel & @trentwalton
!
!
!
!
!
!
What does work on “any device” mean?
“ The site you build is not dependent on knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock
Wherehas it come from?
An evolvement of responsive design
www.flickr.com/photos/adactio/5818096043
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
Responsive sites have the same url & is basically “one site”
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
Bespoke mobile sites have a separate url & means maintaining different sites
http://desktopwallpaper-s.com/19-Computers/-/Future
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
Brings us back to this…
Maintaining bespoke mobile sites is messy & costly
www.flickr.com/photos/ericconstantineau/5618576278
It means maintaining multiple technical solutions...
www.flickr.com/photos/nikio/3899114449
...and also maintaining multiple versions of your content
www.flickr.com/photos/financialaidpodcast/7598618978
Realistically that means making cuts & frustrating users
www.flickr.com/photos/bulldogsrule/187693681
Bad, bad, bad…
This is NOT what a mobile user looks like
Image courtesy of Shutterstock
Mobile Search MoMentSUnderStanding how Mobile driveS converSionS
3 of 4 mobile searches trigger follow-up actions
Mobile searches drive valuable
outcomes for businesses
Actions triggered by mobile search
also happen very quickly
of conversions (store visit, phone call or purchase) happening within an hour55%
On average, each mobile search triggers
nearly 2 follow-up actions
Product & shopping searches have a higher number of outcomesNumber of follow-up actions per mobile search
Mobile search is always on, happening
on the go, at home and at work
of mobile searches occur at home or work; 17% on the go77%
2.082.523.56
Travel FoodAutoBeauty Tech
2.072.20
36%
Continued
Research
18%
Shared Information
17%
Made a Purchase
25%
Visited a Retailer’s
Website
17%
Visited a Store
7%
Called a Business
0RELOH�VHDUFKHV�DUH�VWURQJO\�WLHG�WR�VSHFLȴF�FRQWH[WV�
Shopping queries are 2x more likely to be in store
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html
77% of mobile searches occur at home or work
17% of mobile searches occur on the go
Many of us own multiple devices
Morning Commute Work Lunch Meeting Dinner Movie
We switch between them throughout the day
www.flickr.com/photos/sixmilliondollardan/2493495506
A poor experience results in the same thing where ever it takes place
Users expect an equal & continuous experience across devices
www.flickr.com/photos/joachim_s_mueller/7110473339
DESKTOP FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Having separate sites does, for the most part, not make sense
DESKTOP FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Bespoke mobile sites: Different sites based on the device that’s used
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Responsive sites: The same site irrespectively of the device
http://foundation.zurb.com/docs/layout.php
“ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. ”
- Smashing Magazine
www.flickr.com/photos/donsolo/2136923757/
It’s all about the modules baby
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
sizes
http://foundation.zurb.com/docs/layout.php
Breakpoints & Behaviour
www.flickr.com/photos/theaftershock/2811382400
!
!
!
!
!
“ Content needs to be choreographed to ensure the intended message is preserved
on any device and at any width “
- Trent Walton
Keep the core content the same but optimise the experience, display & interactions to the device
Image courtesy of Shutterstock
http://thenextweb.com/
So that it’s carefully considered, like this
From responsive to device agnostic design
Responsive design established the principle of the same content across devices
www.flickr.com/photos/joachim_s_mueller/7110473339
But it’s brought up other problems
www.flickr.com/photos/stankus/3718835245
“ Smartphones accounted for 57.6% of total sales in fourth quarter of 2013 ” *
- Source: Gartner
www.flickr.com/photos/aforgrave/6168689222
Internet connection is still not a given
http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291
Oh, and Internet actually sleeps…
http://www.wired.com/2014/10/internet-sleeps-night-really
Oh, and Internet actually sleeps…
http://www.wired.com/2014/10/internet-sleeps-night-really
…and not all connections are made equal
Screenshot from http://opensignal.com/coverage-maps/UK/
Adaptivedesign
Content layerrich semantic HTML markup
Presentation layerCSS and styling
Client-side scripting layer JavaScript or jQuery behaviors
www.thegrid.io
“ To get response times to a minimum, we’ve had to develop a system that loads in just the essential components of the page at the right times. Mobile-sized images download first, then when the page’s Javascript detects the browser’s capabilities, higher-resolution images get ‘loaded in dynamically.’ ” - Andrew Pipe, BBC iWonder
Context
Mobile context ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience
www.flickr.com/photos/icedsoul/2486885051
Image courtesy of Shutterstockwww.flickr.com/photos/jmsmith000/3169546564
“ I used to think it merely dealt with basing responsive breakpoints on content rather than particular devices, but there’s
more to devices than the size of their screens. ”
- Trent Walton, Device Agnostic
www.flickr.com/photos/lokan/8843464852www.flickr.com/photos/jmsmith000/3169546564
“ A device-agnostic approach also takes into account infinite combinations of screen resolution, input
method, browser capability, and connection speed. ”
- Trent Walton, Device Agnostic
www.flickr.com/photos/66327170@N07/7296381856
!
!
!
!
!
!
‘ New rule: every desktop design has to go finger friendly ’
- Josh Clark
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/janitors/9968676044
Impacts controls, placement & interactions
www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042
We need to consider precise v.s imprecise input means
www.flickr.com/photos/vincentsl/3543888150
“ Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ”
- Josh Clark
Designing for multiple devices can become a bit of a minefield
www.flickr.com/photos/cayusa/534070358
We can’t always successfully tell what devices users are using
www.flickr.com/photos/adactio/6153481666
It’s about content. Not what device we’re using.
http://foundation.zurb.com/docs/layout.php
“ Get your content to go anywhere, because it’s going to
go everywhere. ” - Brad Frost
http://foundation.zurb.com/docs/layout.php
“ It is your mission to get your content out, on whichever platform, in whichever format
your audience wants to consume it. ”
- Karen McGrane
Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html
http://foundation.zurb.com/docs/layout.php
“ Your users get to decide how, when, and where they want to read your content.
It is your challenge and your responsibility to deliver a good
experience to them. ” - Karen McGrane
device browser screen input method connection speed
Any
anytime anywhereUsed
How do we design something that can work on any device?
www.thegrid.io
“ The design adjusts to look good on every browser and every device. Automatically.”
- The Grid
It all starts with content
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
Less about pages & more focus on the building blocks that make up those views
www.flickr.com/photos/boltofblue/4418442567
Gone is the big reveal of the beautiful page designs
www.flickr.com/photos/nataliejohnson/377344806
www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
It’s about views that will look good, & work well, across different browsers, screen sizes, device types, connections & input methods
How to go about it
1. Understand content & content stacking strategy 2. Approach design as systems of modules3. Use content rather than device based breakpoints
http://foundation.zurb.com/docs/layout.php
“ With thousands and thousands of pages on the Crayola site, it wasn’t efficient to wireframe every single page and state. We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page. ”
- Daniel MallScreenshot: www.crayola.co.uk/
www.flickr.com/photos/boltofblue/4418442567
The more you reuse, the less modules there will be to design, define & develop
www.flickr.com/photos/akrabat/9085299639
Essential for preventing ending up with too many pieces
An evolution of how we’ve always worked
Define views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Footer
Additional info
Related products
Break down content further & explore layouts
1 Header& Nav2 Filter & search
Product listing
1 Header& Nav
2Gallery
2Descrip-
tion
8 Footer
3Additional info
Product page1 Header& Nav
2Category
3Category
4 Category
9Categ
7Categ
10 Footer
Categories
7Prod
6Categ
5Categ
1 Header& Nav
2Features
11 Footer
Home
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
8Categ
6Prod
5 Prod
4Prod
3Prod
10Prod
9 Prod
8Prod
7Prod
14Prod
13 Prod
12Prod
11Prod
18Prod
17 Prod
16Prod
15Prod
19 Footer
7Prod
6 Prod
5Prod
4Prod
Home - largeHeader& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2Features
11 Footer
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
1 Header& Nav
2Features
10 Footer
3 Category
4 Categ
5 Categ
6 Product
7 Product
8 Product
9 Product
Header& Nav
Features
Footer
Home - small
Featured categories
Featured products
Do the same across screen sizes
Break down each module into elements
Home - largeHeader& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2Features
11 Footer
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
1 Header& Nav
2Features
10 Footer
3 Category
4 Categ
5 Categ
6 Product
7 Product
8 Product
9 Product
Header& Nav
Features
Footer
Home - small
Featured categories
Featured products
Views
Home - large Home - small
Start identifying your building blocks & variations
Views
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Featured products - large
Single product - large
Featured products - small
Single product- small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Related products
Footer
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Related products10
Prod9
Prod8
Prod7
Prod
Footer
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Related products
Footer
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
7Prod
6 Prod
5Prod
4Prod
Footer
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
Iterate & refine across views & key templates
Header& Nav
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
6Prod
5 Prod
4Prod
3Prod
10Prod
9 Prod
8Prod
7Prod
14Prod
13 Prod
12Prod
11Prod
18Prod
17 Prod
16Prod
15Prod
Iterate & refine across views & key templates
Header& Nav
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
6Prod
5 Prod
4Prod
10Prod
9 Prod
8Prod
7Prod
14Prod
13 Prod
12Prod
11Prod
18Prod
17 Prod
16Prod
15Prod
Iterate & refine across views & key templates
Header& Nav
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
Gradually build your module library
Feature - large Feature - small
Featured products - large Featured products - small
Single product - large Single product- small
Also used for: • Module REL01 - Related products
1
3
4
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1
Gradually build your module library
Feature - large Feature - small
Featured products - large Featured products - small
Single product - large Single product- small
Also used for: • Module REL01 - Related products
1
3
4
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1
www.slideshare.net/yiibu/pragmatic-responsive-design
Work with breakpoints & tweakpoints, focus on content layout & EMS instead of px
http://foundation.zurb.com/docs/layout.php
“ Building a content-aware grid is a simple matter of
choosing the layout patterns that you want, based on breakpoints that you set
according to page content. ”
- Thierry Koblentz, Device-Agnostic Approach To Responsive Web Design
Look at what’s suitable for your content & best practice for layout principles
www.flickr.com/photos/visualpunch/7351572896
Basing breakpoints on screen sizes is a temporary work around
www.flickr.com/photos/gozalewis/3249104929
www.flickr.com/photos/adactio/6153481666
It enforces the idea that (responsive) design is about devices. It’s not.
Opt for fluid as much possible
http://foundation.zurb.com/docs/layout.php
Work with your module library and templates
Home - largeHeader& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2Features
11 Footer
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
1 Header& Nav
2Features
10 Footer
3 Category
4 Categ
5 Categ
6 Product
7 Product
8 Product
9 Product
Header& Nav
Features
Footer
Home - small
Featured categories
Featured products
A few final words...
Image courtesy of Shutterstock
“ Every responsive design project is also a content strategy project. ”
- Karen McGrane
www.flickr.com/photos/75905404@N00/7126146307
How we approach it depends…
DetailedIA & UX deliverablesHigh level
Brand Info or taskAim of experience
LimitedExperience in visual design teamExtensive
Less formal UX deliverables but more creatively led
UX led with more formal & extensive IA & UX deliverables
Source: Mark Bell, Dare
We have to work together across disciplines, & with clients
www.flickr.com/photos/byte/8282578241
Device agnostic design means giving up some control to ensure it works for as many devices as possible
www.flickr.com/photos/stickkim/7491816206
Ensuring that we do what’s best for our clients, our users & us as a company
Test as early as possible& then continuously
device browser screen input method connection speed
Any
anytime anywhereUsed
Content + Context is the focus
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
Screenshot: https://moto360.motorola.com/
Screenshot: Screenshot: http://www.apple.com/uk/
Screenshot: Screenshot: http://www.apple.com/uk/
“ And just as the first wave of desktop apps ported to mobile were underwhelming and replaced by mobile-first applications, so will companies quickly realize that it isn’t just a new screen but a brand-new platform. ”
- Source: Techcrunch
Image courtesy of Shutterstock
Thank you. Questions?@annadahlstrom | www.annadahlstrom.com