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.

Profil de l’intervenant

Consultant-formateur expert. Suivi des compétences techniques et pédagogiques assuré par nos services.

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

Exercices individuels et collectifs durant la formation. La feuille d’émargement signée par demi-journée ainsi que l’évaluation des acquis de fin de stage 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

log-172.pdf


Formations Durée Référence

Installer, maintenir et administrer un site Joomla. Créer du contenu, gérer les utilisateurs, les extensions d'un site sans connaissances en ...

3 jours CWEB130

Créer un blog de qualité professionnelle, gérer les contenus, les utilisateurs, ajouter des plugins & widgets

3 jours log-078

Apprendre les bases de la conception de pages web

3 jours log-034

Concevoir des sites Web contenant des graphiques vectoriels et bitmap, du mouvement, de l’audio, des formulaires et de l’interactivité.

3 jours DIFL100

Acquérir les connaissances nécessaires pour réaliser des pages et des animations interactives intégrant un graphisme de qualité.

3 jours CWEB160

A l’issue de la formation, les stagiaires seront capables de : Utiliser les ressources de l'éditeur DreamWeaver. Créer des pages statiques et ...

3 jours CWEB150

Créer avec Drupal un site web dont le contenu est facilement administrable. Mettre en place, maintenir et faire évoluer son site ...

3 jours log-243

Comprendre le fonctionnement de la communication et de l’écrit sur le web Connaître les critères pour la lisibilité des textes et ...

1 jour log-001

Apprendre à réaliser un emailing Comprendre la notion de délivrabilité Identifier les indicateurs de performance et savoir les mesurer Exploiter un fichier contact ...

1 jour log-007

Concevoir des animations créatives et interactives. Mettre en oeuvre des fonctionnalités HTML5, JavaScript et CSS3 sans coder. Créer des applications ...

3 jours log-345