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

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

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

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

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

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

6. A LARGE PROPORTION OF
USAGE HAPPENS WHEN WE
HAVETIMETO KILL
2
www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164

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

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

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

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

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

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

13. WHERETO START?
DEFINEYOUR MOBILE STRATEGY,
START SKETCHING &
WORKING ACROSS DISCIPLINESwww.flickr.com/photos/pinkpurse/5355919491/

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

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

16. WHAT SCREEN SIZES &
RESOLUTIONS SHOULD I
DESIGN FOR?
USE ANALYTICS FOR GUIDANCE &
DESIGN FORTHE MOST
COMMON ONES
Source: www.flickr.com/photos/dpstyles/3448453466

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

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

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

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

21. HOW MANY DEVICES
SHOULD ITEST ON?
AS MANY AS POSSIBLE BUT PRIORITISE
BASED ONYOUR AUDIENCE
www.flickr.com/photos/nomadic_lass/5598218199

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

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

24. “ 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/

25. www.flickr.com/photos/sepblog/3649959481
KNOWYOUR CONTENT
PRIORITISE WHAT & HOW
MUCH BUT KEEPTHE CORE
CONTENTTHE SAME

26. www.flickr.com/photos/boltofblue/4418442567
IDENTIFYYOUR
MAIN MODULETYPES
DEFINE HOWTHEY SHOULD BEHAVE
ACROSS DEVICES & ORIENTATIONS

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

28. CONTENT GUIDESTHE GRID
THE MAINTEMPLATES & MODULES
http://foundation.zurb.com/docs/layout.php

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

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

31. DON’T JUST WORK
WITH COLUMNS
THINK OFTHE NARRATIVE
OFTHE PAGE
www.flickr.com/photos/garrettc/6260768486/

32. WORKTHROUGH
YOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

33. MOBILEVS. DESKTOP FIRST
•START LARGE OR SMALL
WHAT EVER WORKS BEST FORYOU
•ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES

34. KNOW WHAT
YOU DESIGN FOR
IT MAKES IT EASIERTO FIT
ALLTHE PIECESTOGETHER
www.flickr.com/photos/songzhen/4893025042

35. IDENTIFY WHAT
YOU CAN RE-USE
TO MEET OTHER REQUIREMENTS
ACROSS SCREEN SIZES AND PAGES/VIEWS
www.flickr.com/photos/songzhen/4893025042

36. www.flickr.com/photos/katherinekenny
ADAPTTOTHE
MOBILE CONTEXT
THE ORDER AND PRIORITY OF
CONTENT AS WELL AS HO W MUCH
YOU SHOW AND HOW

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

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

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

40. 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!)

41. 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!)

42. 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!)

43. 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!)

44. 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!)

45. 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!)

46. 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!)

47. 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!)

48. 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!)

49. 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!)

50. 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!)

51. www.flickr.com/photos/inpivic/5205918163/
CONSIDERYOUR PROJECT
ASSESSTHE DEPTH NEEDED AS WELL AS & PROS
& CONS OF DIFFERENT NAVIGATION APPROACHES

52. DEFINETYPES OF NAVIGATION
PRIMARY, SECONDARY,TERTIARY AS WELL AS
FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design

53. Screenshot: http://cognition.happycog.com/
BE CONSISTENT
USETHE SAME APPROACHTHROUGHOUT
& HAVE CLEAR, SAYINGVISUAL CUES

54. Screenshot: http://cognition.happycog.com/
BE CONSISTENT
USETHE SAME APPROACHTHROUGHOUT
& HAVE CLEAR, SAYINGVISUAL CUES

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

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

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

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

59. www.flickr.com/photos/gadl/3570118243
EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITHTHEIR OWN UI
GUIDELINESTHAT
USERS ARE USEDTO

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

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

62. www.flickr.com/photos/inpivic/5205918163/
IDENTIFYYOUR
MAIN SECTIONS
EACH SHOULD HAVE A
CLEAR FOCUS & PURPOSE

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

64. www.flickr.com/photos/kruger_otto/5581886586
AVOID USINGTHE HOME
SCREEN AS A STEPPING POINT
CONSIDERTHE USE CASE & ENSUREYOU DELIVERVALUE
FROMTHE FIRSTVIEW

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

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

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

68. http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
6. HOWTO...
TEST APPS &
RESPONSIVE SITES

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

70. www.flickr.com/photos/adactio/5818096043
TESTING
RESPONSIVE SITES
DOTHIS AS EARLY AS POSSIBLE

71. INTHE BROWSER
BY RESIZINGTHE BROWSER WINDOW &
CHECKINGTHE DISPLAY OF CONTENT
http://thenextweb.com/

72. INTHE BROWSER
BY DESIGNING INTHE BROWSER & CREATING
A WORKING HTML PROTOTYPE
www.flickr.com/photos/jorgeq82/4732700819

73. USING HANDYTOOLS
HELPYOU STYLE &TESTYOURTYPOGRAPHY
http://responsive.is/typecast.com

74. USING EMULATORS
ALLOWYOUTOVIEWYOUR SITE
ACROSS DEVICES & ORIENTATIONS
www.responsinator.com/
http://quirktools.com/screenfly/
http://screenqueri.es/
http://mattkersley.com/responsive/

75. ON ACTUAL DEVICES
EXPENSIVE BUTTHERE ARE WAYS AROUND IT
www.flickr.com/photos/arne/5835855777/in/photostream/

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

77. WITH USERS
DEFINEYOUR AUDIENCE,TEST CASES,
OBJECTIVES & CONSIDER
EXPECTATIONS & LIMITATIONS
www.flickr.com/photos/jorgeq82/4732700819

78. www.flickr.com/photos/icedsoul/3041770422
7.TIMETO...
PRACTICE

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

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

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

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

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

84. 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!)

85. DEFINETYPES OF NAVIGATION
PRIMARY, SECONDARY,TERTIARY AS WELL AS
FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design

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

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

88. 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!)

89. 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!)

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

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

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

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

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

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

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

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

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

99. www.flickr.com/photos/st3f4n/4387291247
9. FORTHE ROAD
SOMETAKE
AWAYS

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

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

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

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

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

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

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

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

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

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

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