Création email Responsive
3 jours - 21 heures
Objectifs
Savoir optimiser la conception d’un email sous smartphone/tablette Connaître les balises utiles pour adapter sa page à des écrans de tailles diverses Savoir obtenir un rendu homogène quel que soit le contexte de visualisation mobile ou desktop Connaître les outils en ligne permettant de tester les créations responsive ou adaptatives Connaître les limites du responsive design
Participants
Webmaster.
Prérequis
Connaitre les bases en programmation.
Pédagogie
La pédagogie est basée sur le principe de la dynamique de groupe avec alternance d'apports théoriques, de phases de réflexion collectives et individuelles, d'exercices, d'études de cas et de mises en situations observées. Formation / Action participative et interactive : les participants sont acteurs de leur formation notamment lors des mises en situation car ils s'appuient sur leurs connaissances, les expériences et mettront en œuvre les nouveaux outils présentés au cours de la session.
Public Visé
Collaborateurs - Développer ses compétences, s’affirmer comme expert dans son domaine, sécuriser son parcours professionnel ; Entreprises ou organisations - Accélérer les évolutions de carrière des collaborateurs, augmenter l’efficacité et l’employabilité des équipes… ; Demandeur d’emploi - Développer son employabilité, favoriser sa transition professionnelle...
Profil de l'intervenant
Consultant-formateur expert. Suivi des compétences techniques et pédagogiques assuré par nos services.
Accessibilité
Moyens techniques
Encadrement complet des stagiaires durant la formation. Espace d’accueil, configuration technique des salles et matériel pédagogique dédié pour les formations en centre. Remise d’une documentation pédagogique papier ou numérique à échéance de la formation.
Méthodes d'évaluation des acquis
Un contact téléphonique est systématiquement établi avec le stagiaire ou la personne chargée de son inscription afin de définir le positionnement. Si besoin, un questionnaire est adressé pour valider les prérequis en correspondance et obtenir toute précision nécessaire permettant l’adaptation de l’action. Durant la formation, des exercices individuels et collectifs sont proposés pour évaluer et valider les acquis du stagiaire. La feuille d’émargement signée par demi-journée ainsi que l’évaluation des acquis sont adressées avec la facture.
Programme
Les techniques d’adaptation des emails au mobile
- Les différentes tailles d’écran
- La différence entre l’adaptative design et le responsive design
- Les différents breakpoints
- Rappel des bases du HTML
- Focus sur
- Le CSS
- Les sélecteurs d’attribut
- Les outils de gestion des attributs
- La balise @media: principes et précautions de mise en oeuvre
- Usage des balises Min-Width & Max-Width
- La gestion de l’orientation du périphérique
- Les possibilités sur Media Query
- Qui prend en charge la Media Query?
- Les outils d’aide à la conception et aux tests du responsive design
- Création d’un email en responsive design de A à Z
- Les call to action
- Références et liens utiles
Création d’un email en responsive design de base au framework
- Scalabe Design vs Fluid Design vs Responsive Design
- Mise en pratique
- Réalisation d’un template simple
- Coder la structure de base
- Ajouter des images
- Ajouter du texte
- Gérer les écarts
- Introduction au CSS
- Gestion des listes à puces
- Réaliser l’email en responsive
- Introduction aux Media Queries
- Structure 2 colonnes
- Coder la structure en 2 colonnes
- Écrire les conditions pour mobile ou PC de bureau
- Optimiser les conditions pour les mobiles
- Responsive Design
- Modification des Media Queries
- Mise en page de la colonne mobile
- Coder le tableau pour le contenu sur 2 colonnes
- Conversion de la mise en page mobile à 1 colonne
- Créer un template responsive sans media querie
- Optimisation des images pour mobile
- Qualité d’image
- Traitement des images Retina
- Remplacement de la bannière sur mobile
- Optimisation de la bannière mobile
- Optimisation de la mise en page mobile
- Dimensionnement du paragraphe
- Retrait des marges sur mobile
- Intégrer d’un design en responsive
- Préparer son fichier
- Découpe du fichier
- Intégration de la structure
- Validation du code HTML
- Tester vos intégrations
- Les meilleures pratiques
- Ajout d’un préheader pour inciter les utilisateurs mobiles
- Structurer la mise en page du footer
- Optimiser le pied de page pour les périphériques mobiles
- Arrondir les coins des images
- Ajout d’ombre Shadow box
- Utilisation de Google Web Fonts pour l’email
- Ajouter du style aux balises ALT
- Frameworks
- Zurb, Antworkvs Media querie
- Les limites des medias queries
- Grille responsive vs Colonne
- Utiliser une grille
