Enquiries on the responsive web
0 likes456 views
Il documento discute lo sviluppo di applicazioni multi-dispositivo utilizzando CSS3 e HTML5, evidenziando l'importanza della flessibilità dei contenuti in un contesto mutevole. Si sottolinea la necessità di un approccio di miglioramento progressivo, dove il contenuto deve essere progettato in base al contesto piuttosto che solo alle dimensioni dello schermo. Vengono presentati casi studio, come maserati.com, e suggerimenti per progettare in modo efficace per diverse piattaforme.
Enquiries on the responsive web
- 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