Jason Pamental | @jpamental
http://hwdesignco.com
Typecast Webinar
29th April, 2014
Designing from the Inside Out
Responsi...
hwdesignco.com | @jpamental | Typecast Webinar
What We’ll Cover
+ Lies & deceptions
+ An honest reconciliation
+ Making yo...
hwdesignco.com | @jpamental | Typecast Webinar
It’s not what we don’t know
that’ll kill us
It’s the lies we tell ourselves
hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the w...
hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the w...
hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the w...
hwdesignco.com | @jpamental | HighEdWeb NE | #hewebne
A Long Road to a Make-Believe Place
+ We prop up our vision of the w...
hwdesignco.com | @jpamental | Typecast Webinar
Take Away What We Can’t Know
+ Screen size
+ Device capabilities
+ Concurre...
hwdesignco.com | @jpamental | Typecast Webinar
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | Typecast Webinar
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | Typecast Webinar
Five Four Simple Steps
+ Performance: select fonts with care, load
what you...
hwdesignco.com | @jpamental | Typecast Webinar
Performance matters
+ Great typography isn’t ‘I used all of them’
+ Load on...
hwdesignco.com | @jpamental | Typecast Webinar
FOUT is OUR fault
hwdesignco.com | @jpamental | Typecast Webinar
FOUT is OUR fault
hwdesignco.com | @jpamental | Typecast Webinar
FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS results...
hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
Web fonts loaded
hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
No web fonts, uncorrected
hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
No web fonts, corrected
hwdesignco.com | @jpamental | Typecast Webinar
Progressively Enhance
Web fonts loaded
hwdesignco.com | @jpamental | Typecast Webinar
Proportion: one size won’t do
http://bit.ly/jprwt
hwdesignco.com | @jpamental | Typecast Webinar
Desktopgeese&handheldgander
+ Small canvas requires subtle
proportions
+ Wh...
hwdesignco.com | @jpamental | Typecast Webinar
For example…
hwdesignco.com | @jpamental | Typecast Webinar
For example…
hwdesignco.com | @jpamental | Typecast Webinar
For example…
hwdesignco.com | @jpamental | Typecast Webinar
A More Modern Scale
hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale
hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale
hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale
hwdesignco.com | @jpamental | Typecast Webinar
Measure & Scale
+ Use max-width on elements to keep text readable

@media (...
hwdesignco.com | @jpamental | Typecast Webinar
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | Typecast Webinar
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | Typecast Webinar
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | Typecast Webinar
Make Prototypes, Not Promises
hwdesignco.com | @jpamental | Typecast Webinar
“Designers Should Code As Much As
Artists Should Mix Paint”
~ Mustafa Kurtu...
Jason Pamental | @jpamental
http://hwdesignco.com
Thank You!
Jason Pamental (@jpamental)
jason@hwdesignco.com
Upcoming SlideShare
Loading in...5
×

Designing from the Inside Out

971
-1

Published on

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

Published in: Design, Technology

Designing from the Inside Out

  1. 1. Jason Pamental | @jpamental http://hwdesignco.com Typecast Webinar 29th April, 2014 Designing from the Inside Out Responsive Design Starts With Your Content
  2. 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. 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. 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. 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. 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. 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. 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. 9. hwdesignco.com | @jpamental | Typecast Webinar Focus on What’s Left: Typography
  10. 10. hwdesignco.com | @jpamental | Typecast Webinar Focus on What’s Left: Typography
  11. 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. 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. 13. hwdesignco.com | @jpamental | Typecast Webinar FOUT is OUR fault
  14. 14. hwdesignco.com | @jpamental | Typecast Webinar FOUT is OUR fault
  15. 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. 16. hwdesignco.com | @jpamental | Typecast Webinar Progressively Enhance Web fonts loaded
  17. 17. hwdesignco.com | @jpamental | Typecast Webinar Progressively Enhance No web fonts, uncorrected
  18. 18. hwdesignco.com | @jpamental | Typecast Webinar Progressively Enhance No web fonts, corrected
  19. 19. hwdesignco.com | @jpamental | Typecast Webinar Progressively Enhance Web fonts loaded
  20. 20. hwdesignco.com | @jpamental | Typecast Webinar Proportion: one size won’t do http://bit.ly/jprwt
  21. 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. 22. hwdesignco.com | @jpamental | Typecast Webinar For example…
  23. 23. hwdesignco.com | @jpamental | Typecast Webinar For example…
  24. 24. hwdesignco.com | @jpamental | Typecast Webinar For example…
  25. 25. hwdesignco.com | @jpamental | Typecast Webinar A More Modern Scale
  26. 26. hwdesignco.com | @jpamental | Typecast Webinar Measure & Scale
  27. 27. hwdesignco.com | @jpamental | Typecast Webinar Measure & Scale
  28. 28. hwdesignco.com | @jpamental | Typecast Webinar Measure & Scale
  29. 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. 30. hwdesignco.com | @jpamental | Typecast Webinar Polish: Don’t Forget Fit & Finish
  31. 31. hwdesignco.com | @jpamental | Typecast Webinar Polish: Don’t Forget Fit & Finish
  32. 32. hwdesignco.com | @jpamental | Typecast Webinar Polish: Don’t Forget Fit & Finish
  33. 33. hwdesignco.com | @jpamental | Typecast Webinar Make Prototypes, Not Promises
  34. 34. hwdesignco.com | @jpamental | Typecast Webinar “Designers Should Code As Much As Artists Should Mix Paint” ~ Mustafa Kurtuldu (@Mustafa_x) FOWD London
  35. 35. Jason Pamental | @jpamental http://hwdesignco.com Thank You! Jason Pamental (@jpamental) jason@hwdesignco.com
  1. A particular slide catching your eye?

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

×