Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Device Agnostic Design 
How to get your content to go anywhere 
by Anna Dahlström | @annadahlstrom 
UCD London, 25 Oct 201...
Before 2007 we mostly 
thought about pages 
www.flickr.com/photos/activeside/2192411612
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://ww...
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. ”...
We go online 
everywhere and anywhere 
www.flickr.com/photos/luigimengato/5963540855
…and these 
are the game changers 
https://www.flickr.com/photos/jfingas/10104822523
https://www.flickr.com/photos/bfishadow/4604166391 
“ Just a giant iPhone. ”
2010 Ethan Marcotte, Responsive Web Design
Now… it’s Device Agnostic Design
“ Today’s popular devices aren’t tomorrow's so 
building something which works on any device is better than 
building some...
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 co...
Where has 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://desktopw...
DESKTOP 
FULL WEBSITE 
BESPOKE 
CUT DOWN 
WEBSITE 
BESPOKE 
CUT DOWN 
WEBSITE 
Bespoke mobile sites have a separate url 
&...
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/ 
Brings us bac...
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 MoMentS 
UnderStanding how Mobile driveS converSionS 
Mobile search is always on, happening 
on the go, at h...
Many of us own 
multiple devices
We switch between 
them throughout the day 
Morning Commute Work Lunch Meeting Dinner Movie
A poor experience results in 
the same thing where ever it takes place 
www.flickr.com/photos/sixmilliondollardan/24934955...
Users expect an equal  continuous 
experience across devices 
www.flickr.com/photos/joachim_s_mueller/7110473339
Having separate sites 
does, for the most part, not make sense 
DESKTOP 
FULL WEBSITE 
BESPOKE 
CUT DOWN 
WEBSITE 
BESPOKE...
Bespoke mobile sites: Different sites 
based on the device that’s used 
DESKTOP 
FULL WEBSITE 
BESPOKE 
CUT DOWN 
WEBSITE ...
Responsive sites: The same site 
irrespectively of the device 
FULL WEBSITE 
FULL 
WEBSITE 
FULL 
WEBSITE 
http://desktopw...
http://foundation.zurb.com/docs/layout.php 
“ Design  development 
should respond to the user’s 
behaviour  environment ba...
It’s all about 
the modules baby 
www.flickr.com/photos/donsolo/2136923757/
Define your content stacking strategy 
across devices  orientation. 
www.thismanslife.co.uk/projects/lab/responsivewirefra...
Define your content stacking strategy 
across devices  orientation. 
www.thismanslife.co.uk/projects/lab/responsivewirefra...
Define your content stacking strategy 
across devices  orientation. 
www.thismanslife.co.uk/projects/lab/responsivewirefra...
http://foundation.zurb.com/docs/layout.php 
Breakpoints  Behaviour
www.flickr.com/photos/theaftershock/2811382400 
! 
! 
! 
! 
! 
“ Content needs to be choreographed 
to ensure the intended...
Keep the core content the same 
but optimise the experience, display  
interactions to the device 
Image courtesy of Shutt...
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/7...
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/...
Internet connection 
is still not a given 
http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628...
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/
Adaptive design
Content layer 
rich semantic HTML markup 
Presentation layer 
CSS and styling 
Client-side scripting layer 
JavaScript or ...
www.thegrid.io 
“ To get response times to a 
minimum, we’ve had to develop a 
system that loads in just the 
essential co...
Context
Mobile context ≠ mobile use case 
The latter is about the task, the former about 
the total sum of the user’s mobile exper...
“ I used to think it merely dealt with basing responsive 
breakpoints on content rather than particular devices, but there...
“ A device-agnostic approach also takes 
into account infinite combinations of screen resolution, input 
method, browser c...
www.flickr.com/photos/66327170@N07/7296381856 
! 
! 
! 
! 
! 
! 
‘ New rule: every desktop design has to go finger friendl...
www.flickr.com/photos/intelfreepress/6837427202 
www.flickr.com/photos/janitors/9968676044 
www.flickr.com/photos/johnkara...
Impacts controls, placement  interactions
We need to consider 
precise v.s imprecise input means 
www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jmt...
www.flickr.com/photos/vincentsl/3543888150 
“ Designing for touch means designing 
for fingers, yes, but to be more specif...
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. ” 
-...
http://foundation.zurb.com/docs/layout.php 
“ It is your mission to get 
your content out, on whichever 
platform, in whic...
Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smar...
http://foundation.zurb.com/docs/layout.php 
“ Your users get to decide 
how, when, and where they 
want to read your conte...
device 
browser 
screen 
input method 
connection speed 
Any 
Used anytime 
anywhere
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
It’s about views that will look good, 
 work well, across different browsers, screen 
sizes, device types, connections  in...
How to go about it
1. Understand content  content stacking strategy 
2. Approach design as systems of modules 
3. Use content rather than dev...
http://foundation.zurb.com/docs/layout.php 
“ With thousands and 
thousands of pages on the 
Crayola site, it wasn’t effic...
The more you reuse, the less modules 
there will be to design, define  develop 
www.flickr.com/photos/boltofblue/441844256...
Essential for preventing 
ending up with too many pieces 
www.flickr.com/photos/akrabat/9085299639
An evolution of how we’ve always worked
Define views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter  search 
Feature...
Break down content further  explore layouts 
Product listing 
1 Header Nav 
2 Filter  search 
Product page 
1 Header Nav 
...
Home - large 
Header Nav 
Features 
Featured categories 
Featured products 
Footer 
1 Header Nav 
2 
Features 
3 
Category...
Break down each module into elements 
Home - large 
Header Nav 
Features 
Featured categories 
Featured products 
Footer 
...
Start identifying your building blocks  variations 
Views 
Home - large Home - small
Start identifying your building blocks  variations 
Views 
Home - large Home - small
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Home - large Home - sm...
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Home - large Home - sm...
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Featured products - la...
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Featured products - la...
Start identifying your building blocks  variations 
Feature - large Feature - small 
Featured products - large 
Single pro...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Gradually build your module library 
Feature - large Feature - small 
1 
3 
4 
Featured products - large Featured products...
Gradually build your module library 
Feature - large Feature - small 
1 
3 
4 
Featured products - large Featured products...
Work with breakpoints  tweakpoints, 
focus on content layout  EMS instead of px 
www.slideshare.net/yiibu/pragmatic-respon...
http://foundation.zurb.com/docs/layout.php 
“ Building a content-aware 
grid is a simple matter of 
choosing the layout pa...
Look at what’s suitable for your content 
 best practice for layout principles 
www.flickr.com/photos/visualpunch/73515728...
Basing breakpoints on 
screen sizes is a temporary 
work around 
www.flickr.com/photos/gozalewis/3249104929
It enforces the idea that 
(responsive) design is about devices. It’s not. 
www.flickr.com/photos/adactio/6153481666
Opt for fluid as 
much possible 
http://foundation.zurb.com/docs/layout.php
Work with your module library and templates 
Home - large 
Header Nav 
Features 
Featured categories 
Featured products 
F...
A few final words...
Image courtesy of Shutterstock 
“ Every responsive design project 
is also a content strategy project. ” 
- Karen McGrane
How we approach it 
depends… 
www.flickr.com/photos/75905404@N00/7126146307
Brand Aim of experience Info or task 
High level IA  UX deliverables Detailed 
Less formal UX deliverables but 
more creat...
We have to work together across disciplines,  with clients
Device agnostic design means 
giving up some control to ensure it works 
for as many devices as possible 
www.flickr.com/p...
Ensuring that we do what’s best for 
our clients, our users  us as a company 
www.flickr.com/photos/stickkim/7491816206
Test as early as possible 
 then continuously
device 
browser 
screen 
input method 
connection speed 
Any 
Used anytime 
anywhere
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/ 
“ 
A 
n 
d 
ju 
s 
t a 
s 
the first wave of desktop apps ported to 
mob...
Thank you. Questions? 
@annadahlstrom | www.annadahlstrom.com 
Image courtesy of Shutterstock
Upcoming SlideShare
Loading in …5
×

UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere

884 views

Published on

Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere

There was a time when we did glossy page designs and when those designs were pretty much what we saw in our desktop browsers. With the introduction and rise of smartphones, tablets, phablets there isn't one view of our designs anymore.

Instead, what we create needs to be able to adapt in a way that is suitable for the device as well as where and how it’s being used.

With responsive design we've learnt the basics of how to adapt content, interactions and layouts so that it works across devices. But with further developments in technology and screens, our content is going to go anywhere. As a result we need to move away from designing for specific devices to solutions that are device agnostic. For us as UX designers this means means letting content rather than devices guide layouts, and also increasingly moving away from designing and wireframing pages to focusing on the modules that those views are made up of. But there are other aspects to consider in device agnostic design.

In this talk Anna will walk through why device agnostic design matters, what it means and how we go about it.

Published in: Design
  • Be the first to comment

UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere

  1. 1. Device Agnostic Design How to get your content to go anywhere by Anna Dahlström | @annadahlstrom UCD London, 25 Oct 2014 #UCD14 Image courtesy of Shutterstock
  2. 2. Before 2007 we mostly thought about pages www.flickr.com/photos/activeside/2192411612
  3. 3. That was when browsers were our biggest head ache www.flickr.com/photos/jorgeq82/4732700819
  4. 4. Today it’s browers & a whole bunch of devices www.flickr.com/photos/adactio/12674602864
  5. 5. “ 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
  6. 6. Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
  7. 7. “ We have seen 18,769 distinct devices download our app in the past few months. In our report last year we saw 11,868. ” Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/ - Source: Open Signal
  8. 8. We go online everywhere and anywhere www.flickr.com/photos/luigimengato/5963540855
  9. 9. …and these are the game changers https://www.flickr.com/photos/jfingas/10104822523
  10. 10. https://www.flickr.com/photos/bfishadow/4604166391 “ Just a giant iPhone. ”
  11. 11. 2010 Ethan Marcotte, Responsive Web Design
  12. 12. Now… it’s Device Agnostic Design
  13. 13. “ 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. ” https://www.flickr.com/photos/jfingas/10104822523 - Combined wise words from @oneextrapixel & @trentwalton ! ! ! ! ! !
  14. 14. What does work on “any device” mean?
  15. 15. “ The site you build is not dependent on knowing what device it is being displayed on. ” - Sarita Harbour, WDD Image courtesy of Shutterstock
  16. 16. Where has it come from?
  17. 17. An evolvement of responsive design www.flickr.com/photos/adactio/5818096043
  18. 18. FULL WEBSITE FULL WEBSITE FULL WEBSITE Responsive sites have the same url & is basically “one site” http://desktopwallpaper-s.com/19-Computers/-/Future
  19. 19. 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
  20. 20. Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/ Brings us back to this…
  21. 21. Maintaining bespoke mobile sites is messy & costly www.flickr.com/photos/ericconstantineau/5618576278
  22. 22. It means maintaining multiple technical solutions... www.flickr.com/photos/nikio/3899114449
  23. 23. ...and also maintaining multiple versions of your content www.flickr.com/photos/financialaidpodcast/7598618978
  24. 24. Realistically that means making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
  25. 25. Bad, bad, bad…
  26. 26. This is NOT what a mobile user looks like Image courtesy of Shutterstock
  27. 27. Mobile Search MoMentS UnderStanding how Mobile driveS converSionS 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 go 77% 0RELOHVHDUFKHVDUHVWURQJOWLHGWRVSHFLȴFFRQWH[WV Shopping queries are 2x more likely to be in store Mobile searches drive valuable outcomes for businesses 3 of 4 mobile searches trigger follow-up actions Actions triggered by mobile search also happen very quickly of conversions (store visit, phone call or purchase) happening within an hour 55% On average, each mobile search triggers nearly 2 follow-up actions Product shopping searches have a higher number of outcomes Number of follow-up actions per mobile search 3.56 2.52 2.08 2.20 2.07 Beauty Auto Travel Food Tech 36% Continued Research 18% Shared Information 17% Made a Purchase 25% Visited a Retailer’s Website 17% Visited a Store 7% Called a Business 77% of mobile searches occur at home or work 17% of mobile searches occur on the go Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html
  28. 28. Many of us own multiple devices
  29. 29. We switch between them throughout the day Morning Commute Work Lunch Meeting Dinner Movie
  30. 30. A poor experience results in the same thing where ever it takes place www.flickr.com/photos/sixmilliondollardan/2493495506
  31. 31. Users expect an equal continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
  32. 32. 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
  33. 33. Bespoke mobile sites: Different sites based on the device that’s used DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  34. 34. Responsive sites: The same site irrespectively of the device FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  35. 35. 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
  36. 36. It’s all about the modules baby www.flickr.com/photos/donsolo/2136923757/
  37. 37. Define your content stacking strategy across devices orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  38. 38. Define your content stacking strategy across devices orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  39. 39. Define your content stacking strategy across devices orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/ sizes
  40. 40. http://foundation.zurb.com/docs/layout.php Breakpoints Behaviour
  41. 41. 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
  42. 42. Keep the core content the same but optimise the experience, display interactions to the device Image courtesy of Shutterstock
  43. 43. http://thenextweb.com/ So that it’s carefully considered, like this
  44. 44. From responsive to device agnostic design
  45. 45. Responsive design established the principle of the same content across devices www.flickr.com/photos/joachim_s_mueller/7110473339
  46. 46. But it’s brought up other problems www.flickr.com/photos/stankus/3718835245
  47. 47. “ Smartphones accounted for 57.6% of total sales in fourth quarter of 2013 ” * - Source: Gartner www.flickr.com/photos/aforgrave/6168689222
  48. 48. Internet connection is still not a given http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291
  49. 49. Oh, and Internet actually sleeps… http://www.wired.com/2014/10/internet-sleeps-night-really
  50. 50. Oh, and Internet actually sleeps… http://www.wired.com/2014/10/internet-sleeps-night-really
  51. 51. …and not all connections are made equal Screenshot from http://opensignal.com/coverage-maps/UK/
  52. 52. Adaptive design
  53. 53. Content layer rich semantic HTML markup Presentation layer CSS and styling Client-side scripting layer JavaScript or jQuery behaviors
  54. 54. 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
  55. 55. Context
  56. 56. 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
  57. 57. “ 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. ” Image courtesy of Shutterstockwww.flickr.com/photos/jmsmith000/3169546564 - Trent Walton, Device Agnostic
  58. 58. “ A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed. ” www.flickr.com/photos/lokan/88w4w34w6.f4li8ck5r2.com/photos/jmsmith000/3169546564 - Trent Walton, Device Agnostic
  59. 59. www.flickr.com/photos/66327170@N07/7296381856 ! ! ! ! ! ! ‘ New rule: every desktop design has to go finger friendly ’ - Josh Clark
  60. 60. www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/janitors/9968676044 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
  61. 61. Impacts controls, placement interactions
  62. 62. We need to consider precise v.s imprecise input means www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jmtimages/2883279193
  63. 63. 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
  64. 64. Designing for multiple devices can become a bit of a minefield www.flickr.com/photos/cayusa/534070358
  65. 65. We can’t always successfully tell what devices users are using www.flickr.com/photos/adactio/6153481666
  66. 66. It’s about content. Not what device we’re using.
  67. 67. http://foundation.zurb.com/docs/layout.php “ Get your content to go anywhere, because it’s going to go everywhere. ” - Brad Frost
  68. 68. 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
  69. 69. Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html
  70. 70. 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
  71. 71. device browser screen input method connection speed Any Used anytime anywhere
  72. 72. How do we design something that can work on any device?
  73. 73. www.thegrid.io “ The design adjusts to look good on every browser and every device. Automatically.” - The Grid
  74. 74. It all starts with content www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
  75. 75. Less about pages more focus on the building blocks that make up those views www.flickr.com/photos/boltofblue/4418442567
  76. 76. Gone is the big reveal of the beautiful page designs www.flickr.com/photos/nataliejohnson/377344806
  77. 77. It’s about views that will look good, work well, across different browsers, screen sizes, device types, connections input methods www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
  78. 78. How to go about it
  79. 79. 1. Understand content content stacking strategy 2. Approach design as systems of modules 3. Use content rather than device based breakpoints
  80. 80. 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 Mall Screenshot: www.crayola.co.uk/
  81. 81. The more you reuse, the less modules there will be to design, define develop www.flickr.com/photos/boltofblue/4418442567
  82. 82. Essential for preventing ending up with too many pieces www.flickr.com/photos/akrabat/9085299639
  83. 83. An evolution of how we’ve always worked
  84. 84. Define views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Featured products Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products Footer
  85. 85. Break down content further explore layouts Product listing 1 Header Nav 2 Filter search Product page 1 Header Nav 2 Gallery 2 Descrip-tion 3 Additional info 8 Footer Categories 1 Header Nav 2 Category 3 Category 4 Category 9 Categ 7 Categ 10 Footer 7 Prod 6 Categ 5 Categ Home 1 Header Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 8 Categ 6 Prod 5 Prod 4 Prod 3 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod 19 Footer 7 Prod 6 Prod 5 Prod 4 Prod
  86. 86. Home - large Header Nav Features Featured categories Featured products Footer 1 Header Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod Home - small 1 Header Nav 2 Features 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product 10 Footer Header Nav Features Featured categories Featured products Footer Do the same across screen sizes
  87. 87. Break down each module into elements Home - large Header Nav Features Featured categories Featured products Footer 1 Header Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 1 Header Nav 2 Features 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product 10 Footer Header Nav Features Footer Home - small Featured categories Featured products
  88. 88. Start identifying your building blocks variations Views Home - large Home - small
  89. 89. Start identifying your building blocks variations Views Home - large Home - small
  90. 90. Start identifying your building blocks variations Views Modules Feature - large Feature - small Home - large Home - small
  91. 91. Start identifying your building blocks variations Views Modules Feature - large Feature - small Home - large Home - small
  92. 92. Start identifying your building blocks variations Views Modules Feature - large Feature - small Featured products - large Featured products - small Home - large Home - small
  93. 93. Start identifying your building blocks variations Views Modules Feature - large Feature - small Featured products - large Featured products - small Home - large Home - small
  94. 94. 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
  95. 95. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Featured products Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products Footer
  96. 96. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products 10 Prod 9 Prod 8 Prod 7 Prod Footer
  97. 97. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products Footer
  98. 98. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info 7 Prod 6 Prod 5 Prod 4 Prod Footer
  99. 99. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer
  100. 100. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer 6 Prod 5 Prod 4 Prod 3 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod
  101. 101. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer 6 Prod 5 Prod 4 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod
  102. 102. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer
  103. 103. Gradually build your module library Feature - large Feature - small 1 3 4 Featured products - large Featured products - small Also used for: • Module REL01 - Related products Single product - large Single product- small 1 2 3 1 2 1 2 3 4 2 3 1 2 3 1 2 1 1
  104. 104. Gradually build your module library Feature - large Feature - small 1 3 4 Featured products - large Featured products - small Also used for: • Module REL01 - Related products Single product - large Single product- small 1 2 3 1 2 1 2 3 4 2 3 1 2 3 1 2 1 1
  105. 105. Work with breakpoints tweakpoints, focus on content layout EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
  106. 106. 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
  107. 107. Look at what’s suitable for your content best practice for layout principles www.flickr.com/photos/visualpunch/7351572896
  108. 108. Basing breakpoints on screen sizes is a temporary work around www.flickr.com/photos/gozalewis/3249104929
  109. 109. It enforces the idea that (responsive) design is about devices. It’s not. www.flickr.com/photos/adactio/6153481666
  110. 110. Opt for fluid as much possible http://foundation.zurb.com/docs/layout.php
  111. 111. Work with your module library and templates Home - large Header Nav Features Featured categories Featured products Footer 1 Header Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 1 Header Nav 2 Features 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product 10 Footer Header Nav Features Footer Home - small Featured categories Featured products
  112. 112. A few final words...
  113. 113. Image courtesy of Shutterstock “ Every responsive design project is also a content strategy project. ” - Karen McGrane
  114. 114. How we approach it depends… www.flickr.com/photos/75905404@N00/7126146307
  115. 115. Brand Aim of experience Info or task High level IA UX deliverables Detailed Less formal UX deliverables but more creatively led UX led with more formal extensive IA UX deliverables Extensive Experience in visual design team Limited Source: Mark Bell, Dare
  116. 116. We have to work together across disciplines, with clients
  117. 117. Device agnostic design means giving up some control to ensure it works for as many devices as possible www.flickr.com/photos/byte/8282578241
  118. 118. Ensuring that we do what’s best for our clients, our users us as a company www.flickr.com/photos/stickkim/7491816206
  119. 119. Test as early as possible then continuously
  120. 120. device browser screen input method connection speed Any Used anytime anywhere
  121. 121. Content + Context is the focus www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
  122. 122. Screenshot: https://moto360.motorola.com/
  123. 123. Screenshot: Screenshot: http://www.apple.com/uk/
  124. 124. Screenshot: Screenshot: http://www.apple.com/uk/ “ A n d ju s t a s 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
  125. 125. Thank you. Questions? @annadahlstrom | www.annadahlstrom.com Image courtesy of Shutterstock

×