Maitriser le Responsive Web Design
Formation pour maitriser le concept et la méthode Responsive Web Design et préparer des sites adaptés à tous les écrans : smartphone, tablette, tv...
Détail de la formation
Niveau : Intermédiaire
Durée : 14 heures (2 jours)
Type : Formation collective
Formation exclusive
Profil : Intégrateurs
Tarifs : Formation collective 998€ HT
Formation exclusive 1600€ HT
Objectifs
- Comprendre les principes et les enjeux du responsive web design
- Identifier les différences d'affichage entre les terminaux
- Intégrer une méthodologie pour adapter son design
Pré-requis
- Bonnes connaissances xHTML/CSS
Programme
Journée 1
1. Panorama du web Mobile
- Les différents types de terminaux
- Evolution navigateurs, os, technologique
- Les chiffres clés du marché
- Lexique : périphériques, OS, navigateurs
- Fréquences et usages de l'internet mobile
- L'approche contenu / contenant
- Les standards actuels (HTML5, CSS3)
- Différence entre résolution et taille d'affichage
- Différence entre viewport et screen
Synthèse : panorama complet du web mobile
PAUSE (15min) 11h - 11h15
2. Définitions du Responsive Web Design
- Définition du RWD
- Les impacts sur le web design classique
- Expérience Utilisateur (UX) & Interface Utilisateur (UI)
- Rapprochement mobile-desktop : vers un seul développement ?
- Les contraintes ergonomiques et fonctionnelles
Synthèse : l'UX Design au service de la conception responsive
DEJEUNER (1H) 12h30 / 13H - 14h00
3. Les principes fondamentaux du RWD
- La notion de points de rupture « breakpoints »
- Définition
- Ou se situent les points de rupture ?
- La notion de Mobile First
- Définition
- « Progressive enhancement »
- Les méthodes de développement
- Optimiser la performance de chargement
- Requêtes et chargements superflus
- Bande passante et bonnes pratiques
Atelier : créer un wireframe responsive
PAUSE (15min) 16h - 16h15
4. Créer une grille d'affichage flexible
- Grille fixe en pixels
- Grille flexible en pourcentage
- Les unités de mesures fluides (% et em)
- La formule cible / contexte = résultat
- Box layout avec CSS3
Atelier : réaliser un affichage en grille flexible
Conclusion
- Questions / réponses
Journée 2
5. Utiliser des médias flexibles
- Rendre les images flexibles
- Optimisation des médias
- Créer des vidéos adaptatives
- Avoir des menus adaptatifs
- Avoir des tableaux et des formulaires flexibles
PAUSE (15min) 11h - 11h15
Atelier : intégration d'un cas concret
6. Appliquer des Media Queries
- Le principe des media queries
- Gérer les règles conditionnelles (orientation, device-width...)
- Détecter le pixel ratio et cibler la résolution rétina
- Javascript et les anciens navigateurs
Atelier : appliquer des règles media queries
DEJEUNER (1h) 12h30 / 13h - 14h
7. Javascript pour le Responsive Web Design
- Tester les media queries
- Tester le viewport
- Tester le navigateur
- Modification et chargement dynamique
- Redirection par Javascript
8. Les frameworks Responsive Web Design
- Avantages et inconvénients d'un framework RWD
- Etat des lieux des frameworks existants : Bootstrap, Foundation, 960 grid...
- Zoom sur Bootstrap
Atelier : démonstration du framework Foundation / Bootstrap
9. Tester son site responsive
- Tester son site responsive sur tous les terminaux
- Les émulateurs
- La gestion des polyfills
Atelier : Exemple d'un site responsive testé en temps réel
PAUSE (15min) 16h - 16h15
Ressources
- Mobile webdesign guidelines
- Les articles conseillés
- Les livres conseillés
- Les sites de références
Conclusion
- Exercice (30min)
- QCM
- Liste de présence
- Questionnaire