Objectifs du cours
Plongez dans le monde du Responsive Design et apprenez à créer des sites web qui s'adaptent parfaitement à tous les types de terminaux. Cette formation de deux jours vous guidera à travers les principes fondamentaux, les outils et les meilleures pratiques pour développer des interfaces utilisateurs flexibles et performantes, optimisées pour le web mobile.
Ce plan de cours vise à fournir aux participants :
➢ Comprendre le concept de Responsive Design et son importance.
➢ Apprendre à utiliser CSS3 et les media queries pour créer des sites adaptatifs.
➢ Maîtriser les techniques pour optimiser les performances des sites web mobiles.
➢ Découvrir les outils et méthodes pour concevoir des interfaces ergonomiques et accessibles.
Public
- Développeurs web souhaitant améliorer leurs compétences en Responsive Design.
- Designers UX/UI intéressés par l'adaptation des interfaces aux terminaux mobiles.
- Toute personne impliquée dans la gestion de projets web.
Prérequis
- Connaissances de base en HTML, CSS et JavaScript.
- Expérience préalable en développement web est un plus.
Matériel
- Ordinateur ou tablette : Chaque participant a besoin d'un ordinateur ou d'une tablette équipée des logiciels nécessaires, comme un navigateur web, pour accéder au contenu de la formation.
- Connexion internet stable : Une connexion Internet fiable et rapide est cruciale pour participer efficacement aux vidéoconférences et accéder aux outils en ligne sans problèmes de connectivité.
- Casque avec microphone : Un casque avec microphone intégré est recommandé pour améliorer la qualité audio et minimiser les bruits de fond lors des discussions en ligne.
- Webcam : Une webcam est nécessaire pour les vidéoconférences, facilitant les interactions plus personnelles et engageantes entre les participants et les formateurs.
Modalités d'organisation et d'accès
- Formation a distance / en présentiel sur demande
- Inscription requise jusqu'à 24 heures avant le début.
-
Pour les formations intra-entreprise, le client doit s'assurer et s'engager à fournir toutes les ressources matérielles pédagogiques requises (équipements informatiques, etc.) nécessaires au bon déroulement de la formation, conformément aux prérequis spécifiés dans le programme de formation fourni.
Accessibilité pour les personnes handicapées
- Si vous nécessitez des aménagements pour des besoins spécifiques d’accessibilité, contactez Mme STEMPERT, notre référente handicap, par e-mail : referent-handicap@groupe-sr3.com pour discuter des solutions possibles.
Contenu du cours
Partie 1 : Introduction et fondamentaux du Responsive Design
Définition et Usages du Responsive Design
- Introduction au concept de Responsive Design
- Rappel des fondamentaux du web mobile
- Caractéristiques du web mobile et des différents terminaux
- Importance de l’environnement design et de l’ergonomie
État des lieux du Responsive Design
- Répartition et usage des terminaux mobiles selon la cible et le contexte
- Différences entre navigateurs haut de gamme et bas de gamme
- Étude de sites références pour expérimenter les possibilités du Responsive Web Design
Fondamentaux du Responsive Design
- Grands principes et enjeux du Responsive Design
- Impact sur la gestion de projet
- Présentation des outils de conception
Partie 2 : Techniques de développement en Responsive Design
CSS3 et Media Queries
- Application des media queries au Responsive Design
- Placement cohérent des points de rupture
- Utilisation des unités CSS selon le contexte
- Exploitation des points de rupture en JavaScript
Enjeux et Contraintes
- Adaptation des interfaces aux supports mobiles
- Optimisation des menus de navigation
- Gestion des contenus : réécriture ou simple adaptation
- Adaptation des visuels et éléments courants
- Introduction à la notion de Mobile First
Optimisation de la Performance
- Bonnes pratiques du W3C
- Optimisation pour le web mobile (HTML5, CSS, JavaScript)
- Adaptation du Viewport et optimisation des requêtes
- Usage de la minification pour améliorer les performances
Partie 3 : Application pratique et technologies avancées
Technologies avancées pour le Responsive Web Design
- Utilisation des frameworks et bibliothèques pour le RWD
- Techniques avancées comme les flexbox et grid layouts
Création de formulaires intelligents
- Validation des formulaires côté client
- Manipulation et vérification des champs
- Contrôle de la soumission de formulaires
Projet Pratique
- Application des concepts appris à un projet de site web responsive
- Travaux pratiques sur un projet personnel ou en groupe
- Présentation des projets et feedback
- Récapitulatif des points clés et questions/réponses
Méthodologie
- Présentations interactives
- Démonstrations en direct
- Sessions de discussion en groupe pour encourager la réflexion collective et l'échange d'idées.
- Analyse de cas concrets permettant aux participants d'explorer différents scénarios et d'appliquer leurs connaissances théoriques.
- Réalisation d'études de cas pour approfondir la compréhension des concepts abordés et leur application dans des situations réelles.
- Utilisation de questionnaires interactifs pour évaluer régulièrement la compréhension des participants et favoriser la participation active.
- Feedback personnalisé et continu pour orienter les discussions, identifier les lacunes et stimuler l'apprentissage.
Évaluation
- Réalisation d’un test initial avant la formation pour évaluer les connaissances préalables.
- Evaluation formative via des exercices pratiques permettant l’auto-évaluation de l’apprenant.
- Evaluation sommative pour valider le parcours de formation.
- Feedback des participants à la fin de la formation pour évaluer la pertinence de la formation et identifier les domaines à améliorer.
- Évaluation de la compréhension des concepts clés à travers des quiz ou des travaux écrits.
- Questionnaire de fin de formation pour tester les connaissances acquises.
Cours mis à jour en date du 14/06/2024