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... 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
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
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
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
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
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
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
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 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. source: Gartner Q1 2010: Market Share. source: AdMob Operating System Share, May 2010. Friday, November 12, 2010
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
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
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
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? You can query all of them! Remember this? href="style.css" media="screen"> That’s a query! Friday, November 12, 2010
Responsive Webdesign What can our websites react to & how? You can query all of them! Remember this? href="style.css" media="screen and (max-device-width:480px)"> CSS3 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 { float: none; } } CSS3 Friday, November 12, 2010
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
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?! 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
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
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
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
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 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
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 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 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
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 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
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
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™ 1 2 3 Adapt layout to different environments. (through media-queries) ✓ Fluid Grids (if you’re using them) 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
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
andr3
uxaustralia
goodpatch
hansolo21
getonbrd
aicocco
visional_engineering_and_design
kenjiclown5
blakedg95
muture
shoty_k2
uxyall
transit_kix
pauljervisheath
hatefulcrawdad
speakerdeck
zakiyama
quramy
smashingmag
tanoku
morganepeng
philhawksworth
colly
addyosmani
reverentgeek