Designing from the Inside Out

  • 666 views
Uploaded 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

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
666
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
22
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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