Date post: | 08-May-2015 |
Category: |
Technology |
Upload: | andre-luis |
View: | 4,012 times |
Download: | 0 times |
WE ARE NOTDESIGNINGPOSTERSH E R E
BROUGHT TO YOU BYANDRÉ LUÍS
CODEBITS IV
cbn
@andr3
Friday, November 12, 2010
INTRODUCTION
Friday, November 12, 2010
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.
Friday, November 12, 2010
INTRODUCTIONwho am I?
Been speaking on a variety of topics, including...
JavaScript microformats HTML5 CSS
more at http://slideshare.net/andr3
Friday, November 12, 2010
INTRODUCTIONWhat’s about to go down...
Friday, November 12, 2010
INTRODUCTIONWhat’s about to go down...
I’m here to make you a proposition…
Friday, November 12, 2010
INTRODUCTIONWhat’s about to go down...
By standing on the shoulders of giantsI’ll propose we take our websites
d e a d s e r i o u s
Friday, November 12, 2010
INTRODUCTIONWhat’s about to go down...
First... I havenothing against
P o s t e r s
Friday, November 12, 2010
INTRODUCTIONWhat’s about to go down...
But they’re static,they’re not hypertext.
The web is dynamicand interactive.
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
1991
The CERNyears
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
1991
The CERNyears
1998
tables for layout& framesets
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
1991
The CERNyears
1998
tables for layout& framesets
2003
Designing withweb standardsby J. Zeldman
CSSZen Gardenby Dave Shea
&
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
1991
The CERNyears
1998
tables for layout& framesets
2003
Designing withweb standardsby J. Zeldman
CSSZen Gardenby Dave Shea
&
2005
microformats
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
1991
The CERNyears
1998
tables for layout& framesets
2003
Designing withweb standardsby J. Zeldman
CSSZen Gardenby Dave Shea
&
2007CSS3 featuresbecome morewidely adopted
2005
microformats
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
1991
The CERNyears
1998
tables for layout& framesets
2003
Designing withweb standardsby J. Zeldman
CSSZen Gardenby Dave Shea
&
2007CSS3 featuresbecome morewidely adopted
2005
microformats
2009HTML5 featuresbecome morewidely adopted
Friday, November 12, 2010
Evolution of WebdesignA quick history lesson
1991
The CERNyears
1998
tables for layout& framesets
2003
Designing withweb standardsby J. Zeldman
CSSZen Gardenby Dave Shea
&
2007CSS3 featuresbecome morewidely adopted
2010
What now?2005
microformats
2009HTML5 featuresbecome morewidely adopted
Friday, November 12, 2010
Evolution of WebdesignA 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
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
Evolution of WebdesignA quick history lesson
Every year has been The Year of the Mobile.
Friday, November 12, 2010
Evolution of WebdesignA 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 WebdesignA 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 WebdesignA quick history lesson
User habits vary with platform.
Friday, November 12, 2010
Evolution of WebdesignA 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
Evolution of WebdesignA quick history lesson
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?
Evolution of WebdesignA quick history lesson
Friday, November 12, 2010
Why target one resolution out of these?
Evolution of WebdesignA quick history lesson
Friday, November 12, 2010
Why target one resolution out of these?
Evolution of WebdesignA quick history lesson
Friday, November 12, 2010
Why target one resolution out of these?
Evolution of WebdesignA quick history lesson
Friday, November 12, 2010
Flexibility
flex·i·ble (adj.)capable of bending easily without breaking.
khalid-almasoud http://6s4a.sl.pt
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.comFriday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
800x600 1024x768
SAPO Loginhttp://login.sapo.pt/http://6s3e.sl.pt
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
800x600 1024x768
SAPO Loginhttp://login.sapo.pt/http://6s3e.sl.pt
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
800x600 1024x768
SAPO Loginhttp://login.sapo.pt/http://6s3e.sl.pt
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
800x600 1024x768
SAPO Loginhttp://login.sapo.pt/http://6s3e.sl.pt
float:left;width: 26em;
margin-left: 27em;
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
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;
Friday, November 12, 2010
Size: normal
FlexibilityWhat is it, exactly & why we need it?
SAPO.pthttp://www.sapo.pt/http://b.kp.sl.pt
Friday, November 12, 2010
Size: normalSize: +2
FlexibilityWhat is it, exactly & why we need it?
SAPO.pthttp://www.sapo.pt/http://b.kp.sl.pt
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
Off by default
Friday, November 12, 2010
Size: normal
FlexibilityWhat is it, exactly & why we need it?
mytvshowshttp://mytvshows.orghttp://6siq.sl.pt
Friday, November 12, 2010
Size: +2
FlexibilityWhat is it, exactly & why we need it?
mytvshowshttp://mytvshows.orghttp://6siq.sl.pt
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
mytvshowshttp://mytvshows.orghttp://6siq.sl.pt
Tamanho: +2 txt only
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
iGivehttp://igive.sapo.pthttp://6siq.sl.pt
✓
✓
x
Friday, November 12, 2010
FlexibilityWhat 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
FlexibilityWhat is it, exactly & why we need it?
UX SAPOhttp://ux.sapo.pthttp://6suv.sl.pt
x
✓
Friday, November 12, 2010
FlexibilityWhat 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 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?
Friday, November 12, 2010
Responsive WebdesignWhat can our websites react to & how?
You can query all of them!
Remember this?
<link rel="stylesheet" type="text/css"href="style.css" media="screen">
That’s a q
uery!
Friday, November 12, 2010
Responsive WebdesignWhat can our websites react to & how?
You can query all of them!
Remember this?
<link rel="stylesheet" type="text/css"href="style.css" media="screen and (max-device-width:480px)">
CSS3
Friday, November 12, 2010
Responsive WebdesignWhat 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 WebdesignWhat 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 WebdesignWhat can our websites react to & how?
Can I use it now?!
When can I use...http://caniuse.comhttp://6tnl.sl.pt
Friday, November 12, 2010
Responsive WebdesignWhat can our websites react to & how?
Can I use it now?!
CSS3-media-queries.jshttp://code.google.com/p/css3-mediaqueries-js/http://6tns.sl.pt
Friday, November 12, 2010
Responsive WebdesignWhat can our websites react to & how?
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?
Friday, November 12, 2010
Responsive WebdesignWhat can our websites react to & how?
Avoid the mistakes of the One Web...
DEGRADE TO
Friday, November 12, 2010
Responsive WebdesignWhat can our websites react to & how?
Avoid the mistakes of the One Web...
DEGRADE TO ENHANCE TO
Friday, November 12, 2010
Responsive WebdesignWhat 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 WebdesignWhat 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 WebdesignWhat 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 WebdesignFluid grids
from “Fluid grids” — A List Apart #279http://www.alistapart.com/articles/fluidgrids/http://6to8.sl.pt
Friday, November 12, 2010
Responsive WebdesignFluid grids
from “Fluid grids” — A List Apart #279http://www.alistapart.com/articles/fluidgrids/http://6to8.sl.pt
144px;
988px
700px;
Friday, November 12, 2010
Responsive WebdesignFluid grids
from “Fluid grids” — A List Apart #279http://www.alistapart.com/articles/fluidgrids/http://6to8.sl.pt
width: 700px;margin-left: 144px;
144px;
988px
700px;
Friday, November 12, 2010
Responsive WebdesignFluid grids
from “Fluid grids” — A List Apart #279http://www.alistapart.com/articles/fluidgrids/http://6to8.sl.pt
width: 700px;margin-left: 144px;
988/700 = 0.7085
988/144 = 0.14575
144px;
988px
700px;
Friday, November 12, 2010
Responsive WebdesignFluid grids
from “Fluid grids” — A List Apart #279http://www.alistapart.com/articles/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;
Friday, November 12, 2010
✓
Responsive WebdesignWhat 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 WebdesignFlexible Images
from “Responsive Web Design” — A List Apart #279http://www.alistapart.com/articles/responsive-web-design/http://350m.sl.pt
Friday, November 12, 2010
Responsive WebdesignFlexible Images
from “Responsive Web Design” — A List Apart #279http://www.alistapart.com/articles/responsive-web-design/http://350m.sl.pt
Friday, November 12, 2010
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%;
}
Friday, November 12, 2010
Responsive WebdesignFlexible Images
dConstruct 2010http://2010.dconstruct.org/http://3q9e.sl.pt
Friday, November 12, 2010
Responsive WebdesignFlexible Images
dConstruct 2010http://2010.dconstruct.org/http://3q9e.sl.pt
.top_row {position: absolute;left: -10%;
}.bottom_row {
position: absolute;left: -32%;
}
Friday, November 12, 2010
✓✓
Responsive WebdesignWhat 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 WebdesignWhat 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
ap·pro·pri·ate (adj.)suitable or fitting for a particular purpose.
biblarte http://6u8a.sl.pt
Friday, November 12, 2010
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!
Friday, November 12, 2010
Appropriate TypefacesUsing 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 Irishhttp://paulirish.com/2009/bulletproof-font-face-implementation-syntax/http://6tts.sl.pt
Friday, November 12, 2010
Appropriate TypefacesUsing 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 TypefacesUsing 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
In review...
Friday, November 12, 2010
FlexibilityWhat is it, exactly & why we need it?
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;
Friday, November 12, 2010
FlexibilityWhat 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
FlexibilityWhat 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 WebdesignWhat 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 TypefacesUsing 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
Questions?
Friday, November 12, 2010
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
Friday, November 12, 2010
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=§ion=&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