Your SlideShare is downloading. ×
0
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

844

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

Transcript of "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.

×