ucd14 talk - anna dahlstrom - device agnostic design: how to get your content to go anywhere
DESCRIPTION
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.TRANSCRIPT
![Page 1: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/1.jpg)
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
![Page 2: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/2.jpg)
www.flickr.com/photos/activeside/2192411612
Before 2007 we mostly thought about pages
![Page 3: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/3.jpg)
That was when browsers were our biggest head ache
www.flickr.com/photos/jorgeq82/4732700819
![Page 4: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/4.jpg)
Today it’s browers & a whole bunch of devices
www.flickr.com/photos/adactio/12674602864
![Page 5: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/5.jpg)
“ 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
![Page 6: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/6.jpg)
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
![Page 7: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/7.jpg)
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
![Page 8: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/8.jpg)
We go onlineeverywhere and anywhere
www.flickr.com/photos/luigimengato/5963540855
![Page 9: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/9.jpg)
…and theseare the game changers
https://www.flickr.com/photos/jfingas/10104822523
![Page 10: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/10.jpg)
https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”
![Page 11: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/11.jpg)
2010Ethan Marcotte, Responsive Web Design
![Page 12: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/12.jpg)
Now…it’s Device Agnostic Design
![Page 13: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/13.jpg)
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
!
!
!
!
!
!
![Page 14: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/14.jpg)
What does work on “any device” mean?
![Page 15: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/15.jpg)
“ The site you build is not dependent on knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock
![Page 16: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/16.jpg)
Wherehas it come from?
![Page 17: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/17.jpg)
An evolvement of responsive design
www.flickr.com/photos/adactio/5818096043
![Page 18: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/18.jpg)
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
Responsive sites have the same url & is basically “one site”
http://desktopwallpaper-s.com/19-Computers/-/Future
![Page 19: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/19.jpg)
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
![Page 20: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/20.jpg)
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
Brings us back to this…
![Page 21: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/21.jpg)
Maintaining bespoke mobile sites is messy & costly
www.flickr.com/photos/ericconstantineau/5618576278
![Page 22: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/22.jpg)
It means maintaining multiple technical solutions...
www.flickr.com/photos/nikio/3899114449
![Page 23: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/23.jpg)
...and also maintaining multiple versions of your content
www.flickr.com/photos/financialaidpodcast/7598618978
![Page 24: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/24.jpg)
Realistically that means making cuts & frustrating users
www.flickr.com/photos/bulldogsrule/187693681
![Page 25: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/25.jpg)
Bad, bad, bad…
![Page 26: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/26.jpg)
This is NOT what a mobile user looks like
Image courtesy of Shutterstock
![Page 27: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/27.jpg)
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
![Page 28: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/28.jpg)
Many of us own multiple devices
![Page 29: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/29.jpg)
Morning Commute Work Lunch Meeting Dinner Movie
We switch between them throughout the day
![Page 30: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/30.jpg)
www.flickr.com/photos/sixmilliondollardan/2493495506
A poor experience results in the same thing where ever it takes place
![Page 31: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/31.jpg)
Users expect an equal & continuous experience across devices
www.flickr.com/photos/joachim_s_mueller/7110473339
![Page 32: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/32.jpg)
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
![Page 33: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/33.jpg)
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
![Page 34: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/34.jpg)
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Responsive sites: The same site irrespectively of the device
![Page 35: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/35.jpg)
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
![Page 36: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/36.jpg)
www.flickr.com/photos/donsolo/2136923757/
It’s all about the modules baby
![Page 37: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/37.jpg)
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
![Page 38: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/38.jpg)
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
![Page 39: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/39.jpg)
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
sizes
![Page 40: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/40.jpg)
http://foundation.zurb.com/docs/layout.php
Breakpoints & Behaviour
![Page 41: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/41.jpg)
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
![Page 42: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/42.jpg)
Keep the core content the same but optimise the experience, display & interactions to the device
Image courtesy of Shutterstock
![Page 43: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/43.jpg)
http://thenextweb.com/
So that it’s carefully considered, like this
![Page 44: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/44.jpg)
From responsive to device agnostic design
![Page 45: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/45.jpg)
Responsive design established the principle of the same content across devices
www.flickr.com/photos/joachim_s_mueller/7110473339
![Page 46: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/46.jpg)
But it’s brought up other problems
www.flickr.com/photos/stankus/3718835245
![Page 47: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/47.jpg)
“ Smartphones accounted for 57.6% of total sales in fourth quarter of 2013 ” *
- Source: Gartner
www.flickr.com/photos/aforgrave/6168689222
![Page 48: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/48.jpg)
Internet connection is still not a given
http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291
![Page 49: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/49.jpg)
Oh, and Internet actually sleeps…
http://www.wired.com/2014/10/internet-sleeps-night-really
![Page 50: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/50.jpg)
Oh, and Internet actually sleeps…
http://www.wired.com/2014/10/internet-sleeps-night-really
![Page 51: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/51.jpg)
…and not all connections are made equal
Screenshot from http://opensignal.com/coverage-maps/UK/
![Page 52: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/52.jpg)
Adaptivedesign
![Page 53: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/53.jpg)
Content layerrich semantic HTML markup
Presentation layerCSS and styling
Client-side scripting layer JavaScript or jQuery behaviors
![Page 54: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/54.jpg)
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
![Page 55: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/55.jpg)
Context
![Page 56: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/56.jpg)
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
![Page 57: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/57.jpg)
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
![Page 58: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/58.jpg)
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
![Page 59: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/59.jpg)
www.flickr.com/photos/66327170@N07/7296381856
!
!
!
!
!
!
‘ New rule: every desktop design has to go finger friendly ’
- Josh Clark
![Page 60: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/60.jpg)
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/janitors/9968676044
![Page 61: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/61.jpg)
Impacts controls, placement & interactions
![Page 62: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/62.jpg)
www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042
We need to consider precise v.s imprecise input means
![Page 63: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/63.jpg)
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
![Page 64: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/64.jpg)
Designing for multiple devices can become a bit of a minefield
www.flickr.com/photos/cayusa/534070358
![Page 65: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/65.jpg)
We can’t always successfully tell what devices users are using
www.flickr.com/photos/adactio/6153481666
![Page 66: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/66.jpg)
It’s about content. Not what device we’re using.
![Page 67: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/67.jpg)
http://foundation.zurb.com/docs/layout.php
“ Get your content to go anywhere, because it’s going to
go everywhere. ” - Brad Frost
![Page 68: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/68.jpg)
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
![Page 69: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/69.jpg)
Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html
![Page 70: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/70.jpg)
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
![Page 71: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/71.jpg)
device browser screen input method connection speed
Any
anytime anywhereUsed
![Page 72: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/72.jpg)
How do we design something that can work on any device?
![Page 73: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/73.jpg)
www.thegrid.io
“ The design adjusts to look good on every browser and every device. Automatically.”
- The Grid
![Page 74: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/74.jpg)
It all starts with content
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
![Page 75: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/75.jpg)
Less about pages & more focus on the building blocks that make up those views
www.flickr.com/photos/boltofblue/4418442567
![Page 76: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/76.jpg)
Gone is the big reveal of the beautiful page designs
www.flickr.com/photos/nataliejohnson/377344806
![Page 77: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/77.jpg)
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
![Page 78: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/78.jpg)
How to go about it
![Page 79: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/79.jpg)
1. Understand content & content stacking strategy 2. Approach design as systems of modules3. Use content rather than device based breakpoints
![Page 80: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/80.jpg)
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/
![Page 81: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/81.jpg)
www.flickr.com/photos/boltofblue/4418442567
The more you reuse, the less modules there will be to design, define & develop
![Page 82: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/82.jpg)
www.flickr.com/photos/akrabat/9085299639
Essential for preventing ending up with too many pieces
![Page 83: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/83.jpg)
An evolution of how we’ve always worked
![Page 84: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/84.jpg)
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
![Page 85: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/85.jpg)
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
![Page 86: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/86.jpg)
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
![Page 87: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/87.jpg)
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
![Page 88: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/88.jpg)
Views
Home - large Home - small
Start identifying your building blocks & variations
![Page 89: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/89.jpg)
Views
Home - large Home - small
Start identifying your building blocks & variations
![Page 90: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/90.jpg)
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 91: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/91.jpg)
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 92: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/92.jpg)
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 93: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/93.jpg)
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 94: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/94.jpg)
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
![Page 95: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/95.jpg)
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
![Page 96: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/96.jpg)
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
![Page 97: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/97.jpg)
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
![Page 98: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/98.jpg)
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
![Page 99: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/99.jpg)
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
![Page 100: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/100.jpg)
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
![Page 101: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/101.jpg)
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
![Page 102: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/102.jpg)
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
![Page 103: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/103.jpg)
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
![Page 104: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/104.jpg)
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
![Page 105: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/105.jpg)
www.slideshare.net/yiibu/pragmatic-responsive-design
Work with breakpoints & tweakpoints, focus on content layout & EMS instead of px
![Page 106: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/106.jpg)
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
![Page 107: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/107.jpg)
Look at what’s suitable for your content & best practice for layout principles
www.flickr.com/photos/visualpunch/7351572896
![Page 108: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/108.jpg)
Basing breakpoints on screen sizes is a temporary work around
www.flickr.com/photos/gozalewis/3249104929
![Page 109: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/109.jpg)
www.flickr.com/photos/adactio/6153481666
It enforces the idea that (responsive) design is about devices. It’s not.
![Page 110: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/110.jpg)
Opt for fluid as much possible
http://foundation.zurb.com/docs/layout.php
![Page 111: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/111.jpg)
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
![Page 112: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/112.jpg)
A few final words...
![Page 113: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/113.jpg)
Image courtesy of Shutterstock
“ Every responsive design project is also a content strategy project. ”
- Karen McGrane
![Page 114: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/114.jpg)
www.flickr.com/photos/75905404@N00/7126146307
How we approach it depends…
![Page 115: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/115.jpg)
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
![Page 116: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/116.jpg)
We have to work together across disciplines, & with clients
![Page 117: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/117.jpg)
www.flickr.com/photos/byte/8282578241
Device agnostic design means giving up some control to ensure it works for as many devices as possible
![Page 118: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/118.jpg)
www.flickr.com/photos/stickkim/7491816206
Ensuring that we do what’s best for our clients, our users & us as a company
![Page 119: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/119.jpg)
Test as early as possible& then continuously
![Page 120: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/120.jpg)
device browser screen input method connection speed
Any
anytime anywhereUsed
![Page 121: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/121.jpg)
Content + Context is the focus
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
![Page 124: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/124.jpg)
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
![Page 125: UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere](https://reader037.vdocuments.site/reader037/viewer/2022110120/557d58b4d8b42aba3d8b4978/html5/thumbnails/125.jpg)
Image courtesy of Shutterstock
Thank you. Questions?@annadahlstrom | www.annadahlstrom.com