Comprendre le principe du Responsive Web Design (RWD)
- Besoins utilisateurs à satisfaire.
- Différents usages mobile/desktop.
- Statistiques par navigateur et par plateforme.
- Navigateurs haut et bas de gamme.
- Contraintes de mises à jour.
Echanges
Avantages et inconvénients du RWD.
Cerner les enjeux de la mobilité
- Chiffres et tendances de l'email mobile.
- Risques d'une stratégie non optimisée pour mobile.
- Bonnes pratiques.
Echanges
Lister les arguments pour mettre en place une stratégie pour mobile.
Choisir les bons points de rupture
- Media Queries CSS3.
- Unités CSS à utiliser.
- Les points de rupture en JavaScript Mobile First.
- Notion d'amélioration progressive.
- Option de recentrage sur les contenus.
- Méthodes de développement.
Etude de cas
Réflexion à partir d'un cas sur les points de rupture utilisés.
Maîtriser les techniques de base de codage d'un emailing
- Architecture d'un message : tableaux HTML, styles intégrés.
- Liste des propriétés CSS compatibles.
- Principaux bugs de rendu et solutions.
Exemple
Panorama des techniques d'encodage.
Connaître les préalables à une optimisation mobile
- Techniques de conception d'un email mobile.
- Analyse et optimisation de sa stratégie de contenu : charte éditoriale, contraintes graphiques.
Etude de cas
En groupe, définir les éléments pour une optimisation mobile.
Découvrir les trois approches pour une stratégie email mobile
- Fonctionnement du marquage des liens des campagnes emails.
- Adaptation simplifiée.
- Notions de "fluide" et "scalable", "adaptatif" ou "Responsive".
- Spécificités en fonction des clients de messagerie.
Echanges
Les différentes solutions d'optimisation.
Concevoir un email Responsive
- Intégration des Media Queries.
- Codage des tableaux HTML.
- Gestion des caractères et des blocs de textes.
- Nouveaux enjeux de l'intégration CSS pour e-mail.
- Amélioration progressive avec CSS3.
Travaux pratiques
Création d'un gabarit HTML adapté aux supports mobiles. Réalisation des tests : rendu visuel multi-supports et terminaux.