Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Upcoming SlideShare
Loading in...5
×
 

Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013

on

  • 1,926 views

Slides from the second of my 3 part series classes at General Assembly in London on the 31st of July 2013. ...

Slides from the second of my 3 part series classes at General Assembly in London on the 31st of July 2013.

https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172

ABSTRACT
This follow-on session will build onto the guiding principles covered in the previous class, taking a closer look at:

- the common challenges faced when designing for multiple devices and how to address them
- content strategy and hierarchy across devices
- app structures and navigation patterns for responsive design
- how to test both responsive sites and apps

Statistics

Views

Total Views
1,926
Views on SlideShare
1,925
Embed Views
1

Actions

Likes
6
Downloads
111
Comments
0

1 Embed 1

https://twitter.com 1

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013 Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013 Presentation Transcript

  • Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom London 31st of July 2013 | Part 2 - Intermediate DESIGNING FOR MULTIPLE DEVICES PART 2 of 3
  • I’m Anna IA & UX DESIGNER | FREELANCE SINCE 2011 SWEDISH | IN LONDON SINCE 2006 This is me at my favourite place, Knäbäckshusen in Skåne, Sweden Photo curtesy of my sister
  • www.flickr.com/photos/suttonhoo22/2070700035 AGENDA 1. RECAP ON PART 1 2. COMMON CHALLENGES 3. CROSS DEVICE CONTENT STRATEGY & HIERARCHY 4. RESPONSIVE NAVIGATION 5. APPS STRUCTURE & NAVIGATION 6.TESTING APPS & RESPONSIVE SITES 7. EXERCISES 8. SUMMARY 9. Q & A
  • www.flickr.com/photos/publicenergy/1846375599 1. RECAP ON... GUIDING PRINCIPLES
  • www.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839 MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE 1
  • A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVETIMETO KILL 2 www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164
  • THE SAMETASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS 3 www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
  • USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES 4 www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
  • CORE CONTENT SHOULD REMAIN THE SAME BUTTHE EXPERIENCE SHOULD BE OPTIMISED 5 www.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193
  • www.flickr.com/photos/lastquest/1472794031 BUT WHY? ” Today's popular devices are not 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 @ONEXTRAPIXEL & @TRENTWALTON
  • “ 1,057 different mobile devices accessed The Guardian beta site yesterday (including one person on a zune!)” * * Source: The Guardian
  • 2.THE MOST COMMON CHALLENGES WITH RESPONSIVE DESIGN http://www.flickr.com/photos/eyesore9/3206408088/
  • WHERETO START? DEFINEYOUR MOBILE STRATEGY, START SKETCHING & WORKING ACROSS DISCIPLINESwww.flickr.com/photos/pinkpurse/5355919491/
  • HOW MANY VERSIONS SHOULD WE WIREFRAME? DEPENDS ONYOUR PROJECT, BUDGET &TEAM AS WELL AS WHO IS BUILDING IT www.flickr.com/photos/jorgeq82/4732700819
  • WHAT ABOUT VISUAL DESIGN? LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING www.flickr.com/photos/donsolo/2136923757/
  • WHAT SCREEN SIZES & RESOLUTIONS SHOULD I DESIGN FOR? USE ANALYTICS FOR GUIDANCE & DESIGN FORTHE MOST COMMON ONES Source: www.flickr.com/photos/dpstyles/3448453466
  • www.flickr.com/photos/adactio/6153481666 80% of 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: www.slideshare.net/yiibu/pragmatic-responsive-design
  • HOW DO I DEFINE MY BREAKPOINTS? BASE IT ONTHE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  • HOW DO I DEFINE MY BREAKPOINTS? BASE IT ONTHE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  • HOW DO I DEFINE MY BREAKPOINTS? BASE IT ONTHE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  • HOW MANY DEVICES SHOULD ITEST ON? AS MANY AS POSSIBLE BUT PRIORITISE BASED ONYOUR AUDIENCE www.flickr.com/photos/nomadic_lass/5598218199
  • HOW DO I HANDLE IMAGES? IMAGES & ICONS SHOULD BE AS FLEXIBLE AS POSSIBLE www.flickr.com/photos/jorgeq82/4732700819
  • http://www.flickr.com/photos/young_einstein/74097753/ 3. CROSS DEVICE CONTENT STRATEGY & HIERARCHY
  • “ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ” -TRENT WALTONwww.flickr.com/photos/theaftershock/2811382400/
  • www.flickr.com/photos/sepblog/3649959481 KNOWYOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEPTHE CORE CONTENTTHE SAME
  • www.flickr.com/photos/boltofblue/4418442567 IDENTIFYYOUR MAIN MODULETYPES DEFINE HOWTHEY SHOULD BEHAVE ACROSS DEVICES & ORIENTATIONS
  • Screenshot: www.crayola.co.uk/ “ With thousands and thousands of pages on the Crayola site, it wasn’t efficient to wireframe every single page and state.We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page.” * * Source: http://danielmall.com/work/crayola/
  • CONTENT GUIDESTHE GRID THE MAINTEMPLATES & MODULES http://foundation.zurb.com/docs/layout.php
  • UNDERSTANDTHE CONTENT ACROSS DEVICES & PAGES 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop/ tablet Mobile
  • Desktop/Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths IDENTIFY COMMON ELEMENTS DEFINEVARIATIONS BUT RE-USE AS MUCH AS POSSIBLE
  • DON’T JUST WORK WITH COLUMNS THINK OFTHE NARRATIVE OFTHE PAGE www.flickr.com/photos/garrettc/6260768486/
  • WORKTHROUGH YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  • MOBILEVS. DESKTOP FIRST •START LARGE OR SMALL WHAT EVER WORKS BEST FORYOU •ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
  • KNOW WHAT YOU DESIGN FOR IT MAKES IT EASIERTO FIT ALLTHE PIECESTOGETHER www.flickr.com/photos/songzhen/4893025042
  • IDENTIFY WHAT YOU CAN RE-USE TO MEET OTHER REQUIREMENTS ACROSS SCREEN SIZES AND PAGES/VIEWS www.flickr.com/photos/songzhen/4893025042
  • www.flickr.com/photos/katherinekenny ADAPTTOTHE MOBILE CONTEXT THE ORDER AND PRIORITY OF CONTENT AS WELL AS HO W MUCH YOU SHOW AND HOW
  • www.flickr.com/photos/taytom/5277657429 4.A LOOK AT RESPONSIVE NAVIGATION
  • www.flickr.com/photos/melodramababs/2766765248/ “ Mobile navigation should be like a good friend: there when you need them but cool enough to give you your space.” * * Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  • A CLOSER LOOK AT ‘RESPONSIVE NAVIGATION PATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
  • SIMPLE NAVIGATION TOP NAV OR “DO NOTHING” KEEPSTHE NAVIGATION ATTHETOP THETOGGLE HIDES NAVIGATION ITEMS IN A MENU THE LEFT NAV FLYOUT MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  • http://skinnyties.com/ TOP NAV OR “DO NOTHING” KEEPSTHE NAVIGATION ATTHETOP PROS Simple to implement Less design & development implications CONS Not scalable Potential height issues Via Brad Frost (thank you!)
  • PROS Optimises screen use Recognised from apps Scalable CONS Possible animation performance problems Javascript dependent THETOGGLE HIDES NAVIGATION ITEMS IN A MENU http://www.smashingmagazine.com/ Via Brad Frost (thank you!)
  • Images from Barack Obama via Brad Frost PROS Space generous Recognised nav pattern from apps CONS More advanced and doesn’t work on all devices THE LEFT NAV FLYOUT MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN Via Brad Frost (thank you!)
  • COMPLEX NAVIGATION THE MULTITOGGLE NESTED NAVIGATION GROUPED UNDER A MENU RIGHTTO LEFT THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT SKIPTHE SUB-NAV NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  • COMPLEX NAVIGATION PRIORITY+ DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’ THE CAROUSEL+ A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  • THE MULTITOGGLE NESTED NAVIGATION GROUPED UNDER A MENU Barack Obama - image via Stephanie Riegerhttp://thenextweb.com/ PROS Scannable Scalable CONS Animation performance Javascript dependent Via Brad Frost (thank you!)
  • PROS Nice looking Follows mobile conventions Scalable CONS More complex to implement Animation performance RIGHTTO LEFT THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT http://www.sony.com/ Via Brad Frost (thank you!)
  • http://worldwildlife.org/ PROS Simple Removes complexities around sub-navigation CONS Re-quires page refresh & visit for access SKIPTHE SUB-NAV NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL Via Brad Frost (thank you!)
  • http://www.bbc.co.uk/sport PROS Simple Supports (supposedly) most used) Scalable CONS Hides potentially important items PRIORITY+ DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’ Via Brad Frost (thank you!)
  • Image from Intel, via Brad Frost PROS Easy to navigate Suitable for touch CONS Doesn’t display all parent categories at once Less good for non- touch devices Not suitable for multi- level sub-navs THE CAROUSEL+ A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW Via Brad Frost (thank you!)
  • www.flickr.com/photos/inpivic/5205918163/ CONSIDERYOUR PROJECT ASSESSTHE DEPTH NEEDED AS WELL AS & PROS & CONS OF DIFFERENT NAVIGATION APPROACHES
  • DEFINETYPES OF NAVIGATION PRIMARY, SECONDARY,TERTIARY AS WELL AS FOOTER & CROSS LINKING http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  • Screenshot: http://cognition.happycog.com/ BE CONSISTENT USETHE SAME APPROACHTHROUGHOUT & HAVE CLEAR, SAYINGVISUAL CUES
  • Screenshot: http://cognition.happycog.com/ BE CONSISTENT USETHE SAME APPROACHTHROUGHOUT & HAVE CLEAR, SAYINGVISUAL CUES
  • CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT Screenshot: www.bbc.co.uk/sport
  • CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT Screenshot: www.bbc.co.uk/sport
  • CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT Screenshot: www.bbc.co.uk/sport
  • 5.A LOOK AT... APP STRUCTURES & NAVIGATION www.flickr.com/photos/46355638@N00/4414640784
  • www.flickr.com/photos/gadl/3570118243 EVERY PLATFORM IS ITS OWN LITTLE WORLD WITHTHEIR OWN UI GUIDELINESTHAT USERS ARE USEDTO
  • Source: http://developer.android.com/design/patterns/new-4-0.html BASIC iOS NAVIGATION 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. Content area MoreItemItemHome Item iPhone 12:15 PM APP NAME More Customise IMG IMG IMG IMG IMG IMG IMG IMG IMG Item Item Item Item Item Item Item Item MoreItemItemHome Item
  • Source: http://developer.android.com/design/patterns/new-4-0.html ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH: 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) UPVS. 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.
  • www.flickr.com/photos/inpivic/5205918163/ IDENTIFYYOUR MAIN SECTIONS EACH SHOULD HAVE A CLEAR FOCUS & PURPOSE
  • SKETCH YOUR SCREEN FLOWS, NAVIGATION & CONTENT www.flickr.com/photos/saucef/7184615025
  • www.flickr.com/photos/kruger_otto/5581886586 AVOID USINGTHE HOME SCREEN AS A STEPPING POINT CONSIDERTHE USE CASE & ENSUREYOU DELIVERVALUE FROMTHE FIRSTVIEW
  • RESEARCH COMMON APPROACHES FOR INSPIRATION & BEST PRACTICE www.uxarchive.com/
  • RESEARCH COMMON APPROACHES FOR INSPIRATION & BEST PRACTICE www.uxarchive.com/tasks/sign_up/
  • LOOK AT WHAT OTHERS DO BE CREATIVE http://pttrns.com/
  • http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/ 6. HOWTO... TEST APPS & RESPONSIVE SITES
  • www.flickr.com/photos/cristiano_betta/2909483129 TESTING APPS STRUCTURE, NAVIGATION, INTERACTIONS &TRANSITIONS
  • www.flickr.com/photos/adactio/5818096043 TESTING RESPONSIVE SITES DOTHIS AS EARLY AS POSSIBLE
  • INTHE BROWSER BY RESIZINGTHE BROWSER WINDOW & CHECKINGTHE DISPLAY OF CONTENT http://thenextweb.com/
  • INTHE BROWSER BY DESIGNING INTHE BROWSER & CREATING A WORKING HTML PROTOTYPE www.flickr.com/photos/jorgeq82/4732700819
  • USING HANDYTOOLS HELPYOU STYLE &TESTYOURTYPOGRAPHY http://responsive.is/typecast.com
  • USING EMULATORS ALLOWYOUTOVIEWYOUR SITE ACROSS DEVICES & ORIENTATIONS www.responsinator.com/ http://quirktools.com/screenfly/ http://screenqueri.es/ http://mattkersley.com/responsive/
  • ON ACTUAL DEVICES EXPENSIVE BUTTHERE ARE WAYS AROUND IT www.flickr.com/photos/arne/5835855777/in/photostream/
  • BUYING BUNDLES & SHARING HELPING EACH OTHER www.flickr.com/photos/adactio/6800969243/in/photostream/
  • WITH USERS DEFINEYOUR AUDIENCE,TEST CASES, OBJECTIVES & CONSIDER EXPECTATIONS & LIMITATIONS www.flickr.com/photos/jorgeq82/4732700819
  • www.flickr.com/photos/icedsoul/3041770422 7.TIMETO... PRACTICE
  • www.flickr.com/photos/icedsoul/3041770422 MODULAR DESIGN THETASK: You've been asked to develop a responsive site for a small furniture store for summer. They sell indoor tables (dinner, kitchen, sofa tables) as well as outdoor tables.They are an independent store and want to inform users about their store. Identify a number (not all) main content modules you’d imagine that the site would need and define them for smartphone and desktop. 15 MINUTES EXERCISE ONE
  • UNDERSTANDTHE CONTENT ACROSS DEVICES & PAGES 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop/ tablet Mobile
  • Desktop/Tablet Mobile 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths IDENTIFY COMMON ELEMENTS DEFINEVARIATIONS BUT RE-USE AS MUCH AS POSSIBLE
  • www.flickr.com/photos/icedsoul/3041770422 MODULAR DESIGN THETASK: You've been asked to develop a responsive site for a small furniture store for summer. They sell indoor tables (dinner, kitchen, sofa tables) as well as outdoor tables.They are an independent store and want to inform users about their store. Identify a number (not all) main content modules you’d imagine that the site would need and define them for smartphone and desktop. 15 MINUTES EXERCISE ONE
  • www.flickr.com/photos/icedsoul/3041770422 RESPONSIVE NAVIGATION THETASK: You've been asked to develop a responsive site for a small furniture store for summer. They sell indoor tables (dinner, kitchen, sofa tables) as well as outdoor tables.They are an independent store and want to inform users about their store. Define how the navigation will work for desktop and mobile. 10 MINUTES EXERCISE TWO
  • SIMPLE NAVIGATION TOP NAV OR “DO NOTHING” KEEPSTHE NAVIGATION ATTHETOP THETOGGLE HIDES NAVIGATION ITEMS IN A MENU THE LEFT NAV FLYOUT MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  • DEFINETYPES OF NAVIGATION PRIMARY, SECONDARY,TERTIARY AS WELL AS FOOTER & CROSS LINKING http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  • www.flickr.com/photos/icedsoul/3041770422 RESPONSIVE NAVIGATION THETASK: You've been asked to develop a responsive site for a small furniture store for summer. They sell indoor tables (dinner, kitchen, sofa tables) as well as outdoor tables.They are an independent store and want to inform users about their store. Define how the navigation will work for desktop and mobile. 10 MINUTES EXERCISE TWO
  • www.flickr.com/photos/icedsoul/3041770422 COMPLEX RESPONSIVE NAVIGATION THETASK: After the successful table store project you've been asked to develop a responsive site for a large furniture store in time for summer.They sell indoor as well as outdoor furniture and frequently have offers and products they want to push.They group products by room (e.g. kitchen but also by category (e.g. storage) and sub-category (e.g. food storage). Define how the navigation & including sub- navigation will work for desktop and mobile. 15 MINUTES EXERCISE THREE
  • COMPLEX NAVIGATION THE MULTITOGGLE NESTED NAVIGATION GROUPED UNDER A MENU RIGHTTO LEFT THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT SKIPTHE SUB-NAV NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  • COMPLEX NAVIGATION PRIORITY+ DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’ THE CAROUSEL+ A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  • www.flickr.com/photos/icedsoul/3041770422 COMPLEX RESPONSIVE NAVIGATION THETASK: After the successful table store project you've been asked to develop a responsive site for a large furniture store in time for summer.They sell indoor as well as outdoor furniture and frequently have offers and products they want to push.They group products by room (e.g. kitchen but also by category (e.g. storage) and sub-category (e.g. food storage). Define how the navigation & including sub- navigation will work for desktop and mobile. 15 MINUTES EXERCISE THREE
  • http://www.flickr.com/photos/martinteschner/4569495912/ 8.TO SUMMARISE
  • www.flickr.com/photos/thecaucas/2597813380 GUIDING PRINCIPLES MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED
  • www.flickr.com/photos/thecaucas/2597813380 COMMON PROBLEMS NUMBER OF WIREFRAMES DEPENDS ONYOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING IT VISUAL DESIGN LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING SCREENSIZES & BREAKPOINTS USE ANALYTICS FOR GUIDANCE & DESIGN FORTHE MOST COMMON ONES WHAT TO TEST ON AS MANY AS POSSIBLE BUT PRIORITISE BASED ONYOUR AUDIENCE IMAGES & ICONS AS FLEXIBLE AS POSSIBLE
  • www.flickr.com/photos/thecaucas/2597813380 CONTENT STRATEGY & HIERARCHY KNOWYOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENTTHE SAME CONSIDER THE MOBILE CONTEXT ADAPTTO LAYOUT, INTERACTION AND CONTENT PRIORITY & PRESENTATION DEFINE CONTENT STACKING THE GRID & BREAKPOINTS ISYOUR GUIDE BUT DON'T JUST WORK WITHTHE COLUMNS. CONSIDER EACH MODULE & THE STORY OFTHE PAGE
  • www.flickr.com/photos/thecaucas/2597813380 RESPONSIVE NAVIGATION RESEARCH DIFFERENT APPROACHES KNOWYOUR OPTIONS &THE PROS & CONS FOR EACH BASE IT ONYOUR PROJECT ASSESS HOW MANY LEVELSTHAT ARE NEEDED & REVIEW APPROACH ACROSS DEVICES BUT ALSO WHAT GOES IN WORK WITH DIFFERENT TYPES IT'S NOT JUST ABOUTTHE MAIN NAVIGATION BUT ALSO SUB-NAVIGATION, SEARCH, IN PAGE LINKS &THE FOOTER BE CONSISTENT USE SAYINGVISUAL CUES & CONSIDER NAVIGATION ACROSS ALL PRODUCTS
  • www.flickr.com/photos/thecaucas/2597813380 APP STRUCTURES & NAVIGATION BASE ON PROJECT & PLATFORM IDENTIFYYOUR MAIN SECTIONS & KEEP DIFFERENCES IN STRUCTURE & UI GUIDELINES BETWEEN PLATFORMS IN MIND SKETCH BEFORE WIREFRAMING WORKTHROUGHYOUR SCREENFLOW, NAVIGATION & CONTENT ACROSS SCREENS VALUE FROM FIRSTVIEW AVOID USINGTHE HOME SCREEN AS A STEPPING POINT BEST PRACTICE & INSPIRATION FORTYPICALTASK FLOWS & SCREENS
  • www.flickr.com/photos/thecaucas/2597813380 TESTING APPS & RESPONSIVE SITES TESTING APPS BOTH STRUCTURE, NAVIGATION, INTERACTIONS &TRANSITIONS TESTING RESPONSIVE SITES DOTHIS AS EARLY AS POSSIBLETO ENSURE IT ACTUALLY WORKS INTHE BROWSER TESTING IN THE BROWSER BY RESIZINGTHE BROWSER WINDOW OR DESIGNING & CREATING PROTOTYPES USING EMULATORS ALLOWSYOUTOVIEW HOWYOUR SITE IS DISPLAYED ACROSS DEVICES & ORIENTATIONS
  • www.flickr.com/photos/thecaucas/2597813380 TESTING APPS & RESPONSIVE SITES ON ACTUAL DEVICES TEST ON AS MANY AS POSSIBLE.THE BEST REPRESENTATION BUT CAN BE EXPENSIVE. INVEST IN KEY DEVICES & POOLTOGETHER TO SHARE DEVICES TESTING WITH USERS TEST EARLY & FREQUENTLY. DEFINEYOUR AUDIENCE,TEST CASES, OBJECTIVES & IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC EXPECTATIONS & LIMITATIONS
  • www.flickr.com/photos/st3f4n/4387291247 9. FORTHE ROAD SOMETAKE AWAYS
  • 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/ responsive-sketching http://jeremypalford.com/arch-journal/ responsive-web-design-sketch-sheets http://danielmall.com/work/crayola/
  • www.flickr.com/photos/st3f4n/4387291247 NAVIGATION FOR RESPONSIVE DESIGN http://bradfrostweb.com/blog/web/ responsive-nav-patterns/ http://bradfrostweb.com/blog/web/complex- navigation-patterns-for-responsive-design/ http://palantir.net/blog/scalable-navigation- patterns-responsive-web-design
  • www.flickr.com/photos/st3f4n/4387291247 TESTING http://bradfrostweb.com/blog/mobile/ test-on-real-mobile-devices-without- breaking-the-bank/ http://www.welcomebrand.co.uk/ thoughts/website-testing-phone-bundles/ https://bagcheck.com/blog/22-mobile- device-testing-the-gear
  • www.flickr.com/photos/st3f4n/4387291247 TESTINGYOUR RESPONSIVE SITE 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/
  • 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/
  • www.flickr.com/photos/st3f4n/4387291247 DEVICES & SIZES http://www.google.com/analytics/ features/mobile-site-traffic.html http://en.wikipedia.org/wiki/ List_of_displays_by_pixel_density http://opensignal.com/reports/ fragmentation-2013/ https://deviceatlas.com/device-data/ devices Slide 37: http://www.slideshare.net/yiibu/ pragmatic-responsive-design
  • www.flickr.com/photos/st3f4n/4387291247 OTHER USEFUL LINKS www.slideshare.net/yiibu/pragmatic- responsive-design http://stephanierieger.com/on-designing- content-out-a-response-to-zeldman-and- others/ http://bradfrostweb.com/blog/mobile/ support-vs-optimization/ http://stuffandnonsense.co.uk/blog/about/ we_need_a_standard_show_navigation_i con_for_responsive_web_design http://danielmall.com/work/crayola/
  • www.flickr.com/photos/st3f4n/4387291247 OTHER USEFUL LINKS http://bradfrostweb.com/blog/mobile/ anatomy-of-a-mobile-first-responsive- web-design/ http://www.thinkwithgoogle.com/ mobileplanet/en/
  • www.flickr.com/photos/st3f4n/4387291247 DIFFERENT APPS Figure http://pttrns.com/p/175 CirleMe http://pttrns.com/p/176 Gabi http://pttrns.com/p/189 WeatherCube http://pttrns.com/p/252 Tumblr http://pttrns.com/p/226 iTrackMyTime http://inspired-ui.com/ tagged/itrackmytime City Guide http://pttrns.com/p/265 Photolettering http://inspired-ui.com/ tagged/app_photolettering WaterIn http://inspired-ui.com/tagged/ app_waterin
  • www.flickr.com/photos/st3f4n/4387291247 DIFFERENT APPS Thinglist http://inspired-ui.com/tagged/ app_thinglist Storylane Reader http://pttrns.com/p/251 Brit + Co http://pttrns.com/p/205 Circle http://pttrns.com/p/179 Currency http://pttrns.com/p/259 OmFinder http://inspired-ui.com/tagged/ app_om_finder Tracks http://inspired-ui.com/tagged/ app_tracks
  • The bridge between Sweden & Denmark, as seen in”The Bridge” - www.flickr.com/photos/dahlstroms/4411448782/ Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.com