Introduction aux principes du Responsive Web Design
•
3 gostaram•1,162 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Introduction aux principes du Responsive Web Design
Semelhante a Introduction aux principes du Responsive Web Design (20)
Mais de StrasWeb
Mais de StrasWeb (20)
Introduction aux principes du Responsive Web Design
- 1. Responsive Web Design Mark Nightingale
- 2. Qu’est-ce que le Responsive 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 son site 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 web design | 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 toutes faites 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 web design | 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 votre attention Avez-vous des questions ? Responsive web design | 04 mars 2015