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
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.â
JeïŹ 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
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
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; }
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
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!
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