3. INTRODUCTION
whoamI?
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
whoamI?
Been speaking on a variety of topics, including...
JavaScript microformats HTML5 CSS
more at http://slideshare.net/andr3
Friday, November 12, 2010
14. Evolution of Webdesign
Aquickhistorylesson
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
Aquickhistorylesson
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
Aquickhistorylesson
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
Aquickhistorylesson
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
Aquickhistorylesson
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
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
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
Whatcanourwebsitesreactto&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
74. Responsive Webdesign
Whatcanourwebsitesreactto&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
77. Appropriate Typefaces
Usingtherightonesandnottheavailableones
@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
Usingtherightonesandnottheavailableones
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