Designing from the Inside Out

  • Published on
    17-Aug-2014

  • View
    576

  • Download
    4

DESCRIPTION

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

Transcript

  • Jason Pamental | @jpamental http://hwdesignco.com Typecast Webinar 29th April, 2014 Designing from the Inside Out Responsive Design Starts With Your Content
  • hwdesignco.com | @jpamental | Typecast Webinar What Well Cover + Lies & deceptions + An honest reconciliation + Making your typography responsive + How prototypes trump promises, and how to make them without a lot of code
  • hwdesignco.com | @jpamental | Typecast Webinar Its not what we dont know thatll kill us Its 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 world with tricks & misconceptions
  • 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
  • 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
  • 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. Je Eaton (@eaton)
  • hwdesignco.com | @jpamental | Typecast Webinar Take Away What We Cant Know + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit
  • hwdesignco.com | @jpamental | Typecast Webinar Focus on Whats Left: Typography
  • hwdesignco.com | @jpamental | Typecast Webinar Focus on Whats Left: Typography
  • hwdesignco.com | @jpamental | Typecast Webinar Five Four Simple Steps + Performance: select fonts with care, load what you need & dont 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!
  • hwdesignco.com | @jpamental | Typecast Webinar Performance matters + Great typography isnt 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
  • 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 in a blank screen during load: + Add this & give them content, then fonts: + Adjust font-size, line-height, letter-spacing to avoid jumpiness + Yes, its that simple body { font-family: Trade Gothic, helvetica, arial; } .wf-inactive body { font-family: helvetica, arial; }
  • 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 wont do http://bit.ly/jprwt
  • 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
  • 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 (min-width: 58em) { p { max-width: 38em; } } + CSS3 brings character counts, but not universal (ch & cx) + Dont forget: use real content!
  • hwdesignco.com | @jpamental | Typecast Webinar Polish: Dont Forget Fit & Finish
  • hwdesignco.com | @jpamental | Typecast Webinar Polish: Dont Forget Fit & Finish
  • hwdesignco.com | @jpamental | Typecast Webinar Polish: Dont 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 Kurtuldu (@Mustafa_x) FOWD London
  • Jason Pamental | @jpamental http://hwdesignco.com Thank You! Jason Pamental (@jpamental) jason@hwdesignco.com