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/
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
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)
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