We're not designing posters, here!

WE ARE NOTDESIGNINGPOSTERSH E R E

BROUGHT TO YOU BYANDRÉ LUÍS

CODEBITS IV

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

INTRODUCTIONwho am I?

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

JavaScript microformats HTML5 CSS

more at 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

The CERNyears

tables for layout& framesets

The CERNyears

Designing withweb standardsby J. Zeldman

CSSZen Gardenby Dave Shea

The CERNyears

microformats

The CERNyears

2007CSS3 featuresbecome morewidely adopted

microformats

The CERNyears

microformats

2009HTML5 featuresbecome morewidely adopted

The CERNyears

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

Every year has been The Year of the Mobile.

source: AdMob Operating System Share, May 2010.

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

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

FlexibilityWhat is it, exactly & why we need it?

800x600 1024x768

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

800x600 1024x768

float:left;width: 26em;

margin-left: 27em;

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

Size: normalSize: +2

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

seandreilinger http://6s4b.sl.pt

Off by default

Size: normal

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

Size: +2

Tamanho: +2 txt only

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

Avoid setting widths on both parent & child elements.

width: 500px;

width: 480px;

width: 500px;

margin-right: 20px;

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

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?

You can query all of them!

Remember this?

That’s a q

Remember this?

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

Can I use it now?!

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

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™

Adapt layout to different environments.(through media-queries) ✓

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

Flexible Images

Responsive WebdesignFluid grids

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

144px;

700px;

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

144px;

700px;

988/700 = 0.7085

988/144 = 0.14575

144px;

700px;

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

988/700 = 0.7085

988/144 = 0.14575

144px;

700px;

Flexible Images

Responsive WebdesignFlexible Images

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

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

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

}.bottom_row {

position: absolute;left: -32%;

✓✓

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

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

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

fontsquirrel.com fontspring.com fontdeck.com

In review...

Think proportionally instead of statically.

font-size: 16px; (base)

Heading 1

Heading 2

Heading 3

Avoid setting widths on both parent & child elements.

width: 500px;

width: 480px;

width: 500px;

margin-right: 20px;

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

✓✓

Flexible Images

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

@andr3

CODEBITS IVTHE ENDThank you for your time.

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

Download this presentation (.key)http://talks.andr3.net/2010/codebits/posters.keyhttp://6tvj.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

Designing & Presenting Research Posters

NCC: What We're Doing and Where We're Going

We're in for technology, we're in for a change!

Designing Posters: Telling the story...Designing Posters:...

iBeacon and IoT: Where We're At, Where We're Going

We're BACI

Designing with plants (Posters)

We're off !!!

Vital elements of designing awesome posters

2011 - Where we're been, where we're going

Designing effective posters

Designing conference posters

6 Easy Steps for Online Posters Designing & Printing

Presentation skills designing posters for academic...

Tender Notice - DC(MSME Notice_Designing_161015.pdfTender...

We're Hiring!