-
Filière :
UX, UI, Web design
-
Sous-filière :
Responsive Web Design
-
Référence
RWD01
-
Durée
2 jours (14 h)
-
Prix unitaire HT
1 390 € HT
Description
Le « Responsive Web Design » (RWD) consiste à adapter le design d’un site web afin qu’il puisse être consulté indépendamment de la plateforme de l’utilisateur : ordinateur, tablette, mobile, etc. Cette approche peut être structurante pour un projet web, car elle demande une réflexion en amont pour trouver les meilleurs axes d’adaptation.
Cette formation très complète sur le Responsive Web Design vous permettra de comprendre les enjeux associés à cette méthode de travail en termes de techniques et de design, les bonnes pratiques de mise en œuvre, et détaillera quelques stratégies concrètes pour le RWD. Quelques exercices pratiques de mise en œuvre permettront d’ancrer ces concepts dans des cas concrets.
Objectifs pédagogiques
- Appréhender les tenants et aboutissants du Responsive Web Design
- Intégrer dans leur gestion de projet les implications du Responsive Web Design
- Mettre en œuvre les techniques de conception de sites web adaptatifs
Public cible
Développeurs front-end, UX Designers, Web Designers, Chefs de projet Web
Pré-requis
Bonne connaissance de l’intégration front end HTML et CSS
Modalités d’évaluation
L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.
Méthodes pédagogiques
30% théorie / 70% pratique
Programme de la formation
État des lieux du Web mobile
- Usage de devices différents selon le contexte, le moment de la journée
- Activité séquentielle d’un device à l’autre
- Statistiques par navigateurs et plateformes
- Rapprochement mobile – desktop : un seul développement
Définition du Responsive Web Design
- La définition d’origine
- Les grands principes
- L’impact sur la gestion de projet
- Les outils de conception
- Les outils de test
- Ressources essentielles
Analyse de quelques sites
- Parcours de quelques sites de nature différente pour visualiser les possibilités et pratiques du Responsive Web Design
La mise en page
- Les grilles macro typographiques
- Rythme vertical et rythme horizontal
- Mise en page fixe vs. liquide vs. élastique
- Unités CSS à utiliser
- Techniques actuelles et futures de définition de grilles : float, flexbox, grid layout, etc.
- Principaux frameworks de grilles responsives : Bootstrap, Foundation, etc.
Les points de rupture
- Les Media Queries CSS3
- Choisir les bons points de rupture
- Unités CSS à utiliser
- Exploiter les points de rupture en JavaScript
- La stratégie Mobile First, la notion d’amélioration progressive
Le viewport
- La notion de viewport
- La meta viewport
- Valeurs pertinentes de viewport
- La cas particulier de iOS
Gérer les anciens navigateurs
- Identifier les navigateurs ne comprenant pas les Media Queries
- Leur « apprendre » à les comprendre avec Respond.js
- Leur fournir une version adaptée sans JavaScript
Éléments méthodologiques pour les projets responsives
- L’impact sur le cycle projet : conception, design, intégration, tests
- Pratiques courantes et pratique « idéale »
- L’approche Atomic Design
Adapter les contenus
- Les textes. Faut-il réécrire des contenus ?
- Les images : adaptations aux largeurs fluides et densités d’écran variables
- Les vidéos
- Les menus de navigation
- Les tableaux de données
- Les formulaires
- Les publicités
La performance
- L’approche côté serveur : RESS
- L’approche côté client : le chargement conditionnel
Le référencement naturel (SEO)
- Impact sur les contenus
- Impact sur les images
Qualité
Cette formation est accessible aux personnes en situation de handicap, nous contacter en cas de besoin d’informations complémentaires.
Programme mis à jour le