Ceci est un complément à cette vidéo, dans laquelle nous codons et stylisons un email HTML responsive depuis zéro —
http://youtu.be/XnWIperMy08----
Cette vidéo aborde quelques points principaux :
# Structure de codage
- Peu importe, ne vous inquiétez pas des répertoires et des trucs, vous voulez que cela soit fait rapidement et de manière brute.
- Ne vous laissez pas tromper en pensant que vous devez utiliser des tableaux. C'est une pratique dépassée et n'est utile que pour créer des mises en page à colonnes multiples, qui ne sont pas une bonne idée en soi...
- Gardez à l'esprit que vos balises head et body seront probablement supprimées par le client de messagerie. Cela rend les balises de style agréables à avoir, mais vous ne pouvez pas compter sur elles.
- Ce qui rend également les requêtes @media peu fiables.
- Ce qui signifie qu'un bon email responsive est naturellement flexible et disposé en une seule colonne pour commencer.
- Tous vos styles doivent être en ligne. Mais cela ne signifie pas que vous devez les écrire de cette manière.
- Utilisez le CSS inliner de Mailchimp pour déplacer le CSS en ligne après avoir terminé de le créer en utilisant la méthode que vous préférez. J'utilise SASS. Comme un pro.
# Messaging mobile first
Les designers et expéditeurs d'emails doivent vraiment comprendre et accepter qu'une grande majorité de leurs emails seront ouverts sur un appareil mobile. J'ai décrit comment je conçois pour une colonne à largeur flexible. Mais cela signifie également garder votre contenu orienté mobile.
- Un message clair.
- Un appel à l'action clair.