Three part series - Designing for multiple devices - GA, London, 13 Feb 2014

18,351 views

Published on

Slides from my three-part full day workshop of Designing for Multiple Devices class run on the 13th of February 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.

Published in: Design
1 Comment
57 Likes
Statistics
Notes
  • Amazing photos form around the world.http://12cn.info*The purpose of life www.liferaises
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
18,351
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
273
Comments
1
Likes
57
Embeds 0
No embeds

No notes for slide

Three part series - Designing for multiple devices - GA, London, 13 Feb 2014

  1. A FULL DAY OF… Designing for multiple devices 13 February 2014 Anna Dahlström www.annadahlstrom.com annadahlstrom
  2. I’m Anna 
 IA & UX designer | freelance since 2011 Swedish | in London since 2006 www.flickr.com/photos/dahlstroms/4411448782
  3. Today 10am - 5.30pm 10 am Part 1: Understanding the multiple device landscape ! Practice 12 pm Lunch 1 pm Part 2: Practicalities of multiple device projects ! Practice 3 pm Break 3.30 pm Part 3: Adapting to input, orientation & the future Practice Q&A
  4. Part 1: Understanding the multiple devices landscape Introduction & defining your mobile strategy
  5. The world we design for 
 has become more complex www.flickr.com/photos/pagedooley/2121472112
  6. We used to only have to deal with 
 different browsers, and the fold www.flickr.com/photos/jorgeq82/4732700819
  7. Today it’s browsers AND endless numbers of devices & screen sizes www.flickr.com/photos/adactio/6153481666
  8. 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 www.flickr.com/photos/nasamarshall/6289116940
  9. I have a human that unknown to many 
 job that is enters the world, five mobile For every I’devices are created.*UX designer m a freelance IA & * 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 www.flickr.com/photos/hlkljgk/5764422581 www.flickr.com/photos/helga/3952984450/
  10. As of Q3 2012 we passed 1 billion smartphones in use www.flickr.com/photos/raincitystudios/95234968
  11. 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 www.flickr.com/photos/jayfresh/3388253576
  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. The average person looks at their phone 
 150 times a day.* * Source: www.textually.org/textually/archives/2012/02/030229.htm www.flickr.com/photos/jorgeq82/4732700819
  14. 40% of people use their phone in the bathroom. * * Source: http://www.lukew.com/ff/entry.asp?1500 www.flickr.com/photos/exlibris/2552107635
  15. We go online
 everywhere and anywhere Image courtesy of Shutterstock
  16. The old myth that mobile users 
 are rushed & on the go doesn’t hold true Image courtesy of Shutterstock
  17. A large proportion of our usage 
 happens when we have time to kill www.flickr.com/photos/edduddiee/4307943164
  18. This has implications
 for UX & design thinking. www.flickr.com/photos/eyesore9/3206408088
  19. Before the first iPhone 
 the mobile use case was limited www.flickr.com/photos/frantaylor/4296536332
  20. We built separate sites 
 for mobile & desktop DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  21. In fact, we still do 
 but we’re noticing something www.flickr.com/photos/demandaj/7287174776
  22. Users expect an equal & continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
  23. “ 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 www.flickr.com/photos/pandiyan/4550066009
  24. There are a number 
 of reasons for this www.flickr.com/photos/martinteschner/4569495912
  25. People carry out the same tasks on mobiles as they do on desktops www.flickr.com/photos/philippe/2462550872
  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. Devices & services are getting more advanced & optimised for complex tasks www.flickr.com/photos/joeybones/6791201819
  28. We no longer own just one device but multiple & use them interchangeably www.flickr.com/photos/soyproject/6066959891
  29. We want to find what we’re looking for irrespectively of the device we use www.flickr.com/photos/visualpunch/7351572896
  30. Mobile context ≠ mobile use case 
 The latter is about the task, the former about the total sum of the user’s mobile experience www.flickr.com/photos/icedsoul/2486885051
  31. Having separate sites 
 does, for the most part, not make sense DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  32. So, what 
 should we do? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  33. Our main options are bespoke 
 mobile sites, responsive sites and apps www.flickr.com/photos/martinteschner/4569495912
  34. Bespoke mobile sites have a separate url 
 & means maintaining different sites DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  35. Responsive sites have the same url 
 & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  36. Apps, well we all know 
 they come from app stores www.flickr.com/photos/paul-r/217948368
  37. How do we know 
 when to do what? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  38. Bespoke mobile sites
 should be avoided, if we can www.flickr.com/photos/edenandjosh/2892956576
  39. “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 www.flickr.com/photos/lastquest/1472794031
  40. Two main exceptions:
 technical limitations to the CMS, or 
 if required for the audience www.flickr.com/photos/st3f4n/3476036180
  41. The alternative is 
 messy & costly www.flickr.com/photos/ericconstantineau/5618576278
  42. It means maintaining 
 multiple technical solutions... www.flickr.com/photos/nikio/3899114449
  43. ...and also maintaining 
 multiple versions of your content www.flickr.com/photos/sharynmorrow/127184319
  44. Realistically that means 
 making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
  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. Poor mobile 
 experiences result in 
 the same thing - drop offs www.flickr.com/photos/sixmilliondollardan/2493495506
  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. But...
 what about apps? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  50. Whether to do an app 
 or not comes down to... www.flickr.com/photos/martinteschner/4569495912
  51. User & business 
 objectives... Image courtesy of Shutterstock
  52. If you need to utilise 
 device specific capabilities... www.flickr.com/photos/cindyli/3784225848
  53. If offline reading 
 is required... www.flickr.com/photos/arjencito/6531640463
  54. And of course 
 budget Image courtesy of Shutterstock
  55. Analytics of entry points 
 can also provide some guidance www.flickr.com/photos/andwhynot/2946734025
  56. Mainly direct traffic: 
 could be an argument for an app www.flickr.com/photos/haagsuitburo/5349040355
  57. Mainly shared links: 
 ensure your site is optimised for mobile www.flickr.com/photos/soundslogical/4255801733
  58. “ 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 www.flickr.com/photos/dougbelshaw/4360008898
  59. App design
  60. Apps are 
 focused & personal www.flickr.com/photos/jdhancock/4354438814
  61. Not as easy as just 
 doing an app for e.g. iOS or Android www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  62. Need to consider fragmentation 
 across different versions & 
 backwards compatibility www.flickr.com/photos/aforgrave/6168689222
  63. Relative number of active 
 Android devices across different versions Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
  64. Comparison of adoption rate 
 for iOS7, iOS6 and iOS5 Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker www.flickr.com/photos/blakespot/4773693893
  65. Every platform has their own 
 ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
  66. Basic iOS 
 app structure 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.
  67. Basic Android 
 app structure 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.
  68. The good that 
 adapt to the platform iOS Android iOS Android
  69. ” 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 www.flickr.com/photos/dougbelshaw/4360008898
  70. There are 
 different types of apps ! ! 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 !
  71. Responsive design
  72. Responsive sites have the same url 
 & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  73. “ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. “ - Smashing Magazine
 www.flickr.com/photos/adactio/5818096043
  74. The backbone is 
 your grid & breakpoints http://foundation.zurb.com/docs/layout.php
  75. Columns & gutters can be 
 fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
  76. The grid helps with defining modules 
 for pages & views www.flickr.com/photos/donsolo/2136923757
  77. “ Content needs to be choreographed to 
 ensure the intended message is preserved on any device and at any width “ www.flickr.com/photos/theaftershock/2811382400 - Trent Walton
  78. Define your content stacking strategy across devices & orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  79. Identify and prioritise the content across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  80. Don’t just work with columns 
 but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
  81. So that it’s carefully 
 considered, like this http://thenextweb.com/
  82. Mobile or desktop first, 
 the key is considering the content & 
 how it will work across devices
  83. Time to practice
  84. The BRIEF 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: • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  85. 01 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: 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? www.flickr.com/photos/pinkpurse/5355919491 WHAT ARE THE OBJECTIVES & PRACTICALITIES? • The budget • The current technical platform • Could an app be re-used later • The marketing value of an app
  86. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  87. Define your content stacking strategy 
 across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  88. Don’t just work with columns 
 but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
  89. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  90. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  91. Basic iOS 
 app structure 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.
  92. Basic Android 
 app structure 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.
  93. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • 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. Some of the most common 
 challenges with multiple device designs are... www.flickr.com/photos/helga/3952984450
  97. 1. Knowing where to start... • Define your mobile strategy • Start sketching • And work across disciplines www.flickr.com/photos/pinkpurse/5355919491
  98. 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 www.flickr.com/photos/jorgeq82/4732700819
  99. 3. How to approach visual design • Less static designs • Focus on modules & modularity • Continuously prototype to test how the content behaves www.flickr.com/photos/donsolo/2136923757
  100. 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 www.flickr.com/photos/dpstyles/3448453466
  101. 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 www.slideshare.net/yiibu/pragmatic-responsive-design
  102. 6. How many devices to test on • As many as possible • Prioritise based on your audience • Use research & analytics for guidance www.flickr.com/photos/nomadic_lass/5598218199
  103. “ 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 www.flickr.com/photos/adactio/6153481666
  104. 7. How to handle images • • • • xxx 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. “ 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 www.flickr.com/photos/melodramababs/2766765248
  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. Via B ra Top nav or “Do nothing”
 keeps the navigation at the top d Fro st (th ank y ou!) PROS Simple to implement Less design & development implications ! CONS Not scalable Potential height issues http://skinnyties.com
  110. Via B ra The toggle
 hides navigation items in a menu d Fro PROS Optimises screen use Recognised from apps Scalable ! CONS Possible animation performance problems Javascript dependent www.smashingmagazine.com st (th ank y ou!)
  111. Via B ra d Fro st (th The left nav flyout
 menu items are accessed from a tray sliding in ank y ou!) PROS Space generous Recognised nav pattern from apps ! CONS More advanced and doesn’t work on all devices Images from Barack Obama via Brad Frost
  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 B ra d Fro st (th PROS Scannable Scalable ! CONS Animation performance Javascript dependent http://thenextweb.com Barack Obama - image via Stephanie Rieger ank y ou!)
  114. Via B ra d Fro Right to left
 the next level navigation slides in right to left st (th ank y ou!) PROS Nice looking Follows mobile conventions Scalable ! CONS More complex to implement Animation performance www.sony.com
  115. Via B ra d Fro st (th Skip the sub-nav
 next level navigation is displayed on that level PROS Simple Removes complexities around sub-navigation ! CONS Re-quires page refresh & visit for access http://worldwildlife.org ank y ou!)
  116. Via B ra d Fro st (th Priority+
 shows most important & hides the rest in a menu ank y ou!) PROS Simple Supports (supposedly) most used) Scalable ! CONS Hides potentially important items www.bbc.co.uk/sport
  117. Via B ra d Fro st (th The carousel+
 carousel for main sections, sub-nav when in focus ank y ou!) 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 Image from Intel via Brad Frost
  118. Theresa Neil’s
 Mobile Design Pattern Gallery www.mobiledesignpatterngallery.com
  119. Use mobile as a reason 
 to re-consider your navigation
 & prioritise search www.flickr.com/photos/martinteschner/4569495912
  120. Consider your project: assess the depth needed as well as pros & cons of approaches www.flickr.com/photos/inpivic/5205918163/
  121. Define & work with types of navigation: 
 primary, secondary, tertiary, footer & contextual http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  122. Last but not least, consider navigation 
 across products & keep it similar 
 to aid familiarity BBC Sport - mobile site BBC Sport - desktop BBC Sport - app
  123. App structures
  124. Every platform has their own 
 ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
  125. iPhone resources 
 help & inspiration well documented
  126. Android resources 
 help & inspiration a little less well 
 documented for earlier versions
  127. Basic iOS 
 app structure 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.
  128. Basic Android 
 app structure 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.
  129. Look for inspiration http://pttrns.com/categories/13-navigations
  130. Research common approaches www.uxarchive.com
  131. Start by sketching 
 screenflows, navigation & content www.flickr.com/photos/saucef/7184615025
  132. Avoid using the home screen as a stepping point. Instead deliver value from first view www.flickr.com/photos/lindzgraham/5605911999
  133. Bring users straight to 
 what they use the most Facebook Feedly Straight in Flipboard Hootsuite 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. In the browser by designing in the browser & creating a working HTML prototype www.flickr.com/photos/jorgeq82/4732700819
  138. Using tools that help you style & test 
 your typography before implementing it http://responsive.is/typecast.com
  139. http://screenqueri.es/ http://quirktools.com/screenfly/ Using emulators that allow you to view your site across devices & orientations www.responsinator.com/ http://mattkersley.com/responsive/
  140. On actual devices, though expensive 
 there are ways around it www.flickr.com/photos/arne/5835855777/in/photostream
  141. Buying bundles and sharing, 
 hereby helping each other www.flickr.com/photos/adactio/6800969243/in/photostream
  142. With users define your 
 objectives, audience, test cases, consider expectations & limitations www.flickr.com/photos/jorgeq82/4732700819
  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. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  148. Via B ra Top nav or “Do nothing”
 keeps the navigation at the top d Fro st (th ank y ou!) PROS Simple to implement Less design & development implications ! CONS Not scalable Potential height issues http://skinnyties.com
  149. Via B ra The toggle
 hides navigation items in a menu d Fro PROS Optimises screen use Recognised from apps Scalable ! CONS Possible animation performance problems Javascript dependent www.smashingmagazine.com st (th ank y ou!)
  150. Via B ra d Fro st (th The left nav flyout
 menu items are accessed from a tray sliding in ank y ou!) PROS Space generous Recognised nav pattern from apps ! CONS More advanced and doesn’t work on all devices Images from Barack Obama via Brad Frost
  151. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  152. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • 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 B ra d Fro st (th PROS Scannable Scalable ! CONS Animation performance Javascript dependent http://thenextweb.com Barack Obama - image via Stephanie Rieger ank y ou!)
  154. Via B ra d Fro Right to left
 the next level navigation slides in right to left st (th ank y ou!) PROS Nice looking Follows mobile conventions Scalable ! CONS More complex to implement Animation performance www.sony.com
  155. Via B ra d Fro st (th Skip the sub-nav
 next level navigation is displayed on that level PROS Simple Removes complexities around sub-navigation ! CONS Re-quires page refresh & visit for access http://worldwildlife.org ank y ou!)
  156. Via B ra d Fro st (th Priority+
 shows most important & hides the rest in a menu ank y ou!) PROS Simple Supports (supposedly) most used) Scalable ! CONS Hides potentially important items www.bbc.co.uk/sport
  157. Via B ra d Fro st (th The carousel+
 carousel for main sections, sub-nav when in focus ank y ou!) 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 Image from Intel via Brad Frost
  158. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  159. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • 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. “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 www.flickr.com/photos/lastquest/1472794031
  163. We’re already facing two particular challenges... www.flickr.com/photos/david_a_lea/3247217194
  164. 1. Breakpoints based on 
 popular devices puts us into a corner www.flickr.com/photos/michale/210536054
  165. 2. Touch is no longer 
 limited to smartphones & tablets www.flickr.com/photos/lokan/8843464852
  166. Input & touch across devices
  167. “ Touch has landed on the desktop. “ - Josh Clark www.flickr.com/photos/patdavid/9391602153
  168. ‘New rule: every desktop design has to go 
 finger-friendly’* * Source: http://globalmoxie.com/blog/desktop-touch-design.shtml www.flickr.com/photos/66327170@N07/7296381856
  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. We should consider touch across all devices & screen sizes. Not just smartphones & tablets www.flickr.com/photos/adactio/6153481666
  172. www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/janitors/9968676044 The way we use touch screens differ based on device, but also across the same device www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
  173. 49% of users hold their phone in one hand, but how they hold it differs www.flickr.com/photos/jorgeq82/4732700819
  174. ONE HAND (R: 66% L: 33%) Other variations
 based on 1,333 observations during 2 months 72% 28% CRADLING (L: 79% R: 21%) 90% 10% TWO HANDS Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  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. “ Designing for touch means designing for 
 fingers, yes, but to be more specific, you’re really designing for thumbs. ” - Josh Clark Image courtesy of Shutterstock
  177. Impacts 
 controls, placement & interactions
  178. We need to consider 
 precise (e.g. mouse) v.s imprecise (e.g. fingers) input means www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jmtimages/2883279193
  179. Our current approach to navigation 
 is based on the mouse as input Source: Luke W - www.lukew.com/ff/entry.asp?1649
  180. For hybrids we tend to 
 rest arms & grab bottom corners www.flickr.com/photos/intelfreepress/6837427202
  181. Consider reach & obscuring content 
 & adjust navigation accordingly From... ...towards Source: Luke W - www.lukew.com/ff/entry.asp?1649
  182. “ 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 Screenshot from http://polarb.com/polls/tags/mobiledesign
  183. Based on the context & use case, 
 posture, grip & orientation varies www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164
  184. Mobile context
  185. Situational context 
 impacts firm vs. loose grip www.flickr.com/photos/kalexanderson/6716348037
  186. Mobile context ≠ mobile use case 
 The latter is about the task, the former about the total sum of the user’s mobile experience www.flickr.com/photos/icedsoul/2486885051
  187. The context differs based on 
 situation, attitudes & preferences www.flickr.com/photos/hoyvinmayvin/5873697252
  188. The same context doesn’t 
 equal the same situation www.flickr.com/photos/hoyvinmayvin/5873139941
  189. Other aspects to consider 
 for the mobile context are... www.flickr.com/photos/icedsoul/2486885051
  190. Attention span 
 data snacking vs. focused usage www.flickr.com/photos/nadiya95/7217734288/
  191. Signal coverage 
 speed & reliability of the connection www.flickr.com/photos/arjencito/6531640463/
  192. Location 
 moving about vs. in one location www.flickr.com/photos/garry61/3191250682
  193. The screen 
 small, medium, large & of course touch or not www.flickr.com/photos/adactio/6153481666
  194. Posture & grip 
 how we sit/ stand as well as 
 interact with the device www.flickr.com/photos/helga/3545310740
  195. Certain orientations are better
 for certain tasks Reading Watching Typing
  196. There are three main approaches 
 for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
  197. Adapting to orientation AND different devices can become a bit of a mindfield www.flickr.com/photos/cayusa/534070358
  198. Move away from devices www.flickr.com/photos/martinteschner/4569495912
  199. Device agnostic design
  200. Remember how we can’t 
 successfully tell what devices users are using www.flickr.com/photos/adactio/6153481666
  201. The web is after all about content. Not what device we are using Image courtesy of Shutterstock
  202. “ Get your content to go anywhere, 
 because it’s going to go everywhere. ” - Brad Frost www.flickr.com/photos/mirafoto/494444094
  203. Aim to make it more future proof 
 by moving away from specific devices www.flickr.com/photos/byte/8282578241
  204. Use natural breakpoints based on 
 content layout rather than focusing on devices www.flickr.com/photos/sharynmorrow/127184319
  205. Look at what’s suitable for your content 
 & best practice for layout principles www.flickr.com/photos/visualpunch/7351572896
  206. It’s not without challenges, but challenges are meant to be overcome Image courtesy of Shutterstock
  207. “ By default the web has no optimal width, optimal height, optimal font-size or optimal anything really. ” - Edward O’Riordan www.flickr.com/photos/nikio/3899114449
  208. “ 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 www.flickr.com/photos/soundslogical/4255801733
  209. Basing breakpoints on 
 screen sizes is a temporary 
 work around www.flickr.com/photos/gozalewis/3249104929
  210. Work with breakpoints & tweakpoints, 
 focus on content layout & EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
  211. The same with columns, 
 opt for fluid as much possible http://foundation.zurb.com/docs/layout.php
  212. This brings us back to 
 the importance of modularity www.flickr.com/photos/donsolo/2136923757/
  213. Less about pages & more focus on 
 the building blocks that make up those views www.flickr.com/photos/boltofblue/4418442567
  214. No more is it about beautiful page designs... www.flickr.com/photos/miuenski/3127285991
  215. ...but about views that will look different across browsers, screen sizes & devices www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
  216. The more you reuse, the less modules 
 there will be to design, define and develop www.flickr.com/photos/boltofblue/4418442567
  217. Essential for preventing 
 ending up with too many pieces www.flickr.com/photos/akrabat/9085299639
  218. This helps meeting requirements 
 across screen sizes and page views www.flickr.com/photos/webatelier/5929299679
  219. And, it minimises design 
 & development efforts www.flickr.com/photos/webatelier/5929855686
  220. Good for the 
 future & the budget Image courtesy of Shutterstock
  221. Responsive design is based on 
 modular views rather than static pages www.flickr.com/photos/techsavvyed/5926978939
  222. Need to know what you design for
 in order to identify & define 
 what modules to use where www.flickr.com/photos/songzhen/4893025042
  223. As well as what content variations &
 sizes you need for different pages & devices www.flickr.com/photos/songzhen/4893025042
  224. Start by 
 identifying the main module types & common elements between pages
  225. Define your content stacking strategy 
 across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  226. Define display variations as well as 
 the elements they are made up of Mobile Mobile Desktop/ Tablet Desktop/ tablet 1 Logo 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  227. Isolate elements that need to be able to break out to meet your content stacking strategy Mobile Mobile Desktop/ Tablet Desktop/ tablet 1 Logo 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  228. Adapt to the device & screen in question; 
 both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
  229. Mobile Mobile Desktop/ Tablet Desktop/ tablet 1 Logo 2 Header 1 Logo 2 Header 3 Nav Little by little you build up a module library 
 of defined components for your views, 
 across devices & orientations 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  230. “ With thousands and thousands of pages on the Crayola site, it wasn’t efficient to wireframe every single page and state. We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page. ” - Daniel Mall Screenshot: www.crayola.co.uk/
  231. How we approach it depends 
 on your project, budget and time frame 
 & if it’s being built externally www.flickr.com/photos/75905404@N00/7126146307
  232. What we cannot do is take a waterfall approach with responsive design where we hand over from to the other www.flickr.com/photos/bingisser/154452815
  233. We have to 
 work together across disciplines 

  234. This includes clients both in terms of 
 what they can expect & 
 what will be expected of them www.flickr.com/photos/martinteschner/4569495912
  235. Responsive design means giving up some control to ensure it works 
 for as many devices as possible www.flickr.com/photos/byte/8282578241
  236. Ensuring that we do what’s best for 
 our clients, our users & us as a company www.flickr.com/photos/stickkim/7491816206
  237. Time to practice
  238. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • 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 Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  241. Define display variations as well as 
 the elements they are made up of Mobile Mobile Desktop/ Tablet Desktop/ tablet 1 Logo 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  242. Isolate elements that need to be able to break out to meet your content stacking strategy Mobile Mobile Desktop/ Tablet Desktop/ tablet 1 Logo 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  243. Adapt to the device & screen in question; 
 both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
  244. Mobile Mobile Desktop/ Tablet Desktop/ tablet 1 Logo 2 Header 1 Logo 2 Header Little by little you build up a module library of defined components for your views, 
 across devices & orientations 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  245. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  246. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • 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/janitors/9968676044 The way we use touch screens differ based on device, but also across the same device www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
  248. Certain orientations are better
 for certain tasks Reading Watching Typing
  249. There are three main approaches 
 for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
  250. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  251. A few final words...
  252. Any screen should be 
 your starting point www.flickr.com/photos/byte/8282578241
  253. “ Every responsive design project is also 
 a content strategy project. ” - Karen McGrane Image courtesy of Shutterstock
  254. There is no right way 
 & the following is just 
 one way of approaching it www.flickr.com/photos/jtravism/2417205289
  255. Steps for responsive & modular design ! 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
  256. 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. Remember to test & iterate, 
 sketch as much as possible 
 & work collaboratively www.flickr.com/photos/jdhancock/4354438814
  261. “ Every time you redesign God kills a kitten “ - Louis Rosenfeld www.flickr.com/photos/matterphotography/2739799786
  262. Useful resources
  263. Responsive design 1 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 www.flickr.com/photos/st3f4n/4387291247
  264. Responsive design 2 http://www.netmagazine.com/opinions/designingbrowser http://www.businessinsider.com/html5-vs-apps-whythe-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-withpattern-libraries http://bradfrostweb.com/blog/post/atomic-webdesign/ www.flickr.com/photos/st3f4n/4387291247
  265. Responsive design 3 www.slideshare.net/yiibu/pragmatic-responsivedesign http://stephanierieger.com/on-designing-content-outa-response-to-zeldman-and-others/ http://bradfrostweb.com/blog/mobile/support-vsoptimization/ 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-amobile-first-responsive-web-design/ www.flickr.com/photos/st3f4n/4387291247
  266. Navigation for responsive design http://bradfrostweb.com/blog/web/responsive-navpatterns/ http://bradfrostweb.com/blog/web/complexnavigation-patterns-for-responsive-design/ http://palantir.net/blog/scalable-navigation-patternsresponsive-web-design ! ! ! www.flickr.com/photos/st3f4n/4387291247
  267. Devices & sizes http://www.google.com/analytics/features/mobilesite-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/pragmaticresponsive-design ! ! ! www.flickr.com/photos/st3f4n/4387291247
  268. Device interaction www.uxmatters.com/mt/archives/2013/02/how-dousers-really-hold-mobile-devices.php http://globalmoxie.com/blog/desktop-touchdesign.shtml www.uxbooth.com/articles/designing-for-mobilepart-2-interaction-design/?goback= %2Egde_79272_member_226720034 ! ! ! www.flickr.com/photos/st3f4n/4387291247
  269. Multiple devices & touch input 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 ! ! ! www.flickr.com/photos/st3f4n/4387291247
  270. Breakpoints 1 http://www.lukew.com/ff/entry.asp?1714 http://elliotjaystocks.com/blog/
 responsive-web-design-the-war-has-not-yet-beenwon http://stephanierieger.com/on-
 designing-content-out-a-response-to-zeldman-andothers http://www.markboulton.co.uk/
 journal/theinbetween http://adactio.com/journal/6044/ http://seesparkbox.com/foundry/ there_is_no_breakpoint www.flickr.com/photos/st3f4n/4387291247
  271. Breakpoints 2 http://www.smashingmagazine.com/
 2013/03/01/logical-breakpoints-
 responsive-design/ www.slideshare.net/yiibu/pragmatic-
 responsive-design http://alistapart.com/article/designing-forbreakpoints http://dmolsen.com/2013/03/05/media-query-lessdesign-content-based-breakpoints-tweakpoints/ ! www.flickr.com/photos/st3f4n/4387291247
  272. Demo, sketching & workflow www.thismanslife.co.uk/projects/lab/ responsivewireframes/ www.thismanslife.co.uk/projects/lab/ responsiveillustration/ http://nocturnalmonkey.com/archive/responsivesketching http://jeremypalford.com/arch-journal/responsiveweb-design-sketch-sheets http://danielmall.com/work/crayola/ ! ! ! www.flickr.com/photos/st3f4n/4387291247
  273. Platform guidelines 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 ! ! www.flickr.com/photos/st3f4n/4387291247
  274. Pattern libraries (of app designs) http://pttrns.com/ http://mobile-patterns.com/ http://www.patternsofdesign.co.uk/ http://www.mobiledesignpatterngallery.com/mobilepatterns.php http://www.androidpatterns.com/ http://androidpttrns.com/ http://android.inspired-ui.com/ ! ! www.flickr.com/photos/st3f4n/4387291247
  275. Testing http://bradfrostweb.com/blog/mobile/test-on-realmobile-devices-without-breaking-the-bank/ http://www.welcomebrand.co.uk/thoughts/websitetesting-phone-bundles/ https://bagcheck.com/blog/22-mobile-device-testingthe-gear ! ! ! www.flickr.com/photos/st3f4n/4387291247
  276. Testing your responsive design 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/ www.flickr.com/photos/st3f4n/4387291247
  277. Testing apps & mockups 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/ ! ! ! www.flickr.com/photos/st3f4n/4387291247
  278. Thank you. Questions? @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com

×