Slides from my part 2 class of Designing for multiple devices run at General Assembly in London on the 18th of March 2013. ABSTRACT In Fundamentals for Designing for Multiple Devices, we covered the basics of responsive design and mobile apps (for both Android & iOS). We also looked at how user expectations have shifted behaviour, how consumption patterns have changed and what that has meant for designing products that will be used on multiple devices. This follow-on session will take outset in the guiding principles covered in the previous class and take a closer look at: - common challenges faced when designing for multiple devices and how to address them - content strategy and hierarchy across devices - navigation patterns for responsive design - app structures and navigation patterns - how to test both responsive sites and apps

1. Anna Dahlström
founder byflock
www.annadahlstrom.com
anna.dahlstrom@gmail.com
annadahlstrom
PART 2
DESIGNING FOR MULTIPLE DEVICES
London 18th March 2013
http://desktopwallpaper-s.com/19-Computers/-/Future/
Anna Dahlström
founder byflock
www.annadahlstrom.com
annadahlstrom

2. I’m Anna
IA & UX DESIGNER | SWEDISH BUT LONDON BASED
FREELANCING + WORKING ON A STARTUP
LOVES QUOTES & CHALLENGES
This is Öresundsbron, the bridge between Sweden & Denmark
www.flickr.com/photos/dahlstroms/4411448782/

3. AGENDA
1. RECAP ON GUIDING PRINCIPLES
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/27147/3648039063

4. 1. RECAP ON...
GUIDING
PRINCIPLES
www.flickr.com/photos/publicenergy/1846375599

5. MOBILE DEVICES ARE USED
1 ANYWHERE & EVERYWHERE
www.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839

6. A LARGE PROPORTION OF
2 USAGE HAPPENS WHEN WE
HAVE TIME TO KILL
http://www.flickr.com/photos/hanhutton/320464105/ www.flickr.com/photos/edduddiee/4307943164

7. THE SAME TASKS ARE CARRIED
3 OUT ON SMARTPHONES AS ON
DESKTOPS
www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748

8. USERS INCREASINGLY EXPECT AN
4 EQUAL & CONTINUOS
EXPERIENCE ACROSS DEVICES
www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339

9. CORE CONTENT SHOULD REMAIN
5 THE SAME BUT THE EXPERIENCE
SHOULD BE OPTIMISED
www.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193

10. 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
www.flickr.com/photos/lastquest/1472794031

11. “ 1,057 different mobile devices accessed
The Guardian beta site yesterday (including
one person on a zune!)” *
* Source: The Guardian

12. In 2009 1% of global internet traffic came
from mobiles. In 2010 the number was 4%.
By the end of 2012 it had risen to13%.*
* 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

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

14. 2. THE MOST
COMMON
CHALLENGES
WITH
RESPONSIVE
DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/

15. WHERE TO START?
DEFINE YOUR MOBILE STRATEGY,
START SKETCHING &
www.flickr.com/photos/pinkpurse/5355919491/ WORKING ACROSS DISCIPLINES

16. HOW MANY
VERSIONS SHOULD
WE WIREFRAME FOR?
DEPENDS ON YOUR
PROJECT, BUDGET
& TEAM AS WELL AS
WHO IS BUILDING IT
www.flickr.com/photos/jorgeq82/4732700819

17. WHAT ABOUT
VISUAL DESIGN?
LESS STATIC DESIGNS, MORE
MODULARITY & PROTOTYPING
www.flickr.com/photos/donsolo/2136923757/

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

19. 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
www.flickr.com/photos/adactio/6153481666

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

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

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

23. HOW MANY DEVICES
SHOULD I TEST ON?
AS MANY AS POSSIBLE BUT PRIORITISE
BASED ON YOUR AUDIENCE
www.flickr.com/photos/nomadic_lass/5598218199

24. HOW DO
I HANDLE
IMAGES?
IMAGES & ICONS
SHOULD BE AS FLEXIBLE
AS POSSIBLE
www.flickr.com/photos/jorgeq82/4732700819

25. 3. CROSS DEVICE
CONTENT
STRATEGY &
HIERARCHY
http://www.flickr.com/photos/young_einstein/74097753/

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

27. KNOW YOUR CONTENT
PRIORITISE WHAT & HOW
MUCH BUT KEEP THE CORE
CONTENT THE SAME
www.flickr.com/photos/sepblog/3649959481

28. CONSIDER THE
MOBILE CONTEXT
THE USE CASE MAY BE
THE SAME BUT
USING A MOBILE
DEVICE IS DIFFERENT
www.flickr.com/photos/stephangeyer/

29. DEFINE
YOUR GRID
& BREAK
POINTS
• USE AS THE BASIS OF
YOUR PAGE LAYOUTS
• CHECKPOINT FOR
MODULE SIZES &
VARIANTS
• FIXED OR FLUID
COLUMNS
• DEFINES HOW
CONTENT WILL
BEHAVE ACROSS
DEVICES
http://foundation.zurb.com/docs/layout.php

30. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
WORK THROUGH
YOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION

31. MOBILE VS. DESKTOP FIRST
• START LARGE OR SMALL
WHAT EVER WORKS BEST FOR YOU
• ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES

32. DON’T JUST WORK
WITH COLUMNS
THINK OF THE NARRATIVE
OF THE PAGE
www.flickr.com/photos/garrettc/6260768486/

33. IDENTIFY YOUR
MAIN MODULE TYPES
DEFINE HOW THEY SHOULD BEHAVE
ACROSS DEVICES & ORIENTATIONS
www.flickr.com/photos/boltofblue/4418442567

34. “ 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/
Screenshot: www.crayola.co.uk/

35. LIKE PLAYING REAL LIFE TETRIS
PRE-DEFINED POCKETS FOR THE CONTENT TO SLOT INTO
www.flickr.com/photos/fritzon/195008860

36. 4. A LOOK AT
RESPONSIVE
NAVIGATION
www.flickr.com/photos/taytom/5277657429

37. EXCELLENT READ
‘RESPONSIVE NAVIGATION PATTERNS’
by Brad Frost.*
Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns

38. “ 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/tim_norris/2789759648

39. CONSIDER YOUR PROJECT
ASSESSING THE DEPTH NEEDED AS WELL AS & PROS
& CONS OF DIFFERENT NAVIGATION APPROACHES
www.flickr.com/photos/inpivic/5205918163/

40. DEFINE YOUR DIFFERENT
TYPES OF NAVIGATION
PRIMARY, SECONDARY, TERTIARY AS WELL AS
FOOTER & CROSS
LINKING
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design

41. BE CONSISTENT
USE THE SAME APPROACH THROUGHOUT
& HAVE CLEAR, SAYING VISUAL CUES
Screenshot: http://cognition.happycog.com/

42. BE CONSISTENT
USE THE SAME APPROACH THROUGHOUT
& HAVE CLEAR, SAYING VISUAL CUES
Screenshot: http://cognition.happycog.com/

43. CONSIDER NAVIGATION
ACROSS PRODUCTS
WHERE APPS & MOBILE OPTIMISED WEBSITES
ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport

44. CONSIDER NAVIGATION
ACROSS PRODUCTS
WHERE APPS & MOBILE OPTIMISED WEBSITES
ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport

45. CONSIDER NAVIGATION
ACROSS PRODUCTS
WHERE APPS & MOBILE OPTIMISED WEBSITES
ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport

46. 5. A LOOK AT...
APP STRUCTURES
& NAVIGATION
www.flickr.com/photos/46355638@N00/4414640784

47. EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITH THEIR OWN UI
GUIDELINES THAT
USERS ARE USED TO
www.flickr.com/photos/gadl/3570118243

48. iPhone 12:15 PM More
BASIC iOS
Customise
APP NAME
IMG Item
NAVIGATION
IMG Item
IMG Item
IMG Item
CONSISTENT ACROSS IMG Item
VERSIONS Content area
IMG Item
IMG Item
NAVIGATION BAR IMG Item
Enables navigation through the app IMG
hierarchy. Holds the back button, Home Item Item Item More
controls for managing screen content &
the title of the screen. Home Item Item Item More
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.
Source: http://developer.android.com/design/patterns/new-4-0.html

49. 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)
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.
Source: http://developer.android.com/design/patterns/new-4-0.html

50. IDENTIFY YOUR
MAIN SECTIONS
EACH SHOULD HAVE A
CLEAR FOCUS & PURPOSE
www.flickr.com/photos/inpivic/5205918163/

51. SKETCH
YOUR SCREEN FLOWS,
NAVIGATION & CONTENT
www.flickr.com/photos/saucef/7184615025

52. AVOID USING THE HOME
SCREEN AS A STEPPING POINT
CONSIDER THE USE CASE & ENSURE YOU DELIVER VALUE
FROM THE FIRST VIEW
www.flickr.com/photos/kruger_otto/5581886586

53. RESEARCH COMMON
APPROACHES
FOR INSPIRATION &
BEST PRACTICE
www.uxarchive.com/

54. RESEARCH COMMON
APPROACHES
FOR INSPIRATION &
BEST PRACTICE
www.uxarchive.com/tasks/sign_up/

55. LOOK AT
WHAT
OTHERS DO
BE CREATIVE
http://pttrns.com/

56. 6. HOW TO...
TEST APPS &
RESPONSIVE SITES
http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/

57. TESTING
APPS
STRUCTURE,
NAVIGATION,
INTERACTIONS
& TRANSITIONS
www.flickr.com/photos/cristiano_betta/2909483129

58. TESTING
RESPONSIVE SITES
DO THIS AS EARLY AS POSSIBLE
www.flickr.com/photos/adactio/5818096043

59. IN THE BROWSER
BY RESIZING THE BROWSER WINDOW &
CHECKING THE DISPLAY OF CONTENT
http://thenextweb.com/

60. IN THE BROWSER
BY DESIGNING IN THE BROWSER & CREATING
A WORKING HTML PROTOTYPE
www.flickr.com/photos/jorgeq82/4732700819

61. USING HANDY TOOLS
HELP YOU STYLE & TEST YOUR TYPOGRAPHY
http://responsive.is/typecast.com

62. USING EMULATORS
ALLOW YOU TO VIEW YOUR SITE
ACROSS DEVICES & ORIENTATIONS
http://screenqueri.es/
http://quirktools.com/screenfly/
www.responsinator.com/
http://mattkersley.com/responsive/

63. ON ACTUAL DEVICES
EXPENSIVE BUT THERE ARE WAYS AROUND IT
www.flickr.com/photos/arne/5835855777/in/photostream/

64. BUYING
BUNDLES
& SHARING
HELPING EACH OTHER
www.flickr.com/photos/adactio/6800969243/in/photostream/

65. WITH USERS
DEFINE YOUR AUDIENCE, TEST CASES,
OBJECTIVES & CONSIDER
EXPECTATIONS & LIMITATIONS
www.flickr.com/photos/jorgeq82/4732700819

66. 7. TIME TO...
PRACTICE
www.flickr.com/photos/icedsoul/3041770422

67. RESPONSIVE
NAVIGATION
THE 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
EXERCISE ONE independent store and want to inform users
about their store.
Define how the navigation will work for
desktop and mobile.
10 MINUTES
www.flickr.com/photos/icedsoul/3041770422

68. COMPLEX
RESPONSIVE
NAVIGATION
THE TASK:
After the successful table store project
you've been asked to develop a responsive
EXERCISE TWO 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.
www.flickr.com/photos/icedsoul/3041770422 15 MINUTES

69. APP STRUCTURE &
NAVIGATION
THE TASK:
The same furniture store wants you to
develop an app.
Based on the navigation you've defined for
the responsive site, work through the
EXERCISE THREE screenflow for your app and how the user
would navigate to and back from different
sections.
15 MINUTES
www.flickr.com/photos/icedsoul/3041770422

70. 8. TO
SUMMARISE
http://www.flickr.com/photos/martinteschner/4569495912/

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

72. COMMON
PROBLEMS
NUMBER OF WIREFRAMES
DEPENDS ON YOUR 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
FOR THE MOST COMMON ONES
WHAT TO TEST ON
AS MANY AS POSSIBLE BUT PRIORITISE
BASED ON YOUR AUDIENCE
IMAGES & ICONS
www.flickr.com/photos/thecaucas/2597813380 AS FLEXIBLE AS POSSIBLE

73. CONTENT
STRATEGY &
HIERARCHY
KNOW YOUR CONTENT
PRIORITISE WHAT & HOW MUCH BUT KEEP
THE CORE CONTENT THE SAME
CONSIDER THE MOBILE
CONTEXT
THE USE CASE MAY BE THE SAME BUT
USING A MOBILE DEVICE IS DIFFERENT
DEFINE CONTENT STACKING
THE GRID & BREAKPOINTS IS YOUR GUIDE
BUT DON'T JUST WORK WITH THE
COLUMNS. CONSIDER EACH MODULE &
www.flickr.com/photos/thecaucas/2597813380 THE STORY OF THE PAGE

74. RESPONSIVE
NAVIGATION
RESEARCH DIFFERENT
APPROACHES
KNOW YOUR OPTIONS & THE PROS &
CONS FOR EACH
BASE IT ON YOUR PROJECT
ASSESS HOW MANY LEVELS THAT ARE
NEEDED & REVIEW APPROACH ACROSS
DEVICES BUT ALSO WHAT GOES IN
WORK WITH DIFFERENT TYPES
IT'S NOT JUST ABOUT THE MAIN
NAVIGATION BUT ALSO SUB-NAVIGATION,
SEARCH, IN PAGE LINKS & THE FOOTER
BE CONSISTENT
USE SAYING VISUAL CUES & CONSIDER
www.flickr.com/photos/thecaucas/2597813380
NAVIGATION ACROSS ALL PRODUCTS

75. APP
STRUCTURES &
NAVIGATION
BASE ON PROJECT & PLATFORM
IDENTIFY YOUR MAIN SECTIONS & KEEP
DIFFERENCES IN STRUCTURE & UI
GUIDELINES BETWEEN PLATFORMS IN MIND
SKETCH BEFORE WIREFRAMING
WORK THROUGH YOUR SCREENFLOW,
NAVIGATION & CONTENT ACROSS SCREENS
VALUE FROM FIRST VIEW
AVOID USING THE HOME SCREEN AS A
STEPPING POINT
BEST PRACTICE & INSPIRATION
www.flickr.com/photos/thecaucas/2597813380 FOR TYPICAL TASK FLOWS & SCREENS

76. TESTING APPS &
RESPONSIVE
SITES
TESTING APPS
BOTH STRUCTURE, NAVIGATION,
INTERACTIONS & TRANSITIONS
TESTING RESPONSIVE SITES
DO THIS AS EARLY AS POSSIBLE TO ENSURE IT
ACTUALLY WORKS IN THE BROWSER
TESTING IN THE BROWSER
BY RESIZING THE BROWSER WINDOW OR
DESIGNING & CREATING PROTOTYPES
USING EMULATORS
ALLOWS YOU TO VIEW HOW YOUR SITE IS
www.flickr.com/photos/thecaucas/2597813380 DISPLAYED ACROSS DEVICES & ORIENTATIONS

77. TESTING APPS &
RESPONSIVE
SITES
ON ACTUAL DEVICES
TEST ON AS MANY AS POSSIBLE. THE BEST
REPRESENTATION BUT CAN BE EXPENSIVE.
INVEST IN KEY DEVICES & POOL TOGETHER
TO SHARE DEVICES
TESTING WITH USERS
TEST EARLY & FREQUENTLY. DEFINE YOUR
AUDIENCE, TEST CASES, OBJECTIVES &
IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC
EXPECTATIONS & LIMITATIONS
www.flickr.com/photos/thecaucas/2597813380

78. 9. FOR THE ROAD
SOME TAKE
AWAYS
www.flickr.com/photos/st3f4n/4387291247

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

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

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

82. TESTING YOUR
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

83. 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://en.wikipedia.org/wiki/
List_of_displays_by_pixel_density
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

84. Thank you!
QUESTIONS?
annadahlstrom
annadahlstrom
anna.dahlstrom@gmail.com
www.annadahlstrom.com
www.flickr.com/photos/dahlstroms/4411448782/