14
AVR

Responsive Email Patterns: Du code responsive pour vos emails html

Publié le 14/04/14 à 08h03 par DJo

Responsive Email Patterns est un site web proposant différents bouts de code HTML / CSS permettant de créer des emails responsives.

Responsive Email Patterns est un site web proposant différents bouts de code HTML / CSS permettant de créer des emails responsives.

Aujourd'hui, lorsque vous créez une campagne d'emailing, vous allez toucher autant les boîtes mails classiques desktop type Outlook, thunderbird ... que les clients emails Gmail, Yahoo... que les clients mail des smartphones/tablettes.

Il est donc intéressant de proposer un email HTML avec un design responsive pour qu'il soit adapté à tous les formats de périphériques.

Grâce à ce site, vous retrouverez différents types de patterns et modules à intégrer dans votre emailing:

  • Layout: Colonnes, sidebars, wrapper, position d'images, ...
  • Grid Blocks: Grille de blocs avec différents positionnements
  • Navigation: Eléments de navigation, liens en header et footer ...
  • Lists: Listes html responsive
  • Media: Positionnement d'images, crop des images, vidéo fluide...
  • Accordeons: Gestion d'accordéons responsives en newsletters

Responsive Emails Patterns: Code

Pour chaque pattern, vous disposez d'un exemple avec ou sans contexte d'emailing + le code HTML/CSS lié. Vous pouvez faire le test en live.

Côté compatibilité des clients emails vs responsive, voici ce que cela donne:

Compatibilité clients emails avec responsive newsletters

Quand l'état est à Full, c'est que l'email est parfaitement responsive, quand il est à working, c'est que le client email l'affiche bien dans sa résolution mais ne peux pas être redimensionné, et none, l'email ne passe pas correctement.

Vous n'avez plus qu'à intégrer différents pattern dans votre futur emailing !

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web