Formation Responsive Web Design

État des lieux 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
Les alternatives pour le développement d’applications mobiles Analyse de quelques sites Observation de 3 sites de nature différente pour visualiser les possibilités du Responsive Web Design 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 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 des grilles
Les principaux frameworks de grilles responsives (Bootstrap, Foundation, Suit, etc.) Travaux pratiques Écrire deux feuilles de styles pour des mises en page linéaire et multi-colonnes du même contenu 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
Mobile First
Définitions
La notion d’amélioration progressive
Option de recentrage sur les contenus
Méthodes de développement Travaux pratiques Fusionner les deux feuilles de styles précédentes avec un point de rupture Le viewport La notion de viewport
Le meta viewport
Valeurs
Implications sur Safari/iPhone Travaux pratiques Préciser le viewport pour optimiser l’affichage sur mobiles Gérer les navigateurs obsolètes Identifier les navigateurs ne comprenant pas les Media Queries
Leur « apprendre » à les comprendre avec Respond.js
Leur fournir une version adaptée sans JavaScript Adapter les interfaces Supprimer l’utilisation du survol
Faciliter le clic avec une visée moins précise Adapter les contenus Adapter les textes
Réécrire des contenus ? Adapter les images Images et largeurs fluides
Principe de l’affichage Retina
Images bitmap (gif, png, jpeg) et images vectorielles (svg, fontes)
Enregistrer ses images avec une définition optimale
Évolutions des standards : le point sur le travail du W3C
Solutions actuelles Travaux pratiques Intégrer des images bitmap de contenu et de décoration
Intégrer une image SVG
Utiliser une solution de chargement d’image adaptée au viewport Adapter les menus de navigation Problèmes particuliers à la navigation
Retour sur les stratégies courantes
Réflexion sur la déclinaison sur le cas pratique Travaux pratiques Rendre la navigation responsive Adapter les tableaux de données Présentation des principales techniques connues Travaux pratiques Intégrer des tableaux de données aux contenus Adapter d’autres éléments courants Les formulaires
Les vidéos
Les publicités La performance L’approche côté serveur : RESS
L’approche côté client : le chargement conditionnel Travaux pratiques Modulariser la page pour optimiser son chargement Le référencement naturel (SEO) Impact sur les contenus
Impact sur les images Les e-mail Les nouveaux enjeux de l’intégration CSS pour e-mail