NewsLetter

Formation Concevoir une NewsLetter Web Responsive (Smartphone – tablette – écran)

Le programme en PDF
  • Durée1 jour(s)
  • Référence EMK-NLWR-S1
Public : Toute personne réalisant des NewsLetters ou des e-mailings
Pré-requis : Avoir suivi le stage "Créer une newsletter ou un e-mailing" ou avoir déjà réalisé des newsletters ou des e-mailings.
Objectifs : - Savoir préparer et optimiser des emailings responsive pour garantir un affichage correct sur les différents clients mail.
- Être capable de mettre en œuvre un design responsive dans le cadre d’une newsletter ou d’un e-mailing.

Programme

Principes généraux

  • Qu’est ce que le Responsive Web Design ?
  • Les problématiques des différents supports de lecture (résolution, taille d’écran, etc…)
  • Les différents types de clients e-mail (lecteur, boite mail, etc…)
  • Les principes généraux du Responsive Web Design
  • Fonctionnement et exemples
  • État des lieux de la compatibilité des clients mails

Rappel des techniques de codage de base d’une newsletter ou d’un e-mailing

  • Tableaux HTML
  • Styles intégrés (inline)

Le Responsive Web Design

  • Déterminer les points de ruptures
  • Les medias queries
  • Les médias queries appliqués au Responsive Web Design

Réaliser une maquette en responsive Design

  • Réaliser une maquette html pour smartphones
  • Réaliser une maquette html pour tablettes
  • Réaliser une maquette html pour écran
  • Préparation des éléments graphiques
  • Réaliser la maquette dans Photoshop ou Gimp
  • Découper les images

Maitriser l’intégration en Responsive Design

  • La balise méta pour les Smartphones et tablettes
  • Media queries portrait et landscape
  • La propriété background-size
  • Travailler avec des arrière-plans en pourcentages
  • Travailler avec des images en pourcentages
  • Concevoir des pages en pourcentages
  • Bloquer la taille maximale de la page

Le travail des textes

  • Comprendre l’unité em
  • Travailler avec des polices en unité em
  • L’unité em comme unité décimale

Exercices :

Réalisation complète et mise en ligne d’un E-mailing responsive :

  • Réaliser une page en responsive web design pour les smartphones
  • Réaliser une page en responsive web design pour les tablettes
  • Réaliser une page en responsive web design pour les écrans
  • Mise en ligne et tests