Avertissement

Échec de la suppression de sourcerer_php_a6b52927b8c5a53c1d04f142d839cb9e

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.

Remarques

Certification

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

Organisme de formation enregistré sous le n° 24450269645 auprès du préfet de Région Centre - Nos localisations | Recrutement | Contact | Plan du site | Infos légales