![Page 1: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/1.jpg)
Anna Dahlström www.annadahlstrom.com
annadahlstrom
A FULL DAY OF… Designing for multiple devices 10 April 2014
![Page 2: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/2.jpg)
www.flickr.com/photos/dahlstroms/4411448782
I’m Anna IA & UX designer | freelance since 2011 Swedish | in London since 2006
![Page 3: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/3.jpg)
Today 10am - 5.30pmPart 1: Understanding the multiple device landscape
Practice
Lunch
Part 2: Practicalities of multiple device projects
Practice
Break
Part 3: Adapting to input, orientation & the future
Practice
Q & A
10 am
!
12 pm
1 pm
!
3 pm
3.30 pm
![Page 4: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/4.jpg)
Part 1: Understanding the multiple devices landscapeIntroduction & defining your mobile strategy
![Page 5: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/5.jpg)
www.flickr.com/photos/pagedooley/2121472112
The world we design for has become more complex
![Page 6: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/6.jpg)
www.flickr.com/photos/jorgeq82/4732700819
We used to only have to deal with different browsers, and the fold
![Page 7: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/7.jpg)
www.flickr.com/photos/adactio/6153481666
Today it’s browsers AND endless numbers of devices & screen sizes
![Page 8: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/8.jpg)
www.flickr.com/photos/nasamarshall/6289116940
In 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to 13% and by2015 it’s expected to be above 50%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile
![Page 9: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/9.jpg)
www.flickr.com/photos/helga/3952984450/
I have a job that is unknown to many I’m a freelance IA & UX designer
www.flickr.com/photos/hlkljgk/5764422581
For every human that enters the world, five mobile devices are created.* * Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx
![Page 10: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/10.jpg)
www.flickr.com/photos/raincitystudios/95234968
As of Q3 2012 we passed 1 billion smartphones in use
![Page 11: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/11.jpg)
www.flickr.com/photos/jayfresh/3388253576
41% of emails are now opened on mobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices
![Page 12: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/12.jpg)
By the end of 2013, mobile phones will overtake PCs as the most common web access device worldwide* Source: www.gartner.com/newsroom/id/2429815
Image courtesy of Shutterstock
![Page 13: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/13.jpg)
www.flickr.com/photos/jorgeq82/4732700819
The average person looks at their phone 150 times a day.* * Source: www.textually.org/textually/archives/2012/02/030229.htm
![Page 14: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/14.jpg)
www.flickr.com/photos/exlibris/2552107635
40% of people use their phone in the bathroom. * * Source: http://www.lukew.com/ff/entry.asp?1500
![Page 15: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/15.jpg)
We go online everywhere and anywhere
Image courtesy of Shutterstock
![Page 16: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/16.jpg)
Image courtesy of Shutterstock
The old myth that mobile users are rushed & on the go doesn’t hold true
![Page 17: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/17.jpg)
www.flickr.com/photos/edduddiee/4307943164
A large proportion of our usage happens when we have time to kill
![Page 18: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/18.jpg)
www.flickr.com/photos/eyesore9/3206408088
This has implicationsfor UX & design thinking.
![Page 19: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/19.jpg)
www.flickr.com/photos/frantaylor/4296536332
Before the first iPhone the mobile use case was limited
![Page 20: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/20.jpg)
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP FULL WEBSITE
BESPOKE CUT
DOWN WEBSITE
BESPOKE CUT
DOWN WEBSITE
We built separate sites for mobile & desktop
![Page 21: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/21.jpg)
www.flickr.com/photos/demandaj/7287174776
In fact, we still do but we’re noticing something
![Page 22: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/22.jpg)
www.flickr.com/photos/joachim_s_mueller/7110473339
Users expect an equal & continuous experience across devices
![Page 23: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/23.jpg)
www.flickr.com/photos/pandiyan/4550066009
“ 7 out of 10 smartphone and tablet users expect the same quality of experience on all devices. ” * * Source: www.vibrantmedia.co.uk/press/press.asp?section=press_releases&id=256
![Page 24: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/24.jpg)
www.flickr.com/photos/martinteschner/4569495912
There are a number of reasons for this
![Page 25: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/25.jpg)
www.flickr.com/photos/philippe/2462550872
People carry out the same tasks on mobiles as they do on desktops
![Page 26: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/26.jpg)
“ More than half of Amazon customers shopped using a mobile device this holiday. ” * * Source: http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1886961&highlight=
![Page 27: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/27.jpg)
www.flickr.com/photos/joeybones/6791201819
Devices & services are getting more advanced & optimised for complex tasks
![Page 28: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/28.jpg)
www.flickr.com/photos/soyproject/6066959891
We no longer own just one device but multiple & use them interchangeably
![Page 29: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/29.jpg)
www.flickr.com/photos/visualpunch/7351572896
We want to find what we’re looking for irrespectively of the device we use
![Page 30: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/30.jpg)
www.flickr.com/photos/icedsoul/2486885051
Mobile context ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience
![Page 31: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/31.jpg)
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP FULL WEBSITE
BESPOKE CUT
DOWN WEBSITE
BESPOKE CUT
DOWN WEBSITE
Having separate sites does, for the most part, not make sense
![Page 32: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/32.jpg)
www.flickr.com/photos/tomitapio/4053123799/in/photostream
So, what should we do?
![Page 33: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/33.jpg)
www.flickr.com/photos/martinteschner/4569495912
Our main options are bespoke mobile sites, responsive sites and apps
![Page 34: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/34.jpg)
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
![Page 35: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/35.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 36: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/36.jpg)
www.flickr.com/photos/paul-r/217948368
Apps, well we all know they come from app stores
![Page 37: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/37.jpg)
www.flickr.com/photos/tomitapio/4053123799/in/photostream
How do we know when to do what?
![Page 38: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/38.jpg)
www.flickr.com/photos/edenandjosh/2892956576
Bespoke mobile sitesshould be avoided, if we can
![Page 39: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/39.jpg)
www.flickr.com/photos/lastquest/1472794031
“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 40: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/40.jpg)
www.flickr.com/photos/st3f4n/3476036180
Two main exceptions:technical limitations to the CMS, or if required for the audience
![Page 41: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/41.jpg)
www.flickr.com/photos/ericconstantineau/5618576278
The alternative is messy & costly
![Page 42: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/42.jpg)
www.flickr.com/photos/nikio/3899114449
It means maintaining multiple technical solutions...
![Page 43: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/43.jpg)
www.flickr.com/photos/sharynmorrow/127184319
...and also maintaining multiple versions of your content
![Page 44: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/44.jpg)
www.flickr.com/photos/bulldogsrule/187693681
Realistically that means making cuts & frustrating users
![Page 45: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/45.jpg)
For the first time smartphones and tablets made up more than one-third of total clicks on Google in Q3* * Source: http://econsultancy.com/uk/blog/63605-us-mobile-paid-search-spend-up-66-year-on-year-stats
www.flickr.com/photos/antoniolas/4367543346
![Page 46: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/46.jpg)
www.flickr.com/photos/sixmilliondollardan/2493495506
Poor mobile experiences result in the same thing - drop offs
![Page 47: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/47.jpg)
Keep the core content the same & optimise the experience, display & interactions to the device
Image courtesy of Shutterstock
![Page 48: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/48.jpg)
Meet responsive design
www.flickr.com/photos/taytom/5277657429
![Page 49: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/49.jpg)
www.flickr.com/photos/tomitapio/4053123799/in/photostream
But...what about apps?
![Page 50: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/50.jpg)
www.flickr.com/photos/martinteschner/4569495912
Whether to do an app or not comes down to...
![Page 51: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/51.jpg)
Image courtesy of Shutterstock
User & business objectives...
![Page 52: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/52.jpg)
If you need to utilise device specific capabilities...
www.flickr.com/photos/cindyli/3784225848
![Page 53: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/53.jpg)
www.flickr.com/photos/arjencito/6531640463
If offline reading is required...
![Page 54: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/54.jpg)
Image courtesy of Shutterstock
And of course budget
![Page 55: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/55.jpg)
www.flickr.com/photos/andwhynot/2946734025
Analytics of entry points can also provide some guidance
![Page 56: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/56.jpg)
www.flickr.com/photos/haagsuitburo/5349040355
Mainly direct traffic: could be an argument for an app
![Page 57: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/57.jpg)
www.flickr.com/photos/soundslogical/4255801733
Mainly shared links: ensure your site is optimised for mobile
![Page 58: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/58.jpg)
www.flickr.com/photos/dougbelshaw/4360008898
“ Don’t build an app for the sake of it. Focus on the goal of your mobile initiatives, prioritize your company’s needs, and choose a solution that can best address these needs now and into the future.* ” * Source: http://success.adobe.com/en/na/programs/products/digitalmarketing/offers/apr/1304-32060-2013-optimization-survey-results.html
![Page 59: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/59.jpg)
App design
![Page 60: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/60.jpg)
www.flickr.com/photos/jdhancock/4354438814
Apps are focused & personal
![Page 61: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/61.jpg)
www.flickr.com/photos/nrkbeta/3906687294/in/photostream
Not as easy as just doing an app for e.g. iOS or Android
![Page 62: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/62.jpg)
www.flickr.com/photos/aforgrave/6168689222
Need to consider fragmentation across different versions & backwards compatibility
![Page 63: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/63.jpg)
Source: http://developer.android.com/about/dashboards/index.html
Relative number of active Android devices across different versions
www.flickr.com/photos/blakespot/4773693893
![Page 64: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/64.jpg)
www.flickr.com/photos/blakespot/4773693893
Comparison of adoption rate for iOS7, iOS6 and iOS5
Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker
![Page 65: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/65.jpg)
www.flickr.com/photos/gadl/3570118243
Every platform has their own ui guidelines that their users are used to
![Page 66: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/66.jpg)
CONSISTENT ACROSS VERSIONS !NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTON Should always take the user one step back from where they came from & be descriptive.
TAB BAR Can often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Basic iOS app structure
![Page 67: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/67.jpg)
DIFFERENT BETWEEN VERSIONS: !NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BAR Holds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site.
Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
Basic Android app structure
![Page 68: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/68.jpg)
The good that adapt to the platform
iOS iOSAndroid Android
![Page 69: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/69.jpg)
www.flickr.com/photos/dougbelshaw/4360008898
” Money spent developing a pretty but limited iPhone app only benefits [...] the few, but money spent on the website UI would have benefitted everyone. ”
- Gary Marshall on ‘The app trap’ in .net Magazine
![Page 70: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/70.jpg)
Type to enter text
!
!
NATIVE APPS (e.g. Instagram)
• MOST OPTIMISED USER EXPERIENCE • ACCESS TO DEVICE CAPABILITIES & APIs • BUT REQUIRES PLATFORM SPECIFIC CODE BASE !
HYBRID (e.g. First Facebook, Basecamp)
• USE OF HTML5 & JAVASRIPT • WRAPPER TO PROVIDE NATIVE CAPABILITIES • FEWER “VERSIONS” TO MAINTAIN • BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS • CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES !
There are different types of apps
![Page 71: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/71.jpg)
Responsive design
![Page 72: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/72.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 73: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/73.jpg)
www.flickr.com/photos/adactio/5818096043
“ 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 74: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/74.jpg)
http://foundation.zurb.com/docs/layout.php
The backbone is your grid & breakpoints
![Page 75: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/75.jpg)
Columns & gutters can be fluid or fixed, or a combination.
http://foundation.zurb.com/docs/layout.php
![Page 76: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/76.jpg)
www.flickr.com/photos/donsolo/2136923757
The grid helps with defining modules for pages & views
![Page 77: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/77.jpg)
“ Content needs to be choreographed to ensure the intended message is preserved on any
device and at any width “
- Trent Waltonwww.flickr.com/photos/theaftershock/2811382400
![Page 78: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/78.jpg)
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
Define your content stacking strategy across devices & orientation.
![Page 79: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/79.jpg)
Identify and prioritise the content across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
![Page 80: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/80.jpg)
www.flickr.com/photos/garrettc/6260768486/
Don’t just work with columns but think of the narrative of the views
![Page 81: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/81.jpg)
http://thenextweb.com/
So that it’s carefully considered, like this
![Page 82: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/82.jpg)
Mobile or desktop first, the key is considering the content & how it will work across devices
![Page 83: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/83.jpg)
Time to practice
![Page 84: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/84.jpg)
www.flickr.com/photos/pinkpurse/5355919491
A big retail store has asked you to come up with a Easter Hunt across London where offers and give aways are hidden at certain locations. There will only be a certain number of items available each day & they want to be able to notify people when an item has been found. The site/app should support finding offers nearby, and location should be a key The following should also be included:
TheBRIEF
• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 85: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/85.jpg)
www.flickr.com/photos/pinkpurse/5355919491
01
HOW WOULD MOST PEOPLE ACCESS IT? • Direct traffic vs. shared links?
!WHAT DO YOU NEED IT TO DO? • Device specific capabilities needed? • Is offline reading/ usage required?
WHAT ARE THE OBJECTIVES & PRACTICALITIES? • The budget • The current technical platform • Could an app be re-used later • The marketing value of an app
BESPOKE MOBILE SITE VS. RESPONSIVE VS. AN APP
The client has come to you with the Easter hunt idea and are asking for your advice on what they should be doing.
What would you recommend in terms of mobile presence & why? A bespoke mobile site, responsive site, an app or a combination?Consider:
![Page 86: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/86.jpg)
www.flickr.com/photos/pinkpurse/5355919491
02 CONTENT STACKING STRATEGY
Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work.
For the home page only do a rough sketch of what the page should contain & how the content should be prioritised.
Using content stacking methodology define how the content should be prioritised on desktop & mobile.
The client’s requirements were:• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 87: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/87.jpg)
Define your content stacking strategy across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
![Page 88: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/88.jpg)
www.flickr.com/photos/garrettc/6260768486/
Don’t just work with columns but think of the narrative of the views
![Page 89: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/89.jpg)
www.flickr.com/photos/pinkpurse/5355919491
02 CONTENT STACKING STRATEGY
Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work.
For the home page only do a rough sketch of what the page should contain & how the content should be prioritised.
Using content stacking methodology define how the content should be prioritised on desktop & mobile.
The client’s requirements were:• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 90: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/90.jpg)
www.flickr.com/photos/pinkpurse/5355919491
03 APP STRUCTURE
With a better idea of the content for the Easter Hunt campaign, work also begins on the app. Based on the content & functionality requirements as well as what you know, consider what would be suitable to include in the app.
Focusing only on the app navigation how would you structure this if you were to do an iOS app & an Android app? Look at the Tab bar items respectively Action bar items & what would go in them as well as the ‘More’ respectively ‘Overflow menu’.
• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 91: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/91.jpg)
CONSISTENT ACROSS VERSIONS !NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTON Should always take the user one step back from where they came from & be descriptive.
TAB BAR Can often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Basic iOS app structure
![Page 92: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/92.jpg)
DIFFERENT BETWEEN VERSIONS: !NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BAR Holds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site.
Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
Basic Android app structure
![Page 93: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/93.jpg)
www.flickr.com/photos/pinkpurse/5355919491
03 APP STRUCTURE
With a better idea of the content for the Easter Hunt campaign, work also begins on the app. Based on the content & functionality requirements as well as what you know, consider what would be suitable to include in the app.
Focusing only on the app navigation how would you structure this if you were to do an iOS app & an Android app? Look at the Tab bar items respectively Action bar items & what would go in them as well as the ‘More’ respectively ‘Overflow menu’.
• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 94: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/94.jpg)
Lunch 12 - 1pm
![Page 95: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/95.jpg)
Part 2: Practicalities of multiple device projectsCommon challenges, content strategy, structures, navigation patterns, testing
![Page 96: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/96.jpg)
www.flickr.com/photos/helga/3952984450
Some of the most common challenges with multiple device designs are...
![Page 97: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/97.jpg)
www.flickr.com/photos/pinkpurse/5355919491
1. Knowing where to start...• Define your mobile strategy • Start sketching • And work across disciplines
![Page 98: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/98.jpg)
www.flickr.com/photos/jorgeq82/4732700819
2. How many versions to wireframe...• Depends on your project, budget & team as well as who’s
building it • Focus on identifying key templates & then the modules
that make up the views
![Page 99: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/99.jpg)
www.flickr.com/photos/donsolo/2136923757
3. How to approach visual design• Less static designs • Focus on modules & modularity • Continuously prototype to test how the content behaves
![Page 100: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/100.jpg)
www.flickr.com/photos/dpstyles/3448453466
4. What screen sizes & which resolutions?• Use analytics as a guidance • Ensure it works for the most common ones • Design as device agnostic as possible
![Page 101: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/101.jpg)
www.slideshare.net/yiibu/pragmatic-responsive-design
5. How to define breakpoints• As much possible let the content be the guide • Use breakpoints & tweakpoints & EMS instead of px • Consult analytics for devices to identify most important
screen sizes & ensure content displays properly for those • If all things fail, use screen sizes for mayor layout changes
![Page 102: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/102.jpg)
www.flickr.com/photos/nomadic_lass/5598218199
6. How many devices to test on• As many as possible • Prioritise based on your audience • Use research & analytics for guidance
![Page 103: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/103.jpg)
www.flickr.com/photos/adactio/6153481666
“ 80% of your traffic in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.* Source: * Source: www.slideshare.net/yiibu/pragmatic-responsive-design
![Page 104: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/104.jpg)
xxx
7. How to handle images• Images & icons should be as flexible as possible • Consider load times & page weight • Look at ways for loading smaller images first • Take the image in question into consideration
![Page 105: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/105.jpg)
Responsive navigation patterns
![Page 106: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/106.jpg)
www.flickr.com/photos/melodramababs/2766765248
“ Mobile navigation should be like a good friend: there when you need them but cool enough to give you your space. “ * Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
![Page 107: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/107.jpg)
Brad Frost has written 2 excellent posts on Responsive navigation patterns
xxxhttp://bradfrostweb.com/blog/web/responsive-nav-patterns
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
![Page 108: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/108.jpg)
Simple navigation patterns 1) Top nav or “do nothing” !2) The toggle !3) The left nav flyout
http://bradfrostweb.com/blog/web/responsive-nav-patterns
![Page 109: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/109.jpg)
Top nav or “Do nothing” keeps the navigation at the top
Via Brad Frost (thank you!)
http://skinnyties.com
PROS Simple to implement
Less design & development implications
!
CONS Not scalable
Potential height issues
![Page 110: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/110.jpg)
The toggle hides navigation items in a menu
Via Brad Frost (thank you!)
www.smashingmagazine.com
PROS
Optimises screen use
Recognised from apps
Scalable
!
CONS
Possible animation performance problems
Javascript dependent
![Page 111: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/111.jpg)
The left nav flyoutmenu items are accessed from a tray sliding in
Via Brad Frost (thank you!)
Images from Barack Obama via Brad Frost
PROS
Space generous
Recognised nav pattern from apps
!
CONS
More advanced and doesn’t work on all devices
![Page 112: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/112.jpg)
Complex navigation patterns 1) The multi toggle !2) Right to left !3) Skip the sub-nav !4) Priority+ !5) The carousel+
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
![Page 113: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/113.jpg)
The multi togglenested navigation grouped under a menu
Via Brad Frost (thank you!)
http://thenextweb.com
PROS
Scannable
Scalable
!
CONS
Animation performance
Javascript dependent
Barack Obama - image via Stephanie Rieger
![Page 114: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/114.jpg)
Right to leftthe next level navigation slides in right to left
Via Brad Frost (thank you!)
www.sony.com
PROS
Nice looking
Follows mobile conventions
Scalable
!
CONS
More complex to implement
Animation performance
![Page 115: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/115.jpg)
Skip the sub-navnext level navigation is displayed on that level
Via Brad Frost (thank you!)
http://worldwildlife.org
PROS
Simple
Removes complexities around sub-navigation
!
CONS
Re-quires page refresh & visit for access
![Page 116: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/116.jpg)
Priority+shows most important & hides the rest in a menu
Via Brad Frost (thank you!)
www.bbc.co.uk/sport
PROS
Simple
Supports (supposedly) most used)
Scalable
!
CONS
Hides potentially important items
![Page 117: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/117.jpg)
The carousel+ carousel for main sections, sub-nav when in focus
Via Brad Frost (thank you!)
Image from Intel via Brad Frost
PROS
Easy to navigate
Suitable for touch
!
CONS
Doesn’t display all parent categories at once
Less good for non-touch devices
Not suitable for multi-level sub-navs
![Page 118: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/118.jpg)
Theresa Neil’sMobile Design Pattern Gallery
www.mobiledesignpatterngallery.com
![Page 119: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/119.jpg)
www.flickr.com/photos/martinteschner/4569495912
Use mobile as a reason to re-consider your navigation& prioritise search
![Page 120: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/120.jpg)
www.flickr.com/photos/inpivic/5205918163/
Consider your project: assess the depth needed as well as pros & cons of approaches
![Page 121: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/121.jpg)
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
Define & work with types of navigation: primary, secondary, tertiary, footer & contextual
![Page 122: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/122.jpg)
BBC Sport - desktop
Last but not least, consider navigation across products & keep it similar to aid familiarity
BBC Sport - mobile site
BBC Sport - app
![Page 123: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/123.jpg)
App structures
![Page 124: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/124.jpg)
www.flickr.com/photos/gadl/3570118243
Every platform has their own ui guidelines that their users are used to
![Page 125: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/125.jpg)
iPhone resources help & inspiration well documented
![Page 126: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/126.jpg)
Android resources help & inspiration a little less well documented for earlier versions
![Page 127: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/127.jpg)
CONSISTENT ACROSS VERSIONS !NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTON Should always take the user one step back from where they came from & be descriptive.
TAB BAR Can often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Basic iOS app structure
![Page 128: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/128.jpg)
DIFFERENT BETWEEN VERSIONS: !NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BAR Holds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site.
Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
Basic Android app structure
![Page 129: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/129.jpg)
Look for inspiration
http://pttrns.com/categories/13-navigations
![Page 131: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/131.jpg)
www.flickr.com/photos/saucef/7184615025
Start by sketching screenflows, navigation & content
![Page 132: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/132.jpg)
www.flickr.com/photos/lindzgraham/5605911999
Avoid using the home screen as a stepping point. Instead deliver value from first view
![Page 133: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/133.jpg)
Bring users straight to what they use the most
Facebook FlipboardFeedly Hootsuite
Straight in Stepping stone
![Page 134: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/134.jpg)
Testing apps & responsive designs
![Page 135: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/135.jpg)
Test as early as possible& then continuously
![Page 136: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/136.jpg)
In the browser by resizing the browser window & checking the display of content
http://thenextweb.com
![Page 137: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/137.jpg)
www.flickr.com/photos/jorgeq82/4732700819
In the browser by designing in the browser & creating a working HTML prototype
![Page 138: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/138.jpg)
http://responsive.is/typecast.com
Using tools that help you style & test your typography before implementing it
![Page 139: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/139.jpg)
www.responsinator.com/
http://quirktools.com/screenfly/
http://screenqueri.es/
Using emulators that allow you to view your site across devices & orientations
http://mattkersley.com/responsive/
![Page 140: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/140.jpg)
www.flickr.com/photos/arne/5835855777/in/photostream
On actual devices, though expensive there are ways around it
![Page 141: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/141.jpg)
www.flickr.com/photos/adactio/6800969243/in/photostream
Buying bundles and sharing, hereby helping each other
![Page 142: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/142.jpg)
www.flickr.com/photos/jorgeq82/4732700819
With users define your objectives, audience, test cases, consider expectations & limitations
![Page 143: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/143.jpg)
Testing apps flow, navigation, interactions, transitions
![Page 144: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/144.jpg)
From testing sketches as paper prototypes or as clickable prototypes...
www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
![Page 145: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/145.jpg)
...to iterations of wireframes & designs
www.flickr.com/photos/fluent_methods/6961802861
![Page 146: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/146.jpg)
Time to practice
![Page 147: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/147.jpg)
www.flickr.com/photos/pinkpurse/5355919491
04 SIMPLE RESPONSIVE NAVIGATION
Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site.
Based on what you’ve identified so far, define how the navigation will work for desktop and smartphone and explain how you came to it
Consider 1) Top nav or “do nothing”, 2) The toggle and 3) The left nav flyout in relation to what you need, future aspects, cross device patterns and the client’s requirements:• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 148: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/148.jpg)
Top nav or “Do nothing” keeps the navigation at the top
Via Brad Frost (thank you!)
http://skinnyties.com
PROS Simple to implement
Less design & development implications
!
CONS Not scalable
Potential height issues
![Page 149: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/149.jpg)
The toggle hides navigation items in a menu
Via Brad Frost (thank you!)
www.smashingmagazine.com
PROS
Optimises screen use
Recognised from apps
Scalable
!
CONS
Possible animation performance problems
Javascript dependent
![Page 150: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/150.jpg)
The left nav flyoutmenu items are accessed from a tray sliding in
Via Brad Frost (thank you!)
Images from Barack Obama via Brad Frost
PROS
Space generous
Recognised nav pattern from apps
!
CONS
More advanced and doesn’t work on all devices
![Page 151: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/151.jpg)
www.flickr.com/photos/pinkpurse/5355919491
04 SIMPLE RESPONSIVE NAVIGATION
Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site.
Based on what you’ve identified so far, define how the navigation will work for desktop and smartphone and explain how you came to it
Consider 1) Top nav or “do nothing”, 2) The toggle and 3) The left nav flyout in relation to what you need, future aspects, cross device patterns and the client’s requirements:• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 152: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/152.jpg)
www.flickr.com/photos/pinkpurse/5355919491
05 COMPLEX RESPONSIVE NAVIGATION
The client loves the work that you’ve done so far and other cities in the UK wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing offers and give aways by store (e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment).
Would this change your navigation recommendation, and if so why? Define how the navigation should work for desktop and smartphone.
Consider 1) The multi toggle, 2) Right to left, 3) Skip the sub-nav, 4) Priority+, 5) The carousel+ as well as other ways that a user could navigate to content.• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 153: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/153.jpg)
The multi togglenested navigation grouped under a menu
Via Brad Frost (thank you!)
http://thenextweb.com
PROS
Scannable
Scalable
!
CONS
Animation performance
Javascript dependent
Barack Obama - image via Stephanie Rieger
![Page 154: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/154.jpg)
Right to leftthe next level navigation slides in right to left
Via Brad Frost (thank you!)
www.sony.com
PROS
Nice looking
Follows mobile conventions
Scalable
!
CONS
More complex to implement
Animation performance
![Page 155: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/155.jpg)
Skip the sub-navnext level navigation is displayed on that level
Via Brad Frost (thank you!)
http://worldwildlife.org
PROS
Simple
Removes complexities around sub-navigation
!
CONS
Re-quires page refresh & visit for access
![Page 156: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/156.jpg)
Priority+shows most important & hides the rest in a menu
Via Brad Frost (thank you!)
www.bbc.co.uk/sport
PROS
Simple
Supports (supposedly) most used)
Scalable
!
CONS
Hides potentially important items
![Page 157: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/157.jpg)
The carousel+ carousel for main sections, sub-nav when in focus
Via Brad Frost (thank you!)
Image from Intel via Brad Frost
PROS
Easy to navigate
Suitable for touch
!
CONS
Doesn’t display all parent categories at once
Less good for non-touch devices
Not suitable for multi-level sub-navs
![Page 158: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/158.jpg)
www.flickr.com/photos/pinkpurse/5355919491
05 COMPLEX RESPONSIVE NAVIGATION
The client loves the work that you’ve done so far and other cities in the UK wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing offers and give aways by store (e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment).
Would this change your navigation recommendation, and if so why? Define how the navigation should work for desktop and smartphone.
Consider 1) The multi toggle, 2) Right to left, 3) Skip the sub-nav, 4) Priority+, 5) The carousel+ as well as other ways that a user could navigate to content.• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 159: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/159.jpg)
www.flickr.com/photos/pinkpurse/5355919491
06 APP NAVIGATION
With the initial brief having changed from London to UK wide, and with having to view offers and give aways based on store and type, we need to go back over what we recommended for the app structure.
Based on what you’ve defined for desktop and smartphone for the responsive site, how would you do the app navigation?
Consider frequency of use, a level of familiarity between web views and the app.
• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 160: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/160.jpg)
Break 3 - 3.30pm
![Page 161: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/161.jpg)
Part 3: Adapting to input, orientations & the futureTouch across devices, device orientation, mobile context, device agnostic design
![Page 162: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/162.jpg)
www.flickr.com/photos/lastquest/1472794031
“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 163: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/163.jpg)
www.flickr.com/photos/david_a_lea/3247217194
We’re already facing two particular challenges...
![Page 164: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/164.jpg)
www.flickr.com/photos/michale/210536054
1. Breakpoints based on popular devices puts us into a corner
![Page 165: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/165.jpg)
www.flickr.com/photos/lokan/8843464852
2. Touch is no longer limited to smartphones & tablets
![Page 166: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/166.jpg)
Input & touch across devices
![Page 167: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/167.jpg)
www.flickr.com/photos/patdavid/9391602153
“ Touch has landed on the desktop. “
- Josh Clark
![Page 168: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/168.jpg)
www.flickr.com/photos/66327170@N07/7296381856
‘New rule: every desktop design has to go finger-friendly’* * Source: http://globalmoxie.com/blog/desktop-touch-design.shtml
![Page 169: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/169.jpg)
As always... ...it depends
![Page 170: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/170.jpg)
“ Touch screen laptop sales have jumped 52% in the last quarter. 5 years from now you will not be able to buy a Windows computer without a touch screen. ”* * Source: http://www.lukew.com/ff/entry.asp?1750
Screenshot from www.currys.co.uk
![Page 171: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/171.jpg)
www.flickr.com/photos/adactio/6153481666
We should consider touch across all devices & screen sizes. Not just smartphones & tablets
![Page 172: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/172.jpg)
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
The way we use touch screens differ based on device, but also across the same device
www.flickr.com/photos/janitors/9968676044
![Page 173: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/173.jpg)
www.flickr.com/photos/jorgeq82/4732700819
49% of users hold their phone in one hand, but how they hold it differs
![Page 174: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/174.jpg)
ONE HAND (R: 66% L: 33%)
CRADLING (L: 79% R: 21%)
TWO HANDS
72% 28%
90% 10%
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Other variationsbased on 1,333 observations during 2 months
![Page 175: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/175.jpg)
Holding our devices is not a static stage. It changes
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
![Page 176: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/176.jpg)
Image courtesy of Shutterstock
“ Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ”
- Josh Clark
![Page 177: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/177.jpg)
Impacts controls, placement & interactions
![Page 178: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/178.jpg)
www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042
We need to consider precise (e.g. mouse) v.s imprecise (e.g. fingers) input means
![Page 179: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/179.jpg)
Our current approach to navigation is based on the mouse as input
Source: Luke W - www.lukew.com/ff/entry.asp?1649
![Page 180: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/180.jpg)
www.flickr.com/photos/intelfreepress/6837427202
For hybrids we tend to rest arms & grab bottom corners
![Page 181: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/181.jpg)
Source: Luke W - www.lukew.com/ff/entry.asp?1649
From...
...towards
Consider reach & obscuring content & adjust navigation accordingly
![Page 182: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/182.jpg)
Screenshot from http://polarb.com/polls/tags/mobiledesign
“ Looking at the Polar interface on a laptop can be a bit disconcerting because we’ve essentially left the middle of the page “blank”. ”
- Luke W
![Page 183: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/183.jpg)
www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164
Based on the context & use case, posture, grip & orientation varies
![Page 184: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/184.jpg)
Mobile context
![Page 185: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/185.jpg)
www.flickr.com/photos/kalexanderson/6716348037
Situational context impacts firm vs. loose grip
![Page 186: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/186.jpg)
www.flickr.com/photos/icedsoul/2486885051
Mobile context ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience
![Page 187: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/187.jpg)
The context differs based on situation, attitudes & preferences
www.flickr.com/photos/hoyvinmayvin/5873697252
![Page 188: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/188.jpg)
www.flickr.com/photos/hoyvinmayvin/5873139941
The same context doesn’t equal the same situation
![Page 189: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/189.jpg)
Other aspects to consider for the mobile context are...
www.flickr.com/photos/icedsoul/2486885051
![Page 190: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/190.jpg)
www.flickr.com/photos/nadiya95/7217734288/
Attention span data snacking vs. focused usage
![Page 191: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/191.jpg)
www.flickr.com/photos/arjencito/6531640463/
Signal coverage speed & reliability of the connection
![Page 192: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/192.jpg)
www.flickr.com/photos/garry61/3191250682
Location moving about vs. in one location
![Page 193: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/193.jpg)
www.flickr.com/photos/adactio/6153481666
The screen small, medium, large & of course touch or not
![Page 194: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/194.jpg)
www.flickr.com/photos/helga/3545310740
Posture & grip how we sit/ stand as well as interact with the device
![Page 195: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/195.jpg)
Reading Watching Typing
Certain orientations are betterfor certain tasks
![Page 196: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/196.jpg)
There are three main approaches for adapting to orientation
RE-POSITION REVEAL/ HIDESCALE
![Page 197: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/197.jpg)
www.flickr.com/photos/cayusa/534070358
Adapting to orientation AND different devices can become a bit of a mindfield
![Page 198: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/198.jpg)
www.flickr.com/photos/martinteschner/4569495912
Move away from devices
![Page 199: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/199.jpg)
Device agnostic design
![Page 200: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/200.jpg)
www.flickr.com/photos/adactio/6153481666
Remember how we can’t successfully tell what devices users are using
![Page 201: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/201.jpg)
The web is after all about content. Not what device we are using
Image courtesy of Shutterstock
![Page 202: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/202.jpg)
www.flickr.com/photos/mirafoto/494444094
“ Get your content to go anywhere, because it’s going to go everywhere. ”
- Brad Frost
![Page 203: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/203.jpg)
www.flickr.com/photos/byte/8282578241
Aim to make it more future proof by moving away from specific devices
![Page 204: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/204.jpg)
www.flickr.com/photos/sharynmorrow/127184319
Use natural breakpoints based on content layout rather than focusing on devices
![Page 205: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/205.jpg)
www.flickr.com/photos/visualpunch/7351572896
Look at what’s suitable for your content & best practice for layout principles
![Page 206: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/206.jpg)
It’s not without challenges, but challenges are meant to be overcome
Image courtesy of Shutterstock
![Page 207: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/207.jpg)
www.flickr.com/photos/nikio/3899114449
“ By default the web has no optimal width, optimal height, optimal font-size or optimal anything really. ”
- Edward O’Riordan
![Page 208: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/208.jpg)
www.flickr.com/photos/soundslogical/4255801733
“ The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. ”
- Elliot J Stocks
![Page 209: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/209.jpg)
www.flickr.com/photos/gozalewis/3249104929
Basing breakpoints on screen sizes is a temporary work around
![Page 210: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/210.jpg)
www.slideshare.net/yiibu/pragmatic-responsive-design
Work with breakpoints & tweakpoints, focus on content layout & EMS instead of px
![Page 211: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/211.jpg)
The same with columns, opt for fluid as much possible
http://foundation.zurb.com/docs/layout.php
![Page 212: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/212.jpg)
www.flickr.com/photos/donsolo/2136923757/
This brings us back to the importance of modularity
![Page 213: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/213.jpg)
www.flickr.com/photos/boltofblue/4418442567
Less about pages & more focus on the building blocks that make up those views
![Page 214: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/214.jpg)
www.flickr.com/photos/miuenski/3127285991
No more is it about beautiful page designs...
![Page 215: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/215.jpg)
www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
...but about views that will look different across browsers, screen sizes & devices
![Page 216: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/216.jpg)
www.flickr.com/photos/boltofblue/4418442567
The more you reuse, the less modules there will be to design, define and develop
![Page 217: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/217.jpg)
www.flickr.com/photos/akrabat/9085299639
Essential for preventing ending up with too many pieces
![Page 218: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/218.jpg)
www.flickr.com/photos/webatelier/5929299679
This helps meeting requirements across screen sizes and page views
![Page 219: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/219.jpg)
www.flickr.com/photos/webatelier/5929855686
And, it minimises design & development efforts
![Page 220: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/220.jpg)
Image courtesy of Shutterstock
Good for the future & the budget
![Page 221: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/221.jpg)
www.flickr.com/photos/techsavvyed/5926978939
Responsive design is based on modular views rather than static pages
![Page 222: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/222.jpg)
www.flickr.com/photos/songzhen/4893025042
Need to know what you design for in order to identify & define what modules to use where
![Page 223: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/223.jpg)
www.flickr.com/photos/songzhen/4893025042
As well as what content variations & sizes you need for different pages & devices
![Page 224: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/224.jpg)
Start by identifying the main module types & common
elements between pages
![Page 225: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/225.jpg)
Define your content stacking strategy across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
![Page 226: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/226.jpg)
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Define display variations as well as the elements they are made up of
Desktop/ tablet Mobile
![Page 227: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/227.jpg)
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Isolate elements that need to be able to break out to meet your content stacking strategy
Desktop/ tablet Mobile
![Page 228: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/228.jpg)
www.flickr.com/photos/katherinekenny
Adapt to the device & screen in question; both order & priority as well as interactions, how much to show & how
![Page 229: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/229.jpg)
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Desktop/ tablet Mobile
Little by little you build up a module library of defined components for your views, across devices & orientations
![Page 230: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/230.jpg)
Screenshot: www.crayola.co.uk/
“ 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
![Page 231: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/231.jpg)
www.flickr.com/photos/75905404@N00/7126146307
How we approach it depends on your project, budget and time frame & if it’s being built externally
![Page 232: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/232.jpg)
www.flickr.com/photos/bingisser/154452815
What we cannot do is take a waterfall approach with responsive design where we hand over from to the other
![Page 233: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/233.jpg)
We have to work together across disciplines
![Page 234: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/234.jpg)
www.flickr.com/photos/martinteschner/4569495912
This includes clients both in terms of what they can expect & what will be expected of them
![Page 235: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/235.jpg)
www.flickr.com/photos/byte/8282578241
Responsive design means giving up some control to ensure it works for as many devices as possible
![Page 236: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/236.jpg)
www.flickr.com/photos/stickkim/7491816206
Ensuring that we do what’s best for our clients, our users & us as a company
![Page 237: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/237.jpg)
Time to practice
![Page 238: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/238.jpg)
www.flickr.com/photos/pinkpurse/5355919491
07 MODULAR, DEVICE AGNOSTIC DESIGN
To ensure our content really can go anywhere we’re going to take a device agnostic approach to fleshing out the responsive site. For that we need to really understand the content and how it’s going to flow.
Work through the main pages of the site by identifying what content that goes on each. Define your main module types & sketch out how these modules are going to be displayed & adapted across screen sizes.
Think about natural breakpoints, good practice for display of content as well as how to reuse as much as possible between different views• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 239: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/239.jpg)
Start by identifying the main module types & common
elements between pages
![Page 240: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/240.jpg)
Define your content stacking strategy across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
![Page 241: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/241.jpg)
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Define display variations as well as the elements they are made up of
Desktop/ tablet Mobile
![Page 242: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/242.jpg)
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Isolate elements that need to be able to break out to meet your content stacking strategy
Desktop/ tablet Mobile
![Page 243: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/243.jpg)
www.flickr.com/photos/katherinekenny
Adapt to the device & screen in question; both order & priority as well as interactions, how much to show & how
![Page 244: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/244.jpg)
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Desktop/ tablet Mobile
Little by little you build up a module library of defined components for your views, across devices & orientations
![Page 245: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/245.jpg)
www.flickr.com/photos/pinkpurse/5355919491
07 MODULAR, DEVICE AGNOSTIC DESIGN
To ensure our content really can go anywhere we’re going to take a device agnostic approach to fleshing out the responsive site. For that we need to really understand the content and how it’s going to flow.
Work through the main pages of the site by identifying what content that goes on each. Define your main module types & sketch out how these modules are going to be displayed & adapted across screen sizes.
Think about natural breakpoints, good practice for display of content as well as how to reuse as much as possible between different views• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 246: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/246.jpg)
www.flickr.com/photos/pinkpurse/5355919491
08 ADAPTING TO DEVICE ORIENTATION
The client has asked you to consider how the content is going to adapt based on device orientation, i.e. from portrait to landscape.
Discuss where this might be applicable and sketch up how the content could adapt based on device orientation.Consider desktop/tablet and smartphone as well as how certain orientations are better for certain tasks
• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 247: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/247.jpg)
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
The way we use touch screens differ based on device, but also across the same device
www.flickr.com/photos/janitors/9968676044
![Page 248: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/248.jpg)
Reading Watching Typing
Certain orientations are betterfor certain tasks
![Page 249: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/249.jpg)
There are three main approaches for adapting to orientation
RE-POSITION REVEAL/ HIDESCALE
![Page 250: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/250.jpg)
www.flickr.com/photos/pinkpurse/5355919491
08 ADAPTING TO DEVICE ORIENTATION
The client has asked you to consider how the content is going to adapt based on device orientation, i.e. from portrait to landscape.
Discuss where this might be applicable and sketch up how the content could adapt based on device orientation.Consider desktop/tablet and smartphone as well as how certain orientations are better for certain tasks
• About page • List of offers • Product pages • Notifications
• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item
![Page 251: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/251.jpg)
A few final words...
![Page 252: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/252.jpg)
www.flickr.com/photos/byte/8282578241
Any screen should be your starting point
![Page 253: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/253.jpg)
“ Every responsive design project is also a content strategy project. ”
- Karen McGrane
Image courtesy of Shutterstock
![Page 254: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/254.jpg)
www.flickr.com/photos/jtravism/2417205289
There is no right way & the following is just one way of approaching it
![Page 255: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/255.jpg)
!
1. Define target audiences, goals & needs (user & business)
2. Identify key user journeys
3. Identify key pages
4. Identify the content & functional requirements for each key page
5. Across all pages identify common content module types, e.g. featured product
6. Re-visit, list & prioritise the content for each page
7. From this Identify the variations that are needed for each content module type
8. Lay out the content modules across key pages (mobile or desktop first)
9. Work through layout and content stacking strategy across devices
10. Define templates for the content module types (variations & across devices)
11. Iteratively work through your pages, test & adjust modules & variations as needed
www.flickr.com/photos/poetatum/3335900523
Steps for responsive & modular design
![Page 256: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/256.jpg)
Type to enter textIt’s not just about the smaller screens but also the big ones
www.flickr.com/photos/jolives/2889944573/
![Page 257: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/257.jpg)
Its’s about thinking & planning ahead
www.flickr.com/photos/jolives/2889944573
![Page 258: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/258.jpg)
It doesn’t have to break the bank. Maintaining different versions will
www.flickr.com/photos/gi/5537770007
![Page 259: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/259.jpg)
Be creative & challenge what exists today
www.flickr.com/photos/oter/5090592214
![Page 260: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/260.jpg)
www.flickr.com/photos/jdhancock/4354438814
Remember to test & iterate, sketch as much as possible & work collaboratively
![Page 261: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/261.jpg)
www.flickr.com/photos/matterphotography/2739799786
“ Every time you redesign God kills a kitten “
- Louis Rosenfeld
![Page 262: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/262.jpg)
Useful resources
![Page 263: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/263.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://bradfrost.github.io/this-is-responsive/resources.html
http://mediaqueri.es/popular/
http://www.alistapart.com/articles/responsive-web-design/
http://designmodo.com/responsive-design-examples/
http://jamus.co.uk/demos/rwd-demonstrations/
http://www.gridsetapp.com/
http://grid.mindplay.dk
http://goldengridsystem.com/
http://foundation.zurb.com/docs/layout.php
Responsive design 1
![Page 264: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/264.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://www.netmagazine.com/opinions/designing-browser
http://www.businessinsider.com/html5-vs-apps-why-the-debate-matters-and-who-will-win-2012-11
http://ia.net/blog/responsive-typography-the-basics/
http://daverupert.com/2013/04/responsive-deliverables
http://alistapart.com/article/future-ready-content
http://alistapart.com/blog/post/getting-started-with-pattern-libraries
http://bradfrostweb.com/blog/post/atomic-web-design/
Responsive design 2
![Page 265: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/265.jpg)
www.flickr.com/photos/st3f4n/4387291247
www.slideshare.net/yiibu/pragmatic-responsive-design
http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/
http://bradfrostweb.com/blog/mobile/support-vs-optimization/
http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
http://bradfrostweb.com/blog/post/atomic-web-design/
http://trentwalton.com/2014/03/10/device-agnostic/
Responsive design 3
![Page 266: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/266.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
!
!
!
Navigation for responsive design
![Page 267: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/267.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://www.google.com/analytics/features/mobile-site-traffic.html
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
http://opensignal.com/reports/fragmentation-2013/
https://deviceatlas.com/device-data/devices
Slide 37:http://www.slideshare.net/yiibu/pragmatic-responsive-design
!
!
!
Devices & sizes
![Page 268: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/268.jpg)
www.flickr.com/photos/st3f4n/4387291247
www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
http://globalmoxie.com/blog/desktop-touch-design.shtml
www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/?goback=%2Egde_79272_member_226720034
!
!
!
Device interaction
![Page 269: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/269.jpg)
www.flickr.com/photos/st3f4n/4387291247
www.lukew.com/ff/entry.asp?1649
http://www.lukew.com/ff/entry.asp?1721
http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
!
Examples:
http://polarb.com/polls/tags/mobiledesign
!
!
!
Multiple devices & touch input
![Page 270: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/270.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://www.lukew.com/ff/entry.asp?1714
http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won
http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others
http://www.markboulton.co.uk/journal/theinbetween
http://adactio.com/journal/6044/
http://seesparkbox.com/foundry/there_is_no_breakpoint
Breakpoints 1
![Page 271: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/271.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
www.slideshare.net/yiibu/pragmatic-responsive-design
http://alistapart.com/article/designing-for-breakpoints
http://dmolsen.com/2013/03/05/media-query-less-design-content-based-breakpoints-tweakpoints/
!
Breakpoints 2
![Page 272: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/272.jpg)
www.flickr.com/photos/st3f4n/4387291247
www.thismanslife.co.uk/projects/lab/responsivewireframes/
www.thismanslife.co.uk/projects/lab/responsiveillustration/
http://nocturnalmonkey.com/archive/responsive-sketching
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
http://danielmall.com/work/crayola/
!
!
!
Demo, sketching & workflow
![Page 273: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/273.jpg)
www.flickr.com/photos/st3f4n/4387291247
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556
http://mrgan.tumblr.com/post/10492926111/labeling-the-back-button
http://developer.android.com/design/index.html
!
!
Platform guidelines
![Page 274: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/274.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://pttrns.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://www.mobiledesignpatterngallery.com/mobile-patterns.php
http://www.androidpatterns.com/
http://androidpttrns.com/
http://android.inspired-ui.com/
http://inspired-ui.com
!
Pattern libraries (of app designs)
![Page 275: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/275.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
http://www.welcomebrand.co.uk/thoughts/website-testing-phone-bundles/
https://bagcheck.com/blog/22-mobile-device-testing-the-gear
!
!
!
Testing
![Page 276: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/276.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://responsive.is/typecast.com
http://screenqueri.es/
http://www.responsinator.com/
http://quirktools.com/screenfly/
http://mattkersley.com/responsive/
http://responsivepx.com/
http://protofluid.com/
http://responsiveviewport.com/
http://www.browserstack.com/
Testing your responsive design
![Page 277: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/277.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://popapp.in/
http://fieldtestapp.com/
https://www.fluidui.com/
http://www.plunkapp.com/
http://bjango.com/mac/skalapreview/
http://proto.io/
https://marvelapp.com/
!
!
!
Testing apps & mockups
![Page 278: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/278.jpg)
www.flickr.com/photos/st3f4n/4387291247
http://www.nickfinck.com/blog/entry/nicks_top_user_experience_books
http://www.uxforthemasses.com/ux-books/
http://www.amazon.co.uk/gp/product/0321965515/
http://www.amazon.co.uk/Lean-UX-Applying-Principles-Experience/dp/1449311652/
!
!
UX books
![Page 279: Three part series - Designing for multiple devices - GA, London, 10 Apr 2014](https://reader038.vdocuments.mx/reader038/viewer/2022102721/53f40da48d7f72c80e8b4a32/html5/thumbnails/279.jpg)
Thank you. Questions?@annadahlstrom | [email protected] www.annadahlstrom.com