Slides from my presentation as part of the Typecast webinar 'Designing for maximum reach.' The full video of our webinar will be available here: http://typecast.com/seminars/rwd

1. Jason Pamental | @jpamental
http://hwdesignco.com
Typecast Webinar
29th April, 2014
Designing from the Inside Out
Responsive Design Starts With Your Content

2. hwdesignco.com | @jpamental | Typecast Webinar
What We’ll Cover
+ Lies & deceptions
+ An honest reconciliation
+ Making your typography responsive
+ How prototypes trump promises, and how to make them
without a lot of code

3. hwdesignco.com | @jpamental | Typecast Webinar
It’s not what we don’t know
that’ll kill us
It’s the lies we tell ourselves

4. hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions

5. hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions
960px

6. hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions

7. hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions
“A page is not a valuable concept
even for someone who wants to
read a book.”
Jeff Eaton (@eaton)

8. hwdesignco.com | @jpamental | Typecast Webinar
Take Away What We Can’t Know
+ Screen size
+ Device capabilities
+ Concurrent activities
+ Depth of focus
+ Purpose of visit

9. hwdesignco.com | @jpamental | Typecast Webinar
Focus on What’s Left: Typography

10. hwdesignco.com | @jpamental | Typecast Webinar
Focus on What’s Left: Typography

11. hwdesignco.com | @jpamental | Typecast Webinar
Five Four Simple Steps
+ Performance: select fonts with care, load
what you need & don’t block the page draw
+ Progressive: plan for failure, tune up the loading
process & fallback fonts to minimize FOUT
+ Proportion: small screens demand subtle scale
+ Polish: Design IS the details: OpenType is here!

12. hwdesignco.com | @jpamental | Typecast Webinar
Performance matters
+ Great typography isn’t ‘I used all of them’
+ Load only what you need
Trade Gothic Next LT Pro Bold
this is a typeface this is a font
+ Each font has a performance cost
+ Budget wisely

13. hwdesignco.com | @jpamental | Typecast Webinar
FOUT is OUR fault

14. hwdesignco.com | @jpamental | Typecast Webinar
FOUT is OUR fault

15. hwdesignco.com | @jpamental | Typecast Webinar
FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS results in a blank screen during load:
+ Add this & give them content, then fonts:
+ Adjust font-size, line-height, letter-spacing to avoid jumpiness
+ Yes, it’s that simple
body { font-family: “Trade Gothic”, helvetica, arial; }
.wf-inactive body { font-family: helvetica, arial; }

16. hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
Web fonts loaded

17. hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
No web fonts, uncorrected

18. hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
No web fonts, corrected

19. hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
Web fonts loaded

20. hwdesignco.com | @jpamental | Typecast Webinar
Proportion: one size won’t do
http://bit.ly/jprwt

21. hwdesignco.com | @jpamental | Typecast Webinar
Desktopgeese&handheldgander
+ Small canvas requires subtle
proportions
+ What works in print… works
in print
+ Robert Bringhurst matters,
but scale must adapt

22. hwdesignco.com | @jpamental | Typecast Webinar
For example…

23. hwdesignco.com | @jpamental | Typecast Webinar
For example…

24. hwdesignco.com | @jpamental | Typecast Webinar
For example…

25. hwdesignco.com | @jpamental | Typecast Webinar
A More Modern Scale

26. hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale

27. hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale

28. hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale

29. hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale
+ Use max-width on elements to keep text readable
@media (min-width: 58em) {
p { max-width: 38em; }
}
+ CSS3 brings character counts, but not universal (ch & cx)
+ Don’t forget: use real content!

30. hwdesignco.com | @jpamental | Typecast Webinar
Polish: Don’t Forget Fit & Finish

31. hwdesignco.com | @jpamental | Typecast Webinar
Polish: Don’t Forget Fit & Finish

32. hwdesignco.com | @jpamental | Typecast Webinar
Polish: Don’t Forget Fit & Finish

33. hwdesignco.com | @jpamental | Typecast Webinar
Make Prototypes, Not Promises

34. hwdesignco.com | @jpamental | Typecast Webinar
“Designers Should Code As Much As
Artists Should Mix Paint”
~ Mustafa Kurtuldu (@Mustafa_x)
FOWD London

35. Jason Pamental | @jpamental
http://hwdesignco.com
Thank You!
Jason Pamental (@jpamental)
jason@hwdesignco.com