enquiries on the responsive web - w3c · css3 & html5 _ developing cross device applications -...
TRANSCRIPT
CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
ENQUIRIES ON THE RESPONSIVE WEBFederico Weber | Creative Technologist @ vanGoGh
lunedì 3 giugno 13
| ARGOMENTI
| 01 | What is the Content| 02 | Strategies & Recips| 03 | Maserati.com – case study| 04 | The road ahead
lunedì 3 giugno 13
| 01
What is the content
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
THERE WAS A TIME WHERE WE HAVE IT ALL FIGURED OUT
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
THEN WE GOTMOBILE DEVICES
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
THEN WE GOTMOBILE DEVICESTHEY COME IN A HUGEVARIETY OF FLAVOURS
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
AND THEY HAVEN’TDISRUPTED ONLY THESCREEN SIZE
SIZE SIZESIZE SIZE SIZE SIZE SIZE
SIZE
SIZE
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
NOW THE CONTEXT IS MUTABLE“Context refers to the physical, digital, and social structures that surround the point of use.” Cennydd Bowles
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
C O N T E N T IS CONSUMED EVERYWHERETHEREFOR IT MUST BEF L E X I B L E
lunedì 3 giugno 13
| 01
Strategies & Recipes
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
YOUR SITE CONTENTIS IN NEED OF A
D I E T
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
PROGRESSIVE ENHANCEMENTMINDSET IS QUITE SIMPLE: JUST THINK FROM THE CONTENT OUT
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
GRIDENJOYTHE FLUID
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
SET FONT-SIZE ACCORDING TO THE C O N T E X TNOT THE SCREEN SIZE
lunedì 3 giugno 13
| 01
Maserati.com – case study
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
MASERATI.COM/HOMEPAGE
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
MASERATI.COM/MAGAZINE
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
MASERATI.COM/EDITORIAL-GRID
lunedì 3 giugno 13
| 01
The road ahead
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
A PICTURE IS WORTH A THOUSEND WORDS
<picture id="pictureElement"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<!-- assume media all --> <source srcset="small-1.jpg 1x, small-2.jpg 2x">
<!-- the following are ignored --> <source media=" is the message " srcset="">
</picture>
<!-- W3C WORKING DRAFT – 26 FEBRUARY 2013 -->
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
DESIGN FOR THE CONTEXTLEVERAGING DEVICES API
lunedì 3 giugno 13
VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
federicoweber.com@federicoweber
lunedì 3 giugno 13