• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Three part series - Designing for multiple devices - GA, London, 13 Feb 2014
 

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

on

  • 7,539 views

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. ...

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.

Statistics

Views

Total Views
7,539
Views on SlideShare
7,500
Embed Views
39

Actions

Likes
56
Downloads
257
Comments
1

9 Embeds 39

http://www.google.com 10
http://corporaterush.com 10
http://kimds005.tistory.com 8
https://twitter.com 4
http://www.linkedin.com 2
https://home.jolicloud.com 2
http://www.slidesharenet.org 1
http://funday-brand.evolero2.com 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Amazing photos form around the world.http://12cn.info*The purpose of life www.liferaises
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • A FULL DAY OF… Designing for multiple devices 13 February 2014 Anna Dahlström www.annadahlstrom.com annadahlstrom
    • I’m Anna 
 IA & UX designer | freelance since 2011 Swedish | in London since 2006 www.flickr.com/photos/dahlstroms/4411448782
    • 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
    • Part 1: Understanding the multiple devices landscape Introduction & defining your mobile strategy
    • The world we design for 
 has become more complex www.flickr.com/photos/pagedooley/2121472112
    • We used to only have to deal with 
 different browsers, and the fold www.flickr.com/photos/jorgeq82/4732700819
    • Today it’s browsers AND endless numbers of devices & screen sizes www.flickr.com/photos/adactio/6153481666
    • 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
    • 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/
    • As of Q3 2012 we passed 1 billion smartphones in use www.flickr.com/photos/raincitystudios/95234968
    • 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
    • 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
    • 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
    • 40% of people use their phone in the bathroom. * * Source: http://www.lukew.com/ff/entry.asp?1500 www.flickr.com/photos/exlibris/2552107635
    • We go online
 everywhere and anywhere Image courtesy of Shutterstock
    • The old myth that mobile users 
 are rushed & on the go doesn’t hold true Image courtesy of Shutterstock
    • A large proportion of our usage 
 happens when we have time to kill www.flickr.com/photos/edduddiee/4307943164
    • This has implications
 for UX & design thinking. www.flickr.com/photos/eyesore9/3206408088
    • Before the first iPhone 
 the mobile use case was limited www.flickr.com/photos/frantaylor/4296536332
    • 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
    • In fact, we still do 
 but we’re noticing something www.flickr.com/photos/demandaj/7287174776
    • Users expect an equal & continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
    • “ 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
    • There are a number 
 of reasons for this www.flickr.com/photos/martinteschner/4569495912
    • People carry out the same tasks on mobiles as they do on desktops www.flickr.com/photos/philippe/2462550872
    • “ 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=
    • Devices & services are getting more advanced & optimised for complex tasks www.flickr.com/photos/joeybones/6791201819
    • We no longer own just one device but multiple & use them interchangeably www.flickr.com/photos/soyproject/6066959891
    • We want to find what we’re looking for irrespectively of the device we use www.flickr.com/photos/visualpunch/7351572896
    • 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
    • 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
    • So, what 
 should we do? www.flickr.com/photos/tomitapio/4053123799/in/photostream
    • Our main options are bespoke 
 mobile sites, responsive sites and apps www.flickr.com/photos/martinteschner/4569495912
    • 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
    • Responsive sites have the same url 
 & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
    • Apps, well we all know 
 they come from app stores www.flickr.com/photos/paul-r/217948368
    • How do we know 
 when to do what? www.flickr.com/photos/tomitapio/4053123799/in/photostream
    • Bespoke mobile sites
 should be avoided, if we can www.flickr.com/photos/edenandjosh/2892956576
    • “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
    • Two main exceptions:
 technical limitations to the CMS, or 
 if required for the audience www.flickr.com/photos/st3f4n/3476036180
    • The alternative is 
 messy & costly www.flickr.com/photos/ericconstantineau/5618576278
    • It means maintaining 
 multiple technical solutions... www.flickr.com/photos/nikio/3899114449
    • ...and also maintaining 
 multiple versions of your content www.flickr.com/photos/sharynmorrow/127184319
    • Realistically that means 
 making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
    • 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
    • Poor mobile 
 experiences result in 
 the same thing - drop offs www.flickr.com/photos/sixmilliondollardan/2493495506
    • Keep the core content the same 
 & optimise the experience, display & interactions to the device Image courtesy of Shutterstock
    • Meet 
 responsive design www.flickr.com/photos/taytom/5277657429
    • But...
 what about apps? www.flickr.com/photos/tomitapio/4053123799/in/photostream
    • Whether to do an app 
 or not comes down to... www.flickr.com/photos/martinteschner/4569495912
    • User & business 
 objectives... Image courtesy of Shutterstock
    • If you need to utilise 
 device specific capabilities... www.flickr.com/photos/cindyli/3784225848
    • If offline reading 
 is required... www.flickr.com/photos/arjencito/6531640463
    • And of course 
 budget Image courtesy of Shutterstock
    • Analytics of entry points 
 can also provide some guidance www.flickr.com/photos/andwhynot/2946734025
    • Mainly direct traffic: 
 could be an argument for an app www.flickr.com/photos/haagsuitburo/5349040355
    • Mainly shared links: 
 ensure your site is optimised for mobile www.flickr.com/photos/soundslogical/4255801733
    • “ 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
    • App design
    • Apps are 
 focused & personal www.flickr.com/photos/jdhancock/4354438814
    • Not as easy as just 
 doing an app for e.g. iOS or Android www.flickr.com/photos/nrkbeta/3906687294/in/photostream
    • Need to consider fragmentation 
 across different versions & 
 backwards compatibility www.flickr.com/photos/aforgrave/6168689222
    • Relative number of active 
 Android devices across different versions Source: http://developer.android.com/about/dashboards/index.html 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 www.flickr.com/photos/blakespot/4773693893
    • Every platform has their own 
 ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
    • 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.
    • 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.
    • The good that 
 adapt to the platform iOS Android iOS Android
    • ” 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
    • 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 !
    • Responsive design
    • Responsive sites have the same url 
 & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
    • “ 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
    • The backbone is 
 your grid & breakpoints http://foundation.zurb.com/docs/layout.php
    • Columns & gutters can be 
 fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
    • The grid helps with defining modules 
 for pages & views www.flickr.com/photos/donsolo/2136923757
    • “ 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
    • Define your content stacking strategy across devices & orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
    • 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
    • Don’t just work with columns 
 but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
    • So that it’s carefully 
 considered, like this http://thenextweb.com/
    • Mobile or desktop first, 
 the key is considering the content & 
 how it will work across devices
    • Time to practice
    • 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
    • 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
    • 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
    • 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
    • Don’t just work with columns 
 but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
    • 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
    • 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
    • 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.
    • 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.
    • 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
    • Lunch 12 - 1pm
    • Part 2: Practicalities of multiple device projects Common challenges, content strategy, structures, navigation patterns, testing
    • Some of the most common 
 challenges with multiple device designs are... www.flickr.com/photos/helga/3952984450
    • 1. Knowing where to start... • Define your mobile strategy • Start sketching • And work across disciplines www.flickr.com/photos/pinkpurse/5355919491
    • 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
    • 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
    • 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
    • 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
    • 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
    • “ 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
    • 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
    • Responsive navigation patterns
    • “ 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
    • 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
    • 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
    • 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
    • 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!)
    • 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
    • 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
    • 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!)
    • 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
    • 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!)
    • 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
    • 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
    • Theresa Neil’s
 Mobile Design Pattern Gallery www.mobiledesignpatterngallery.com
    • Use mobile as a reason 
 to re-consider your navigation
 & prioritise search www.flickr.com/photos/martinteschner/4569495912
    • Consider your project: assess the depth needed as well as pros & cons of approaches www.flickr.com/photos/inpivic/5205918163/
    • Define & work with types of navigation: 
 primary, secondary, tertiary, footer & contextual http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
    • Last but not least, consider navigation 
 across products & keep it similar 
 to aid familiarity BBC Sport - mobile site BBC Sport - desktop BBC Sport - app
    • App structures
    • Every platform has their own 
 ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
    • iPhone resources 
 help & inspiration well documented
    • Android resources 
 help & inspiration a little less well 
 documented for earlier versions
    • 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.
    • 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.
    • Look for inspiration http://pttrns.com/categories/13-navigations
    • Research common approaches www.uxarchive.com
    • Start by sketching 
 screenflows, navigation & content www.flickr.com/photos/saucef/7184615025
    • Avoid using the home screen as a stepping point. Instead deliver value from first view www.flickr.com/photos/lindzgraham/5605911999
    • Bring users straight to 
 what they use the most Facebook Feedly Straight in Flipboard Hootsuite Stepping stone
    • Testing apps & responsive designs
    • Test 
 as early as possible
 & then continuously
    • In the browser by resizing the browser window & checking the display of content http://thenextweb.com
    • In the browser by designing in the browser & creating a working HTML prototype www.flickr.com/photos/jorgeq82/4732700819
    • Using tools that help you style & test 
 your typography before implementing it http://responsive.is/typecast.com
    • 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/
    • On actual devices, though expensive 
 there are ways around it www.flickr.com/photos/arne/5835855777/in/photostream
    • Buying bundles and sharing, 
 hereby helping each other www.flickr.com/photos/adactio/6800969243/in/photostream
    • With users define your 
 objectives, audience, test cases, consider expectations & limitations www.flickr.com/photos/jorgeq82/4732700819
    • Testing apps 
 flow, navigation, interactions, transitions
    • From testing sketches as 
 paper prototypes or as clickable prototypes... www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
    • ...to iterations of 
 wireframes & designs www.flickr.com/photos/fluent_methods/6961802861
    • Time to practice
    • 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
    • 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
    • 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!)
    • 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
    • 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
    • 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
    • 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!)
    • 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
    • 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!)
    • 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
    • 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
    • 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
    • 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
    • Break 3 - 3.30pm
    • Part 3: Adapting to input, orientations & the future Touch across devices, device orientation, mobile context, device agnostic design
    • “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
    • We’re already facing two particular challenges... www.flickr.com/photos/david_a_lea/3247217194
    • 1. Breakpoints based on 
 popular devices puts us into a corner www.flickr.com/photos/michale/210536054
    • 2. Touch is no longer 
 limited to smartphones & tablets www.flickr.com/photos/lokan/8843464852
    • Input & touch across devices
    • “ Touch has landed on the desktop. “ - Josh Clark www.flickr.com/photos/patdavid/9391602153
    • ‘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
    • As always... 
 ...it depends
    • “ 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
    • We should consider touch across all devices & screen sizes. Not just smartphones & tablets www.flickr.com/photos/adactio/6153481666
    • 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
    • 49% of users hold their phone in one hand, but how they hold it differs www.flickr.com/photos/jorgeq82/4732700819
    • 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
    • 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
    • “ 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
    • Impacts 
 controls, placement & interactions
    • 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
    • Our current approach to navigation 
 is based on the mouse as input Source: Luke W - www.lukew.com/ff/entry.asp?1649
    • For hybrids we tend to 
 rest arms & grab bottom corners www.flickr.com/photos/intelfreepress/6837427202
    • Consider reach & obscuring content 
 & adjust navigation accordingly From... ...towards Source: Luke W - www.lukew.com/ff/entry.asp?1649
    • “ 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
    • Based on the context & use case, 
 posture, grip & orientation varies www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164
    • Mobile context
    • Situational context 
 impacts firm vs. loose grip www.flickr.com/photos/kalexanderson/6716348037
    • 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
    • The context differs based on 
 situation, attitudes & preferences www.flickr.com/photos/hoyvinmayvin/5873697252
    • The same context doesn’t 
 equal the same situation www.flickr.com/photos/hoyvinmayvin/5873139941
    • Other aspects to consider 
 for the mobile context are... www.flickr.com/photos/icedsoul/2486885051
    • Attention span 
 data snacking vs. focused usage www.flickr.com/photos/nadiya95/7217734288/
    • Signal coverage 
 speed & reliability of the connection www.flickr.com/photos/arjencito/6531640463/
    • Location 
 moving about vs. in one location www.flickr.com/photos/garry61/3191250682
    • The screen 
 small, medium, large & of course touch or not www.flickr.com/photos/adactio/6153481666
    • Posture & grip 
 how we sit/ stand as well as 
 interact with the device www.flickr.com/photos/helga/3545310740
    • Certain orientations are better
 for certain tasks Reading Watching Typing
    • There are three main approaches 
 for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
    • Adapting to orientation AND different devices can become a bit of a mindfield www.flickr.com/photos/cayusa/534070358
    • Move away from devices www.flickr.com/photos/martinteschner/4569495912
    • Device agnostic design
    • Remember how we can’t 
 successfully tell what devices users are using www.flickr.com/photos/adactio/6153481666
    • The web is after all about content. Not what device we are using Image courtesy of Shutterstock
    • “ Get your content to go anywhere, 
 because it’s going to go everywhere. ” - Brad Frost www.flickr.com/photos/mirafoto/494444094
    • Aim to make it more future proof 
 by moving away from specific devices www.flickr.com/photos/byte/8282578241
    • Use natural breakpoints based on 
 content layout rather than focusing on devices www.flickr.com/photos/sharynmorrow/127184319
    • Look at what’s suitable for your content 
 & best practice for layout principles www.flickr.com/photos/visualpunch/7351572896
    • It’s not without challenges, but challenges are meant to be overcome Image courtesy of Shutterstock
    • “ 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
    • “ 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
    • Basing breakpoints on 
 screen sizes is a temporary 
 work around www.flickr.com/photos/gozalewis/3249104929
    • Work with breakpoints & tweakpoints, 
 focus on content layout & EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
    • The same with columns, 
 opt for fluid as much possible http://foundation.zurb.com/docs/layout.php
    • This brings us back to 
 the importance of modularity www.flickr.com/photos/donsolo/2136923757/
    • Less about pages & more focus on 
 the building blocks that make up those views www.flickr.com/photos/boltofblue/4418442567
    • No more is it about beautiful page designs... www.flickr.com/photos/miuenski/3127285991
    • ...but about views that will look different across browsers, screen sizes & devices www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
    • The more you reuse, the less modules 
 there will be to design, define and develop www.flickr.com/photos/boltofblue/4418442567
    • Essential for preventing 
 ending up with too many pieces www.flickr.com/photos/akrabat/9085299639
    • This helps meeting requirements 
 across screen sizes and page views www.flickr.com/photos/webatelier/5929299679
    • And, it minimises design 
 & development efforts www.flickr.com/photos/webatelier/5929855686
    • Good for the 
 future & the budget Image courtesy of Shutterstock
    • Responsive design is based on 
 modular views rather than static pages www.flickr.com/photos/techsavvyed/5926978939
    • Need to know what you design for
 in order to identify & define 
 what modules to use where www.flickr.com/photos/songzhen/4893025042
    • As well as what content variations &
 sizes you need for different pages & devices www.flickr.com/photos/songzhen/4893025042
    • Start by 
 identifying the main module types & common elements between pages
    • 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
    • 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
    • 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
    • Adapt to the device & screen in question; 
 both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
    • 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
    • “ 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/
    • 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
    • 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
    • We have to 
 work together across disciplines 

    • This includes clients both in terms of 
 what they can expect & 
 what will be expected of them www.flickr.com/photos/martinteschner/4569495912
    • Responsive design means giving up some control to ensure it works 
 for as many devices as possible www.flickr.com/photos/byte/8282578241
    • Ensuring that we do what’s best for 
 our clients, our users & us as a company www.flickr.com/photos/stickkim/7491816206
    • Time to practice
    • 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
    • Start by 
 identifying the main module types & common elements between pages
    • 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
    • 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
    • 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
    • Adapt to the device & screen in question; 
 both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
    • 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
    • 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
    • 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
    • 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
    • Certain orientations are better
 for certain tasks Reading Watching Typing
    • There are three main approaches 
 for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
    • 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
    • A few final words...
    • Any screen should be 
 your starting point www.flickr.com/photos/byte/8282578241
    • “ Every responsive design project is also 
 a content strategy project. ” - Karen McGrane Image courtesy of Shutterstock
    • There is no right way 
 & the following is just 
 one way of approaching it www.flickr.com/photos/jtravism/2417205289
    • 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
    • It’s not just about the 
 smaller screens but also the big ones www.flickr.com/photos/jolives/2889944573/
    • Its’s about 
 thinking & planning ahead www.flickr.com/photos/jolives/2889944573
    • It doesn’t have to break the bank. Maintaining different versions will www.flickr.com/photos/gi/5537770007
    • Be creative & challenge 
 what exists today www.flickr.com/photos/oter/5090592214
    • Remember to test & iterate, 
 sketch as much as possible 
 & work collaboratively www.flickr.com/photos/jdhancock/4354438814
    • “ Every time you redesign God kills a kitten “ - Louis Rosenfeld www.flickr.com/photos/matterphotography/2739799786
    • Useful resources
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Thank you. Questions? @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com