Responsive Web Responsive Web
Guillaume Verstraete
04/05/12
DesignDesign
Guillaume aka versguiGuillaume aka versgui
Développeur web & multimédia freelance(passionné)
http://[email protected]
@versgui
Comment accéder au Web en 2012 ? Comment accéder au Web en 2012 ?
TV(set-top box, TV connectées...)
PC Bureau(ou Mac, on sait, c'est pareil)
Tablettes Smartphones
Des résolutions en pagailleDes résolutions en pagaille
1024x768(50%)
800x600(30%)
Les autres(20%)
2005
1366x768(16%)
1280x800(14%)
« Gott verdammi ! »(50%)
Les autres(20%)
2012
2 méthodes d'intégration...2 méthodes d'intégration...jusqu'à aujourd'hui ! 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
Mais les choses changentMais les choses changent
2007
NEW
On peut mieux faire...
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)
Une application ! Une application !
MAUVAISE IDEE
RESPONSIVE
WEB DESIGN
Grille flexible
Grille flexibleGrille flexible(mise en page réactive)(mise en page réactive)
100%
15% 75%
Grille flexibleGrille flexible(mise en page réactive)(mise en page réactive)
Quelques frameworks
CSSGrid.net
RESPONSIVE
WEB DESIGN
Grille flexible
Images flexibles
Images flexiblesImages flexibles
img { max-width: 100%; }
RESPONSIVE
WEB DESIGN
Media Queries (CSS3)
Grille flexible
Images flexibles
Media Queries Media Queries
@media handleld, screen and (max-width: 640px) { /* Un peu de CSS pour iPhone (entre autres) */ }
RESPONSIVE
WEB DESIGN
Media Queries (CSS3)
Grille flexible
Images flexibles
Une grille flexible (avec des images flexibles) qui incorporentdes « media queries » pour créer une mise en page réactive et adaptive.
- Ethan Marcotte, 2010
Des questions ? Des questions ?
