Slides from the third of my 3 part series classes at General Assembly in London on the 7th of August 2013. https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172 ABSTRACT This 90-minute session will focus on designing for touch across devices - including hybrids - as well as the challenges and opportunities of responsive content. We will cover how to find a balance between controlling layouts and making your products as responsive as possible. By the end of the session you'll have an understanding of: - the different ways people physically hold and interact with their devices - how hybrid devices impact design decisions - why the mobile context matters and what you need to consider - how to adapt content to device layout and orientations - using content as the basis for breakpoints rather than devices - and a framework to use as the starting point for approaching modular and responsive design from an information architect (IA) and user experience (UX) point of view

1. Anna Dahlström
founder byflock
www.annadahlstrom.com
annadahlstrom
London 7th of August 2013 | Part 3 - Advanced
DESIGNING FOR MULTIPLE DEVICES
PART
3 of 3

2. I’m Anna
IA & UX DESIGNER | FREELANCE SINCE 2011
SWEDISH | IN LONDON SINCE 2006
I love ‘fika’
www.flickr.com/photos/nettsu/4191824531

3. THIS IS PART 3
INTHE PREVIOUSTWO CLASSES WE’VE COVERED...

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

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

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

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

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

9. www.flickr.com/photos/nomadic_lass/5598218199www.flickr.com/photos/adactio/5818096043
YOUR MOBILE STRATEGY DEPENDS
ONYOUR PROJECT, BUDGET &
CURRENTTECHNICAL PLATFORM
6

10. www.flickr.com/photos/lastquest/1472794031
” 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. www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/donsolo/2136923757/
LESS STATICVIEWS & MORE
MODULARITY & PROTOTYPING.
NUMBER OF WIREFRAMES DEPENDS
7

12. www.flickr.com/photos/nomadic_lass/5598218199www.flickr.com/photos/pinkpurse/5355919491/
SKETCH,WORK COLLABORATIVELY
TEST FREQUENTLY & REPEATEDLY
8

13. Source: www.flickr.com/photos/dpstyles/3448453466
USE ANALYTICS & RESEARCH FOR
YOUR PRODUCT/ PROJECT AS A
GUIDANCE FOR KEY SCREEN SIZES
9

14. www.slideshare.net/yiibu/pragmatic-responsive-design
USING MAJOR & MINOR BREAK
POINTSTO ADAPTTO SCREEN
SIZES, LAYOUT & CONTENT NEEDS
10

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

16. www.flickr.com/photos/lastquest/1472794031
BUT DIDN’T WE SAY ...
” 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

17. www.flickr.com/photos/david_a_lea/3247217194
YES WE DID
AND WE’RE ALREADY FACING
TWO PARTICULAR CHALLENGES

18. www.flickr.com/photos/lokan/8843464852
1.TOUCH IS NO LONGER LIMITED
TO SMARTPHONES &TABLETS
HELLO HYBRID DESKTOP/ LAPTOPS

19. www.flickr.com/photos/michale/210536054
2. BREAKPOINTS BASED ON
POPULAR DEVICES PUSHES
US INTO A CORNER
LESS FUTURE PROOF & MORETO MAINTAIN

20. www.flickr.com/photos/suttonhoo22/2070700035
AGENDA
1. DESIGNING FORTOUCH
2. UNDERSTANDINGTHE
MOBILE CONTEXT
3. ADAPTING CONTENTTO
DEVICES & ORIENTATION
4. USING CONTENT ASTHE BASIS
FOR BREAKPOINTS
5. EXAMPLE
FRAMEWORK
6. EXERCISES
7. SUMMARY
8. Q & A

21. 1.A LOOK AT
DESIGNING FOR
TOUCH
http://www.flickr.com/photos/eyesore9/3206408088/

22. www.flickr.com/photos/66327170@N07/7296381856
‘New rule: Every desktop design has to go
finger-friendly’ *
* Source: http://globalmoxie.com/blog/desktop-touch-design.shtml

23. www.flickr.com/photos/patdavid/9391602153
” Touch has landed on the desktop “
- JOSH CLARK

24. Touch screen laptop sales have jumped 52%
in the last quarter. 5 years from now you will
you not be able to buy a Windows computer
without a touch screen*
* Source: http://www.lukew.com/ff/entry.asp?1750
Screenshot from www.currys.co.uk

25. flickr.com/photos/soyproject/6066959891/www.flickr.com/photos/jorgeq82/4732700819
CONSIDERTOUCH
ACROSS DEVICES
& SCREEN SIZES
NOT JUST MOBILE &TABLETS

26. THE WAY WE USE
TOUCH SCREENS DIFFERS
BASED ON DEVICE BUT ALSO
ACROSSTHE SAME DEVICES
www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

27. 49% OF USERS HOLDTHEIR
PHONE IN ONE HAND
BUT HOWTHEY HOLD IT DIFFERS
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
ONE HAND (R: 66% L: 33%)
CRADLING (L: 79% R: 21%)
TWO HANDS
72% 28%
90% 10%

28. HOW WE HOLD OUR
DEVICES CHANGES
IT’S NOT A STATIC STATE
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

29. www.flickr.com/photos/75001512@N00/162748768
” Designing for touch means
designing for fingers, yes, but to
be more specific, you’re really
designing for thumbs. “
- JOSH CLARK

30. www.flickr.com/photos/4ever30something/451088722
IMPACTS CONTROLS,
PLACEMENT &
INTERACTION
CONSIDER IMPRECISE (e.g. fingers)VS.
PRECISE (e.g. mouse) INPUT MEANS

31. CURRENT APPROACH
TO NAVIGATION
BASED ONTHE MOUSE AS INPUT
Source: Luke W - www.lukew.com/ff/entry.asp?1649

32. HOW WETENDTO
INTERACT WITH HYBRIDS
REST ARMS &
GRAB BOTTOM
CORNERS
www.flickr.com/photos/intelfreepress/6837427202

33. CONSIDER REACH &
OBSCURING CONTENT
AND ADJUST NAVIGATION ACCORDINGLY
Source: Luke W - www.lukew.com/ff/entry.asp?1649
From...
...towards

34. Screenshot from http://polarb.com/polls/tags/mobiledesign
”Looking at the Polar interface on a laptop
can be a bit disconcerting because we’ve
essentially left the middle of the page “blank”.“
- LUKE W

35. 2. UNDERSTANDING
THE MOBILE
CONTEXT
http://www.flickr.com/photos/eyesore9/3206408088/

36. www.flickr.com/photos/icedsoul/2486885051/
MOBILE CONTEXT
≠ MOBILE USE CASE
THE LATTER IS ABOUTTHETASK,
THE FORMER ABOUTTHETOTAL SUM
OFTHE USER’S MOBILE EXPERIENCE

37. www.flickr.com/photos/edduddiee/4307943164
REMEMBER...
THE SAMETASKS
ARE CARRIED OUT
ON SMARTPHONES
AS ON DESKTOPS
AS DEVICES & EXPERIENCE BECOME
MORE OPTIMISED USAGE &TASK
EXECUTION IS INCREASING

38. MOBILE CONTEXT DIFFERS
BASED ON SITUATION, ATTITUDES & PREFERENCES.
www.flickr.com/photos/hoyvinmayvin/5873697252

39. MOBILE CONTEXT DIFFERS
THE SAME CONTEX DOESN’T EQUALTHE SAME SITUATION
http://www.flickr.com/photos/hoyvinmayvin/5873139941/

40. www.flickr.com/photos/icedsoul/2486885051/
OTHER ASPECTS
TO CONSIDER
FORTHE MOBILE CONTEXT ARE...

41. www.flickr.com/photos/nadiya95/7217734288/
ATTENTION SPAN
DATA SNACKINGVS. FOCUSED USAGE

42. www.flickr.com/photos/arjencito/6531640463/
SIGNAL COVERAGE
SPEED & RELIABILITY OFTHE CONNECTION

43. LOCATION
MOVING ABOUTVS. IN ONE LOCATION
www.flickr.com/photos/garry61/3191250682

44. www.flickr.com/photos/adactio/6153481666
THE SCREEN
SMALL, MEDIUM, LARGE &
OF COURSETOUCH OR NOT

45. POSTURE & GRIP
HOW WE SIT/ STAND AS WELL AS
INTERACT WITHTHE DEVICE
www.flickr.com/photos/helga/3545310740

46. 4.ADAPTING CONTENT
TO DEVICES &
ORIENTATION
http://www.flickr.com/photos/eyesore9/3206408088/

47. www.flickr.com/photos/chicitoloco/8468592748/in/photostream/
POSTURE, GRIP &
ORIENTATIONVARIES
BASED ONTHE CONTEXT &THE USE CASE
www.flickr.com/photos/edduddiee/4307943164

48. SITUATIONAL CONTEXT
IMPACTS FIRMVS. LOOSE GRIP
PARTICULARLY IMPORTANT IFYOU HAVE
A SPECIFIC “ONTHE MOVE” USE CASE
www.flickr.com/photos/kalexanderson/6716348037

49. CERTAIN ORIENTATIONS ARE
BETTER FOR CERTAINTASKS
E.G. LANDSCAPE WATCHINGVS. PORTRAIT READING
Reading Watching Typing

50. GOOD GUIDE FOR HOW
TO OPTIMISE DISPLAYTO
ORIENTATION
SUPPORT USERTASKS &
GOALS AS WELL AS
MAKETHE MOST
OFTHE SCREEN
REAL ESTATE
www.flickr.com/photos/frank3/5865336902

51. THREE MAIN APPROACHES
FOR ADAPTINGTO ORIENTATION
RE-POSITION REVEAL/ HIDESCALE

52. 5. USING
CONTENT AS
THE BASIS FOR
BREAKPOINTS
http://www.flickr.com/photos/eyesore9/3206408088/

53. THE WEB IS AFTER ALL
ABOUT CONTENT
NOT WHAT DEVICE WE ARE USING
XXXXXXXX

54. www.flickr.com/photos/mirafoto/494444094
” Get your content to go anywhere,
because it’s going to go everywhere. “
- BRAD FROST

55. AIMTO MAKE IT
MORE FUTURE “PROOF”
MOVE AWAY FROM SPECIFIC DEVICES
www.flickr.com/photos/byte/8282578241

56. USE NATURAL BREAKPOINTS
BASED ON CONTENT LAYOUT
RATHERTHAN FOCUSING ON DEVICES
www.flickr.com/photos/sharynmorrow/127184319/

57. www.flickr.com/photos/visualpunch/7351572896/
LOOK ATTHE DETAILS & BEST
PRACTICE LAYOUT PRINCIPLES
WHAT’S SUITABLE FORTHE CONTENT

58. NOT WITHOUT
CHALLENGES
BUT, CHALLENGES ARE
MEANTTO BE OVERCOME
www.flickr.com/photos/jdhancock/3521006248

59. www.flickr.com/photos/nikio/3899114449/
” By default the web has no optimal width,
optimal height, optimal font-sizes or optimal
anything really. “
- EDWARD O'RIORDAN

60. www.flickr.com/photos/soundslogical/4255801733/
” The web has always been fluid; we’ve just
wasted a good number of years forcing fixed
pixels onto an inherently responsive
framework. “
- ELLIOT J STOCKS

61. www.flickr.com/photos/donsolo/2136923757/
BRINGS US BACK
TO MODULARITY
LESS FIXEDVIEWS & MORE FOCUS ON
THE BUILDING BLOCKSTHAT MAKE UP
THEVIEWS

62. BREAKPOINTS &TWEAKPOINTS
FOCUS ON CONTENT LAYOUT & EMS INSTEAD OF PX
www.slideshare.net/yiibu/pragmatic-responsive-design

63. THE SAME WITH COLUMNS
OPT FOR FLUID AS MUCH POSSIBLE
http://foundation.zurb.com/docs/layout.php

64. www.flickr.com/photos/boltofblue/4418442567
KNOWYOUR BUILDING
BLOCKS & WHENTO USETHEM
HOWTO RE-USE & ADAPTTO
CONTENTVARIATION & SCREEN SIZE

65. 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
AND DEFINEVARIATIONS &THE ELEMENTSTHEY ARE MADE UP OF

66. www.flickr.com/photos/florianric/7263382550/
JUST ANOTHER WAY
OF APPROACHINGTHINGS

67. BASING BREAKPOINTS
ON SCREEN SIZES
ISN’T WRONG
BUT IT’S ATEMPORARY WORK AROUND
www.flickr.com/photos/gozalewis/3249104929

68. 6.A LOOK AT
EXAMPLE
FRAMEWORK
http://www.flickr.com/photos/eyesore9/3206408088/

69. www.flickr.com/photos/byte/8282578241
ANY SCREEN SHOULD BE
YOUR STARTING POINT*
* OF COURSE IT DEPENDS ONYOUR PROJECT

70. THERE IS NO RIGHT WAY
THIS IS JUST AN EXAMPLE
www.flickr.com/photos/jtravism/2417205289

71. STEPS FOR APPROACHING
RESPONSIVE & MODULARITY
1. Define target audiences & key user journeys
2. Identify goals & content needs (user & business)
3. Identify key pages
4. Identify the content & functional requirements for each key page
5. Across all pages identify common content module types, e.g. featured product
6. Re-visit, list & prioritise the content for each page
7. From this Identify the variations that are needed for each content module type
8. Lay out the content modules across key pages (mobile or desktop first)
9. Work through layout and content stacking strategy across devices
10. Define templates for the content module types (variation & across devices)
11. Iteratively work through your pages & adjust modules & variations as needed
www.flickr.com/photos/poetatum/3335900523

72. www.flickr.com/photos/jdhancock/4354438814
DON’T FORGETTO
TEST & ITERATE
SKETCH AS MUCH AS POSSIBLE FIRST
AND WORK COLLABORATIVELY

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

74. www.flickr.com/photos/icedsoul/3041770422
DESIGNING FOR
TOUCH
THETASK:
A big news site have approached you to
advice on what they need to consider for
making their site more touch friendly across
devices, including touch laptops/ desktops.
What main changes or considerations do you
recommend for the them to make their
home page more touch friendly?
10 MINUTES
EXERCISE ONE

75. THE WAY WE USE
TOUCH SCREENS DIFFERS
BASED ON DEVICE BUT ALSO
ACROSSTHE SAME DEVICES
www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

76. CONSIDER REACH &
OBSCURING CONTENT
AND ADJUST NAVIGATION ACCORDINGLY
Source: Luke W - www.lukew.com/ff/entry.asp?1649
From...
...towards

77. www.flickr.com/photos/icedsoul/3041770422
DESIGNING FOR
TOUCH
THETASK:
A big news site have approached you to
advice on what they need to consider for
making their site more touch friendly across
devices, including touch laptops/ desktops.
What main changes or considerations do you
recommend for the them to make their
home page more touch friendly?
10 MINUTES
EXERCISE ONE

78. www.flickr.com/photos/icedsoul/3041770422
CONTENT BASED
BREAKPOINTS
THETASK:
The same news site have asked you to look
at doing their new responsive site but base
the breakpoints on content rather than
devices.They’ve particularly asked you to
look at the following pages:
• Home page
• News story without video
• News story with video
•Video with feed (social media & live
updates)
How do you suggest laying out the content
and break it out so that it is modular?
10 MINUTES
EXERCISE
TWO

79. STEPS FOR APPROACHING
RESPONSIVE & MODULARITY
1. Define target audiences & key user journeys
2. Identify goals & content needs (user & business)
3. Identify key pages
4. Identify the content & functional requirements for each key page
5. Across all pages identify common content module types, e.g. featured product
6. Re-visit, list & prioritise the content for each page
7. From this Identify the variations that are needed for each content module type
8. Lay out the content modules across key pages (mobile or desktop first)
9. Work through layout and content stacking strategy across devices
10. Define templates for the content module types (variation & across devices)
11. Iteratively work through your pages & adjust modules & variations as needed
www.flickr.com/photos/poetatum/3335900523

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

81. www.flickr.com/photos/icedsoul/3041770422
CONTENT BASED
BREAKPOINTS
THETASK:
The same news site have asked you to look
at doing their new responsive site but base
the breakpoints on content rather than
devices.They’ve particularly asked you to
look at the following pages:
• Home page
• News story without video
• News story with video
•Video with feed (social media & live
updates)
How do you suggest laying out the content
and break it out so that it is modular?
10 MINUTES
EXERCISE
TWO

82. www.flickr.com/photos/icedsoul/3041770422
ADAPTINGTO
DEVICE
ORIENTATION
THETASK:
For the same news site, define how the
content could change for the following pages
based on device orientation:
• News story with video
•Video with feed (social media & live updates)
10 MINUTES
EXERCISE
THREE

83. CERTAIN ORIENTATIONS ARE
BETTER FOR CERTAINTASKS
E.G. LANDSCAPE WATCHINGVS. PORTRAIT READING
Reading Watching Typing

84. THREE MAIN APPROACHES
FOR ADAPTINGTO ORIENTATION
RE-POSITION REVEAL/ HIDESCALE

85. www.flickr.com/photos/icedsoul/3041770422
ADAPTINGTO
DEVICE
ORIENTATION
THETASK:
For the same news site, define how the
content could change for the following pages
based on device orientation:
• News story with video
•Video with feed (social media & live updates)
10 MINUTES
EXERCISE
THREE

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

87. www.flickr.com/photos/thecaucas/2597813380
SUMMARY
FACING NEW CHALLENGES WITH
TOUCH HAVING MOVED BEYOND
SMARTPHONES & TABLETS
HOW WE HOLD OUR DEVICES DIFFER
AND IMPACTS DESIGN DECISIONS BUT
WE NEED TO ACKNOWLEDGE THAT
OUR GRIP CHANGES
ORIENTATION & TASK CAN BE A
GOOD GUIDE FOR CONTENT LAYOUT
CONTENT IS WHAT WE SHOULD
FOCUS ON, BOTH FOR BUILDING
VIEWS & DEFINING BREAK POINTS
RE-USABLE MODULES & DESIGNING
FOR ANY SCREEN MAKES US MORE
FUTURE “PROOF”

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

89. www.flickr.com/photos/st3f4n/4387291247
DEVICE
INTERACTION
www.uxmatters.com/mt/archives/
2013/02/how-do-users-really-hold-
mobile-devices.php
http://globalmoxie.com/blog/desktop-
touch-design.shtml
www.uxbooth.com/articles/designing-
for-mobile-part-2-interaction-design/?
goback=
%2Egde_79272_member_226720034

90. www.flickr.com/photos/st3f4n/4387291247
MULTI DEVICES &
TOUCH INPUT
www.lukew.com/ff/entry.asp?1649
http://www.lukew.com/ff/entry.asp?
1721
http://www.uxmatters.com/mt/
archives/2013/03/common-
misconceptions-about-touch.php
Examples:
http://polarb.com/polls/tags/
mobiledesign

91. www.flickr.com/photos/st3f4n/4387291247
MORE RESPONSIVE
DESIGN READING
http://www.netmagazine.com/opinions/
designing-browser
http://www.businessinsider.com/html5-
vs-apps-why-the-debate-matters-and-
who-will-win-2012-11
http://ia.net/blog/responsive-
typography-the-basics/
http://daverupert.com/2013/04/
responsive-deliverables
http://alistapart.com/article/
future-ready-content

92. www.flickr.com/photos/st3f4n/4387291247
BREAKPOINTS
http://www.lukew.com/ff/entry.asp?1714
http://elliotjaystocks.com/blog/
responsive-web-design-the-war-has-not-
yet-been-won
http://stephanierieger.com/on-
designing-content-out-a-response-to-
zeldman-and-others
http://www.markboulton.co.uk/
journal/theinbetween
http://adactio.com/journal/6044/
http://seesparkbox.com/foundry/
there_is_no_breakpoint

93. www.flickr.com/photos/st3f4n/4387291247
AND MORE ON
BREAKPOINTS
http://www.smashingmagazine.com/
2013/03/01/logical-breakpoints-
responsive-design/
www.slideshare.net/yiibu/pragmatic-
responsive-design
http://alistapart.com/article/designing-
for-breakpoints
http://dmolsen.com/2013/03/05/
media-query-less-design-content-
based-breakpoints-tweakpoints/

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