We're not designing posters, here!

WE ARE NOT
DESIGNING
POSTERS
H E R E
BROUGHT TO YOU BY
ANDRÉ LUÍS
CODEBITS IV
cbn
@andr3
Friday, November 12, 2010

INTRODUCTION

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.

INTRODUCTION
whoamI?
Been speaking on a variety of topics, including...
JavaScript microformats HTML5 CSS
more at http://slideshare.net/andr3

INTRODUCTION
What’sabouttogodown...

INTRODUCTION
I’m here to make you a proposition…

INTRODUCTION
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

INTRODUCTION
First... I have
nothing against
P o s t e r s

INTRODUCTION
But they’re static,
they’re not hypertext.
The web is dynamic
and interactive.

Evolution of Webdesign
Aquickhistorylesson

Aquickhistorylesson
1991
The CERN
years

Aquickhistorylesson
1991
The CERN
years
1998
tables for layout
& framesets

Aquickhistorylesson
1991
The CERN
years
1998
tables for layout
& framesets
2003
Designing with
web standards
by J. Zeldman
CSS
Zen Garden
by Dave Shea
&

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

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

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

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

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.

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

Aquickhistorylesson
Every year has been The Year of the Mobile.

Aquickhistorylesson
Every year has been The Year of the Mobile.
source: AdMob Operating System Share, May 2010.

Aquickhistorylesson
User habits vary with platform.

Aquickhistorylesson
User habits vary with platform.
source: Gartner Q1 2010: Market Share.
source: AdMob Operating System Share, May 2010.

Aquickhistorylesson
Myriads of browsers/user-agents!
Feature phones & Smartphones
iPhone, iPod touch & iPad
PSP & other portable
gaming devices
Boxee box &
other STB
Netbooks
Desktop
& more...

Why target one resolution out of these?
Aquickhistorylesson

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

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

Flexibility
Whatisit,exactly&whyweneedit?
800x600 1024x768
SAPO Login
http://login.sapo.pt/
http://6s3e.sl.pt

Flexibility
800x600 1024x768
SAPO Login
http://login.sapo.pt/
http://6s3e.sl.pt
ﬂoat:left;
width: 26em;
margin-left: 27em;

Flexibility
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;

Size: normal
Flexibility
SAPO.pt
http://www.sapo.pt/
http://b.kp.sl.pt

Size: normalSize: +2
Flexibility
SAPO.pt
http://www.sapo.pt/
http://b.kp.sl.pt

seandreilinger http://6s4b.sl.pt

Flexibility
Off by default

Size: normal
Flexibility
mytvshows
http://mytvshows.org
http://6siq.sl.pt

Size: +2
Flexibility
mytvshows
http://6siq.sl.pt

Flexibility
mytvshows
http://6siq.sl.pt
Tamanho: +2 txt only

Flexibility
iGive
http://igive.sapo.pt
http://6siq.sl.pt
✓
✓
x

Flexibility
TIP
Avoid setting widths on both
parent & child elements.
width: 500px;
width: 480px;
width: 500px;
margin-right: 20px;
x ✓

Flexibility
UX SAPO
http://ux.sapo.pt
http://6suv.sl.pt
x
✓

Flexibility
RULE
Don’t set a height unless you really
have to. Content dictates height.

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

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?

You can query all of them!
Remember this?
<link rel="stylesheet" type="text/css"
href="style.css" media="screen">
That’s a query!

Remember this?
<link rel="stylesheet" type="text/css"
href="style.css" media="screen and (max-device-width:480px)">
CSS3

Remember this?
@media screen and (max-device-width: 480px) {
.column {
ﬂoat: none;
}
}
CSS3

So, what can we do?
@media screen and (orientation: landscape) {
.column { ﬂoat: none; }
}
orientation: landscape

Can I use it now?!
When can I use...
http://caniuse.com
http://6tnl.sl.pt

Can I use it now?!
CSS3-media-queries.js
http://code.google.com/p/css3-mediaqueries-js/
http://6tns.sl.pt

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?

Avoid the mistakes of the One Web...
DEGRADE TO

Avoid the mistakes of the One Web...
DEGRADE TO ENHANCE TO

Steps to make our sites Responsive™
1
2
3
Adapt layout to different environments.
(through media-queries) ✓

1
2
3
Fluid Grids (if you’re using them)

1
2
3
Flexible Images

Fluidgrids
from “Fluid grids” — A List Apart #279
http://www.alistapart.com/articles/fluidgrids/
http://6to8.sl.pt

Fluidgrids
http://6to8.sl.pt
144px;
988px
700px;

Fluidgrids
http://6to8.sl.pt
width: 700px;
margin-left: 144px;
144px;
988px
700px;

Fluidgrids
http://6to8.sl.pt
width: 700px;
margin-left: 144px;
988/700 = 0.7085
988/144 = 0.14575
144px;
988px
700px;

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;

✓
1
2
3
Flexible Images

FlexibleImages
from “Responsive Web Design” — A List Apart #279
http://www.alistapart.com/articles/responsive-web-design/
http://350m.sl.pt

FlexibleImages
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%;
}

FlexibleImages
dConstruct 2010
http://2010.dconstruct.org/
http://3q9e.sl.pt

FlexibleImages
dConstruct 2010
http://2010.dconstruct.org/
http://3q9e.sl.pt
.top_row {
position: absolute;
left: -10%;
}
.bottom_row {
position: absolute;
left: -32%;
}

✓
✓
1
2
3
Flexible Images

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

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

Appropriate Typefaces
Usingtherightonesandnottheavailableones
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!

@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

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).

TIP
Avoid solutions based in JavaScript.
Host the files if possible.
fontsquirrel.com fontspring.com fontdeck.com

In review...

Questions?

WEARENOT
DESIGNING
POSTERS
HERE
BROUGHTTOYOUBY
ANDRÉLUÍS
cb n
@andr3
CODEBITSIV
THEENDThank you for your time.
Downloadthis presentation (PDF)
http://talks.andr3.net/2010/codebits/posters.pdf
http://6tuv.sl.pt
cb
Downloadthis presentation (.key)
http://talks.andr3.net/2010/codebits/posters.key
http://6tvj.sl.pt

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/
CFriday, November 12, 2010

We're not designing posters, here!

Recommended

Recommended

More Related Content

Similar to We're not designing posters, here!

Similar to We're not designing posters, here! (20)

More from André Luís

More from André Luís (6)

Recently uploaded

Recently uploaded (20)

We're not designing posters, here!