Responsive Web Design
Mark Nightingale
Qu’est-ce que le Responsive Design ?
Responsive Web Design
Responsive web design | 04 mars 2015
Responsive web design | 04 mars 2015
Ce qu’on faisait avant…
• http://urssaf.fr (site non-responsive)
• http://bbc.com (si...
Responsive web design | 04 mars 2015
Résultat…
Responsive web design | 04 mars 2015
Résultat…
Responsive web design | 04 mars 2015
Résultat…
Responsive web design | 04 mars 2015
Résultat…
Responsive web design | 04 mars 2015
Responsive web design | 04 mars 2015
Responsive Web
Design
• http://
www.bloomberg.com/

• http://hirondelleusa.org/

• ht...
Pourquoi adapter son site aux autres
appareils ?
Responsive web design | 04 mars 2015
Responsive web design | 04 mars 2015
(en entier)
Il faut réfléchir « Responsive » dès le
début
Responsive web design | 04 mars 2015
Responsive web design | 04 mars 2015
Dès le début, il faut penser « Responsive »
Responsive web design | 04 mars 2015
Wireframes
responsive
• http://
maquette.marknight
ingale.net/
www.shakepeers.or
g/wi...
Responsive web design | 04 mars 2015
Navigation avec les doigts
Responsive web design | 04 mars 2015
Quels appareils ?
Outils techniques
Responsive web design | 04 mars 2015
Responsive web design | 04 mars 2015
Compatibilité
Responsive web design | 04 mars 2015
Quelques outils pour compatibilité IE8
• Respond.js
• HTML5shiv
Responsive web design | 04 mars 2015
Media queries
• ‘Conditions’ à mettre dans
votre CSS afin d’appliquer
certaines règle...
Responsive web design | 04 mars 2015
Meta view-port
• Inclure dans le <head> de votre document
HTML :
<meta name="viewport...
Responsive web design | 04 mars 2015
Quelques exemples de patterns
responsives simples
• http://bradfrost.github.io/this-i...
Responsive web design | 04 mars 2015
Outils Javascript
• jQuery et $(window).width()
• Modernizr (détection de fonctionnal...
Quelques boîtes-à-outils toutes faites
Responsive web design | 04 mars 2015
Responsive web design | 04 mars 2015
Bootstrap
• Principe de la grille : http://
getbootstrap.com/examples/grid/
• Compati...
Responsive web design | 04 mars 2015
Foundation
• Compatible IE9
• Conçu pour être une ‘base’ sur
lequel construire
• Moin...
Autres considérations
Responsive web design | 04 mars 2015
Responsive web design | 04 mars 2015
Écrans Retina
iPhone, iPad mini, iPad Retina, Macbook…
Responsive web design | 04 mars 2015
Compatibilité rétine
• Retina.js http://
imulus.github.io/retinajs/
• Utiliser SVG
• ...
Responsive web design | 04 mars 2015
Mobile-first
• Mobile-first : charger les
ressources / règles pour
mobile d’abord
• M...
Merci de votre attention
Avez-vous des questions ?
Responsive web design | 04 mars 2015
Prochain SlideShare
Chargement dans…5
×

Introduction aux principes du Responsive Web Design

713 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
713
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
18
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

×