We're not designing posters, here!

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

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