Responsive Web Design

• 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?