Slides from my 45min crash course workshops that I ran with General Assembly at the Dublin Web Summit 2013

1. D!"#$%#%$ for multiple devices
DUBLIN WEB SUMMIT & GENERAL ASSEMBLY
by Anna Dahlström | @annadahlstrom

2. &! w'r() we design for
has become more complex
www.flickr.com/photos/pagedooley/2121472112

3. W! *"!) +' only have to deal with
different browsers, and the fold
www.flickr.com/photos/jorgeq82/4732700819

4. T'),- #+’" br'w"!r" AND endless numbers
of devices & screen sizes
www.flickr.com/photos/adactio/6153481666

5. I% 2009 1% of global internet traffic came from
mobiles. By the end of 2012 it had risen to 13% and by
2015 #+’" .p!/+!) +' b! ,b'v! 50%.*
* 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

6. A" 'f Q3 2012 we passed
1 billion smartphones in use
www.flickr.com/photos/raincitystudios/95234968

7. I 0,v! , 1'b +0,+ #" *%2%'w% +' 3,%F'r !v!r- 0*3,% that enters the world, five mobile
I’devices are created.*UX designer
m a freelance IA &
* Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx
www.flickr.com/photos/hlkljgk/5764422581
www.flickr.com/photos/helga/3952984450/

8. 41% 'f !3,#(" 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

9. B- +0! !%) 'f 2013, mobile phones will overtake PCs
as the most common web access device worldwide*
Source: www.gartner.com/newsroom/id/2429815
www.flickr.com/photos/miuenski/3127285991

10. The average person looks at their phone
150 +#3!" , ),-.*
* Source: www.textually.org/textually/archives/2012/02/030229.htm
www.flickr.com/photos/jorgeq82/4732700819

11. 40% 'f p!'p(! use their phone in the bathroom. *
* Source: http://www.lukew.com/ff/entry.asp?1500
www.flickr.com/photos/exlibris/2552107635

12. W! $' '%(#%!
everywhere and anywhere
www.flickr.com/photos/lencioni/5580154551

13. &! '() 3-+0 that mobile users are rushed
& on the go doesn’t hold true
www.flickr.com/photos/chicitoloco/8468592748/in/photostream

14. A (,r$! pr'p'r+#'% of our usage
happens when we have time to kill
www.flickr.com/photos/edduddiee/4307943164

15. &#" 0," #3p(#/,+#'%"
for UX & design thinking.
www.flickr.com/photos/eyesore9/3206408088

16. B!f'r! +0! 4r"+ #P0'%!
the mobile use case was limited
www.flickr.com/photos/frantaylor/4296536332

17. W! b*#(+ separate sites
for mobile & desktop
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future

18. I% f,/+, we still do
but we’re noticing something
www.flickr.com/photos/demandaj/7287174776

19. U"!r" .p!/+ an equal & continuous
experience across devices
www.flickr.com/photos/joachim_s_mueller/7110473339

20. “ 7 '*+ 'f 10 smartphone and tablet users expect the
same quality of experience on all devices. ” *
* Source: www.vibrantmedia.co.uk/press/press.asp?section=press_releases&id=256
www.flickr.com/photos/pandiyan/4550066009

21. &!r! ,r! a number
of reasons for this
www.flickr.com/photos/martinteschner/4569495912

22. P!'p(! /,rr- '*+ the same tasks on
mobiles as they do on desktops
www.flickr.com/photos/philippe/2462550872

23. D!v#/!" & "!rv#/!" are getting more
advanced & optimised for complex tasks
www.flickr.com/photos/joeybones/6791201819

24. W! %' ('%$!r 'w% just one device but
multiple & use them interchangeably
www.flickr.com/photos/soyproject/6066959891

25. W! w,%+ +' find what we’re looking for
irrespectively of the device we use
www.flickr.com/photos/visualpunch/7351572896

26. M'b#(! /'%+.+ ≠ 3'b#(! *"! /,"!
The latter is about the task, the former about
the total sum of the user’s mobile experience
www.flickr.com/photos/icedsoul/2486885051

27. H,v#%$ "!p,r,+! sites
does, for the most part, not make sense
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future

28. S', w0,+
should we do?
www.flickr.com/photos/tomitapio/4053123799/in/photostream

29. T'),- w!’(( (''2 ,+...
1. Defining your mobile strategy
2. App design
3. Responsive design
4. Input, orientation & touch screens across devices
5. Practice
6. Q & A

30. O*r 3,#% 'p+#'%" are bespoke
mobile sites, responsive sites and apps
www.flickr.com/photos/martinteschner/4569495912

31. B!"p'2! 3'b#(! "#+!" have a separate url
& means maintaining different sites
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future

32. R!"p'%"#v! "#+!" have the same url
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE
FULL
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future

33. App", well we all know
they come from app stores
www.flickr.com/photos/paul-r/217948368

34. H'w do we know
when to do what?
www.flickr.com/photos/tomitapio/4053123799/in/photostream

35. B!"p'2! 3'b#(! "#+!"
should be avoided, if we can
www.flickr.com/photos/edenandjosh/2892956576

36. Tw' 3,#% ./!p+#'%":
technical limitations to the CMS, or
if required for the audience
www.flickr.com/photos/st3f4n/3476036180

37. &! ,(+!r%,+#v! #" messy & costly:
means maintaining multiple technical
solutions & content
www.flickr.com/photos/ericconstantineau/5618576278

38. I+ 3!,%" maintaining
multiple technical solutions...
www.flickr.com/photos/nikio/3899114449

39. ...,%) ,("' maintaining
multiple versions of your content
www.flickr.com/photos/sharynmorrow/127184319

40. R!,(#"+#/,((- that means
making cuts & frustrating users
www.flickr.com/photos/bulldogsrule/187693681

41. F'r +0! 4r"+ +#3! smartphones and tablets made up
more than one-third of total clicks on Google in Q3*
* Source: http://econsultancy.com/uk/blog/63605-us-mobile-paid-search-spend-up-66-year-on-year-stats
www.flickr.com/photos/antoniolas/4367543346

42. P''r 3'b#(!
experiences result in
the same thing - drop offs
www.flickr.com/photos/sixmilliondollardan/2493495506

43. W0,+ w! "0'*() )' is keep the
core content the same & optimise the
experience, display & interactions to the device
www.flickr.com/photos/jmtimages/2883279193

44. M!!+
responsive design
www.flickr.com/photos/taytom/5277657429

45. B*+...
what about apps?
www.flickr.com/photos/tomitapio/4053123799/in/photostream

46. W0!+0!r +' do an app
or not comes down to...
www.flickr.com/photos/martinteschner/4569495912

47. U"!r & b*"#%!""
objectives...
www.flickr.com/photos/31878512@N06/4704140020

48. If -'* %!!) to utilise
device specific capabilities...
www.flickr.com/photos/cindyli/3784225848

49. If 'ffl#%! r!,)#%$
is required...
www.flickr.com/photos/arjencito/6531640463

50. A%) 'f /'*r"!
budget
www.flickr.com/photos/68751915@N05/6869762317

51. A%,(-+#/" of entry points
can also provide some guidance
www.flickr.com/photos/andwhynot/2946734025

52. M,#%(- )#r!/+ +r,ffi/:
could be an argument for an app
www.flickr.com/photos/haagsuitburo/5349040355

53. M,#%(- "0,r!) (#%2":
ensure your site is optimised for mobile
www.flickr.com/photos/soundslogical/4255801733

54. 2. App design

55. App" are
focused & personal
www.flickr.com/photos/jdhancock/4354438814

56. N'+ ," !,"- ," just
doing an app for e.g. iOS or Android
www.flickr.com/photos/nrkbeta/3906687294/in/photostream

57. N!!) +' /'%"#)!r fragmentation
across different versions &
backwards compatibility
www.flickr.com/photos/aforgrave/6168689222

58. R!(,+#v! %*3b!r of active
Android devices across different versions
Source: http://developer.android.com/about/dashboards/index.html
www.flickr.com/photos/blakespot/4773693893

59. C'3p,r#"'% 'f adoption rate
of iOS7, iOS6 and iOS5
Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker
www.flickr.com/photos/blakespot/4773693893

60. Ev!r- p(,+f'r3 has their own
ui guidelines that their users are used to
www.flickr.com/photos/gadl/3570118243

61. #P0'%! r!"'*r/!"
help & inspiration well documented

62. A%)r'#) r!"'*r/!"
help & inspiration a little less well
documented for earlier versions

63. S+,r+ b- sketching
screenflows, navigation & content
www.flickr.com/photos/saucef/7184615025

64. Av'#) using the home screen as a stepping
point. Instead deliver value from first view
www.flickr.com/photos/lindzgraham/5605911999

65. T!"+#%$ ,pp"
flow, navigation, interactions, transitions

66. Fr'3 testing sketches as
paper prototypes or as clickable prototypes...
www.flickr.com/photos/grinblo/8659685975
www.flickr.com/photos/waagsociety/8888907062

67. ...+' iterations of
wireframes & designs
www.flickr.com/photos/fluent_methods/6961802861

68. 3. R!"p'%"#v! design

69. R!"p'%"#v! "#+!" have the same url
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE
FULL
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future

70. “ D!"#$% & )!v!('p3!%+ "0'*() r!"p'%) to the
user’s behaviour & environment based on screen size,
platform & orientation. [It’s]...a mix of flexible grids &
layouts, images & an intelligent use of media queries. “
- S3,"0#%$ M,$7#%!
www.flickr.com/photos/adactio/5818096043

71. &! b,/2b'%! #"
your grid & breakpoints
http://foundation.zurb.com/docs/layout.php

72. C'(*3%" & $*++!r" can be
fluid or fixed, or a combination.
http://foundation.zurb.com/docs/layout.php

73. &! $r#) 0!(p" w#+0 defining modules
for pages & views
www.flickr.com/photos/donsolo/2136923757

74. “ C'%+!%+ %!!)" +' b! /0'r!'$r,p0!) to
ensure the intended message is preserved on any
device and at any width “
www.flickr.com/photos/theaftershock/2811382400
- Tr!%+ W,(+'%

75. D!4%! -'*r content stacking strategy
across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

76. S' +0,+ #+’" /,r!8((considered, like this
http://thenextweb.com/

77. M'b#(! 'r )!"2+'p 4r"+,
the key is considering the content &
how it will work across devices

78. “ M'b#(! %,v#$,+#'% 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/melodramababs/2766765248

79. Br,) Fr9+ has written 2 excellent posts
on Responsive navigation patterns
xxx
http://bradfrostweb.com/blog/web/responsive-nav-patterns
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design

80. C'%"#)!r -'*r pr'1!/+: assess the depth
needed as well as pros & cons of approaches
www.flickr.com/photos/inpivic/5205918163/

81. D!4%! & w'r2 w#+0 +:!" of navigation:
primary, secondary, tertiary, footer & contextual
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design

82. T!"+
as early as possible
& then continuously

83. I% +0! br'w"!r by resizing the browser
window & checking the display of content
http://thenextweb.com

84. I% +0! br'w"!r by designing in the browser
& creating a working HTML prototype
www.flickr.com/photos/jorgeq82/4732700819

85. U"#%$ +''(" that help you style & test
your typography before implementing it
http://responsive.is/typecast.com

86. http://screenqueri.es/
http://quirktools.com/screenfly/
U"#%$ !3*(,+'r" that allow you to
view your site across devices & orientations
www.responsinator.com/
http://mattkersley.com/responsive/

87. O% ,/+*,( )!v#/!", though expensive
there are ways around it
www.flickr.com/photos/arne/5835855777/in/photostream

88. 4. I%p*+, 'r#!%+,+#'%,
touch screens across devices

89. “ T'*/0 has landed on the desktop. “
- J90 C(,r2
www.flickr.com/photos/patdavid/9391602153

90. ‘N!w r*(!: every desktop design has to go
finger-friendly’*
* Source: http://globalmoxie.com/blog/desktop-touch-design.shtml
www.flickr.com/photos/66327170@N07/7296381856

91. A" ,(w,-"...
...it depends

92. “ T'*/0 "/r!!% (,p+'p ",(!" 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

93. W! "0'*() consider touch across all devices
& screen sizes. Not just smartphones & tablets
www.flickr.com/photos/adactio/6153481666

94. www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/janitors/9968676044
&! w,- we use touch screens differ based
on device, but also across the same device
www.flickr.com/photos/johnkarakatsanis/6902407334
www.flickr.com/photos/jorgeq82/4732700819

95. 49% 'f *"!r" hold their phone in one hand,
but how they hold it differs
www.flickr.com/photos/jorgeq82/4732700819

96. ONE HAND (R: 66% L: 33%)
O+0!r v,r#,+#'%"
based on 1,333 observations
during 2 months
72%
28%
CRADLING (L: 79% R: 21%)
90%
10%
TWO HANDS
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

97. H'()#%$ our devices
is not a static stage. It changes
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

98. C!r+,#% 'r#!%+,+#'%" are better
for certain tasks
Reading
Watching
Typing

99. &!r! ,r! three main approaches
for adapting to orientation
SCALE
RE-POSITION
REVEAL/ HIDE

100. W! %!!) +' consider
precise (e.g. mouse) v.s imprecise (e.g. fingers)
input means
www.flickr.com/photos/ljrmike/7675757042
www.flickr.com/photos/jmtimages/2883279193

101. 5. ;3! +' practice

102. &! BRIEF
A major dating site has asked you to create a campaign for Valentines day 2014
focused on "unexpected moments". The purpose is to facilitate encounters &
dates between people in Dublin looking to find that special someone.
The site/app should support finding people nearby and location should be a key
way for both discovering people & suggestions for date activities. The following
should also be included:
•
•
•
•
About page
Search (people, activities)
Activity suggestions
Notifications
www.flickr.com/photos/pinkpurse/5355919491
•
•
Login & registration
Data visualisations (active users, dates
organised etc)

103. 01
BESPOKE MOBILE SITE
VS. RESPONSIVE VS. AN APP
The client has come to you with their idea and are asking for your advice on what
they should be doing and considering.
W0,+ w'*() -'* r!/'33!%) #% +!r3" 'f 3'b#(! pr!"!%/! & w0-?
A bespoke mobile site, responsive design, an app or a combination?
Consider:
HOW WOULD MOST PEOPLE ACCESS IT?
• Direct traffic vs. shared links?
WHAT DO YOU NEED IT TO DO?
• Device specific capabilities needed?
• Is offline reading/ usage required?
www.flickr.com/photos/pinkpurse/5355919491
WHAT ARE THE OBJECTIVES & PRACTICALITIES?
• The budget
• The current technical platform
• Could an app be re-used later
• The marketing value of an app

104. 02
CONTENT STACKING STRATEGY
Together the client and you have decided to go with a responsive site, which can
also form the basis for their app presence. Now it’s time to get to work.
F'r +0! 0'3! p,$! '%(-, w'r2 +0r'*$0 ("2!+/0#%$) 0'w +0! /'%+!%+
"0'*() b! )#"p(,-!) ,%) pr#'r#+#"!) (/'%+!%+ "+,/2#%$)
Consider desktop, mobile, smartphone
The site should support finding people nearby and location should be a key way
for both discovering people & suggestions for date activities. The following
should also be included:
•
•
•
•
About page
Search (people, activities)
Activity suggestions
Notifications
www.flickr.com/photos/pinkpurse/5355919491
•
•
Login & registration
Data visualisations (active users, dates
organised etc)

105. S+,r+ b-
identifying the main module types & common
elements between pages

106. D!4%! your content stacking strategy
across devices & orientations
Mobile
Desktop/ tablet
1
Logo
1
Logo
2
Header
4
Bath section intro
5
Ad
3
Nav
8 Store
locator
6
Types of baths
2 Header
3
Nav
4
Bath
section
intro
5
Ad
7
Related
products
6
Types of baths
9 Tools
10
Footer
7
Related products
8 Store
locator
9 Tools
10
Footer

107. D'%’+ 1*"+ work with columns
but think of the narrative of the views
www.flickr.com/photos/garrettc/6260768486/

108. D!4%! display variations as well as
the elements they are made up of
Desktop/ Tablet
Desktop/ tablet
1
Logo
Mobile
Mobile
2
Header
4
Bath section intro
1
Logo
5
Ad
3
Nav
8 Store
locator
6
Types of baths
2 Header
3
Nav
4
Bath
section
intro
5
Ad
7
Related
products
6
Types of baths
9 Tools
10
Footer
7
Related products
8 Store
locator
9 Tools
10
Footer

109. I"'(,+! !(!3!%+" that need to be able to break
out to meet your content stacking strategy
Desktop/ Tablet
Desktop/ tablet
1
Logo
Mobile
Mobile
2
Header
4
Bath section intro
1
Logo
5
Ad
3
Nav
8 Store
locator
6
Types of baths
2 Header
3
Nav
4
Bath
section
intro
5
Ad
7
Related
products
6
Types of baths
9 Tools
10
Footer
7
Related products
8 Store
locator
9 Tools
10
Footer

110. A),p+ +' the device & screen in question;
both order & priority as well as interactions,
how much to show & how
www.flickr.com/photos/katherinekenny

111. Desktop/ Tablet
Desktop/ tablet
1
Logo
Mobile
Mobile
2
Header
1
Logo
2 Header
L#++(! b- (#++(! you build up a module library
of defined components for your views,
across devices & orientations
4
Bath section intro
5
Ad
3
Nav
8 Store
locator
6
Types of baths
3
Nav
4
Bath
section
intro
5
Ad
7
Related
products
6
Types of baths
9 Tools
10
Footer
7
Related products
8 Store
locator
9 Tools
10
Footer

112. 02
CONTENT STACKING STRATEGY
Together the client and you have decided to go with a responsive site, which can
also form the basis for their app presence. Now it’s time to get to work.
F'r +0! 0'3! p,$! '%(-, w'r2 +0r'*$0 ("2!+/0#%$) 0'w +0! /'%+!%+
"0'*() b! )#"p(,-!) ,%) pr#'r#+#"!) (/'%+!%+ "+,/2#%$)
Consider desktop, mobile, smartphone
The site should support finding people nearby and location should be a key way
for both discovering people & suggestions for date activities. The following
should also be included:
•
•
•
•
About page
Search (people, activities)
Activity suggestions
Notifications
www.flickr.com/photos/pinkpurse/5355919491
•
•
Login & registration
Data visualisations (active users, dates
organised etc)

113. A f!w final words
www.flickr.com/photos/martinteschner/4569495912

114. A#3 +' make it more future proof
by moving away from specific devices
www.flickr.com/photos/byte/8282578241

115. &#" brings us back to the importance of
modularity in responsive design
www.flickr.com/photos/donsolo/2136923757/

116. L!"" ,b'*+ p,$!" & more focus on
the building blocks that makes up those views
www.flickr.com/photos/boltofblue/4418442567

117. N' 3'r! is it
about beautiful page designs...
www.flickr.com/photos/miuenski/3127285991

118. ...b*+ ,b'*+ v#!w" that will look different
across browsers, screen sizes & devices
www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/adactio/6153481666

119. &! 3'r! you reuse, the less modules
there will be to design, define and develop
www.flickr.com/photos/boltofblue/4418442567

120. B,"#%$ br!,2p'#%+" on
screen sizes isn’t wrong, but
it is a temporary work around
www.flickr.com/photos/gozalewis/3249104929

121. W'r2 w#+0 breakpoints & tweakpoints,
focus on content layout & EMS instead of px
www.slideshare.net/yiibu/pragmatic-responsive-design

122. H'w w! ,ppr',/0 #+ depends
on your project, budget and time frame
& if it’s being built externally
www.flickr.com/photos/75905404@N00/7126146307

123. W0,+ w! /,%%'+ )' is take
a waterfall approach with responsive design
where we hand over from to the other
www.flickr.com/photos/bingisser/154452815

124. W! 0,v! +'
work together across disciplines

125. &#" #%/(*)!" /(#!%+" both in terms of
what they can expect &
what will be expected of them
www.flickr.com/photos/martinteschner/4569495912

126. R!"p'%"#v! )!"#$% means
giving up some control to ensure it works
for as many devices as possible
xxx
www.flickr.com/photos/byte/8282578241

127. E%"*r#%$ that we do what’s best for
our clients, our users & us as a company
www.flickr.com/photos/stickkim/7491816206

128. “ Every time you redesign God kills a kitten “
- L'*#" R9!%f!()
www.flickr.com/photos/matterphotography/2739799786

129. &,%2 -'*!
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com