Le courrier électronique peut-il être réactif?

8

Qu'on aime ou qu'on déteste, on ne peut nier la popularité des e-mails HTML. Et, comme le Web précédent, la boîte de réception est officiellement devenue mobile, avec plus de 50% des ouvertures d'e-mails se produisant sur les appareils mobiles.

L'email peut-il vraiment être réactif compte tenu de la façon dont l'email HTML Suck?

html responsive-design Riad Kanane
la source
Cela ne dépendrait-il pas de l'application de messagerie, la plupart du temps le formulaire de messagerie Web préempterait votre objectif car il s'enroule autour de votre code HTML
joojaa
Vérifiez DEVTIPS sur youtube. Je suis sûr qu'il existe une vidéo sur le courrier électronique réactif.
Komental
J'aime bien votre question, mais pour l'instant, cela vous dérange-t-il de la modifier pour qu'elle rentre dans le domaine de la "conception", car cela serait peut-être mieux adapté sur SO dans le sens où cela justifierait qu'il s'agisse d'une question liée au code et non d'une conception question connexe.
DᴀʀᴛʜVᴀᴅᴇʀ
N'est-ce pas simplement une question d'utiliser% dans les tableaux? J'ai déjà créé un modèle mailchimp avec seulement%, ce qui le rendait parfait pour tous les appareils ..
rwzdoorn

Réponses:

3

Le courrier électronique peut-il vraiment être réactif

Réponse simple à votre question .. OUI

Les e-mails HTML relèvent quelque peu de la même règle des sites Web, mais ils sont généralement plus difficiles à gérer et reposent toujours sur un ancien style de code daté utilisant des <table>balises. Il y a un excellent article de Web Design Tuts que j'aurais aimé voir quand j'ai commencé à faire des e-mails HTML.

Un peu sur le tutoriel, il explique comment créer un e-mail réactif et une note importante lors de la création d'e-mails HTML est que le CSS doit être en ligne à la fin. Il explique comment cibler CSS pour Yahoo avec body[yahoo] .class {}et ils font référence à l'article de Tina Ye sur « Les e-mails HTML réactifs: une stratégie différente ».

Étant donné que l'article de Webdesign Tuts n'entre pas dans les détails de l'article de Tina, je vous recommande de le lire car elle passe à la première méthode de conception mobile et montre comment concevoir pour Lotus 8, Outlook 00-03, Outlook 2007+ et Apple :

Lotus Notes 8 et Outlook 2000-2003

 <!--[if IE]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if IE]>
      </td>
    </tr>
  </table>
<![endif]-->

Outlook 2007+

<!--[if (gte mso 9)|(IE)]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
  </table>
<![endif]-->

Apple Mail

@media only screen and (min-device-width: 541px) {
  .content {
    width: 540px !important;
  }
}

Si vous effectuez une recherche Google pour les modèles d'e-mails réactifs, il existe un article intitulé " 32 modèles d'e-mails réactifs pour votre petite entreprise " par Mashable.
Il discute des modèles gratuits et payants pour vos e-mails et il va dans Zurb que je recommanderais si vous utilisez Foundation pour la conception Web.

DᴀʀᴛʜVᴀᴅᴇʀ
la source
1

Ils le peuvent bien sûr! Voici un modèle que vous pouvez utiliser pour créer des e-mails HTML réactifs : http://zurb.com/ink/ . La création d'un e-mail HTML à partir de zéro nécessite beaucoup de connaissances sur la façon dont les clients de messagerie analysent les e-mails. Ce modèle garantit que votre e-mail s'affiche correctement sur tous les clients de messagerie.

Tout ce que vous devez faire est de remplacer le contenu du fichier par votre e-mail et d'exécuter ce fichier via un script dans votre application qui gère l'envoi d'e-mails.

Harceler
la source
1
Veuillez fournir plus d'informations sur le lien que vous avez fourni, car à l'heure actuelle, il ne s'agit que d'une réponse de lien et à l'avenir, si le site devait tomber, vous pourriez recevoir des downvotes.
DᴀʀᴛʜVᴀᴅᴇʀ
1
Modifié la réponse.
Nag
Belle ressource vraiment intéressante (et bien documentée!).
user56reinstatemonica8
1

Oui, mais à moins que vous n'ayez une énorme passion pour cela, ne vous embêtez pas. Imaginez que vous codiez pour IE5 et que vous deviez le tester. Il peut être préférable d'acheter un modèle pour ce genre de chose plutôt que de faire votre propre solution sur mesure.

C3Lawrence
la source