Télécharger en tant que PDF, PPTX
Téléchargé parStrasWeb
Introduction aux principes du Responsive Web Design
Le document présente le concept de responsive web design, qui consiste à adapter les sites internet à différents appareils dès le début du processus de création. Il discute des techniques comme l'utilisation de media queries, de la meta viewport, ainsi que des outils comme Bootstrap et Foundation pour faciliter le développement responsive. Enfin, il aborde les considérations pour les écrans retina et l'approche mobile-first pour améliorer l'expérience utilisateur.
Contenu connexe
Similaire à Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
- 1. Responsive Web Design MarkNightingale
- 2. Qu’est-ce que leResponsive Design ? Responsive Web Design
- 3. Responsive web design| 04 mars 2015
- 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. Responsive web design| 04 mars 2015 Résultat…
- 6. Responsive web design| 04 mars 2015 Résultat…
- 7. Responsive web design| 04 mars 2015 Résultat…
- 8. Responsive web design| 04 mars 2015 Résultat…
- 9. Responsive web design| 04 mars 2015
- 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. Pourquoi adapter sonsite aux autres appareils ? Responsive web design | 04 mars 2015
- 12. Responsive web design| 04 mars 2015 (en entier)
- 13. Il faut réfléchir« Responsive » dès le début Responsive web design | 04 mars 2015
- 14. Responsive web design| 04 mars 2015 Dès le début, il faut penser « Responsive »
- 15. Responsive web design| 04 mars 2015 Wireframes responsive • http:// maquette.marknight ingale.net/ www.shakepeers.or g/wireframe-v1/
- 16. Responsive web design| 04 mars 2015 Navigation avec les doigts
- 17. Responsive web design| 04 mars 2015 Quels appareils ?
- 18. Outils techniques Responsive webdesign | 04 mars 2015
- 19. Responsive web design| 04 mars 2015 Compatibilité
- 20. Responsive web design| 04 mars 2015 Quelques outils pour compatibilité IE8 • Respond.js • HTML5shiv
- 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. 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. Responsive web design| 04 mars 2015 Quelques exemples de patterns responsives simples • http://bradfrost.github.io/this-is-responsive/ patterns.html
- 24. Responsive web design| 04 mars 2015 Outils Javascript • jQuery et $(window).width() • Modernizr (détection de fonctionnalités)
- 25. Quelques boîtes-à-outils toutesfaites Responsive web design | 04 mars 2015
- 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. 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. Autres considérations Responsive webdesign | 04 mars 2015
- 29. Responsive web design| 04 mars 2015 Écrans Retina iPhone, iPad mini, iPad Retina, Macbook…
- 30. Responsive web design| 04 mars 2015 Compatibilité rétine • Retina.js http:// imulus.github.io/retinajs/ • Utiliser SVG • Utiliser des icon-fonts
- 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. Merci de votreattention Avez-vous des questions ? Responsive web design | 04 mars 2015