&RESPONSIVEWEBDESIGN

WEBFONTS

Friday, October 29, 2010

“ The control which designers know in the print medium, and o!en 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” ”

Friday, October 29, 2010

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

Friday, October 29, 2010

RESPONSIVEARCHITECTURE

Friday, October 29, 2010

RESPONSIVESPACES

Friday, October 29, 2010

RESPONSIVESPACES

Friday, October 29, 2010

RESPONSIVEOBJECTS

Friday, October 29, 2010

WEBDESIGN“Dirty little lie”

1024x768

Friday, October 29, 2010

HOW BIG ISOUR CANVAS?

Friday, October 29, 2010

Friday, October 29, 2010

HOW TO DESIGNFOR ALL THIS?

Friday, October 29, 2010

ONE SIZEDOES NOTFIT ALL

Friday, October 29, 2010

GRID & TYPE

Friday, October 29, 2010

ETHAN MARCOTTETHE BAKER STREET

INQUIRER

Friday, October 29, 2010

ETHAN MARCOTTEROBOT-OR-NOT

Friday, October 29, 2010

INFORMATIONARCHITECTS.JP

Friday, October 29, 2010

TRADITIONALAPPROACH

Friday, October 29, 2010

“DESKTOP”WEBSITE

Friday, October 29, 2010

+@MEDIA QUERIES= MOBILE WEBSITE

Friday, October 29, 2010

+@MEDIA QUERIES= FAIL

Friday, October 29, 2010

LUKEWROBLEWSKI

Friday, October 29, 2010

DIFFERENTAPPROACH

Friday, October 29, 2010

MOBILEWEBSITE

Friday, October 29, 2010

+@MEDIA QUERIES= DESKTOP WEBSITE

Friday, October 29, 2010

+@MEDIA QUERIES= PROGRESSIVE ENHANCEMENT

Friday, October 29, 2010

JEREMYKEITH

Friday, October 29, 2010

HARDWARE

Friday, October 29, 2010

DEVICEORIENTATION

Friday, October 29, 2010

TOUCHSCREEN

Friday, October 29, 2010

TOUCHSCREEN

Friday, October 29, 2010

SMALLERKEYBOARD

Friday, October 29, 2010

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

Friday, October 29, 2010

“VOICE AS INPUT”

Friday, October 29, 2010

“LOCATION AS INPUT”

Friday, October 29, 2010

Friday, October 29, 2010

BRYAN RIEGERRETHINKING THE

MOBILE WEB

Friday, October 29, 2010

Friday, October 29, 2010

FALLBACKSMODERNIZR

Friday, October 29, 2010

RICH WEBTYPOGRAPHYIN SEARCH OF THE HOLY GRAIL!

Friday, October 29, 2010

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

Friday, October 29, 2010

sIFRFLASH + JS

Friday, October 29, 2010

TYPEFACE.JSIMAGES + JS

Friday, October 29, 2010

CUFONTTF/OTF > SVG > WML Paths > JS/JSON

Friday, October 29, 2010

FACELIFT / FLIRIMAGES + JS

Friday, October 29, 2010

Friday, October 29, 2010

@FONTFACEINNOVATOR

Friday, October 29, 2010

FONT = SOFTWAREEULA

Friday, October 29, 2010

“ Seriously. Fuck them. They still think they’re in the business of shu#ing 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” ”

Friday, October 29, 2010

.WOFF

Friday, October 29, 2010

.EOT

Friday, October 29, 2010

.OTF

Friday, October 29, 2010

.TTF

Friday, October 29, 2010

.WTF?!

Friday, October 29, 2010

CURRENT SITUATION.EOT OR .OTF/.TTF

Friday, October 29, 2010

STANDARD.WEBFONT > .webOTF > .WOFF

Friday, October 29, 2010

ALTERNATIVESTYPEKIT (400+)

Friday, October 29, 2010

ALTERNATIVES FONTDECK (300+)

Friday, October 29, 2010

ALTERNATIVESGOOGLE (23)

Friday, October 29, 2010

ALTERNATIVESJUST ANOTHER FOUNDRY (23)

Friday, October 29, 2010

ALTERNATIVESSELF-HOSTING

Friday, October 29, 2010

SELF-HOSTINGFONT FONT

Friday, October 29, 2010

SELF-HOSTINGFONTSPRING

Friday, October 29, 2010

PAUL IRISHBULLETPROOF @FONT-FACE SYNTAX

Friday, October 29, 2010

RICHARD FINKMO’ BULLETPROOFER

Friday, October 29, 2010

EVERYTHING ABOUTWEBFONTS.INFO

Friday, October 29, 2010

SLOW DOWNSMOOTH OPERATOR!

Friday, October 29, 2010

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

Friday, October 29, 2010

ANTIALIASINGRENDER ENGINESHAVE MERCY!

Friday, October 29, 2010

GLYPH MAPSPOOR UTF-8 SUPPORT

Friday, October 29, 2010

FONT FALLBACKS!FONT-FAMILY:

“Skolar”, Georgia, Serif;

Friday, October 29, 2010

IF IT LOOKS LIKEROCKET SCIENCE,IT’S BECAUSE IT’SEXACTLY WHATIT’S IS!

Friday, October 29, 2010

TAKEAWAYS

Friday, October 29, 2010

DESIGN FORRESPONSIVILITY

Friday, October 29, 2010

“MOBILE WEB” IS NOT JUSTIPHONE + ANDORID

Friday, October 29, 2010

INPUT IS NOT LIMITED TOKEYBOARD

Friday, October 29, 2010

ALWAYS THINK ABOUT ELEGANT“FALLBACKS”

Friday, October 29, 2010

THANK YOU.ALL CREDITSACTUALLY GO TOLUKE WROBLEWSKIMOBILE FIRST!

PAUL IRISHSQUEEZING THE BEST OUT OF WEBFONTS

ETHAN MARCOTTERESPONSIVE WEB DESIGN

BRYAN RIEGERRETHINKING THE MOBILE WEB

Friday, October 29, 2010

http://www.flickr.com/photos/36274330@N02/4203379108/sizes/l/in/photostream/http://www.d.umn.edu/lib/bible/images/gutenberg.jpghttp://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.jpghttp://www.lukew.com/resources/articles/TodaysWeb_09302010.pdfhttp://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/1http://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.jpghttp://saint-michael.trap17.com/blog/wp-content/uploads/2009/03/220618.jpghttp://www.wallpaperbase.com/wallpapers/movie/starwars/star_wars_1.jpghttp://www.flickr.com/photos/superpope/4835050286/sizes/l/in/photostream/http://www.austincriminallawjournal.com/uploads/image/usual_suspects_0(1).jpghttp://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/co!ee-cup-765291.jpg

IMAGES CREDITS

Friday, October 29, 2010