Développement Web & No-Code
Responsive Design : concevoir et développer des interfaces web adaptables à tous les terminaux
Intermédiaire
À propos de cette formation
Les concepteurs de sites web doivent désormais anticiper la diversité des terminaux d'affichage. Cette formation de 2 jours apporte des réponses concrètes aux problématiques de conception ergonomique et aux contraintes du Responsive Design. Elle couvre les fondamentaux (media queries, grilles flexibles, images adaptatives), les principaux frameworks CSS et les techniques d'optimisation des performances, avec une approche résolument Mobile First.
Objectifs de la formation
- Concevoir et développer des interfaces web compatibles avec tous types de terminaux
- Adopter une approche de conception ergonomique Mobile First
- Utiliser les composants graphiques, frameworks et librairies responsive
- Optimiser les performances d'affichage sur mobile et sur ordinateur
Programme détaillé
Module 1 — Les terminaux
- Types de terminaux (mobile, tablette, TV, liseuse…) et leurs résolutions
- Périphériques, systèmes d'exploitation et navigateurs à prendre en compte
- Panorama du marché mobile et répartition des parts de marché
- Travaux pratiques : détection du type de terminal en PHP et JavaScript
Module 2 — Introduction au Responsive Design
- Standards HTML5 et CSS3 : API, sélecteurs et principales nouveautés
- Définition et principes du Responsive Design (concept de Marcotte)
- L'approche Mobile First : principes et mise en œuvre
- Séparation contenu/contenant
- Gestion des orientations portrait/paysage, navigation tactile et impact sur l'ergonomie
- Différences entre design web et design mobile
Module 3 — Media Queries
- Adaptation des feuilles de style aux caractéristiques du terminal
- Règles conditionnelles CSS : orientation, device-width et autres critères
- Réglage du rendu visuel avec la balise Viewport
- Gestion de la compatibilité avec les anciens navigateurs via JavaScript
- Media queries orientées appareils
- Travaux pratiques : construction de CSS adaptés aux modes portrait et paysage selon la résolution
Module 4 — Principe de grille et layout
- Conception classique versus conception selon une grille
- Le positionnement par grille et ses avantages
- Unités de mesure : %, em, px, vh, dvh — spécificités des écrans haute définition (mode Retina)
- Éviter les débordements et définir les points de rupture
- Organisation de l'information sur la page et répartition du contenu dans les blocs
- Élaborer un plan de tests responsive
- Travaux pratiques : construction d'une ergonomie basée sur une grille flexible
Module 5 — Composants graphiques
- Images flexibles : images de fond, adaptation HTML5, gestion de la qualité selon le terminal
- Contenu responsive : rupture de texte et mise en colonnes multiples
- Polices fluides : formats et taille adaptative selon l'écran
- Marges et espaces flexibles
- Adapter les menus, carrousels et tableaux aux petits écrans
- Créer des images et vidéos adaptées à tous les formats
- Travaux pratiques : mise en œuvre de solutions de composants graphiques responsive
Module 6 — Frameworks et librairies responsive
- Détecter les ressources disponibles avec Modernizr
- La syntaxe des templates
- Le framework Bootstrap et son système de grille
- La bibliothèque de composants Material-UI
- Autres frameworks CSS : 960 Grid, Foundation, Semantic UI, Skeleton, UIKit
- Travaux pratiques : intégration et utilisation de frameworks responsive
Module 7 — Optimisation et performances
- Mesurer les performances de chargement et optimiser la consommation de bande passante
- Répartition des traitements entre client et serveur
- Optimisation des ressources graphiques pour le web
- Stratégies de gestion du cache
- Travaux pratiques : audit de pages web, corrections conceptuelles et techniques
Prérequis
Maîtriser les bases de HTML et CSS.