Responsive Web Design & Webfonts

&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” ”

“ 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” ”

RESPONSIVEARCHITECTURE

RESPONSIVESPACES

RESPONSIVEOBJECTS

WEBDESIGN“Dirty little lie”

1024x768

HOW BIG ISOUR CANVAS?

HOW TO DESIGNFOR ALL THIS?

ONE SIZEDOES NOTFIT ALL

GRID & TYPE

ETHAN MARCOTTETHE BAKER STREET

INQUIRER

ETHAN MARCOTTEROBOT-OR-NOT

INFORMATIONARCHITECTS.JP

TRADITIONALAPPROACH

“DESKTOP”WEBSITE

+@MEDIA QUERIES= MOBILE WEBSITE

+@MEDIA QUERIES= FAIL

LUKEWROBLEWSKI

DIFFERENTAPPROACH

MOBILEWEBSITE

+@MEDIA QUERIES= DESKTOP WEBSITE

+@MEDIA QUERIES= PROGRESSIVE ENHANCEMENT

JEREMYKEITH

HARDWARE

DEVICEORIENTATION

TOUCHSCREEN

SMALLERKEYBOARD

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

“VOICE AS INPUT”

“LOCATION AS INPUT”

BRYAN RIEGERRETHINKING THE

MOBILE WEB

FALLBACKSMODERNIZR

RICH WEBTYPOGRAPHYIN 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 di"erent fonts on print.—Roger Black, Typecon Webfonts Panel ”

sIFRFLASH + JS

TYPEFACE.JSIMAGES + JS

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

FACELIFT / FLIRIMAGES + JS

@FONTFACEINNOVATOR

FONT = SOFTWAREEULA

“ 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” ”

.WTF?!

CURRENT SITUATION.EOT OR .OTF/.TTF

STANDARD.WEBFONT > .webOTF > .WOFF

ALTERNATIVESTYPEKIT (400+)

ALTERNATIVES FONTDECK (300+)

ALTERNATIVESGOOGLE (23)

ALTERNATIVESJUST ANOTHER FOUNDRY (23)

ALTERNATIVESSELF-HOSTING

SELF-HOSTINGFONT FONT

SELF-HOSTINGFONTSPRING

PAUL IRISHBULLETPROOF @FONT-FACE SYNTAX

RICHARD FINKMO’ BULLETPROOFER

EVERYTHING ABOUTWEBFONTS.INFO

SLOW DOWNSMOOTH OPERATOR!

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

ANTIALIASINGRENDER ENGINESHAVE MERCY!

GLYPH MAPSPOOR UTF-8 SUPPORT

FONT FALLBACKS!FONT-FAMILY:

“Skolar”, Georgia, Serif;

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

TAKEAWAYS

DESIGN FORRESPONSIVILITY

“MOBILE WEB” IS NOT JUSTIPHONE + ANDORID

INPUT IS NOT LIMITED TOKEYBOARD

ALWAYS THINK ABOUT ELEGANT“FALLBACKS”

THANK YOU.ALL CREDITSACTUALLY GO TOLUKE WROBLEWSKIMOBILE FIRST!

PAUL IRISHSQUEEZING THE BEST OUT OF WEBFONTS

ETHAN MARCOTTERESPONSIVE WEB DESIGN

BRYAN RIEGERRETHINKING THE MOBILE WEB

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

Responsive Web Design & Webfonts

Design

Transcript of Responsive Web Design & Webfonts

SolTech - Responsive Design and Responsive Content

Course Outline - Responsive Web Design · responsive web design course outline. responsive web design psd to responsive website bootstrap 4.4 javascript & jquery wordpress mailchimp

Techniques for Flexible Responsive Visualization Design · alization, visualization authoring, and responsive web design. Responsive Web Design While responsive visualization is still

content Authoring For Responsive Design - MadCap …assets.madcapsoftware.com/webinar/Presentation... · Content Authoring for Responsive Design . ... • Responsive Design ... RESPONSIVE

Responsive Design - Magento · Responsive Design . 16-fold growth in responsive ecommerce . Responsive Design is a won debate •3 types of audience •Tried and tested base responsive

Responsive Designchochev.eu › html › 6. Responsive-Design-and-animations.pdf4 RESPONSIVE DESIGN •Responsive design (adaptive design) is an approach to optimize the viewing experience

Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design

Webfonts and Web Typography

RESPONSIVE eLEARNING - iitd.ie Centre/responsive-elearning-design... · 2.4: Benefits of Responsive eLearning Design 21 ... The term 'responsive web design' (RWD) was coined by ,

Squeezing The Best Out Of Webfonts

Webfonts: Demystified

Responsive Responsive Design

Responsive Design

Being Responsive to Responsive Web Design

Faster, and (Coincidentally) More Secure Webfonts

Webfonts: The Hype about Type

Responsive Website Design | Responsive Design

Responsive eLearning Design and Developmentsifytechnologies.com/.../2017/06/Responsive-Design-and-Development... · Responsive eLearning Design and Development ... Enter Responsive

Advancements in Web Typography (WebFonts and WOFF)

webfonts & @font-face :: in brief