we're not designing posters, here!

WE ARE NOTDESIGNINGPOSTERSH E R E

BROUGHT TO YOU BYANDRÉ LUÍS

CODEBITS IV

cbn

@andr3

Friday, November 12, 2010

INTRODUCTION


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


http://id.andr3.net

http://id.andr3.net

INTRODUCTIONwho am I?

Been speaking on a variety of topics, including...

JavaScript microformats HTML5 CSS

more at http://slideshare.net/andr3


http://slideshare.net/andr3

http://slideshare.net/andr3

INTRODUCTIONWhat’s about to go down...



I’m here to make you a proposition…



By standing on the shoulders of giantsI’ll propose we take our websites

d e a d s e r i o u s



First... I havenothing against

P o s t e r s



But they’re static,they’re not hypertext.

The web is dynamicand interactive.


Evolution of WebdesignA quick history lesson



1991

The CERNyears



1991

The CERNyears

1998

tables for layout& framesets



1991

The CERNyears

1998


2003

Designing withweb standardsby J. Zeldman

CSSZen Gardenby Dave Shea

&



1991

The CERNyears

1998


2003



&

2005

microformats



1991

The CERNyears

1998


2003



&

2007CSS3 featuresbecome morewidely adopted

2005

microformats



1991

The CERNyears

1998


2003



&


2005

microformats

2009HTML5 featuresbecome morewidely adopted



1991

The CERNyears

1998


2003



&


2010

What now?2005

microformats

2009HTML5 featuresbecome morewidely adopted



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


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


Every year has been The Year of the Mobile.



Every year has been The Year of the Mobile.

source: AdMob Operating System Share, May 2010.



User habits vary with platform.



User habits vary with platform.

source: Gartner Q1 2010: Market Share. source: AdMob Operating System Share, May 2010.



Myriads of browsers/user-agents!

Feature phones & Smartphones

iPhone, iPod touch & iPad

PSP & other portablegaming devices

Boxee box &other STB

NetbooksDesktop

& more...Friday, November 12, 2010

Why target one resolution out of these?



Flexibility

flex·i·ble (adj.)capable of bending easily without breaking.

khalid-almasoud http://6s4a.sl.pt


http://6s4a.sl.pt

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.comFriday, November 12, 2010

http://6s4a.sl.pt

http://6s4a.sl.pt

http://simplebits.com


FlexibilityWhat is it, exactly & why we need it?

800x600 1024x768

SAPO Loginhttp://login.sapo.pt/http://6s3e.sl.pt


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


800x600 1024x768

SAPO Loginhttp://login.sapo.pt/http://6s3e.sl.pt

float:left;width: 26em;

margin-left: 27em;


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


TIP

Think proportionally instead of statically.

font-size: 16px; (base)

Heading 1

Heading 2

Heading 3

target: 22px;font-size: 22/16 = 1.375em;




Size: normal


SAPO.pthttp://www.sapo.pt/http://b.kp.sl.pt


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd

Size: normalSize: +2


SAPO.pthttp://www.sapo.pt/http://b.kp.sl.pt


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd

seandreilinger http://6s4b.sl.pt


http://6s4a.sl.pt

http://6s4a.sl.pt


Off by default


Size: normal


mytvshowshttp://mytvshows.orghttp://6siq.sl.pt


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd

Size: +2




http://asd

http://asd

http://asd

http://asd

http://asd

http://asd



Tamanho: +2 txt only


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


iGivehttp://igive.sapo.pthttp://6siq.sl.pt

✓

✓

x


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


TIP

Avoid setting widths on both parent & child elements.

width: 500px;

width: 480px;

width: 500px;

margin-right: 20px;

x ✓



UX SAPOhttp://ux.sapo.pthttp://6suv.sl.pt

x

✓


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


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 presenceof people passing through them.

standing on the shoulders of:Ethan Marcotte

http://unstoppablerobotninja.comFriday, November 12, 2010



Responsive WebdesignWhat 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?



You can query all of them!

Remember this?

<link rel="stylesheet" type="text/css"href="style.css" media="screen">

That’s a q

uery!




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 {

float: none; }

} CSS3



So, what can we do?

@media screen and (orientation: landscape) { .column { float: none; }}

orientation: landscape



Can I use it now?!

When can I use...http://caniuse.comhttp://6tnl.sl.pt


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


Can I use it now?!

CSS3-media-queries.jshttp://code.google.com/p/css3-mediaqueries-js/http://6tns.sl.pt


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


Can I use it now?!

CSS3-media-queries.jshttp://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

Adapt layout to different environments.(through media-queries) ✓Fluid Grids (if you’re using them)




1

2

3


Flexible Images


Responsive WebdesignFluid grids

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


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd



144px;

988px

700px;


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd



width: 700px;margin-left: 144px;

144px;

988px

700px;


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd




988/700 = 0.7085

988/144 = 0.14575

144px;

988px

700px;


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd




width: 70.85%;margin-left: 14.575%;

988/700 = 0.7085

988/144 = 0.14575

144px;

988px

700px;


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd

✓



1

2

3


Flexible Images


Responsive WebdesignFlexible Images

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


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


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

img {display: block;max-width: 100%;

}


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


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


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


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

.top_row {position: absolute;left: -10%;

}.bottom_row {

position: absolute;left: -32%;

}


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd

✓✓



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


http://asd

http://asd

http://adactio.com/journal/1696/

http://adactio.com/journal/1696/

http://asd

http://asd

http://asd

http://asd

Appropriate typefaces

ap·pro·pri·ate (adj.)suitable or fitting for a particular purpose.

biblarte http://6u8a.sl.pt


http://6s4a.sl.pt

http://6s4a.sl.pt

Appropriate TypefacesUsing 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!



@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 Irishhttp://paulirish.com/2009/bulletproof-font-face-implementation-syntax/http://6tts.sl.pt


http://asd

http://asd

http://asd

http://asd

http://asd

http://asd


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



TIP

Think proportionally instead of statically.

font-size: 16px; (base)

Heading 1

Heading 2

Heading 3






TIP

Avoid setting widths on both parent & child elements.

width: 500px;

width: 480px;

width: 500px;

margin-right: 20px;

x ✓



RULE

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


✓✓



1

2

3


Flexible Images



TIP

Avoid solutions based in JavaScript. Host the files if possible.

fontsquirrel.com fontspring.com fontdeck.com


Questions?


WE ARE NOTDESIGNINGPOSTERSHERE

BROUGHT TO YOU BYANDRÉ LUÍS

cb n

@andr3

CODEBITS IVTHE ENDThank you for your time.

Download this presentation (PDF)http://talks.andr3.net/2010/codebits/posters.pdfhttp://6tuv.sl.pt

cb

Download this presentation (.key)http://talks.andr3.net/2010/codebits/posters.keyhttp://6tvj.sl.pt


http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

http://6n1r.sl.pt

Photo Credithttp://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!

Technology