Introduction aux principes du Responsive Web Design

788 vues

Publié le

Le Responsive Web Design est un principe de conception de sites web qui permet d’adapter la présentation d’une page web au périphérique utilisé pour la consulter (smartphone, tablette, ordinateur, etc.). Il s’agit d’une des pierres angulaires du web-design moderne.
Durant cette formation, vous découvrirez les grands principes du Responsive Web Design et comment les mettre en œuvre sur vos sites.

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

Introduction aux principes du Responsive Web Design

  1. 1. Responsive Web Design Mark Nightingale
  2. 2. Qu’est-ce que le Responsive Design ? Responsive Web Design
  3. 3. Responsive web design | 04 mars 2015
  4. 4. Responsive web design | 04 mars 2015 Ce qu’on faisait avant… • http://urssaf.fr (site non-responsive) • http://bbc.com (site avec version mobile)
  5. 5. Responsive web design | 04 mars 2015 Résultat…
  6. 6. Responsive web design | 04 mars 2015 Résultat…
  7. 7. Responsive web design | 04 mars 2015 Résultat…
  8. 8. Responsive web design | 04 mars 2015 Résultat…
  9. 9. Responsive web design | 04 mars 2015
  10. 10. Responsive web design | 04 mars 2015 Responsive Web Design • http:// www.bloomberg.com/
 • http://hirondelleusa.org/
 • http://www.lefigaro.fr/ vs lemonde.fr
  11. 11. Pourquoi adapter son site aux autres appareils ? Responsive web design | 04 mars 2015
  12. 12. Responsive web design | 04 mars 2015 (en entier)
  13. 13. Il faut réfléchir « Responsive » dès le début Responsive web design | 04 mars 2015
  14. 14. Responsive web design | 04 mars 2015 Dès le début, il faut penser « Responsive »
  15. 15. Responsive web design | 04 mars 2015 Wireframes responsive • http:// maquette.marknight ingale.net/ www.shakepeers.or g/wireframe-v1/
  16. 16. Responsive web design | 04 mars 2015 Navigation avec les doigts
  17. 17. Responsive web design | 04 mars 2015 Quels appareils ?
  18. 18. Outils techniques Responsive web design | 04 mars 2015
  19. 19. Responsive web design | 04 mars 2015 Compatibilité
  20. 20. Responsive web design | 04 mars 2015 Quelques outils pour compatibilité IE8 • Respond.js • HTML5shiv
  21. 21. Responsive web design | 04 mars 2015 Media queries • ‘Conditions’ à mettre dans votre CSS afin d’appliquer certaines règles pour certaines tailles d’écran
  22. 22. Responsive web design | 04 mars 2015 Meta view-port • Inclure dans le <head> de votre document HTML : <meta name="viewport" content="width=device-width, initial-scale=1">
  23. 23. Responsive web design | 04 mars 2015 Quelques exemples de patterns responsives simples • http://bradfrost.github.io/this-is-responsive/ patterns.html
  24. 24. Responsive web design | 04 mars 2015 Outils Javascript • jQuery et $(window).width() • Modernizr (détection de fonctionnalités)
  25. 25. Quelques boîtes-à-outils toutes faites Responsive web design | 04 mars 2015
  26. 26. Responsive web design | 04 mars 2015 Bootstrap • Principe de la grille : http:// getbootstrap.com/examples/grid/ • Compatible IE9 (et IE8 avec Respond.js et HTML5Shiv) • Très complet • Beaucoup de styles prédéfinis • Examples : http://getbootstrap.com/ examples/theme/ • http://www.scoopthemes.com/ templates/Oleose/Eco/# • https://www.terminusapp.com/
  27. 27. Responsive web design | 04 mars 2015 Foundation • Compatible IE9 • Conçu pour être une ‘base’ sur lequel construire • Moins de styles prédéfinis • Mobile-first • http:// memphismusichalloffame.com/ • http://foundation.zurb.com/docs/ components/kitchen_sink.html
  28. 28. Autres considérations Responsive web design | 04 mars 2015
  29. 29. Responsive web design | 04 mars 2015 Écrans Retina iPhone, iPad mini, iPad Retina, Macbook…
  30. 30. Responsive web design | 04 mars 2015 Compatibilité rétine • Retina.js http:// imulus.github.io/retinajs/ • Utiliser SVG • Utiliser des icon-fonts
  31. 31. Responsive web design | 04 mars 2015 Mobile-first • Mobile-first : charger les ressources / règles pour mobile d’abord • Minimiser la bande passante requise pour mobile • Réduire le temps de chargement perçu (lazy- load etc.) : 
 http://davidwalsh.name/ demo/lazyload-2.0.php
  32. 32. Merci de votre attention Avez-vous des questions ? Responsive web design | 04 mars 2015

×