SlideShare a Scribd company logo
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
Friday, November 12, 2010
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
INTRODUCTION
whoamI?
Been speaking on a variety of topics, including...
JavaScript microformats HTML5 CSS
more at http://slideshare.net/andr3
Friday, November 12, 2010
INTRODUCTION
What’sabouttogodown...
Friday, November 12, 2010
INTRODUCTION
What’sabouttogodown...
I’m here to make you a proposition…
Friday, November 12, 2010
INTRODUCTION
What’sabouttogodown...
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
Friday, November 12, 2010
INTRODUCTION
What’sabouttogodown...
First... I have
nothing against
P o s t e r s
Friday, November 12, 2010
INTRODUCTION
What’sabouttogodown...
But they’re static,
they’re not hypertext.
The web is dynamic
and interactive.
Friday, November 12, 2010
Evolution of Webdesign
Aquickhistorylesson
Friday, November 12, 2010
Evolution of Webdesign
Aquickhistorylesson
1991
The CERN
years
Friday, November 12, 2010
Evolution of Webdesign
Aquickhistorylesson
1991
The CERN
years
1998
tables for layout
& framesets
Friday, November 12, 2010
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
&
Friday, November 12, 2010
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
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
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
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
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
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 Webdesign
Aquickhistorylesson
Every year has been The Year of the Mobile.
Friday, November 12, 2010
Evolution of Webdesign
Aquickhistorylesson
Every year has been The Year of the Mobile.
source: AdMob Operating System Share, May 2010.
Friday, November 12, 2010
Evolution of Webdesign
Aquickhistorylesson
Every year has been The Year of the Mobile.
source: AdMob Operating System Share, May 2010.
Friday, November 12, 2010
Evolution of Webdesign
Aquickhistorylesson
User habits vary with platform.
Friday, November 12, 2010
Evolution of Webdesign
Aquickhistorylesson
User habits vary with platform.
source: Gartner Q1 2010: Market Share.
source: AdMob Operating System Share, May 2010.
Friday, November 12, 2010
Evolution of Webdesign
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...
Friday, November 12, 2010
Why target one resolution out of these?
Evolution of Webdesign
Aquickhistorylesson
Friday, November 12, 2010
Why target one resolution out of these?
Evolution of Webdesign
Aquickhistorylesson
Friday, November 12, 2010
Why target one resolution out of these?
Evolution of Webdesign
Aquickhistorylesson
Friday, November 12, 2010
Why target one resolution out of these?
Evolution of Webdesign
Aquickhistorylesson
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.com
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
800x600 1024x768
SAPO Login
http://login.sapo.pt/
http://6s3e.sl.pt
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
800x600 1024x768
SAPO Login
http://login.sapo.pt/
http://6s3e.sl.pt
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
800x600 1024x768
SAPO Login
http://login.sapo.pt/
http://6s3e.sl.pt
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
800x600 1024x768
SAPO Login
http://login.sapo.pt/
http://6s3e.sl.pt
float:left;
width: 26em;
margin-left: 27em;
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
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
Flexibility
Whatisit,exactly&whyweneedit?
SAPO.pt
http://www.sapo.pt/
http://b.kp.sl.pt
Friday, November 12, 2010
Size: normalSize: +2
Flexibility
Whatisit,exactly&whyweneedit?
SAPO.pt
http://www.sapo.pt/
http://b.kp.sl.pt
Friday, November 12, 2010
seandreilinger http://6s4b.sl.pt
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
Off by default
Friday, November 12, 2010
Size: normal
Flexibility
Whatisit,exactly&whyweneedit?
mytvshows
http://mytvshows.org
http://6siq.sl.pt
Friday, November 12, 2010
Size: +2
Flexibility
Whatisit,exactly&whyweneedit?
mytvshows
http://mytvshows.org
http://6siq.sl.pt
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
mytvshows
http://mytvshows.org
http://6siq.sl.pt
Tamanho: +2 txt only
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
iGive
http://igive.sapo.pt
http://6siq.sl.pt
✓
✓
x
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
TIP
Avoid setting widths on both
parent & child elements.
width: 500px;
width: 480px;
width: 500px;
margin-right: 20px;
x ✓
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
UX SAPO
http://ux.sapo.pt
http://6suv.sl.pt
x
✓
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
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 presence
of people passing through them.
standing on the shoulders of:
Ethan Marcotte
http://unstoppablerobotninja.com
Friday, November 12, 2010
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
Responsive Webdesign
Whatcanourwebsitesreactto&how?
You can query all of them!
Remember this?
<link rel="stylesheet" type="text/css"
href="style.css" media="screen">
That’s a query!
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&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 Webdesign
Whatcanourwebsitesreactto&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 Webdesign
Whatcanourwebsitesreactto&how?
So, what can we do?
@media screen and (orientation: landscape) {
.column { float: none; }
}
orientation: landscape
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&how?
Can I use it now?!
When can I use...
http://caniuse.com
http://6tnl.sl.pt
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&how?
Can I use it now?!
CSS3-media-queries.js
http://code.google.com/p/css3-mediaqueries-js/
http://6tns.sl.pt
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&how?
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?
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&how?
Avoid the mistakes of the One Web...
DEGRADE TO
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&how?
Avoid the mistakes of the One Web...
DEGRADE TO ENHANCE TO
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&how?
Steps to make our sites Responsive™
1
2
3
Adapt layout to different environments.
(through media-queries) ✓
Friday, November 12, 2010
Responsive Webdesign
Whatcanourwebsitesreactto&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 Webdesign
Whatcanourwebsitesreactto&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 Webdesign
Fluidgrids
from “Fluid grids” — A List Apart #279
http://www.alistapart.com/articles/fluidgrids/
http://6to8.sl.pt
Friday, November 12, 2010
Responsive Webdesign
Fluidgrids
from “Fluid grids” — A List Apart #279
http://www.alistapart.com/articles/fluidgrids/
http://6to8.sl.pt
144px;
988px
700px;
Friday, November 12, 2010
Responsive Webdesign
Fluidgrids
from “Fluid grids” — A List Apart #279
http://www.alistapart.com/articles/fluidgrids/
http://6to8.sl.pt
width: 700px;
margin-left: 144px;
144px;
988px
700px;
Friday, November 12, 2010
Responsive Webdesign
Fluidgrids
from “Fluid grids” — A List Apart #279
http://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 Webdesign
Fluidgrids
from “Fluid grids” — A List Apart #279
http://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 Webdesign
Whatcanourwebsitesreactto&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 Webdesign
FlexibleImages
from “Responsive Web Design” — A List Apart #279
http://www.alistapart.com/articles/responsive-web-design/
http://350m.sl.pt
Friday, November 12, 2010
Responsive Webdesign
FlexibleImages
from “Responsive Web Design” — A List Apart #279
http://www.alistapart.com/articles/responsive-web-design/
http://350m.sl.pt
Friday, November 12, 2010
Responsive Webdesign
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%;
}
Friday, November 12, 2010
Responsive Webdesign
FlexibleImages
dConstruct 2010
http://2010.dconstruct.org/
http://3q9e.sl.pt
Friday, November 12, 2010
Responsive Webdesign
FlexibleImages
dConstruct 2010
http://2010.dconstruct.org/
http://3q9e.sl.pt
.top_row {
position: absolute;
left: -10%;
}
.bottom_row {
position: absolute;
left: -32%;
}
Friday, November 12, 2010
✓
✓
Responsive Webdesign
Whatcanourwebsitesreactto&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 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
Appropriate typefaces
ap·pro·pri·ate (adj.)
suitable or fitting for a particular purpose.
biblarte http://6u8a.sl.pt
Friday, November 12, 2010
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!
Friday, November 12, 2010
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
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
Appropriate Typefaces
Usingtherightonesandnottheavailableones
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
Flexibility
Whatisit,exactly&whyweneedit?
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
Flexibility
Whatisit,exactly&whyweneedit?
TIP
Avoid setting widths on both
parent & child elements.
width: 500px;
width: 480px;
width: 500px;
margin-right: 20px;
x ✓
Friday, November 12, 2010
Flexibility
Whatisit,exactly&whyweneedit?
RULE
Don’t set a height unless you really
have to. Content dictates height.
Friday, November 12, 2010
✓
✓
Responsive Webdesign
Whatcanourwebsitesreactto&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 Typefaces
Usingtherightonesandnottheavailableones
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
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
Friday, November 12, 2010
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

More Related Content

Similar to We're not designing posters, here!

Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon
David Paniz
 
RIA Unleashed - Developing for the TV with litl os
RIA Unleashed - Developing for the TV with litl osRIA Unleashed - Developing for the TV with litl os
RIA Unleashed - Developing for the TV with litl osryancanulla
 
Classrooms of Tomorrow
Classrooms of TomorrowClassrooms of Tomorrow
Classrooms of Tomorrow
Rodd Lucier
 
Human APIs
Human APIsHuman APIs
Human APIs
Nikolai Onken
 
How Steve Jobs Would Disrupt The Truck & Bus Industry
How Steve Jobs Would Disrupt The Truck & Bus IndustryHow Steve Jobs Would Disrupt The Truck & Bus Industry
How Steve Jobs Would Disrupt The Truck & Bus Industry
Johan Ronnestam
 
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Jeremie Charlet
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancement
Paul Irish
 
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScriptSencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
David Kaneda
 
mobile + location based design
mobile + location based designmobile + location based design
mobile + location based designGeorge Hayes
 
Introduction to Confluence Blueprints
Introduction to Confluence BlueprintsIntroduction to Confluence Blueprints
Introduction to Confluence Blueprints
Matthew Cobby
 
Mobile Strategy & Product Dev. - iRush
Mobile Strategy & Product Dev. - iRushMobile Strategy & Product Dev. - iRush
Mobile Strategy & Product Dev. - iRush
Andrew Donoho
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experience
Dee Sadler
 
Responsive Design for the Web
Responsive Design for the WebResponsive Design for the Web
Responsive Design for the Webjonbuda
 
Html5 Development
Html5 DevelopmentHtml5 Development
Html5 Development
Nikolai Onken
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
Aaron Gustafson
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
Bastian Hofmann
 
Cloud Austin 2013: Conferenced2013
Cloud Austin 2013: Conferenced2013Cloud Austin 2013: Conferenced2013
Cloud Austin 2013: Conferenced2013
Karthik Gaekwad
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project ArgoWesley Lindamood
 
Same, same but different - What is strategy in Digital?
Same, same but different - What is strategy in Digital?Same, same but different - What is strategy in Digital?
Same, same but different - What is strategy in Digital?Gerald Hensel
 
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
Zi Bin Cheah
 

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

Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon
 
RIA Unleashed - Developing for the TV with litl os
RIA Unleashed - Developing for the TV with litl osRIA Unleashed - Developing for the TV with litl os
RIA Unleashed - Developing for the TV with litl os
 
Classrooms of Tomorrow
Classrooms of TomorrowClassrooms of Tomorrow
Classrooms of Tomorrow
 
Human APIs
Human APIsHuman APIs
Human APIs
 
How Steve Jobs Would Disrupt The Truck & Bus Industry
How Steve Jobs Would Disrupt The Truck & Bus IndustryHow Steve Jobs Would Disrupt The Truck & Bus Industry
How Steve Jobs Would Disrupt The Truck & Bus Industry
 
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? D...
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancement
 
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScriptSencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
 
mobile + location based design
mobile + location based designmobile + location based design
mobile + location based design
 
Introduction to Confluence Blueprints
Introduction to Confluence BlueprintsIntroduction to Confluence Blueprints
Introduction to Confluence Blueprints
 
Mobile Strategy & Product Dev. - iRush
Mobile Strategy & Product Dev. - iRushMobile Strategy & Product Dev. - iRush
Mobile Strategy & Product Dev. - iRush
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experience
 
Responsive Design for the Web
Responsive Design for the WebResponsive Design for the Web
Responsive Design for the Web
 
Html5 Development
Html5 DevelopmentHtml5 Development
Html5 Development
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
 
Cloud Austin 2013: Conferenced2013
Cloud Austin 2013: Conferenced2013Cloud Austin 2013: Conferenced2013
Cloud Austin 2013: Conferenced2013
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project Argo
 
Same, same but different - What is strategy in Digital?
Same, same but different - What is strategy in Digital?Same, same but different - What is strategy in Digital?
Same, same but different - What is strategy in Digital?
 
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
 

More from André Luís

Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
André Luís
 
Dr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesAndré Luís
 
HTML5 - A nova era da Web
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da Web
André Luís
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
André Luís
 
Microformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzleMicroformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzle
André Luís
 
Microformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzleMicroformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzle
André Luís
 

More from André Luís (6)

Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
 
Dr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licenses
 
HTML5 - A nova era da Web
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da Web
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
 
Microformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzleMicroformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzle
 
Microformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzleMicroformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzle
 

Recently uploaded

Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
Vlad Stirbu
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 

Recently uploaded (20)

Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 

We're not designing posters, here!