Description
Objectif de la formation : Apprendre à concevoir et développer des interfaces web adaptées à tous types de terminaux en suivant les principes du responsive design et en optimisant la performance des applications et interfaces.
Objectifs pédagogiques
- Concevoir des interfaces web réactives adaptées à tous les types de terminaux
- Apprendre à intégrer les principes de conception ergonomique Mobile First
- Utiliser des outils et frameworks pour la conception de maquettes responsives
- Optimiser la performance des applications en termes de vitesse et de réactivité
Public concerné
Développeurs web, designers UX/UI, chefs de projet.
Toute personne impliquée dans la création de sites web ou d'applications nécessitant une conception responsive.
Prérequis
Connaissances de base en HTML, CSS et JavaScript.
Expérience avec des outils de design ou de développement web.
Déroulé du programme
1
JOUR 1 : Introduction au Responsive Design (1h30)
1h
- Définition et principes du responsive design.
- Importance de l’adaptation des interfaces selon le type de terminal (desktop, mobile, tablette).
- Différences entre responsive design et design adaptatif.
2
Utilisation des media queries (1h30)
1h
- Qu'est-ce qu'une media query ? Syntaxe et utilisation dans CSS.
- Adaptation des styles CSS en fonction des tailles d’écran.
- Application de breakpoints pour créer des designs flexibles.
3
Design fluide et unités relatives (1h30)
1h
- Introduction aux unités de mesure relatives : %, em, rem, vw, vh, etc.
- Comment utiliser ces unités pour garantir la fluidité de l’interface.
- Avantages de l’utilisation de ces unités dans un design responsive.
4
Création de prototypes et maquettes responsives (1h30)
1h
- Outils et techniques pour concevoir des maquettes d’interfaces réactives.
- Structurer une page web avec des grilles flexibles et des repères.
- Outils comme Adobe XD ou Figma pour simuler des interfaces responsives.
- Activités pratiques :
5
Créer un prototype d’interface web avec un design responsive en utilisant Adobe XD ou Figma.
6
Tester la maquette sur plusieurs formats (desktop, tablette, mobile)
7
JOUR 2 : Introduction au Mobile First (1h30)
1h
- Définition du concept Mobile First et ses avantages.
- Pourquoi privilégier le mobile dans la conception d'interfaces.
8
Optimisation pour les appareils mobiles (1h30)
1h
- Réduction des ressources (compression d'images et fichiers).
- Techniques pour accélérer le temps de chargement des pages mobiles.
9
Adaptation aux écrans plus larges (1h30)
1h
- Comment faire évoluer un design mobile vers un format tablette ou desktop.
- Mise en place de breakpoints et d'éléments fluides.
10
Création d'une interface fonctionnelle en Mobile First (1h30)
1h
- Application des principes ergonomiques pour créer une interface mobile.
- Tests et ajustements en fonction des besoins utilisateurs.
11
JOUR 3 : Choix des composants graphiques (1h30)
1h
- Sélection de composants graphiques adaptés à un design responsive (boutons, formulaires, etc.).
- Importance de l’accessibilité dans le choix des éléments graphiques.
12
Introduction aux Frameworks Responsives (2h)
2h
- Présentation de Bootstrap, Foundation, Tailwind CSS.
- Intégration d’un framework dans un projet web.
13
Librairies pour le responsive design (1h30)
1h
- Utilisation de Materialize, Tailwind CSS, et autres librairies pour améliorer les interfaces.
- Création de composants adaptatifs avec CSS Grid et Flexbox.
14
Optimisation de la conception avec des librairies JavaScript (1h)
1h
- Introduction aux librairies comme Vue.js, React pour des interfaces dynamiques.
- Adaptation des composants aux besoins du responsive design.
15
JOUR 4 : Analyser la performance web (1h30)
1h
- Outils pour mesurer la performance web : Google PageSpeed Insights, Lighthouse.
- Identifier les zones à améliorer pour augmenter la vitesse de chargement.
16
Optimisation du temps de chargement (1h30)
1h
- Techniques de réduction du poids des fichiers CSS, JS et HTML.
- Utilisation du Lazy Loading pour les images et les vidéos.
17
Réduction des requêtes HTTP (1h30)
1h
- Combinaison de fichiers CSS et JavaScript pour réduire le nombre de requêtes.
- Utilisation du cache pour les ressources.
18
Optimisation des performances mobiles (1h30)
1h
- Techniques spécifiques pour améliorer la vitesse et la réactivité sur les appareils mobiles.
- Implémentation de solutions comme le Responsive Images (formats WebP).
Informations
Durée
4 jour(s)
24h
Tarif
Sur demande
Formations similaires
Autre
Module 11 : Techniques élémentaires de méthodes d’apprentissage
2 jour(s)
Sur demande
Autre
Accueil - Maîtrise des Incivilités et Prévention de l'Agressivité en Milieu Hospitalier - SAU de Cochin - Port Royal
2 jour(s)
Sur demande
Autre
Administering Microsoft SQL Server
5 jour(s)
Sur demande
Autre
Administering Windows Server Hybrid Core Infrastructure (AZ-800)
4 jour(s)
Sur demande