Responsive Web Design

2 124 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
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 124
Sur SlideShare
0
Issues des intégrations
0
Intégrations
80
Actions
Partages
0
Téléchargements
37
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 ?

×