Responsive Web Design & Webfonts

&
RESPONSIVE
WEBDESIGN
WEBFONTS
Friday, October 29, 2010

“
The control which designers know in the print
medium, and often desire in the web medium, is
simply a function of the limitation of the printed page.
We should embrace the fact that the web doesn’t have
the same constraints, and design for this flexibility.
But first, we must “accept the ebb and flow of things.
—John Allsopp, “A Dao of Web Design”
”

“
We can design for an optimal viewing experience, but
embed standards-based technologies into our designs
to make them not only more ﬂexible, but more adaptive
to the media that renders them.
—Ethan Marcotte, “Responsive Web Design”
”

RESPONSIVE
ARCHITECTURE

RESPONSIVE
SPACES

RESPONSIVE
OBJECTS

WEBDESIGN
“Dirtylittlelie”
1024x768

HOW BIG IS
OUR CANVAS?

HOW TO DESIGN
FOR ALL THIS?

ONE SIZE
DOES NOT
FIT ALL

GRID & TYPE

ETHAN MARCOTTE
THE BAKER STREET
INQUIRER

ETHAN MARCOTTE
ROBOT-OR-NOT

INFORMATION
ARCHITECTS.JP

TRADITIONAL
APPROACH

“DESKTOP”
WEBSITE

+@MEDIA QUERIES
= MOBILE WEBSITE

+@MEDIA QUERIES
= FAIL

LUKE
WROBLEWSKI

DIFFERENT
APPROACH

MOBILE
WEBSITE

+@MEDIA QUERIES
= DESKTOP WEBSITE

+@MEDIA QUERIES
= PROGRESSIVE
ENHANCEMENT

JEREMY
KEITH

HARDWARE

DEVICE
ORIENTATION

TOUCH
SCREEN

SMALLER
KEYBOARD

“IT’S NOT A BUG,
IT’S A FEATURE!”

“VOICE AS INPUT”

“LOCATION AS INPUT”

BRYAN RIEGER
RETHINKING THE
MOBILE WEB

FALLBACKS
MODERNIZR

RICH WEB
TYPOGRAPHYIN SEARCH OF THE HOLY GRAIL!

“
Web designers want to use the same fonts as they use in
print, for all the same reasons they use different fonts
on print.
—Roger Black, Typecon Webfonts Panel
”

sIFR
FLASH + JS

TYPEFACE.JS
IMAGES + JS

CUFON
TTF/OTF > SVG > WML Paths > JS/JSON

FACELIFT / FLIR
IMAGES + JS

@FONTFACE
INNOVATOR

FONT = SOFTWARE
EULA

“
Seriously. Fuck them. They still think they’re in the
business of shuffling little bits of metal around. You
want to use a super-cool ultra-awesome totally-not-
one-of-the-11-web-safe-fonts? Pick an open source font
and get on with your life.
—Mark Pilgrim, “Fuck The Foundries”
”

.WOFF

.WTF?!

CURRENT SITUATION
.EOT OR .OTF/.TTF

STANDARD
.WEBFONT > .webOTF > .WOFF

ALTERNATIVES
TYPEKIT (400+)

ALTERNATIVES
FONTDECK (300+)

ALTERNATIVES
GOOGLE (23)

ALTERNATIVES
JUST ANOTHER
FOUNDRY (23)

ALTERNATIVES
SELF-HOSTING

SELF-HOSTING
FONT FONT

SELF-HOSTING
FONTSPRING

PAUL IRISH
BULLETPROOF
@FONT-FACE SYNTAX

RICHARD FINK
MO’ BULLETPROOFER

EVERYTHING ABOUT
WEBFONTS.INFO

SLOW DOWN
SMOOTH OPERATOR!

HINTING. AND JUST
LIKE THAT... IT’S GONE

ANTIALIASING
RENDER ENGINES
HAVE MERCY!

GLYPH MAPS
POOR UTF-8 SUPPORT

FONT FALLBACKS!
FONT-FAMILY:
“Skolar”, Georgia, Serif;

IF IT LOOKS LIKE
ROCKET SCIENCE,
IT’S BECAUSE IT’S
EXACTLY WHAT
IT’S IS!

TAKEAWAYS

DESIGN FOR
RESPONSIVILITY

“MOBILE WEB”
IS NOT JUST
IPHONE + ANDORID

INPUT IS NOT
LIMITED TO
KEYBOARD

ALWAYS THINK
ABOUT ELEGANT
“FALLBACKS”

THANK YOU.
ALL CREDITS
ACTUALLY GO TO
LUKE WROBLEWSKI
MOBILE FIRST!
PAUL IRISH
SQUEEZING THE BEST OUT OF WEBFONTS
ETHAN MARCOTTE
RESPONSIVE WEB DESIGN
BRYAN RIEGER
RETHINKING THE MOBILE WEB

http://www.flickr.com/photos/36274330@N02/4203379108/sizes/l/in/photostream/
http://www.d.umn.edu/lib/bible/images/gutenberg.jpg
http://www.flickr.com/photos/simon-1123581321/3689634346/sizes/o/in/photostream/
http://www.flickr.com/photos/bas-boerman/4518138420/sizes/o/in/photostream/
http://www.phawker.com/wp-content/uploads/2007/04/fat-guy.jpg
http://www.lukew.com/resources/articles/TodaysWeb_09302010.pdf
http://www.flickr.com/photos/superpope/4831516573/
http://www.flickr.com/photos/3gstore/4745626595/sizes/l/in/photostream/
http://www.ifixit.com/Teardown/iPhone-4-Gyroscope-Teardown/3156/1
http://technabob.com/blog/2010/01/27/apple-ipad-tablet-price-release-date-specs/
http://www.flickr.com/photos/speednutdave/4169880384/sizes/l/in/photostream/
http://www.writingfordesigners.com/wp-content/uploads/2009/03/volkswagen_lemon_hires1.
http://saint-michael.trap17.com/blog/wp-content/uploads/2009/03/220618.jpg
http://www.wallpaperbase.com/wallpapers/movie/starwars/star_wars_1.jpg
http://www.flickr.com/photos/superpope/4835050286/sizes/l/in/photostream/
http://www.austincriminallawjournal.com/uploads/image/usual_suspects_0(1).jpg
http://www.flickr.com/photos/blogumentary/3116088570/sizes/o/in/photostream/
http://www.flickr.com/photos/pnnl/4773054326/sizes/l/in/photostream/
http://www.flickr.com/photos/ooocha/3086193768/sizes/o/in/photostream/
http://files.stpaulqc.org/uploaded_images/coffee-cup-765291.jpg
IMAGES CREDITS

Responsive Web Design & Webfonts

Recommended

Recommended

More Related Content

Similar to Responsive Web Design & Webfonts

Similar to Responsive Web Design & Webfonts (20)

Recently uploaded

Recently uploaded (20)

Responsive Web Design & Webfonts