Upgrade to Pro — share decks privately, control downloads, hide ads and more …

We're not designing posters, here!

André Luís
September 27, 2011

We're not designing posters, here!

Talk given at Codebits 2010. Video available at http://videos.sapo.pt/wy1ZFfifIG6PFBAcWgWh

André Luís

September 27, 2011
Tweet

More Decks by André Luís

Other Decks in Design

Transcript

  1. WE ARE NOT DESIGNING POSTERS H E R E BROUGHT

    TO YOU BY ANDRÉ LUÍS CODEBITS IV cb n @andr3 Friday, November 12, 2010
  2. INTRODUCTION Friday, November 12, 2010

  3. 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
  4. 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
  5. INTRODUCTION What’s about to go down... Friday, November 12, 2010

  6. INTRODUCTION What’s about to go down... I’m here to make

    you a proposition… Friday, November 12, 2010
  7. INTRODUCTION What’s about to go down... By standing on the

    shoulders of giants I’ll propose we take our websites d e a d s e r i o u s Friday, November 12, 2010
  8. INTRODUCTION What’s about to go down... First... I have nothing

    against P o s t e r s Friday, November 12, 2010
  9. 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
  10. Evolution of Webdesign A quick history lesson Friday, November 12,

    2010
  11. Evolution of Webdesign A quick history lesson 1991 The CERN

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

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

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

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

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

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

    years 1998 tables for layout & framesets 2003 Designing with web standards by J. Zeldman CSS Zen Garden by Dave Shea & 2007 CSS3 features become more widely adopted 2010 What now? 2005 microformats 2009 HTML5 features become more widely adopted Friday, November 12, 2010
  18. 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
  19. 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
  20. Evolution of Webdesign A quick history lesson Every year has

    been The Year of the Mobile. Friday, November 12, 2010
  21. 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
  22. 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
  23. Evolution of Webdesign A quick history lesson User habits vary

    with platform. Friday, November 12, 2010
  24. 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
  25. Evolution of Webdesign A quick history lesson Myriads of browsers/user-agents!

    Feature phones & Smartphones iPhone, iPod touch & iPad PSP & other portable gaming devices Boxee box & other STB Netbooks Desktop & more... Friday, November 12, 2010
  26. Why target one resolution out of these? Evolution of Webdesign

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

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

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

    A quick history lesson Friday, November 12, 2010
  30. Flexibility flex·i·ble (adj.) capable of bending easily without breaking. khalid-almasoud

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

    http://6s4a.sl.pt standing on the shoulders of: Dan Cederholm http://simplebits.com Friday, November 12, 2010
  32. Flexibility What is it, exactly & why we need it?

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

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

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

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

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

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

    why we need it? SAPO.pt http://www.sapo.pt/ http://b.kp.sl.pt Friday, November 12, 2010
  39. seandreilinger http://6s4b.sl.pt Friday, November 12, 2010

  40. Flexibility What is it, exactly & why we need it?

    Off by default Friday, November 12, 2010
  41. Size: normal Flexibility What is it, exactly & why we

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

    need it? mytvshows http://mytvshows.org http://6siq.sl.pt Friday, November 12, 2010
  43. 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
  44. Flexibility What is it, exactly & why we need it?

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

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

    UX SAPO http://ux.sapo.pt http://6suv.sl.pt x ✓ Friday, November 12, 2010
  47. 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
  48. 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
  49. Responsive Webdesign What can our websites react to & how?

    Remember the amount of user-agents? width? height? device-width? device-height? orientation? aspect-ratio? device-aspect-ratio? color? color-index? monochrome? resolution? scan? grid? Friday, November 12, 2010
  50. 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"> That’s a query! Friday, November 12, 2010
  51. 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)"> CSS3 Friday, November 12, 2010
  52. 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 { float: none; } } CSS3 Friday, November 12, 2010
  53. Responsive Webdesign What can our websites react to & how?

    So, what can we do? @media screen and (orientation: landscape) { .column { float: none; } } orientation: landscape Friday, November 12, 2010
  54. 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
  55. 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
  56. 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 Do you really need it? Friday, November 12, 2010
  57. Responsive Webdesign What can our websites react to & how?

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

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

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

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

    Steps to make our sites Responsive™ 1 2 3 Adapt layout to different environments. (through media-queries) ✓ Fluid Grids (if you’re using them) Flexible Images Friday, November 12, 2010
  62. 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
  63. Responsive Webdesign Fluid grids from “Fluid grids” — A List

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

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

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

    Apart #279 http://www.alistapart.com/articles/fluidgrids/ http://6to8.sl.pt width: 700px; margin-left: 144px; width: 70.85%; margin-left: 14.575%; 988/700 = 0.7085 988/144 = 0.14575 144px; 988px 700px; Friday, November 12, 2010
  67. ✓ Responsive Webdesign What can our websites react to &

    how? Steps to make our sites Responsive™ 1 2 3 Adapt layout to different environments. (through media-queries) ✓ Fluid Grids (if you’re using them) Flexible Images Friday, November 12, 2010
  68. 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
  69. 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
  70. Responsive Webdesign Flexible Images from “Responsive Web Design” — A

    List Apart #279 http://www.alistapart.com/articles/responsive-web-design/ http://350m.sl.pt img { display: block; max-width: 100%; } Friday, November 12, 2010
  71. Responsive Webdesign Flexible Images dConstruct 2010 http://2010.dconstruct.org/ http://3q9e.sl.pt Friday, November

    12, 2010
  72. Responsive Webdesign Flexible Images dConstruct 2010 http://2010.dconstruct.org/ http://3q9e.sl.pt .top_row {

    position: absolute; left: -10%; } .bottom_row { position: absolute; left: -32%; } Friday, November 12, 2010
  73. ✓ ✓ Responsive Webdesign What can our websites react to

    & how? Steps to make our sites Responsive™ 1 2 3 Adapt layout to different environments. (through media-queries) ✓ Fluid Grids (if you’re using them) Flexible Images Friday, November 12, 2010
  74. 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
  75. Appropriate typefaces ap·pro·pri·ate (adj.) suitable or fitting for a particular

    purpose. biblarte http://6u8a.sl.pt Friday, November 12, 2010
  76. 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
  77. 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
  78. 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
  79. 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
  80. In review... Friday, November 12, 2010

  81. Flexibility What is it, exactly & why we need it?

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

    TIP Avoid setting widths on both parent & child elements. width: 500px; width: 480px; width: 500px; margin-right: 20px; x ✓ Friday, November 12, 2010
  83. 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
  84. ✓ ✓ Responsive Webdesign What can our websites react to

    & how? Steps to make our sites Responsive™ 1 2 3 Adapt layout to different environments. (through media-queries) ✓ Fluid Grids (if you’re using them) Flexible Images Friday, November 12, 2010
  85. 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
  86. Questions? Friday, November 12, 2010

  87. WE ARE NOT DESIGNING POSTERS H E R E BROUGHT

    TO YOU BY ANDRÉ LUÍS cb n @andr3 CODEBITS IV THE END Thank you for your time. Download this presentation (PDF) http://talks.andr3.net/2010/codebits/posters.pdf http://6tuv.sl.pt cb Download this presentation (.key) http://talks.andr3.net/2010/codebits/posters.key http://6tvj.sl.pt Friday, November 12, 2010
  88. 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

    http://www.flickr.com/photos/jaredvolkl/4835926861/sizes/o/in/photostream/ http://www.flickr.com/photos/biblarte/2709389469/ C Friday, November 12, 2010