Home

Responsive Email Patterns est un site web proposant différents bouts de code HTML / CSS permettant de créer desemails 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

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s