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 versgui
Développeur web & multimédia freelance
(passionné)
http://versgui.fr
versgui@gmail.com
@versgui

3. Comment accéder au Web en 2012 ?
PC Bureau
(ou Mac, on sait, c'est pareil)
Tablettes Smartphones
TV
(set-top box, TV connectées...)

4. Des résolutions en pagaille
2005
1024x768 800x600 Les autres
(50%) (30%) (20%)
2012
1366x768 1280x800 « Gott verdammi ! » Les autres
(16%) (14%) (50%) (20%)

5. 2 méthodes d'intégration...
jusqu'à aujourd'hui !
✔ Conception à largeur fixe
● Pas adapté aux grandes et petites résolutions
● Peu évolutif
✔ Conception à largeur variable
● Un peu mieux, mais la navigation n'est pas optimisée et ce
n'est toujours pas adapté aux résolutions extrêmes

6. Mais les choses changent
0 07
2
NEW

8. On peut mieux faire...

9. Une application !
(une pour Android, une pour iOs, une pour Blackberry, une pour Windows Mobile...)
Un site dédié pour smartphone !
(un joli site supplémentaire à maintenir)

10. Une application !
MAUVAISE IDEE

11. RESPONSIVE
WEB DESIGN
Grille flexible

12. Grille flexible
(mise en page réactive)
100%
15% 75%

13. Grille flexible
(mise en page réactive)
Quelques frameworks
CSSGrid.net

14. RESPONSIVE
WEB DESIGN
Images flexibles
Grille flexible

15. Images flexibles
img { max-width: 100%; }

16. Media Queries (CSS3)
RESPONSIVE
WEB DESIGN
Images flexibles
Grille flexible

17. Media Queries 
@media handleld, screen and (max-width: 640px)
{
/* Un peu de CSS pour iPhone (entre autres) */
}

18. Media Queries (CSS3)
RESPONSIVE
WEB DESIGN
Images flexibles
Grille flexible
Une grille flexible (avec des images flexibles) qui incorporent
des « media queries » pour créer une mise en page réactive et adaptive.
- Ethan Marcotte, 2010

19. Des questions ?