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

anna.dahlstrom@gmail.comwww.annadahlstrom.com