Typography and
Responsive Grids
in the World of Mobile Development

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

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

Webinale Hands-on · Munich 12/2013
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
Part 1/4


State of the art
The usage paradigm shift

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

Mobile VS Desktop

Webinale Hands-on · Munich 12/2013
Global mobile VS desktop internet usage projection
2000

Internet users (MM)

1500

1000

500

0
2007

2008

2009

2010

D...
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...
Adobe.com, July 2013

Courtesy of
We should start considering

tablet users a lot more.
–Me (just now)
Part 1/4 - State of the art

Problems arising

Webinale Hands-on · Munich 12/2013
“When a problem happens, nearly half of
tablet users says they will only try to reload the
page once or twice.”
http://www...
Common issues for tablets

Slow load times are the most frequently
cited (66% on enquires)

!
!

Site crashes or problems ...
“Today, smartphone browsers often get
redirected to mobile websites which tend to
be significantly lighter than their deskt...
“Responsive websites, however, don’t follow
this pattern.”
–Guy Podjarny, guypo.com
Weight test
347

responsive
websites

320×480

to


1600×1200

Webinale Hands-on · Munich 12/2013

86%

of the
websites
we...
Part 2/4


User Experience
Was it good for you?

Webinale Hands-on · Munich 12/2013
Tr u s t
Credibility
Harmony

Look

Feel

Joy of use
Interaction
Reaction

User
Experience

Usability

Predictability
Func...
Tr u s t
Credibility
Harmony

Look

Feel

Joy of use
Interaction
Reactio

User
Experience

Usability

Predictability
Funct...
Tr u s t
Credibility
Harmony

Look

Feel

Joy of use
Interaction
Reactio

User
Experience

Usability

Predictability
Funct...
Part 2/4 - User Experience

Good experiences

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

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

Webinale Hands-on · Munich 12/2013
Courtesy of
Website by TPWD (http://2bepro.com)
Consistent

Webinale Hands-on · Munich 12/2013
Courtesy of
Size independent

Webinale Hands-on · Munich 12/2013
Courtesy of
Orientation independent

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

Webinale Hands-on · Munich 12/2013
Courtesy of
Courtesy of
Part 2/4 - User Experience

Bad experiences

Webinale Hands-on · Munich 12/2013
“When a logo works, it makes you think certain
things. Makes you think about the company,
their influence, their reach.
It’...
“… When a web site works, on the other hand, you’re
using it to do something, interacting with it.
You are inputting infor...
Courtesy of
Courtesy of
Courtesy of
Courtesy of
Part 2/4 - User Experience

Usage context

Webinale Hands-on · Munich 12/2013
“People read newspapers, listen to the radio,

and watch TV, but they go to the Web 

to GET THINGS DONE.”
–G.M. O’Connell...
Un-pre-dic-ta-bi-li-ty

Webinale Hands-on · Munich 12/2013
Portrait

Landscape

Arbeitsplatz

Öffentlicher Raum

Hands-on
Modus

Privat

Nach vorne lehnen

Umfeld

Nutzungsmodus

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

Court...
Where are people using mobile
devices?
84% at home
80% during miscellaneous downtime
throughout the day
76% waiting in lin...
Screen size

Webinale Hands-on · Munich 12/2013
“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% t...
Screen sizes, shown in a non-flexible medium. (Photo and work: Aram Bartholl)
Orientation
Don’t force your design to every
possible size/orientation. Sometimes it’s
better that you adjust to a particu...
Performance

Webinale Hands-on · Munich 12/2013
Size and speed
Weight (Kb)

Percentage

HTML

4%

CSS

!

36
30

3%

451

51%

Javascript

170

19%

Fonts

197

22%

Tota...
Other issues

Webinale Hands-on · Munich 12/2013
Other technical issues
Legacy browsers (of course…)
Connection speed

!

Pixel density

!

Viewport and zoom
Retina images
Other usability issues

We have big fingers!
Elements position distance to edge

!
!

Typography size
User’s distance to sc...
Part 3/4


Grids and Media
Introduction and DIY guide

Webinale Hands-on · Munich 12/2013
Tr u s t
Credibility
Harmony

Look

Feel

Joy of use
Interaction
Reactio

User
Experience

Usability

Predictability
Funct...
Part 1/2 - Grids and Media

Grid and framework
options

Webinale Hands-on · Munich 12/2013
Grids
They come in two flavours
Grids
Fluid grids. Easier to adapt to any screen size.
Grids
Fluid grids. Easier to adapt to any screen size.
Grids
Fluid grids. Easier to adapt to any screen size.
Grids
Fluid grids. Easier to adapt to any screen size.
Grids
Fixed grids. More rigid but easier to control.
Grids
Fixed grids. More rigid but easier to control.
Grids
Fixed grids. More rigid but easier to control.
Grids
Fixed grids. More rigid but easier to control.
Starting points: frameworks

Bootstrap
Foundation
Less Framework
Skeleton
Frameworks include more than just a grid.

They have typography settings, input styles,
entire modules… and also a lot of ...
Part 1/2 - Grids and Media

Advantages and
disadvantages

Webinale Hands-on · Munich 12/2013
Advantages and disadvantages
Allows you to quickly build up a
structure with little effort
Helps to keep most of the eleme...
Advantages and disadvantages
They won’t work for every website
(specially if you have fewer content)
Might limit your info...
Examples

Webinale Hands-on · Munich 12/2013
Part 1/2 - Grids and Media

Live coding:

building a custom grid

Webinale Hands-on · Munich 12/2013
“The technologies existed already: fluid grids,
flexible images, and media queries.”
–Jeremy Keith, in the foreword of
“Resp...
Building a custom grid

Fluid grid (using percentages) of 12
columns. Responsive but not mobile first

(better/easier start...
If you think of Mobile First as progressive
enhancement, these grids examples will feel
more like graceful degradation
– J...
Building a custom grid
It’s good practice to include one of these
complimentary base styles:
Reset
Normalize
Boilerplate
…
“My recipe”
Convert a regular grid (e. g. 12 columns)
to percentages
Chose a clearfix method
Change the total width to max-...
(live coding)

Webinale Hands-on · Munich 12/2013
Extra tips
For extra easiness and performance add
the following:
Box sizing

(search for “Paul Irish box sizing”)

Respons...
Polyfills and helpers
Media Queries: Respond.js

https://github.com/scottjehl/Respond

Responsive Images: Picture Fill 

h...
Part 2/2


Web Typography
Common caveats and needs

Webinale Hands-on · Munich 12/2013
Part 2/2 - Typography

How we used to set
typography

Webinale Hands-on · Munich 12/2013
How we used to set typography
In the beginning there were no Web Fonts,
only Web Safe Fonts. Choosing a font was
easier
No...
Part 2/2 - Typography

	 Problems of responsive
typography

Webinale Hands-on · Munich 12/2013
Problems of responsive typography
Fluid grids create lot’s of type layout and
content control problems
Is it big enough to...
Problems of responsive typography
Hintings are a must-have on Windows
Is the font loading time fast enough?
Performance is...
“I’m realising that the predictability & control
we’ve had over web type is becoming a thing
of the past.”
– Trent Walton
Part 2/2 - Typography

Basic type setting

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

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

Webinale Hands-on · Munich 12/2013
“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 ...
(live coding)

Webinale Hands-on · Munich 12/2013
Font services
From a service provider or CDN
Typekit
Google Fonts
Fonts.com
Cloud Typography by H&FJ
Or as Web fonts files
...
Costs
From a service provider or CDN
Typekit (starting at €)
Google Fonts (free)
Fonts.com (starting at €)
Cloud Typograph...
Icons and specials

Entypo

http://entypo.com/

Chartwell

https://www.fontfont.com/how-to-use-ff-chartwell
http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web
Tools and helpers
Try text-rendering: optimizeLegibility;

http://www.usabilitypost.com/2012/11/06/optimizelegibility/

Fl...
Final references
In case you want to know more

Webinale Hands-on · Munich 12/2013
Links
Performance implications

http://www.guypo.com/mobile/performanceimplications-of-responsive-design-book-contribution...
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
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
Upcoming SlideShare
Loading in...5
×

Typography and Responsive Grids in the World of Mobile Development

683

Published on

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/

Published in: Design, Technology, Travel
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
683
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Typography and Responsive Grids in the World of Mobile Development

  1. 1. Typography and Responsive Grids in the World of Mobile Development Webinale Hands-on · Munich 12/2013
  2. 2. Hi! and welcome! Webinale Hands-on · Munich 12/2013
  3. 3. Hallo! und herzlich willkommen! Webinale Hands-on · Munich 12/2013
  4. 4. 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
  5. 5. Part 1/4 State of the art The usage paradigm shift Webinale Hands-on · Munich 12/2013
  6. 6. Part 1/4 - State of the art Mobile VS Desktop Webinale Hands-on · Munich 12/2013
  7. 7. 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
  8. 8. 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
  9. 9. Adobe.com, July 2013 Courtesy of
  10. 10. We should start considering
 tablet users a lot more. –Me (just now)
  11. 11. Part 1/4 - State of the art Problems arising Webinale Hands-on · Munich 12/2013
  12. 12. “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/
  13. 13. 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%)
  14. 14. “Today, smartphone browsers often get redirected to mobile websites which tend to be significantly lighter than their desktop counterparts.” –Guy Podjarny, guypo.com
  15. 15. “Responsive websites, however, don’t follow this pattern.” –Guy Podjarny, guypo.com
  16. 16. Weight test 347 responsive websites 320×480 to 1600×1200 Webinale Hands-on · Munich 12/2013 86% of the websites weighed the same
  17. 17. Part 2/4 User Experience Was it good for you? Webinale Hands-on · Munich 12/2013
  18. 18. Tr u s t Credibility Harmony Look Feel Joy of use Interaction Reaction User Experience Usability Predictability Functionality Intuitivity Courtesy of
  19. 19. Tr u s t Credibility Harmony Look Feel Joy of use Interaction Reactio User Experience Usability Predictability Functionality Intuitivity Courtesy of
  20. 20. Tr u s t Credibility Harmony Look Feel Joy of use Interaction Reactio User Experience Usability Predictability Functionality Intuitivity Courtesy of
  21. 21. Part 2/4 - User Experience Good experiences Webinale Hands-on · Munich 12/2013
  22. 22. So what is a good experience? Webinale Hands-on · Munich 12/2013
  23. 23. Cares about context Webinale Hands-on · Munich 12/2013
  24. 24. Courtesy of
  25. 25. Website by TPWD (http://2bepro.com)
  26. 26. Consistent Webinale Hands-on · Munich 12/2013
  27. 27. Courtesy of
  28. 28. Size independent Webinale Hands-on · Munich 12/2013
  29. 29. Courtesy of
  30. 30. Orientation independent Webinale Hands-on · Munich 12/2013
  31. 31. Courtesy of
  32. 32. Adapts to the platform’s patterns Webinale Hands-on · Munich 12/2013
  33. 33. Courtesy of
  34. 34. Courtesy of
  35. 35. Part 2/4 - User Experience Bad experiences Webinale Hands-on · Munich 12/2013
  36. 36. “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
  37. 37. “… 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
  38. 38. Courtesy of
  39. 39. Courtesy of
  40. 40. Courtesy of
  41. 41. Courtesy of
  42. 42. Part 2/4 - User Experience Usage context Webinale Hands-on · Munich 12/2013
  43. 43. “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
  44. 44. Un-pre-dic-ta-bi-li-ty Webinale Hands-on · Munich 12/2013
  45. 45. Portrait Landscape Arbeitsplatz Öffentlicher Raum Hands-on Modus Privat Nach vorne lehnen Umfeld Nutzungsmodus Situation Unterwegs Stationär Mobil Zurücklehnen Courtesy of
  46. 46. http://techcrunch.com/2012/10/22/google-research-shows-tablets-are-for-games-and-email-mostly-used-on-couch-in-bed/ Courtesy of
  47. 47. 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
  48. 48. Screen size Webinale Hands-on · Munich 12/2013
  49. 49. “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
  50. 50. Screen sizes, shown in a non-flexible medium. (Photo and work: Aram Bartholl)
  51. 51. 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
  52. 52. Performance Webinale Hands-on · Munich 12/2013
  53. 53. 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%!
  54. 54. Other issues Webinale Hands-on · Munich 12/2013
  55. 55. Other technical issues Legacy browsers (of course…) Connection speed ! Pixel density ! Viewport and zoom Retina images
  56. 56. Other usability issues We have big fingers! Elements position distance to edge ! ! Typography size User’s distance to screen
  57. 57. Part 3/4 Grids and Media Introduction and DIY guide Webinale Hands-on · Munich 12/2013
  58. 58. Tr u s t Credibility Harmony Look Feel Joy of use Interaction Reactio User Experience Usability Predictability Functionality Intuitivity Courtesy of
  59. 59. Part 1/2 - Grids and Media Grid and framework options Webinale Hands-on · Munich 12/2013
  60. 60. Grids They come in two flavours
  61. 61. Grids Fluid grids. Easier to adapt to any screen size.
  62. 62. Grids Fluid grids. Easier to adapt to any screen size.
  63. 63. Grids Fluid grids. Easier to adapt to any screen size.
  64. 64. Grids Fluid grids. Easier to adapt to any screen size.
  65. 65. Grids Fixed grids. More rigid but easier to control.
  66. 66. Grids Fixed grids. More rigid but easier to control.
  67. 67. Grids Fixed grids. More rigid but easier to control.
  68. 68. Grids Fixed grids. More rigid but easier to control.
  69. 69. Starting points: frameworks Bootstrap Foundation Less Framework Skeleton
  70. 70. Frameworks include more than just a grid.
 They have typography settings, input styles, entire modules… and also a lot of JS.
  71. 71. Part 1/2 - Grids and Media Advantages and disadvantages Webinale Hands-on · Munich 12/2013
  72. 72. 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
  73. 73. 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
  74. 74. Examples Webinale Hands-on · Munich 12/2013
  75. 75. Part 1/2 - Grids and Media Live coding: building a custom grid Webinale Hands-on · Munich 12/2013
  76. 76. “The technologies existed already: fluid grids, flexible images, and media queries.” –Jeremy Keith, in the foreword of “Responsive Web Design” by Ethan Marcotte
  77. 77. 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)
  78. 78. 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
  79. 79. Building a custom grid It’s good practice to include one of these complimentary base styles: Reset Normalize Boilerplate …
  80. 80. “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
  81. 81. (live coding) Webinale Hands-on · Munich 12/2013
  82. 82. 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)
  83. 83. 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/
  84. 84. Part 2/2 Web Typography Common caveats and needs Webinale Hands-on · Munich 12/2013
  85. 85. Part 2/2 - Typography How we used to set typography Webinale Hands-on · Munich 12/2013
  86. 86. 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
  87. 87. Part 2/2 - Typography Problems of responsive typography Webinale Hands-on · Munich 12/2013
  88. 88. 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! :(
  89. 89. 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?
  90. 90. “I’m realising that the predictability & control we’ve had over web type is becoming a thing of the past.” – Trent Walton
  91. 91. Part 2/2 - Typography Basic type setting Webinale Hands-on · Munich 12/2013
  92. 92. Test > Iterate > Test > Iterate > Tes Webinale Hands-on · Munich 12/2013
  93. 93. e > Test > Iterate > Test > Iterate > Webinale Hands-on · Munich 12/2013
  94. 94. “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)
  95. 95. (live coding) Webinale Hands-on · Munich 12/2013
  96. 96. 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
  97. 97. 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€)
  98. 98. Icons and specials Entypo
 http://entypo.com/ Chartwell
 https://www.fontfont.com/how-to-use-ff-chartwell
  99. 99. http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web
  100. 100. 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/
  101. 101. Final references In case you want to know more Webinale Hands-on · Munich 12/2013
  102. 102. 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/
  103. 103. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×