Designing from the Inside Out
Upcoming SlideShare
Loading in...5
×
 

Designing from the Inside Out

on

  • 629 views

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

Statistics

Views

Total Views
629
Views on SlideShare
629
Embed Views
0

Actions

Likes
10
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing from the Inside Out Designing from the Inside Out Presentation 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 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
  • 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 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.” Jeff Eaton (@eaton)
  • hwdesignco.com | @jpamental | Typecast Webinar Take Away What We Can’t Know + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit
  • 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 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!
  • 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
  • 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, it’s 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 won’t 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) + Don’t forget: use real content!
  • 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 Kurtuldu (@Mustafa_x) FOWD London
  • Jason Pamental | @jpamental http://hwdesignco.com Thank You! Jason Pamental (@jpamental) jason@hwdesignco.com