Top Banner

Click here to load reader

Responsive Web Design

Jun 20, 2015

ReportDownload

Technology

Conférence du 4 mai 2012, à Kiwiparty à Strasbourg.

Version ODP (avec de jolies petites animations) : http://bit.ly/INLGnH

Démonstration technique : http://bit.ly/JGKjSj

Exemples cités lors de la présentation :
3200 Tigres (WWF) : http://3200tigres.wwf.fr/
Barack Obama : http://www.barackobama.com/

  • 1. Responsive Web Design Guillaume Verstraete 04/05/12

2. Guillaume aka versguiDveloppeur web & multimdia freelance (passionn) http://versgui.fr [email protected]@versgui 3. Comment accder au Web en 2012?PC Bureau(ou Mac, on sait, cest pareil)Tablettes SmartphonesTV(set-top box, TV connectes...) 4. Des rsolutions en pagaille 20051024x768800x600 Les autres (50%)(30%) (20%) 20121366x7681280x800 Gott verdammi ! Les autres (16%)(14%) (50%) (20%) 5. 2 mthodes dintgration...jusqu aujourdhui! Conception largeur fixe Pas adapt aux grandes et petites rsolutions Peu volutif Conception largeur variable Un peu mieux, mais la navigation nest pas optimise et cenest toujours pas adapt aux rsolutions extrmes 6. Mais les choses changent 0 072 NEW 7. On peut mieux faire... 8. Une application !(une pour Android, une pour iOs, une pour Blackberry, une pour Windows Mobile...)Un site ddi pour smartphone ! (un joli site supplmentaire maintenir) 9. Une application!MAUVAISE IDEE 10. RESPONSIVEWEB DESIGNGrille flexible 11. Grille flexible (mise en page ractive) 100%15%75% 12. Grille flexible(mise en page ractive) Quelques frameworks CSSGrid.net 13. RESPONSIVEWEB DESIGNImages flexiblesGrille flexible 14. Images flexiblesimg { max-width: 100%; } 15. Media Queries (CSS3)RESPONSIVEWEB DESIGNImages flexiblesGrille flexible 16. Media Queries @media handleld, screen and (max-width: 640px){/* Un peu de CSS pour iPhone (entre autres) */} 17. Media Queries (CSS3)RESPONSIVEWEB DESIGN Images flexiblesGrille flexibleUne grille flexible (avec des images flexibles) qui incorporentdes media queries pour crer une mise en page ractive et adaptive. - Ethan Marcotte, 2010 18. Des questions?