Upload
natan-nikolic
View
2.142
Download
0
Tags:
Embed Size (px)
DESCRIPTION
I was recently invited to speak about responsive web design and webfonts at Slovenian H5C3 conference. - More on http://bit.ly/aN4rE8
Citation preview
&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