To designers and art directors, responsive web design poses a challenge. Responsive grids and patterns and, above all, the behavior of typographic design need to be taken into consideration across mobile platforms, since mobile devices are particularly restricted in terms of readability. Although typographic design may look nice on a smartphone or tablet, what about usability? This workshop will provide an answer to this question, and it will analyze the influence of typographic design on the user experience. It will be held in German and English. Video links: Slide 16: http://www.youtube.com/watch?v=WNIrs8FgYKU Slide 28: http://www.youtube.com/watch?v=KI_tuYlVg-I Slide 114: http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web Slide 116: http://simplefocus.com/flowtype/

1. Typography and
Responsive Grids
in the World of Mobile Development
Webinale Hands-on · Munich 12/2013

2. Hi!
and welcome!
Webinale Hands-on · Munich 12/2013

3. Hallo!
und herzlich willkommen!
Webinale Hands-on · Munich 12/2013

7. Questions?
Yo u c a n c o n t a c t m e l i k e t h i s :
tiago@tpwd.pt
@tiagopedras
Webinale Hands-on · Munich 12/2013

8. Part 1/4
State of the art
The usage paradigm shift
Webinale Hands-on · Munich 12/2013

9. Part 1/4 - State of the art
Mobile VS Desktop
Webinale Hands-on · Munich 12/2013

10. Global mobile VS desktop internet usage projection
2000
Internet users (MM)
1500
1000
500
0
2007
2008
2009
2010
Desktop
Morgan Stanley Research, 2010
2011
2012
2013
2014
2015
Mobile
Courtesy of

11. Sales figures for PCs, Notebooks and Tablets
1 800 000
1 350 000
900 000
450 000
0
Q1-2012
Q2-2012
Desktops
Q3-2012
Q4-2012
Notebooks
Q1-2013
Q2-2013
Tablets
http://www.heise.de/newsticker/meldung/Consumermarkt-Erstmals-mehr-Tablets-als-Notebooks-verkauft-1938179.html
Courtesy of

12. Adobe.com, July 2013
Courtesy of

13. We should start considering
tablet users a lot more.
–Me (just now)

14. Part 1/4 - State of the art
Problems arising
Webinale Hands-on · Munich 12/2013

15. “When a problem happens, nearly half of
tablet users says they will only try to reload the
page once or twice.”
http://www.gomez.com/engaging-the-tablet-user/

17. Common issues for tablets
Slow load times are the most frequently
cited (66% on enquires)
!
!
Site crashes or problems with some site
functions (44%)
Formatting or display issues (42%)

18. “Today, smartphone browsers often get
redirected to mobile websites which tend to
be significantly lighter than their desktop
counterparts.”
–Guy Podjarny, guypo.com

19. “Responsive websites, however, don’t follow
this pattern.”
–Guy Podjarny, guypo.com

20. Weight test
347
responsive
websites
320×480
to
1600×1200
Webinale Hands-on · Munich 12/2013
86%
of the
websites
weighed the
same

21. Part 2/4
User Experience
Was it good for you?
Webinale Hands-on · Munich 12/2013

22. Tr u s t
Credibility
Harmony
Look
Feel
Joy of use
Interaction
Reaction
User
Experience
Usability
Predictability
Functionality
Intuitivity
Courtesy of

23. Tr u s t
Credibility
Harmony
Look
Feel
Joy of use
Interaction
Reactio
User
Experience
Usability
Predictability
Functionality
Intuitivity
Courtesy of

24. Tr u s t
Credibility
Harmony
Look
Feel
Joy of use
Interaction
Reactio
User
Experience
Usability
Predictability
Functionality
Intuitivity
Courtesy of

25. Part 2/4 - User Experience
Good experiences
Webinale Hands-on · Munich 12/2013

26. So what is a good
experience?
Webinale Hands-on · Munich 12/2013

27. Cares about context
Webinale Hands-on · Munich 12/2013

28. Courtesy of

29. Website by TPWD (http://2bepro.com)

30. Consistent
Webinale Hands-on · Munich 12/2013

31. Courtesy of

32. Size independent
Webinale Hands-on · Munich 12/2013

33. Courtesy of

34. Orientation independent
Webinale Hands-on · Munich 12/2013

35. Courtesy of

36. Adapts to the platform’s
patterns
Webinale Hands-on · Munich 12/2013

37. Courtesy of

38. Courtesy of

40. Part 2/4 - User Experience
Bad experiences
Webinale Hands-on · Munich 12/2013

41. “When a logo works, it makes you think certain
things. Makes you think about the company,
their influence, their reach.
It’s all about branding…”
–Joshua Porter, 2007

42. “… When a web site works, on the other hand, you’re
using it to do something, interacting with it.
You are inputting information, asking questions,
getting answers.”
–Joshua Porter, 2007

44. Courtesy of

45. Courtesy of

46. Courtesy of

47. Courtesy of

48. Part 2/4 - User Experience
Usage context
Webinale Hands-on · Munich 12/2013

49. “People read newspapers, listen to the radio,
and watch TV, but they go to the Web
to GET THINGS DONE.”
–G.M. O’Connell, creator of the first web banner

50. Un-pre-dic-ta-bi-li-ty
Webinale Hands-on · Munich 12/2013

52. Portrait
Landscape
Arbeitsplatz
Öffentlicher Raum
Hands-on
Modus
Privat
Nach vorne lehnen
Umfeld
Nutzungsmodus
Situation
Unterwegs
Stationär
Mobil
Zurücklehnen
Courtesy of

53. http://techcrunch.com/2012/10/22/google-research-shows-tablets-are-for-games-and-email-mostly-used-on-couch-in-bed/
Courtesy of

54. Where are people using mobile
devices?
84% at home
80% during miscellaneous downtime
throughout the day
76% waiting in lines of waiting for
appointments
!
69% while shopping
!
64% at work
62% while watching TV (alt. study claims 84%)
47% during commute in to work
Stats by Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1263

55. Screen size
Webinale Hands-on · Munich 12/2013

56. “1024x768 has fallen from 41.8% in March
2009 to 18.6% in March 2012.
Over the same period 1366x768 has grown
from 0.68% to 19.28%.”
http://gs.statcounter.com/press/screen-resolution-alert-for-web-developers

58. Screen sizes, shown in a non-flexible medium. (Photo and work: Aram Bartholl)

59. Orientation
Don’t force your design to every
possible size/orientation. Sometimes it’s
better that you adjust to a particular
context
People tend to use tablets more on
landscape mode
!
!
You should get some insights on each
situation
Amount of content needs to be
considered and reviewed

60. Performance
Webinale Hands-on · Munich 12/2013

61. Size and speed
Weight (Kb)
Percentage
HTML
4%
CSS
!
36
30
3%
451
51%
Javascript
170
19%
Fonts
197
22%
Total
884
100%
HTML! 36!
CSS! 30!
Images!451!
Javascript!
Fonts! 200!
4%!
3%!
51%!
170!
23%
Images
!
19%!

62. Other issues
Webinale Hands-on · Munich 12/2013

63. Other technical issues
Legacy browsers (of course…)
Connection speed
!
Pixel density
!
Viewport and zoom
Retina images

64. Other usability issues
We have big fingers!
Elements position distance to edge
!
!
Typography size
User’s distance to screen

65. Part 3/4
Grids and Media
Introduction and DIY guide
Webinale Hands-on · Munich 12/2013

66. Tr u s t
Credibility
Harmony
Look
Feel
Joy of use
Interaction
Reactio
User
Experience
Usability
Predictability
Functionality
Intuitivity
Courtesy of

67. Part 1/2 - Grids and Media
Grid and framework
options
Webinale Hands-on · Munich 12/2013

68. Grids
They come in two flavours

69. Grids
Fluid grids. Easier to adapt to any screen size.

70. Grids
Fluid grids. Easier to adapt to any screen size.

71. Grids
Fluid grids. Easier to adapt to any screen size.

72. Grids
Fluid grids. Easier to adapt to any screen size.

73. Grids
Fixed grids. More rigid but easier to control.

74. Grids
Fixed grids. More rigid but easier to control.

75. Grids
Fixed grids. More rigid but easier to control.

76. Grids
Fixed grids. More rigid but easier to control.

77. Starting points: frameworks
Bootstrap
Foundation
Less Framework
Skeleton

78. Frameworks include more than just a grid.
They have typography settings, input styles,
entire modules… and also a lot of JS.

79. Part 1/2 - Grids and Media
Advantages and
disadvantages
Webinale Hands-on · Munich 12/2013

80. Advantages and disadvantages
Allows you to quickly build up a
structure with little effort
Helps to keep most of the elements
aligned, making a cohesive composition
Easy way to move from a wireframe
directly to the browser
Facilitates mobile layouts in certain predetermined adaptations

81. Advantages and disadvantages
They won’t work for every website
(specially if you have fewer content)
Might limit your information architecture
and may look too rigid
Might injure visual rhythm and create a
monotonous effect
Should never, EVER, get in your way
while designing or coding the layout

82. Examples
Webinale Hands-on · Munich 12/2013

89. Part 1/2 - Grids and Media
Live coding:
building a custom grid
Webinale Hands-on · Munich 12/2013

90. “The technologies existed already: fluid grids,
flexible images, and media queries.”
–Jeremy Keith, in the foreword of
“Responsive Web Design” by Ethan Marcotte

91. Building a custom grid
Fluid grid (using percentages) of 12
columns. Responsive but not mobile first
(better/easier starting point)
Flexible images
Break points (media queries)

92. If you think of Mobile First as progressive
enhancement, these grids examples will feel
more like graceful degradation
– Joni Korpi, author of the Less Framework

93. Building a custom grid
It’s good practice to include one of these
complimentary base styles:
Reset
Normalize
Boilerplate
…

94. “My recipe”
Convert a regular grid (e. g. 12 columns)
to percentages
Chose a clearfix method
Change the total width to max-width
Make every image adjustable in size
Create first media query for smartphone
Then add extra breaking points

95. (live coding)
Webinale Hands-on · Munich 12/2013

96. Extra tips
For extra easiness and performance add
the following:
Box sizing
(search for “Paul Irish box sizing”)
Responsive images
(using Scott Jehl’s polyfills the <picture> tag)
Concatenating asset files
(scripts, stylesheets and images)
Minifying asset files
(CodeKit app is great for scripts and stylesheets)

97. Polyfills and helpers
Media Queries: Respond.js
https://github.com/scottjehl/Respond
Responsive Images: Picture Fill
https://github.com/scottjehl/picturefill
HTML5 tags and others: Modernizr
http://modernizr.com/
CSS3 selectors: Selectivizr
http://selectivizr.com/
Load JS with to MediaQueries: MatchMedia
https://github.com/paulirish/matchMedia.js/

98. Part 2/2
Web Typography
Common caveats and needs
Webinale Hands-on · Munich 12/2013

99. Part 2/2 - Typography
How we used to set
typography
Webinale Hands-on · Munich 12/2013

100. How we used to set typography
In the beginning there were no Web Fonts,
only Web Safe Fonts. Choosing a font was
easier
Now choosing/using a font is not merely a
stylistic issue. It’s worth knowing the role of
the technological side in all of this
We would place some/all the content
We would set a font size base for the body
Define the width of the website accordingly
to the number of words per line

101. Part 2/2 - Typography
Problems of responsive
typography
Webinale Hands-on · Munich 12/2013

102. Problems of responsive typography
Fluid grids create lot’s of type layout and
content control problems
Is it big enough to be read on a mobile
device?
Each browser and OS maker uses a
different text rendering engine so we
need to test… a lot!
Anti-aliasing in legacy browsers! :(

103. Problems of responsive typography
Hintings are a must-have on Windows
Is the font loading time fast enough?
Performance issues (weight of files and
unnecessary versions of the same font)
FOUT (Flash Of Unstyled Text)
Context: what is an average distance for
a user to hold a device? Can he read
your text?

104. “I’m realising that the predictability & control
we’ve had over web type is becoming a thing
of the past.”
– Trent Walton

105. Part 2/2 - Typography
Basic type setting
Webinale Hands-on · Munich 12/2013

106. Test > Iterate > Test > Iterate > Tes
Webinale Hands-on · Munich 12/2013

107. e > Test > Iterate > Test > Iterate >
Webinale Hands-on · Munich 12/2013

108. “My recipe”
Choose one or two fonts that are both readable
and fit the branding
Set a basic size for the body text of your default
version
If using a fixed grid with adaptative layouts, test and
adjust size in all of them
If using a fluid grid, try to define an average size
between breakpoints
45-75 characters per line is generally accepted as
safe for comfortable reading
Create the remaining styles for titles, labels and
highlight paragraphs (use EMs or REMs)

109. (live coding)
Webinale Hands-on · Munich 12/2013

110. Font services
From a service provider or CDN
Typekit
Google Fonts
Fonts.com
Cloud Typography by H&FJ
Or as Web fonts files
Font Squirrel
MyFonts

111. Costs
From a service provider or CDN
Typekit (starting at €)
Google Fonts (free)
Fonts.com (starting at €)
Cloud Typography by H&FJ (€)
Or as Web fonts files
Font Squirrel (mostly free)
MyFonts (pay per font, starting at 40€)

112. Icons and specials
Entypo
http://entypo.com/
Chartwell
https://www.fontfont.com/how-to-use-ff-chartwell

114. http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web

115. Tools and helpers
Try text-rendering: optimizeLegibility;
http://www.usabilitypost.com/2012/11/06/optimizelegibility/
FlowType
http://simplefocus.com/flowtype/
FitText
http://fittextjs.com/
TypeCast
http://typecast.com/

117. Final references
In case you want to know more
Webinale Hands-on · Munich 12/2013

118. Links
Performance implications
http://www.guypo.com/mobile/performanceimplications-of-responsive-design-book-contribution
A Closer look at Font Rendering
http://www.smashingmagazine.com/2012/04/24/acloser-look-at-font-rendering/
Responsive Typography
http://ia.net/blog/responsive-typography-the-basics/

119. Thank you!
Yo u c a n c o n t a c t m e l i k e t h i s :
tiago@tpwd.pt
@tiagopedras
Webinale Hands-on · Munich 12/2013