L’avènement des terminaux mobiles de type tablettes et smartphones a révolutionné le monde de la conception web puisque les sites aujourd’hui créés sont susceptibles d’être consultés sur un très large éventail d’écrans. Aussi assiste-t-on à l’émergence d’un nouveau concept : le Responsive Web Design ! Et force est de constater que plus aucun projet n’est lancé sans que ne se pose la question du choix de cette approche de conception ! Mais de quoi parle-t-on précisément ? Il s’agit d’un ensemble de méthodes et techniques (notamment les Media Queries dans le CSS3) permettant d’universaliser un site web, donc de l’adapter à tous les types de terminaux. Ainsi, qu’il soit consulté sur ordinateur, tablette ou mobile, le site ainsi conçu s’adaptera automatiquement à la taille de l’écran. Cette formation permettra aux participants de maitriser toutes les techniques permettant de créer des sites responsive design.
Objectifs de cette formation
Responsive Web Design - Connaitre les spécificités du Responsive web design
- Maîtriser les techniques d'adaptation des contenus à différentes résolutions
- Être en mesure d'optimiser les performances d'affichage
- Connaître les bonnes pratiques en terme de conception Responsive Web Design
- Développeur
- Intégrateur HTML
Tour d’horizon
- Le monde de la mobilité
- Les usages en mobilité
- Qu’est-ce que le responsive design
- Les standards du web
Une procédure à suivre
- Une conception Mobile First
- Problématiques d’affichage
- Prendre en compte l’orientation et le tactile
- Les outils de conception
- Les plans et outils de tests
Media Queries
- Comment adapter le CSS fonction du terminal
- Les opérateurs logiques CSS
- Les critères à utiliser pour mobiles (width, device-width, orientation, etc.)
- La compatibilité navigateurs des media queries
- Risques et limites des media queries
Grilles flexibles et/ou fluides
- Quelles différences avec un positionnement classique
- Les blocs
- Les problèmes de débordements de contenus ou de médias
- Les points de rupture
- Gérer les écrans Retina
- Présentation des Framework de grilles responsives (Boostrap, Foundation, etc.)
Optimisation et performance
- Outils de mesure
- Rapidité, importance majeure pour Google
- Optimisation des CSS, des fichiers JavaScript
- La minification (minify.js)
- Les images
- Les sprites CSS
- Côté serveur, bonnes pratiques
Les plus de cette formation
Responsive Web Design - Une pédagogie riche : l'alternance de phases théoriques et de travaux pratiques favorise l'ancrage des acquis dans le temps ainsi que l'autonomie des participants à l'issue de la formation.
- Les participants bénéficient de l'expertise et de l'expérience d’intervenants fréquemment impliqués dans la conception de sites Responsive Web Design.