Three part series - Designing for multiple devices - GA, London, 10 Apr 2014

  • 2,072 views
Uploaded on

Slides from my three-part full day workshop of Designing for Multiple Devices class run on the 10th of April with General Assembly in London. …

Slides from my three-part full day workshop of Designing for Multiple Devices class run on the 10th of April with General Assembly in London.

The rise in mobiles and tablets have not only changed the way we consume and interact with content, but also the way we design and what we base our design approach on.

This series of classes will cover how user expectations as well as behaviour and consumption patterns have shifted—and what that means for designing products that will be used on multiple devices. Coming out of these classes, you'll be equipped with the essential principles and tools to tackle the multiple device jungle.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,072
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
262
Comments
1
Likes
14

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Anna Dahlström www.annadahlstrom.com annadahlstrom A FULL DAY OF… Designing for multiple devices 10 April 2014
  • 2. www.flickr.com/photos/dahlstroms/4411448782 I’m Anna 
 IA & UX designer | freelance since 2011 Swedish | in London since 2006
  • 3. Today 10am - 5.30pm Part 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
  • 4. Part 1: Understanding the multiple devices landscape Introduction & defining your mobile strategy
  • 5. www.flickr.com/photos/pagedooley/2121472112 The world we design for 
 has become more complex
  • 6. www.flickr.com/photos/jorgeq82/4732700819 We used to only have to deal with 
 different browsers, and the fold
  • 7. www.flickr.com/photos/adactio/6153481666 Today it’s browsers AND endless numbers of devices & screen sizes
  • 8. 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 by
 2015 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
  • 9. 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
  • 10. www.flickr.com/photos/raincitystudios/95234968 As of Q3 2012 we passed 1 billion smartphones in use
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. www.flickr.com/photos/exlibris/2552107635 40% of people use their phone in the bathroom. * * Source: http://www.lukew.com/ff/entry.asp?1500
  • 15. We go online
 everywhere and anywhere Image courtesy of Shutterstock
  • 16. Image courtesy of Shutterstock The old myth that mobile users 
 are rushed & on the go doesn’t hold true
  • 17. www.flickr.com/photos/edduddiee/4307943164 A large proportion of our usage 
 happens when we have time to kill
  • 18. www.flickr.com/photos/eyesore9/3206408088 This has implications
 for UX & design thinking.
  • 19. www.flickr.com/photos/frantaylor/4296536332 Before the first iPhone 
 the mobile use case was limited
  • 20. 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
  • 21. www.flickr.com/photos/demandaj/7287174776 In fact, we still do 
 but we’re noticing something
  • 22. www.flickr.com/photos/joachim_s_mueller/7110473339 Users expect an equal & continuous experience across devices
  • 23. 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
  • 24. www.flickr.com/photos/martinteschner/4569495912 There are a number 
 of reasons for this
  • 25. www.flickr.com/photos/philippe/2462550872 People carry out the same tasks on mobiles as they do on desktops
  • 26. “ 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=
  • 27. www.flickr.com/photos/joeybones/6791201819 Devices & services are getting more advanced & optimised for complex tasks
  • 28. www.flickr.com/photos/soyproject/6066959891 We no longer own just one device but multiple & use them interchangeably
  • 29. www.flickr.com/photos/visualpunch/7351572896 We want to find what we’re looking for irrespectively of the device we use
  • 30. 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
  • 31. 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
  • 32. www.flickr.com/photos/tomitapio/4053123799/in/photostream So, what 
 should we do?
  • 33. www.flickr.com/photos/martinteschner/4569495912 Our main options are bespoke 
 mobile sites, responsive sites and apps
  • 34. 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
  • 35. FULL WEBSITE FULL WEBSITE FULL WEBSITE Responsive sites have the same url 
 & is basically “one site” http://desktopwallpaper-s.com/19-Computers/-/Future
  • 36. www.flickr.com/photos/paul-r/217948368 Apps, well we all know 
 they come from app stores
  • 37. www.flickr.com/photos/tomitapio/4053123799/in/photostream How do we know 
 when to do what?
  • 38. www.flickr.com/photos/edenandjosh/2892956576 Bespoke mobile sites
 should be avoided, if we can
  • 39. 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
  • 40. www.flickr.com/photos/st3f4n/3476036180 Two main exceptions:
 technical limitations to the CMS, or 
 if required for the audience
  • 41. www.flickr.com/photos/ericconstantineau/5618576278 The alternative is 
 messy & costly
  • 42. www.flickr.com/photos/nikio/3899114449 It means maintaining 
 multiple technical solutions...
  • 43. www.flickr.com/photos/sharynmorrow/127184319 ...and also maintaining 
 multiple versions of your content
  • 44. www.flickr.com/photos/bulldogsrule/187693681 Realistically that means 
 making cuts & frustrating users
  • 45. 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
  • 46. www.flickr.com/photos/sixmilliondollardan/2493495506 Poor mobile 
 experiences result in 
 the same thing - drop offs
  • 47. Keep the core content the same 
 & optimise the experience, display & interactions to the device Image courtesy of Shutterstock
  • 48. Meet 
 responsive design www.flickr.com/photos/taytom/5277657429
  • 49. www.flickr.com/photos/tomitapio/4053123799/in/photostream But...
 what about apps?
  • 50. www.flickr.com/photos/martinteschner/4569495912 Whether to do an app 
 or not comes down to...
  • 51. Image courtesy of Shutterstock User & business 
 objectives...
  • 52. If you need to utilise 
 device specific capabilities... www.flickr.com/photos/cindyli/3784225848
  • 53. www.flickr.com/photos/arjencito/6531640463 If offline reading 
 is required...
  • 54. Image courtesy of Shutterstock And of course 
 budget
  • 55. www.flickr.com/photos/andwhynot/2946734025 Analytics of entry points 
 can also provide some guidance
  • 56. www.flickr.com/photos/haagsuitburo/5349040355 Mainly direct traffic: 
 could be an argument for an app
  • 57. www.flickr.com/photos/soundslogical/4255801733 Mainly shared links: 
 ensure your site is optimised for mobile
  • 58. 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
  • 59. App design
  • 60. www.flickr.com/photos/jdhancock/4354438814 Apps are 
 focused & personal
  • 61. www.flickr.com/photos/nrkbeta/3906687294/in/photostream Not as easy as just 
 doing an app for e.g. iOS or Android
  • 62. www.flickr.com/photos/aforgrave/6168689222 Need to consider fragmentation 
 across different versions & 
 backwards compatibility
  • 63. Source: http://developer.android.com/about/dashboards/index.html Relative number of active 
 Android devices across different versions www.flickr.com/photos/blakespot/4773693893
  • 64. 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
  • 65. www.flickr.com/photos/gadl/3570118243 Every platform has their own 
 ui guidelines that their users are used to
  • 66. 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
  • 67. 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
  • 68. The good that 
 adapt to the platform iOS iOSAndroid Android
  • 69. 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
  • 70. 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
  • 71. Responsive design
  • 72. FULL WEBSITE FULL WEBSITE FULL WEBSITE Responsive sites have the same url 
 & is basically “one site” http://desktopwallpaper-s.com/19-Computers/-/Future
  • 73. 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

  • 74. http://foundation.zurb.com/docs/layout.php The backbone is 
 your grid & breakpoints
  • 75. Columns & gutters can be 
 fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
  • 76. www.flickr.com/photos/donsolo/2136923757 The grid helps with defining modules 
 for pages & views
  • 77. “ Content needs to be choreographed to 
 ensure the intended message is preserved on any device and at any width “ - Trent Walton www.flickr.com/photos/theaftershock/2811382400
  • 78. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/ Define your content stacking strategy across devices & orientation.
  • 79. Identify and prioritise the content across devices & orientations Desktop/ tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad
  • 80. www.flickr.com/photos/garrettc/6260768486/ Don’t just work with columns 
 but think of the narrative of the views
  • 81. http://thenextweb.com/ So that it’s carefully 
 considered, like this
  • 82. Mobile or desktop first, 
 the key is considering the content & 
 how it will work across devices
  • 83. Time to practice
  • 84. 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
  • 85. 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:
  • 86. www.flickr.com/photos/pinkpurse/5355919491 02CONTENT 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
  • 87. Define your content stacking strategy 
 across devices & orientations Desktop/ tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad
  • 88. www.flickr.com/photos/garrettc/6260768486/ Don’t just work with columns 
 but think of the narrative of the views
  • 89. www.flickr.com/photos/pinkpurse/5355919491 02CONTENT 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
  • 90. www.flickr.com/photos/pinkpurse/5355919491 03APP 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
  • 91. 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
  • 92. 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
  • 93. www.flickr.com/photos/pinkpurse/5355919491 03APP 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
  • 94. Lunch 12 - 1pm
  • 95. Part 2: Practicalities of multiple device projects Common challenges, content strategy, structures, navigation patterns, testing
  • 96. www.flickr.com/photos/helga/3952984450 Some of the most common 
 challenges with multiple device designs are...
  • 97. www.flickr.com/photos/pinkpurse/5355919491 1. Knowing where to start... • Define your mobile strategy • Start sketching • And work across disciplines
  • 98. 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
  • 99. 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
  • 100. 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
  • 101. 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
  • 102. 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
  • 103. 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
  • 104. 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
  • 105. Responsive navigation patterns
  • 106. 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
  • 107. Brad Frost has written 2 excellent posts 
 on Responsive navigation patterns xxx http://bradfrostweb.com/blog/web/responsive-nav-patterns http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
  • 108. 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
  • 109. 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
  • 110. 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
  • 111. The left nav flyout
 menu 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
  • 112. 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
  • 113. The multi toggle
 nested 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
  • 114. Right to left
 the 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
  • 115. Skip the sub-nav
 next 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
  • 116. 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
  • 117. 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
  • 118. Theresa Neil’s
 Mobile Design Pattern Gallery www.mobiledesignpatterngallery.com
  • 119. www.flickr.com/photos/martinteschner/4569495912 Use mobile as a reason 
 to re-consider your navigation
 & prioritise search
  • 120. www.flickr.com/photos/inpivic/5205918163/ Consider your project: assess the depth needed as well as pros & cons of approaches
  • 121. http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design Define & work with types of navigation: 
 primary, secondary, tertiary, footer & contextual
  • 122. BBC Sport - desktop Last but not least, consider navigation 
 across products & keep it similar 
 to aid familiarity BBC Sport - mobile site BBC Sport - app
  • 123. App structures
  • 124. www.flickr.com/photos/gadl/3570118243 Every platform has their own 
 ui guidelines that their users are used to
  • 125. iPhone resources 
 help & inspiration well documented
  • 126. Android resources 
 help & inspiration a little less well 
 documented for earlier versions
  • 127. 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
  • 128. 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
  • 129. Look for inspiration http://pttrns.com/categories/13-navigations
  • 130. Research common approaches www.uxarchive.com
  • 131. www.flickr.com/photos/saucef/7184615025 Start by sketching 
 screenflows, navigation & content
  • 132. www.flickr.com/photos/lindzgraham/5605911999 Avoid using the home screen as a stepping point. Instead deliver value from first view
  • 133. Bring users straight to 
 what they use the most Facebook FlipboardFeedly Hootsuite Straight in Stepping stone
  • 134. Testing apps & responsive designs
  • 135. Test 
as early as possible
 & then continuously
  • 136. In the browser by resizing the browser window & checking the display of content http://thenextweb.com
  • 137. www.flickr.com/photos/jorgeq82/4732700819 In the browser by designing in the browser & creating a working HTML prototype
  • 138. http://responsive.is/typecast.com Using tools that help you style & test 
 your typography before implementing it
  • 139. 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/
  • 140. www.flickr.com/photos/arne/5835855777/in/photostream On actual devices, though expensive 
 there are ways around it
  • 141. www.flickr.com/photos/adactio/6800969243/in/photostream Buying bundles and sharing, 
 hereby helping each other
  • 142. www.flickr.com/photos/jorgeq82/4732700819 With users define your 
 objectives, audience, test cases, consider expectations & limitations
  • 143. Testing apps 
flow, navigation, interactions, transitions
  • 144. From testing sketches as 
 paper prototypes or as clickable prototypes... www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
  • 145. ...to iterations of 
 wireframes & designs www.flickr.com/photos/fluent_methods/6961802861
  • 146. Time to practice
  • 147. www.flickr.com/photos/pinkpurse/5355919491 04SIMPLE 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
  • 148. 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
  • 149. 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
  • 150. The left nav flyout
 menu 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
  • 151. www.flickr.com/photos/pinkpurse/5355919491 04SIMPLE 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
  • 152. www.flickr.com/photos/pinkpurse/5355919491 05COMPLEX 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
  • 153. The multi toggle
 nested 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
  • 154. Right to left
 the 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
  • 155. Skip the sub-nav
 next 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
  • 156. 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
  • 157. 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
  • 158. www.flickr.com/photos/pinkpurse/5355919491 05COMPLEX 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
  • 159. www.flickr.com/photos/pinkpurse/5355919491 06APP 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
  • 160. Break 3 - 3.30pm
  • 161. Part 3: Adapting to input, orientations & the future Touch across devices, device orientation, mobile context, device agnostic design
  • 162. 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
  • 163. www.flickr.com/photos/david_a_lea/3247217194 We’re already facing two particular challenges...
  • 164. www.flickr.com/photos/michale/210536054 1. Breakpoints based on 
 popular devices puts us into a corner
  • 165. www.flickr.com/photos/lokan/8843464852 2. Touch is no longer 
 limited to smartphones & tablets
  • 166. Input & touch across devices
  • 167. www.flickr.com/photos/patdavid/9391602153 “ Touch has landed on the desktop. “ - Josh Clark
  • 168. 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
  • 169. As always... 
...it depends
  • 170. “ 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
  • 171. www.flickr.com/photos/adactio/6153481666 We should consider touch across all devices & screen sizes. Not just smartphones & tablets
  • 172. 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
  • 173. www.flickr.com/photos/jorgeq82/4732700819 49% of users hold their phone in one hand, but how they hold it differs
  • 174. 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 variations
 based on 1,333 observations during 2 months
  • 175. 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
  • 176. 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
  • 177. Impacts 
controls, placement & interactions
  • 178. 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
  • 179. Our current approach to navigation 
 is based on the mouse as input Source: Luke W - www.lukew.com/ff/entry.asp?1649
  • 180. www.flickr.com/photos/intelfreepress/6837427202 For hybrids we tend to 
 rest arms & grab bottom corners
  • 181. Source: Luke W - www.lukew.com/ff/entry.asp?1649 From... ...towards Consider reach & obscuring content 
 & adjust navigation accordingly
  • 182. 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
  • 183. www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164 Based on the context & use case, 
 posture, grip & orientation varies
  • 184. Mobile context
  • 185. www.flickr.com/photos/kalexanderson/6716348037 Situational context 
 impacts firm vs. loose grip
  • 186. 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
  • 187. The context differs based on 
 situation, attitudes & preferences www.flickr.com/photos/hoyvinmayvin/5873697252
  • 188. www.flickr.com/photos/hoyvinmayvin/5873139941 The same context doesn’t 
 equal the same situation
  • 189. Other aspects to consider 
 for the mobile context are... www.flickr.com/photos/icedsoul/2486885051
  • 190. www.flickr.com/photos/nadiya95/7217734288/ Attention span 
 data snacking vs. focused usage
  • 191. www.flickr.com/photos/arjencito/6531640463/ Signal coverage 
 speed & reliability of the connection
  • 192. www.flickr.com/photos/garry61/3191250682 Location 
 moving about vs. in one location
  • 193. www.flickr.com/photos/adactio/6153481666 The screen 
 small, medium, large & of course touch or not
  • 194. www.flickr.com/photos/helga/3545310740 Posture & grip 
 how we sit/ stand as well as 
 interact with the device
  • 195. Reading Watching Typing Certain orientations are better
 for certain tasks
  • 196. There are three main approaches 
 for adapting to orientation RE-POSITION REVEAL/ HIDESCALE
  • 197. www.flickr.com/photos/cayusa/534070358 Adapting to orientation AND different devices can become a bit of a mindfield
  • 198. www.flickr.com/photos/martinteschner/4569495912 Move away from devices
  • 199. Device agnostic design
  • 200. www.flickr.com/photos/adactio/6153481666 Remember how we can’t 
 successfully tell what devices users are using
  • 201. The web is after all about content. Not what device we are using Image courtesy of Shutterstock
  • 202. www.flickr.com/photos/mirafoto/494444094 “ Get your content to go anywhere, 
 because it’s going to go everywhere. ” - Brad Frost
  • 203. www.flickr.com/photos/byte/8282578241 Aim to make it more future proof 
 by moving away from specific devices
  • 204. www.flickr.com/photos/sharynmorrow/127184319 Use natural breakpoints based on 
 content layout rather than focusing on devices
  • 205. www.flickr.com/photos/visualpunch/7351572896 Look at what’s suitable for your content 
 & best practice for layout principles
  • 206. It’s not without challenges, but challenges are meant to be overcome Image courtesy of Shutterstock
  • 207. 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
  • 208. 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
  • 209. www.flickr.com/photos/gozalewis/3249104929 Basing breakpoints on 
 screen sizes is a temporary 
 work around
  • 210. www.slideshare.net/yiibu/pragmatic-responsive-design Work with breakpoints & tweakpoints, 
 focus on content layout & EMS instead of px
  • 211. The same with columns, 
 opt for fluid as much possible http://foundation.zurb.com/docs/layout.php
  • 212. www.flickr.com/photos/donsolo/2136923757/ This brings us back to 
 the importance of modularity
  • 213. www.flickr.com/photos/boltofblue/4418442567 Less about pages & more focus on 
 the building blocks that make up those views
  • 214. www.flickr.com/photos/miuenski/3127285991 No more is it about beautiful page designs...
  • 215. www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666 ...but about views that will look different across browsers, screen sizes & devices
  • 216. www.flickr.com/photos/boltofblue/4418442567 The more you reuse, the less modules 
 there will be to design, define and develop
  • 217. www.flickr.com/photos/akrabat/9085299639 Essential for preventing 
 ending up with too many pieces
  • 218. www.flickr.com/photos/webatelier/5929299679 This helps meeting requirements 
 across screen sizes and page views
  • 219. www.flickr.com/photos/webatelier/5929855686 And, it minimises design 
 & development efforts
  • 220. Image courtesy of Shutterstock Good for the 
 future & the budget
  • 221. www.flickr.com/photos/techsavvyed/5926978939 Responsive design is based on 
 modular views rather than static pages
  • 222. www.flickr.com/photos/songzhen/4893025042 Need to know what you design for
 in order to identify & define 
 what modules to use where
  • 223. www.flickr.com/photos/songzhen/4893025042 As well as what content variations &
 sizes you need for different pages & devices
  • 224. Start by 
identifying the main module types & common elements between pages
  • 225. Define your content stacking strategy 
 across devices & orientations Desktop/ tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad
  • 226. Desktop/ Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths Define display variations as well as 
 the elements they are made up of Desktop/ tablet Mobile
  • 227. Desktop/ Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths Isolate elements that need to be able to break out to meet your content stacking strategy Desktop/ tablet Mobile
  • 228. www.flickr.com/photos/katherinekenny Adapt to the device & screen in question; 
 both order & priority as well as interactions, how much to show & how
  • 229. Desktop/ Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths Desktop/ tablet Mobile Little by little you build up a module library 
 of defined components for your views, 
 across devices & orientations
  • 230. 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
  • 231. 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
  • 232. 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
  • 233. We have to 
work together across disciplines 

  • 234. www.flickr.com/photos/martinteschner/4569495912 This includes clients both in terms of 
 what they can expect & 
 what will be expected of them
  • 235. www.flickr.com/photos/byte/8282578241 Responsive design means giving up some control to ensure it works 
 for as many devices as possible
  • 236. www.flickr.com/photos/stickkim/7491816206 Ensuring that we do what’s best for 
 our clients, our users & us as a company
  • 237. Time to practice
  • 238. www.flickr.com/photos/pinkpurse/5355919491 07MODULAR, 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
  • 239. Start by 
identifying the main module types & common elements between pages
  • 240. Define your content stacking strategy 
 across devices & orientations Desktop/ tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad
  • 241. Desktop/ Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths Define display variations as well as 
 the elements they are made up of Desktop/ tablet Mobile
  • 242. Desktop/ Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths Isolate elements that need to be able to break out to meet your content stacking strategy Desktop/ tablet Mobile
  • 243. www.flickr.com/photos/katherinekenny Adapt to the device & screen in question; 
 both order & priority as well as interactions, how much to show & how
  • 244. Desktop/ Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths Desktop/ tablet Mobile Little by little you build up a module library of defined components for your views, 
 across devices & orientations
  • 245. www.flickr.com/photos/pinkpurse/5355919491 07MODULAR, 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
  • 246. www.flickr.com/photos/pinkpurse/5355919491 08ADAPTING 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
  • 247. 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
  • 248. Reading Watching Typing Certain orientations are better
 for certain tasks
  • 249. There are three main approaches 
 for adapting to orientation RE-POSITION REVEAL/ HIDESCALE
  • 250. www.flickr.com/photos/pinkpurse/5355919491 08ADAPTING 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
  • 251. A few final words...
  • 252. www.flickr.com/photos/byte/8282578241 Any screen should be 
 your starting point
  • 253. “ Every responsive design project is also 
 a content strategy project. ” - Karen McGrane Image courtesy of Shutterstock
  • 254. www.flickr.com/photos/jtravism/2417205289 There is no right way 
 & the following is just 
 one way of approaching it
  • 255. ! 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
  • 256. Type to enter text It’s not just about the 
 smaller screens but also the big ones www.flickr.com/photos/jolives/2889944573/
  • 257. Its’s about 
 thinking & planning ahead www.flickr.com/photos/jolives/2889944573
  • 258. It doesn’t have to break the bank. Maintaining different versions will www.flickr.com/photos/gi/5537770007
  • 259. Be creative & challenge 
 what exists today www.flickr.com/photos/oter/5090592214
  • 260. www.flickr.com/photos/jdhancock/4354438814 Remember to test & iterate, 
 sketch as much as possible 
 & work collaboratively
  • 261. www.flickr.com/photos/matterphotography/2739799786 “ Every time you redesign God kills a kitten “ - Louis Rosenfeld
  • 262. Useful resources
  • 263. 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
  • 264. 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
  • 265. 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_resp onsive_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
  • 266. 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
  • 267. 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
  • 268. 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
  • 269. 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
  • 270. 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
  • 271. 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
  • 272. 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
  • 273. 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
  • 274. 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)
  • 275. 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
  • 276. 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
  • 277. 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
  • 278. 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
  • 279. Thank you. Questions? @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com