We're not designing posters, here!

CODEBITS IV WE ARE NOT DESIGNING POSTERS HERE BROUGHT TO YOU BY ANDRÉ LUÍS @andr3 ncb Friday, November 12, 2010

INTRODUCTION Friday, November 12, 2010

INTRODUCTION who am I? I have this thing for sticking my finger in pointy monuments. I’m all over the web. Check http://id.andr3.net or @andr3. Friday, November 12, 2010

INTRODUCTION who am I? Been speaking on a variety of topics, including... JavaScript microformats HTML5 CSS more at http://slideshare.net/andr3 Friday, November 12, 2010

INTRODUCTION What’s about to go down... Friday, November 12, 2010

INTRODUCTION What’s about to go down... I’m here to make you a proposition… Friday, November 12, 2010

INTRODUCTION What’s about to go down... By standing on the shoulders of giants I’ll propose we take our websites dead serious Friday, November 12, 2010

INTRODUCTION What’s about to go down... First... I have nothing against Posters Friday, November 12, 2010

INTRODUCTION What’s about to go down... But they’re static, they’re not hypertext. The web is dynamic and interactive. Friday, November 12, 2010

Evolution of Webdesign A quick history lesson Friday, November 12, 2010

Evolution of Webdesign A quick history lesson 1991 The CERN years Friday, November 12, 2010

Evolution of Webdesign A quick history lesson tables for layout & framesets 1998 1991 The CERN years Friday, November 12, 2010

Evolution of Webdesign A quick history lesson tables for layout & framesets 1998 1991 2003 & The CERN Designing with CSS years web standards Zen Garden by J. Zeldman by Dave Shea Friday, November 12, 2010

Evolution of Webdesign A quick history lesson tables for layout & framesets microformats 1998 2005 1991 2003 & The CERN Designing with CSS years web standards Zen Garden by J. Zeldman by Dave Shea Friday, November 12, 2010

Evolution of Webdesign A quick history lesson tables for layout & framesets microformats 1998 2005 1991 2003 2007 CSS3 features become more widely adopted & The CERN Designing with CSS years web standards Zen Garden by J. Zeldman by Dave Shea Friday, November 12, 2010

Evolution of Webdesign A quick history lesson tables for layout & framesets microformats 1998 2005 1991 2003 2007 CSS3 features become more widely adopted & 2009 HTML5 features become more The CERN Designing with CSS widely adopted years web standards Zen Garden by J. Zeldman by Dave Shea Friday, November 12, 2010

Evolution of Webdesign A quick history lesson tables for layout & framesets microformats What now? 1998 2005 2010 1991 2003 2007 CSS3 features become more widely adopted & 2009 HTML5 features become more The CERN Designing with CSS widely adopted years web standards Zen Garden by J. Zeldman by Dave Shea Friday, November 12, 2010

Evolution of Webdesign A quick history lesson Role of the Webdesigner 1991 Write HTML. 1998 Draw boxed layouts & write HTML. ... 2010 Design layout, do Information Architecture, cover every interaction, content strategy, etc. Friday, November 12, 2010

The Web is dead. Long live the Internet. http://www.wired.com/magazine/2010/08/ff_webrip/ http://6s0t.sl.pt Friday, November 12, 2010

Evolution of Webdesign A quick history lesson Every year has been The Year of the Mobile. Friday, November 12, 2010

Evolution of Webdesign A quick history lesson Every year has been The Year of the Mobile. source: AdMob Operating System Share, May 2010. Friday, November 12, 2010

Evolution of Webdesign A quick history lesson User habits vary with platform. Friday, November 12, 2010

Evolution of Webdesign A quick history lesson User habits vary with platform. source: Gartner Q1 2010: Market Share. source: AdMob Operating System Share, May 2010. Friday, November 12, 2010

Evolution of Webdesign A quick history lesson Myriads of browsers/user-agents! Feature phones & Smartphones Boxee box & other STB Netbooks Desktop PSP & other portable gaming devices iPhone, iPod touch & iPad & more... Friday, November 12, 2010

Evolution of Webdesign A quick history lesson Why target one resolution out of these? Friday, November 12, 2010

Flexibility flex·i·ble (adj.) capable of bending easily without breaking. khalid-almasoud http://6s4a.sl.pt Friday, November 12, 2010

Flexibility flex·i·ble (adj.) capable of bending easily without breaking. standing on the shoulders of: Dan Cederholm khalid-almasoud http://6s4a.sl.pt http://simplebits.com Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? SAPO Login http://login.sapo.pt/ http://6s3e.sl.pt 800x600 1024x768 Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? SAPO Login http://login.sapo.pt/ http://6s3e.sl.pt ﬂoat:left; margin-left: 27em; width: 26em; 800x600 1024x768 Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? TIP Think proportionally instead of statically. font-size: 16px; (base) target: 22px; Heading 1 font-size: 22/16 = 1.375em; Heading 2 target: 18px; font-size: 18/16 = 1.125em; target: 12px; Heading 3 font-size: 12/16 = 0.75em; Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? SAPO.pt http://www.sapo.pt/ http://b.kp.sl.pt Size: normal Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? SAPO.pt http://www.sapo.pt/ http://b.kp.sl.pt Size: normal +2 Friday, November 12, 2010

seandreilinger http://6s4b.sl.pt Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? Off by default Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? mytvshows http://mytvshows.org http://6siq.sl.pt Size: normal Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? mytvshows http://mytvshows.org http://6siq.sl.pt Size: +2 Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? mytvshows http://mytvshows.org http://6siq.sl.pt Tamanho: +2 txt only Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? iGive http://igive.sapo.pt http://6siq.sl.pt ✓ x ✓ Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? TIP Avoid setting widths on both parent & child elements. x ✓ width: 500px; width: 500px; width: 480px; margin-right: 20px; Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? UX SAPO http://ux.sapo.pt http://6suv.sl.pt x ✓ Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? RULE Don’t set a height unless you really have to. Content dictates height. Friday, November 12, 2010

Responsive Design re·spon·sive (adj.) 1. reacting or replying quickly to a suggestion, etc. 2. responsive architecture: spaces responding to presence of people passing through them. standing on the shoulders of: Ethan Marcotte http://unstoppablerobotninja.com Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Remember the amount of user-agents? width? aspect-ratio? monochrome? height? device-aspect-ratio? resolution? device-width? color? scan? device-height? color-index? grid? orientation? Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? You can query all of them! Remember this? <link rel="stylesheet" type="text/css" href="style.css" media="screen"> y! er a qu t’s Tha Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? You can query all of them! Remember this? <link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-device-width:480px)"> CS S3 Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? You can query all of them! Remember this? @media screen and (max-device-width: 480px) { .column { ﬂoat: none; } } CS S3 Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? So, what can we do? @media screen and (orientation: landscape { orientation: landscape) .column { ﬂoat: none; } } Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Can I use it now?! When can I use... http://caniuse.com http://6tnl.sl.pt Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Can I use it now?! CSS3-media-queries.js http://code.google.com/p/css3-mediaqueries-js/ http://6tns.sl.pt Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Can I use it now?! Do you really need it? CSS3-media-queries.js http://code.google.com/p/css3-mediaqueries-js/ http://6tns.sl.pt Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Avoid the mistakes of the One Web... DEGRADE TO Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Avoid the mistakes of the One Web... DEGRADE TO ENHANCE TO Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Steps to make our sites Responsive™ Adapt layout to different environments. ✓ 1 (through media-queries) 2 3 Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Steps to make our sites Responsive™ Adapt layout to different environments. ✓ 1 (through media-queries) 2 Fluid Grids (if you’re using them) 3 Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Steps to make our sites Responsive™ Adapt layout to different environments. ✓ 1 (through media-queries) 2 Fluid Grids (if you’re using them) 3 Flexible Images Friday, November 12, 2010

Responsive Webdesign Fluid grids from “Fluid grids” — A List Apart #279 http://www.alistapart.com/articles/fluidgrids/ http://6to8.sl.pt Friday, November 12, 2010

Responsive Webdesign Fluid grids 700px; 144px; 988px from “Fluid grids” — A List Apart #279 http://www.alistapart.com/articles/fluidgrids/ http://6to8.sl.pt Friday, November 12, 2010

Responsive Webdesign Fluid grids 700px; 144px; 988px width: 700px; margin-left: 144px; from “Fluid grids” — A List Apart #279 http://www.alistapart.com/articles/fluidgrids/ http://6to8.sl.pt Friday, November 12, 2010

Responsive Webdesign Fluid grids 700px; 144px; 988px width: 700px; margin-left: 144px; 988/700 = 0.7085 988/144 = 0.14575 from “Fluid grids” — A List Apart #279 http://www.alistapart.com/articles/fluidgrids/ http://6to8.sl.pt Friday, November 12, 2010

Responsive Webdesign Fluid grids 700px; 144px; 988px width: 700px; width: 70.85%; margin-left: 144px; margin-left: 14.575%; 988/700 = 0.7085 988/144 = 0.14575 from “Fluid grids” — A List Apart #279 http://www.alistapart.com/articles/fluidgrids/ http://6to8.sl.pt Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Steps to make our sites Responsive™ Adapt layout to different environments. ✓ 1 (through media-queries) 2 Fluid Grids (if you’re using them) ✓ 3 Flexible Images Friday, November 12, 2010

Responsive Webdesign Flexible Images from “Responsive Web Design” — A List Apart #279 http://www.alistapart.com/articles/responsive-web-design/ http://350m.sl.pt Friday, November 12, 2010

Responsive Webdesign Flexible Images img { display: block; max-width: 100%; } from “Responsive Web Design” — A List Apart #279 http://www.alistapart.com/articles/responsive-web-design/ http://350m.sl.pt Friday, November 12, 2010

Responsive Webdesign Flexible Images dConstruct 2010 http://2010.dconstruct.org/ http://3q9e.sl.pt Friday, November 12, 2010

Responsive Webdesign Flexible Images .top_row { position: absolute; left: -10%; } .bottom_row { position: absolute; left: -32%; } dConstruct 2010 http://2010.dconstruct.org/ http://3q9e.sl.pt Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Steps to make our sites Responsive™ Adapt layout to different environments. ✓ 1 (through media-queries) 2 Fluid Grids (if you’re using them) ✓ 3 Flexible Images ✓ Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Final thoughts on Responsive Webdesign™ “That’s the thing about responsive web design: you can’t just think of it as a sprinkle of pixie dust that can be applied to any site. It requires the right mindset. It requires that sites be built on solid foundations of best practice. If those foundations are in place—a flexible layout, flexible images, optimised performance—then responsive web design can work its magic.” Jeremy Keith in “A responsive mind” http://adactio.com/journal/1696/ http://6tqn.sl.pt Friday, November 12, 2010

Appropriate typefaces ap·pro·pri·ate (adj.) suitable or fitting for a particular purpose. biblarte http://6u8a.sl.pt Friday, November 12, 2010

Appropriate Typefaces Using the right ones and not the available ones Back in the day, print shops had boxes of type. Designers picked the ones they needed, not what the readers had around their house. The web has finally caught up! Friday, November 12, 2010

Appropriate Typefaces Using the right ones and not the available ones @font-face { font-family: 'Gotham'; src: url('gotham.eot'); src: local('☺'), url('gotham.woff') format('woff'), url('gotham.ttf') format('truetype'); } Bulletproof Font-face by Paul Irish http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://6tts.sl.pt Friday, November 12, 2010

Appropriate Typefaces Using the right ones and not the available ones Just because you can, doesn’t mean you should. Heads up: Render issues on all browsers in Windows. Performance: more bytes to download. Character map: make sure the typeface supports the entire set of latin chars (or your language, for that matter). Friday, November 12, 2010

Appropriate Typefaces Using the right ones and not the available ones TIP Avoid solutions based in JavaScript. Host the files if possible. fontsquirrel.com fontspring.com fontdeck.com Friday, November 12, 2010

In review... Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? TIP Think proportionally instead of statically. font-size: 16px; (base) target: 22px; Heading 1 font-size: 22/16 = 1.375em; Heading 2 target: 18px; font-size: 18/16 = 1.125em; target: 12px; Heading 3 font-size: 12/16 = 0.75em; Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? TIP Avoid setting widths on both parent & child elements. x ✓ width: 500px; width: 500px; width: 480px; margin-right: 20px; Friday, November 12, 2010

Flexibility What is it, exactly & why we need it? RULE Don’t set a height unless you really have to. Content dictates height. Friday, November 12, 2010

Responsive Webdesign What can our websites react to & how? Steps to make our sites Responsive™ Adapt layout to different environments. ✓ 1 (through media-queries) 2 Fluid Grids (if you’re using them) ✓ 3 Flexible Images ✓ Friday, November 12, 2010

Appropriate Typefaces Using the right ones and not the available ones TIP Avoid solutions based in JavaScript. Host the files if possible. fontsquirrel.com fontspring.com fontdeck.com Friday, November 12, 2010

Questions? Friday, November 12, 2010

THE END VI STIBEDOC TON ERA EW GNINGISED SRETSOP Thank you for your time. EREH Download this presentation (PDF) http://talks.andr3.net/2010/codebits/posters.pdf http://6tuv.sl.pt YB UOY OT THGUORB Download this presentation r(.key) A SÍUL ÉRDN 3 dna@ http://talks.andr3.net/2010/codebits/posters.key bcn http://6tvj.sl.pt Friday, November 12, 2010 cb

Photo Credit http://www.flickr.com/photos/jaredvolkl/4835926861/sizes/o/in/photostream/ http://www.flickr.com/photos/kk/4167601712/in/photostream/ http://www.flickr.com/photos/seandreilinger/2326448445/ http://www.flickr.com/photos/khalid-almasoud/474399662 http://krdesign.deviantart.com/art/iPad-152019976 http://krdesign.deviantart.com/art/Wallpaper-Displays-179148139?q=gallery:krdesign/23892197&qo=1 http://sekkyumu.deviantart.com/art/PSP-Go-161002502?q=boost:popular+psp+icons&qo=27 http://browse.deviantart.com/?qh=&section=&q=netbook+icon#/d1m6hiy C http://www.flickr.com/photos/jaredvolkl/4835926861/sizes/o/in/photostream/ http://www.flickr.com/photos/biblarte/2709389469/ Friday, November 12, 2010

http://webdemais.com.br	959
http://lanyrd.com	22
http://lanyrd.dev	3
http://feeds.feedburner.com	1

We're not designing posters, here!

by André Luís on Nov 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 985

Statistics

We’re not designing posters, here! — Presentation Transcript