Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
110
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
-
date post
19-Sep-2014 -
Category
Design
-
view
4 -
download
1
description
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
Transcript of Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Anna Dahlströmfounder byflock
www.annadahlstrom.com annadahlstrom
London 31st of July 2013 | Part 2 - IntermediateDESIGNING FOR MULTIPLE DEVICES
PART 2 of 3
I’m AnnaIA & UX DESIGNER | FREELANCE SINCE 2011
SWEDISH | IN LONDON SINCE 2006This 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 & EVERYWHERE1
A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL
2
www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164
THE SAME TASKS 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 BUT THE 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 MOSTCOMMON CHALLENGES WITH RESPONSIVE DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/
WHERE TO START?DEFINE YOUR MOBILE STRATEGY,
START SKETCHING & WORKING ACROSS DISCIPLINESwww.flickr.com/photos/pinkpurse/5355919491/
HOW MANY VERSIONS SHOULD
WE WIREFRAME?DEPENDS ON YOUR
PROJECT, BUDGET & TEAM AS WELL AS
WHO IS BUILDING ITwww.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 FOR THE 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 ON THE 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 ON THE 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 ON THE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS
www.slideshare.net/yiibu/pragmatic-responsive-design
HOW MANY DEVICES SHOULD I TEST ON?AS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR 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 DEVICECONTENT 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
KNOW YOUR CONTENTPRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAME
www.flickr.com/photos/boltofblue/4418442567
IDENTIFY YOUR MAIN MODULE TYPESDEFINE HOW THEY 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 GUIDES THE GRIDTHE MAIN TEMPLATES & MODULES
http://foundation.zurb.com/docs/layout.php
UNDERSTAND THE CONTENTACROSS DEVICES & PAGES
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
Desktop/ tablet Mobile
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
IDENTIFY COMMON ELEMENTSDEFINE VARIATIONS BUT RE-USE AS MUCH AS POSSIBLE
DON’T JUST WORK WITH COLUMNSTHINK OF THE NARRATIVE OF THE PAGE
www.flickr.com/photos/garrettc/6260768486/
WORK THROUGH YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
MOBILE VS. DESKTOP FIRST•START LARGE OR SMALL
WHAT EVER WORKS BEST FOR YOU
•ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
KNOW WHAT YOU DESIGN FORIT MAKES IT EASIER TO FIT ALL THE PIECES TOGETHER
www.flickr.com/photos/songzhen/4893025042
IDENTIFY WHAT YOU CAN RE-USETO MEET OTHER REQUIREMENTS ACROSS SCREEN SIZES AND PAGES/ VIEWS
www.flickr.com/photos/songzhen/4893025042
www.flickr.com/photos/katherinekenny
ADAPT TO THE MOBILE CONTEXTTHE ORDER AND PRIORITY OF CONTENT AS WELL AS HO W MUCH YOU SHOW AND HOW
www.flickr.com/photos/taytom/5277657429
4. A LOOK ATRESPONSIVE 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-patternshttp://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
SIMPLE NAVIGATIONTOP NAV OR “DO NOTHING”KEEPS THE NAVIGATION AT THE TOP
THE TOGGLEHIDES NAVIGATION ITEMS IN A MENU
THE LEFT NAV FLYOUTMENU ITEMS ARE ACCESSED FROM A TRAY SLIDING IN
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
http://skinnyties.com/
TOP NAV OR “DO NOTHING”KEEPS THE NAVIGATION AT THE TOP
PROSSimple to implementLess design & development implications
CONSNot scalablePotential height issues
Via Brad Frost (thank you!)
PROSOptimises screen useRecognised from appsScalable
CONSPossible animation performance problemsJavascript dependent
THE TOGGLEHIDES NAVIGATION ITEMS IN A MENU
http://www.smashingmagazine.com/
Via Brad Frost (thank you!)
Images from Barack Obama via Brad Frost
PROSSpace generousRecognised nav pattern from apps
CONSMore advanced and doesn’t work on all devices
THE LEFT NAV FLYOUTMENU ITEMS ARE ACCESSED FROM A TRAY SLIDING IN
Via Brad Frost (thank you!)
COMPLEX NAVIGATIONTHE MULTI TOGGLENESTED NAVIGATION GROUPED UNDER A MENU
RIGHT TO LEFTTHE NEXT LEVEL NAVIGATION SLIDES IN RIGHT TO LEFT
SKIP THE SUB-NAVNEXT LEVEL NAVIGATION IS DISPLAYED ON THAT LEVEL
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
COMPLEX NAVIGATIONPRIORITY+DISPLAYS THE MOST IMPORTANT & HIDES THE REST UNDER ‘MORE’
THE CAROUSEL+A CAROUSEL WITH THE PARENT CATEGORIES & SUB-NAV BELOW
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
THE MULTI TOGGLENESTED NAVIGATION GROUPED UNDER A MENU
Barack Obama - image via Stephanie Riegerhttp://thenextweb.com/
PROSScannableScalable
CONSAnimation performanceJavascript dependent
Via Brad Frost (thank you!)
PROSNice lookingFollows mobile conventionsScalable
CONSMore complex to implementAnimation performance
RIGHT TO LEFTTHE NEXT LEVEL NAVIGATION SLIDES IN RIGHT TO LEFT
http://www.sony.com/
Via Brad Frost (thank you!)
http://worldwildlife.org/
PROSSimpleRemoves complexities around sub-navigation
CONSRe-quires page refresh & visit for access
SKIP THE SUB-NAVNEXT LEVEL NAVIGATION IS DISPLAYED ON THAT LEVEL
Via Brad Frost (thank you!)
http://www.bbc.co.uk/sport
PROSSimpleSupports (supposedly) most used)Scalable
CONSHides potentially important items
PRIORITY+DISPLAYS THE MOST IMPORTANT & HIDES THE REST UNDER ‘MORE’
Via Brad Frost (thank you!)
Image from Intel, via Brad Frost
PROSEasy to navigateSuitable for touch
CONSDoesn’t display all parent categories at onceLess good for non-touch devicesNot suitable for multi-level sub-navs
THE CAROUSEL+A CAROUSEL WITH THE PARENT CATEGORIES & SUB-NAV BELOW
Via Brad Frost (thank you!)
www.flickr.com/photos/inpivic/5205918163/
CONSIDER YOUR PROJECTASSESS THE DEPTH NEEDED AS WELL AS & PROS & CONS OF DIFFERENT NAVIGATION APPROACHES
DEFINE TYPES OF NAVIGATIONPRIMARY, SECONDARY, TERTIARY AS WELL AS FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
Screenshot: http://cognition.happycog.com/
BE CONSISTENTUSE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUES
Screenshot: http://cognition.happycog.com/
BE CONSISTENTUSE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUES
CONSIDER NAVIGATIONACROSS PRODUCTSWHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport
CONSIDER NAVIGATIONACROSS PRODUCTSWHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport
CONSIDER NAVIGATIONACROSS PRODUCTSWHERE 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 WORLDWITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO
Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS
NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTONShould always take the user one step back from where they came from & be descriptive.
TAB BARCan often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEMUsed 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 NAMEMore 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 NAVIGATIONDIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH:
NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BARHolds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTONThe 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/
IDENTIFY YOUR MAIN SECTIONSEACH SHOULD HAVE A CLEAR FOCUS & PURPOSE
SKETCHYOUR SCREEN FLOWS, NAVIGATION & CONTENT
www.flickr.com/photos/saucef/7184615025
www.flickr.com/photos/kruger_otto/5581886586
AVOID USING THE HOME SCREEN AS A STEPPING POINTCONSIDER THE USE CASE & ENSURE YOU DELIVER VALUE FROM THE FIRST VIEW
RESEARCH COMMON APPROACHESFOR INSPIRATION & BEST PRACTICE
www.uxarchive.com/
RESEARCH COMMON APPROACHESFOR INSPIRATION & BEST PRACTICE
www.uxarchive.com/tasks/sign_up/
LOOK AT WHAT OTHERS DOBE CREATIVE
http://pttrns.com/
http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
6. HOW TO...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 SITESDO THIS AS EARLY AS POSSIBLE
IN THE BROWSERBY RESIZING THE BROWSER WINDOW & CHECKING THE DISPLAY OF CONTENT
http://thenextweb.com/
IN THE BROWSERBY DESIGNING IN THE BROWSER & CREATING A WORKING HTML PROTOTYPE
www.flickr.com/photos/jorgeq82/4732700819
USING HANDY TOOLSHELP YOU STYLE & TEST YOUR TYPOGRAPHY
http://responsive.is/typecast.com
USING EMULATORSALLOW YOU TO VIEW YOUR SITE ACROSS DEVICES & ORIENTATIONS
www.responsinator.com/
http://quirktools.com/screenfly/
http://screenqueri.es/
http://mattkersley.com/responsive/
ON ACTUAL DEVICESEXPENSIVE BUT THERE ARE WAYS AROUND IT
www.flickr.com/photos/arne/5835855777/in/photostream/
BUYING BUNDLES
& SHARINGHELPING EACH OTHER
www.flickr.com/photos/adactio/6800969243/in/photostream/
WITH USERSDEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & CONSIDER EXPECTATIONS & LIMITATIONS
www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/icedsoul/3041770422
7. TIME TO...PRACTICE
www.flickr.com/photos/icedsoul/3041770422
MODULAR DESIGNTHE TASK: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
UNDERSTAND THE CONTENTACROSS DEVICES & PAGES
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
Desktop/ tablet Mobile
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
IDENTIFY COMMON ELEMENTSDEFINE VARIATIONS BUT RE-USE AS MUCH AS POSSIBLE
www.flickr.com/photos/icedsoul/3041770422
MODULAR DESIGNTHE TASK: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 NAVIGATIONTHE TASK: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 NAVIGATIONTOP NAV OR “DO NOTHING”KEEPS THE NAVIGATION AT THE TOP
THE TOGGLEHIDES NAVIGATION ITEMS IN A MENU
THE LEFT NAV FLYOUTMENU ITEMS ARE ACCESSED FROM A TRAY SLIDING IN
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
DEFINE TYPES OF NAVIGATIONPRIMARY, 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 NAVIGATIONTHE TASK: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 NAVIGATIONTHE TASK: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 NAVIGATIONTHE MULTI TOGGLENESTED NAVIGATION GROUPED UNDER A MENU
RIGHT TO LEFTTHE NEXT LEVEL NAVIGATION SLIDES IN RIGHT TO LEFT
SKIP THE SUB-NAVNEXT LEVEL NAVIGATION IS DISPLAYED ON THAT LEVEL
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
COMPLEX NAVIGATIONPRIORITY+DISPLAYS THE MOST IMPORTANT & HIDES THE REST UNDER ‘MORE’
THE CAROUSEL+A CAROUSEL WITH THE PARENT CATEGORIES & SUB-NAV BELOW
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
www.flickr.com/photos/icedsoul/3041770422
COMPLEX RESPONSIVE NAVIGATIONTHE TASK: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. TOSUMMARISE
www.flickr.com/photos/thecaucas/2597813380
GUIDING PRINCIPLESMOBILE 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 PROBLEMSNUMBER OF WIREFRAMESDEPENDS ON YOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING IT
VISUAL DESIGNLESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING
SCREENSIZES & BREAKPOINTSUSE ANALYTICS FOR GUIDANCE & DESIGN FOR THE MOST COMMON ONES
WHAT TO TEST ONAS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR AUDIENCE
IMAGES & ICONSAS FLEXIBLE AS POSSIBLE
www.flickr.com/photos/thecaucas/2597813380
CONTENT STRATEGY & HIERARCHY KNOW YOUR CONTENTPRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAME
CONSIDER THE MOBILE CONTEXTADAPT TO LAYOUT, INTERACTION AND CONTENT PRIORITY & PRESENTATION
DEFINE CONTENT STACKINGTHE GRID & BREAKPOINTS IS YOUR GUIDE BUT DON'T JUST WORK WITH THE COLUMNS. CONSIDER EACH MODULE & THE STORY OF THE PAGE
www.flickr.com/photos/thecaucas/2597813380
RESPONSIVE NAVIGATIONRESEARCH DIFFERENT APPROACHESKNOW YOUR OPTIONS & THE PROS & CONS FOR EACH
BASE IT ON YOUR PROJECTASSESS HOW MANY LEVELS THAT ARE NEEDED & REVIEW APPROACH ACROSS DEVICES BUT ALSO WHAT GOES IN
WORK WITH DIFFERENT TYPESIT'S NOT JUST ABOUT THE MAIN NAVIGATION BUT ALSO SUB-NAVIGATION, SEARCH, IN PAGE LINKS & THE FOOTER
BE CONSISTENTUSE SAYING VISUAL CUES & CONSIDER NAVIGATION ACROSS ALL PRODUCTS
www.flickr.com/photos/thecaucas/2597813380
APP STRUCTURES & NAVIGATIONBASE ON PROJECT & PLATFORMIDENTIFY YOUR MAIN SECTIONS & KEEP DIFFERENCES IN STRUCTURE & UI GUIDELINES BETWEEN PLATFORMS IN MIND
SKETCH BEFORE WIREFRAMINGWORK THROUGH YOUR SCREENFLOW, NAVIGATION & CONTENT ACROSS SCREENS
VALUE FROM FIRST VIEWAVOID USING THE HOME SCREEN AS A STEPPING POINT
BEST PRACTICE & INSPIRATIONFOR TYPICAL TASK FLOWS & SCREENS
www.flickr.com/photos/thecaucas/2597813380
TESTING APPS & RESPONSIVE SITESTESTING APPSBOTH STRUCTURE, NAVIGATION, INTERACTIONS & TRANSITIONS
TESTING RESPONSIVE SITESDO THIS AS EARLY AS POSSIBLE TO ENSURE IT ACTUALLY WORKS IN THE BROWSER
TESTING IN THE BROWSERBY RESIZING THE BROWSER WINDOW OR DESIGNING & CREATING PROTOTYPES
USING EMULATORSALLOWS YOU TO VIEW HOW YOUR SITE IS DISPLAYED ACROSS DEVICES & ORIENTATIONS
www.flickr.com/photos/thecaucas/2597813380
TESTING APPS & RESPONSIVE SITESON ACTUAL DEVICESTEST ON AS MANY AS POSSIBLE. THE BEST REPRESENTATION BUT CAN BE EXPENSIVE. INVEST IN KEY DEVICES & POOL TOGETHER TO SHARE DEVICES
TESTING WITH USERSTEST EARLY & FREQUENTLY. DEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC EXPECTATIONS & LIMITATIONS
www.flickr.com/photos/st3f4n/4387291247
9. FOR THE ROADSOME TAKE AWAYS
www.flickr.com/photos/st3f4n/4387291247
DEMO, SKETCHING & WORKFLOWwww.thismanslife.co.uk/projects/lab/responsivewireframes/www.thismanslife.co.uk/projects/lab/responsiveillustration/http://nocturnalmonkey.com/archive/responsive-sketchinghttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetshttp://danielmall.com/work/crayola/
www.flickr.com/photos/st3f4n/4387291247
NAVIGATION FOR RESPONSIVE DESIGNhttp://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
TESTINGhttp://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
TESTING YOUR RESPONSIVE SITEhttp://responsive.is/typecast.comhttp://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 & MOCKUPShttp://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 & SIZEShttp://www.google.com/analytics/features/mobile-site-traffic.htmlhttp://en.wikipedia.org/wiki/List_of_displays_by_pixel_densityhttp://opensignal.com/reports/fragmentation-2013/https://deviceatlas.com/device-data/devicesSlide 37:http://www.slideshare.net/yiibu/pragmatic-responsive-design
www.flickr.com/photos/st3f4n/4387291247
OTHER USEFUL LINKSwww.slideshare.net/yiibu/pragmatic-responsive-designhttp://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/http://bradfrostweb.com/blog/mobile/support-vs-optimization/http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_designhttp://danielmall.com/work/crayola/
www.flickr.com/photos/st3f4n/4387291247
OTHER USEFUL LINKShttp://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 APPSFigure http://pttrns.com/p/175CirleMe http://pttrns.com/p/176Gabi http://pttrns.com/p/189WeatherCube http://pttrns.com/p/252Tumblr http://pttrns.com/p/226iTrackMyTime http://inspired-ui.com/tagged/itrackmytimeCity Guide http://pttrns.com/p/265Photolettering http://inspired-ui.com/tagged/app_photoletteringWaterIn http://inspired-ui.com/tagged/app_waterin
www.flickr.com/photos/st3f4n/4387291247
DIFFERENT APPSThinglist http://inspired-ui.com/tagged/app_thinglistStorylane Reader http://pttrns.com/p/251 Brit + Co http://pttrns.com/p/205Circle http://pttrns.com/p/179Currency http://pttrns.com/p/259OmFinder http://inspired-ui.com/tagged/app_om_finderTracks 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?
annadahlstromannadahlstrom
