Responsive Web Design     Guillaume Verstraete             04/05/12
Guillaume aka versguiDéveloppeur web & multimédia freelance             (passionné)           http://versgui.fr         ve...
Comment accéder au Web en 2012 ?                PC Bureau            (ou Mac, on sait, cest pareil)Tablettes              ...
Des résolutions en pagaille                         2005            1024x768                  800x600   Les autres        ...
2 méthodes dintégration...            jusquà aujourdhui !✔   Conception à largeur fixe    ●   Pas adapté aux grandes et pe...
Mais les choses changent 0 072           NEW
On peut mieux faire...
Une application !(une pour Android, une pour iOs, une pour Blackberry, une pour Windows Mobile...)                  Un sit...
Une application !MAUVAISE IDEE
RESPONSIVE  WEB DESIGNGrille flexible
Grille flexible (mise en page réactive)           100%15%          75%
Grille flexible(mise en page réactive)     Quelques frameworks     CSSGrid.net
RESPONSIVE  WEB DESIGN                  Images flexiblesGrille flexible
Images flexiblesimg { max-width: 100%; }
Media Queries (CSS3)  RESPONSIVE  WEB DESIGN                            Images flexiblesGrille flexible
Media Queries @media handleld, screen and (max-width: 640px){  /* Un peu de CSS pour iPhone (entre autres) */}
Media Queries (CSS3)                    RESPONSIVE                    WEB DESIGN                                          ...
Des questions ?
Responsive Web Design
Prochain SlideShare
Chargement dans…5
×

Responsive Web Design

2 225 vues

Publié le

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/

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Responsive Web Design

  1. 1. Responsive Web Design Guillaume Verstraete 04/05/12
  2. 2. Guillaume aka versguiDéveloppeur web & multimédia freelance (passionné) http://versgui.fr versgui@gmail.com @versgui
  3. 3. Comment accéder au Web en 2012 ? PC Bureau (ou Mac, on sait, cest pareil)Tablettes Smartphones TV (set-top box, TV connectées...)
  4. 4. Des résolutions en pagaille 2005 1024x768 800x600 Les autres (50%) (30%) (20%) 20121366x768 1280x800 « Gott verdammi ! » Les autres (16%) (14%) (50%) (20%)
  5. 5. 2 méthodes dintégration... jusquà aujourdhui !✔ Conception à largeur fixe ● Pas adapté aux grandes et petites résolutions ● Peu évolutif✔ Conception à largeur variable ● Un peu mieux, mais la navigation nest pas optimisée et ce nest toujours pas adapté aux résolutions extrêmes
  6. 6. Mais les choses changent 0 072 NEW
  7. 7. On peut mieux faire...
  8. 8. 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)
  9. 9. Une application !MAUVAISE IDEE
  10. 10. RESPONSIVE WEB DESIGNGrille flexible
  11. 11. Grille flexible (mise en page réactive) 100%15% 75%
  12. 12. Grille flexible(mise en page réactive) Quelques frameworks CSSGrid.net
  13. 13. RESPONSIVE WEB DESIGN Images flexiblesGrille flexible
  14. 14. Images flexiblesimg { max-width: 100%; }
  15. 15. Media Queries (CSS3) RESPONSIVE WEB DESIGN Images flexiblesGrille flexible
  16. 16. Media Queries @media handleld, screen and (max-width: 640px){ /* Un peu de CSS pour iPhone (entre autres) */}
  17. 17. Media Queries (CSS3) RESPONSIVE WEB DESIGN Images flexibles Grille flexible 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
  18. 18. Des questions ?

×