While presenting a case study I discuss: approach, best practices and future desiderata; to design and develop (whit HTML5, CSS3 and javaScript) a successful website, whose informations and layouts are tailored to be properly visualized regardless of the device screen size.

1. CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
ENQUIRIES ON THE
RESPONSIVE WEB
Federico Weber | Creative Technologist @ vanGoGh
mercoledì 5 giugno 13

2. | ARGOMENTI
| 01 | What is the Content
| 02 | Strategies & Recips
| 03 | Maserati.com – case study
| 04 | The road ahead
mercoledì 5 giugno 13

3. | 01
What is the content
mercoledì 5 giugno 13

4. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
THERE WAS A TIME
WHERE WE HAD IT
ALL FIGURED OUT
mercoledì 5 giugno 13

5. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
THEN WE GOT
MOBILE DEVICES
THEY COME IN A HUGE
VARIETY OF FLAVOURS
mercoledì 5 giugno 13

6. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
AND THEY HAVEN’T
DISRUPTED ONLY THE
SCREEN SIZE
SIZE SIZE
SIZE SIZE SIZE SIZE
SIZE
SIZE
SIZE
mercoledì 5 giugno 13

7. 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
mercoledì 5 giugno 13

8. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
C O N T E N T
IS CONSUMED EVERYWHERE
THEREFOR IT MUST BE
F L E X I B L E
mercoledì 5 giugno 13

9. | 01
Strategies & Recipes
mercoledì 5 giugno 13

10. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
YOUR SITE
CONTENT
IS IN NEED OF A
D I E T
mercoledì 5 giugno 13

11. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
PROGRESSIVE ENHANCEMENT
MINDSET IS QUITE SIMPLE: JUST
THINK FROM THE CONTENT OUT
mercoledì 5 giugno 13

12. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
GRID
ENJOY
THE FLUID
mercoledì 5 giugno 13

13. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
SET FONT-SIZE
ACCORDING TO THE
C O N T E X T
NOT THE SCREEN SIZE
mercoledì 5 giugno 13

14. | 01
Maserati.com – case study
mercoledì 5 giugno 13

15. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
MASERATI.COM/HOMEPAGE
mercoledì 5 giugno 13

16. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
MASERATI.COM/MAGAZINE
mercoledì 5 giugno 13

17. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
MASERATI.COM/EDITORIAL-GRID
mercoledì 5 giugno 13

18. | 01
The road ahead
mercoledì 5 giugno 13

19. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
A PICTURE IS WORTH
A THOUSAND 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 -->
mercoledì 5 giugno 13

20. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
DESIGN FOR THE CONTEXT
LEVERAGING DEVICES API
mercoledì 5 giugno 13

21. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
federicoweber.com
@federicoweber
federico@vangogh-creative.it
mercoledì 5 giugno 13