Comprendre els reptes (i les frustracions) del disseny de correu electrònic HTML

Si obriu un sistema de gestió de continguts per crear pàgines web, és un procés bastant senzill. Els navegadors web moderns admeten HTML, CSS i JavaScript per a estricte conjunt d'estàndards web. I, realment, són només un grapat de navegadors pels quals els dissenyadors s'han de preocupar. Hi ha excepcions, per descomptat... i algunes solucions o funcions senzilles específiques d'aquests navegadors.

A causa dels estàndards generals, és molt fàcil desenvolupar creadors de pàgines en sistemes de gestió de continguts. Els navegadors compleixen amb HTML5, CSS i JavaScript... i els desenvolupadors poden crear solucions increïblement robustes per crear pàgines web que responguin als dispositius i siguin coherents entre els navegadors. Fa dues dècades, pràcticament tots els dissenyadors web utilitzaven programari d'escriptori per desenvolupar pàgines web. Ara, és força estrany que un dissenyador web desenvolupi una pàgina web; la majoria de les vegades, desenvolupen plantilles i utilitzen editors en sistemes de contingut per omplir el contingut. Els editors de llocs web són fantàstics.

Però els editors de correu electrònic estan molt enrere. Heus aquí per què...

Dissenyar correus electrònics HTML és molt més complex que per a un lloc web

Si la vostra empresa vol dissenyar un bell correu electrònic HTML, el procés és exponencialment més complex que crear una pàgina web per diversos motius:

• Sense estàndards – NO hi ha una estricta adhesió a cap web normes per clients de correu electrònic que mostren correu electrònic HTML. De fet, virtualment cada client de correu electrònic i cada versió de cada client de correu electrònic actua de manera diferent. Alguns respectaran CSS, tipus de lletra externs i HTML modern. D'altres respecten alguns estils en línia, només mostraran una col·lecció de tipus de lletra i ignoraran tot menys les estructures basades en taules. De fet, és bastant ridícul en aquest moment que ningú estigui treballant en aquest tema. Com a resultat, dissenyar plantilles que es mostrin entre clients i dispositius de manera coherent s'ha convertit en un gran negoci i pot ser bastant car.
• Seguretat del client de correu electrònic – Aquesta setmana, Apple Mail s'ha actualitzat per bloquejar totes les imatges dels correus electrònics HTML de manera predeterminada que no estan incrustades al correu electrònic. Doneu permís per carregar-los un correu electrònic a la vegada, o bé heu d'activar la configuració per desactivar aquesta configuració. Juntament amb la configuració de seguretat del client de correu electrònic, també hi ha configuracions corporatives.
• Seguretat informàtica – El vostre equip informàtic pot implementar regles estrictes sobre quins objectes es poden representar realment en un correu electrònic. Si les vostres imatges, per exemple, provenen d'un domini específic que no està inclòs a la llista blanca en un tallafoc corporatiu, les imatges simplement no apareixeran al vostre correu electrònic. De vegades, hem hagut de desenvolupar correus electrònics i allotjar totes les imatges al servidor de la corporació perquè els seus propis empleats poguessin veure les imatges.
• Proveïdors de serveis de correu electrònic – Per empitjorar les coses, els creadors de correu electrònic que els proveïdors de serveis de correu electrònic (ESPs) introduir problemes en lloc de limitar-los. Mentre promocionen el seu editor és El que veus és el que obtens (WYSIWYG), sovint passa el contrari amb el disseny de correu electrònic. Previsualitzareu el correu electrònic a la seva plataforma i, a continuació, el destinatari del correu electrònic veurà tot tipus de problemes de disseny. Sovint, sense saber-ho, les empreses opten per un editor ric en funcions en lloc d'un editor bloquejat pensant que una té més funcions que l'altra. El contrari és cert... si voleu correus electrònics que es mostrin de manera coherent a tots els clients de correu electrònic, com més senzill, millor perquè menys pot sortir malament.
• Representació del client de correu electrònic – Hi ha centenars de clients de correu electrònic, cadascun representa l'HTML de manera diferent entre els clients d'escriptori, aplicacions, mòbils i de correu web. Tot i que el vostre editor de text enginyós al vostre proveïdor de serveis de correu electrònic pot tenir una configuració per posar un encapçalament al vostre correu electrònic... el farciment, els marges, l'alçada de la línia i la mida de la lletra poden diferir en cada client de correu electrònic. Com a resultat, heu de reduir l'HTML i codificar cada element de manera diferent (vegeu l'exemple següent) i sovint escriure excepcions específiques del client de correu electrònic per aconseguir que un correu electrònic es mostri de manera coherent. No hi ha tipus de blocs senzills, heu de fer dissenys basats en taules que són l'equivalent a construir per a la web fa trenta anys. És per això que qualsevol disseny nou requereix desenvolupament i proves de dispositius i clients de correu electrònic creuat. El que veieu a la vostra safata d'entrada pot ser totalment diferent del que veig a la meva safata d'entrada. És per això que les eines de renderització com Correu electrònic a Acid or Tornesol són imprescindibles per garantir que els vostres nous dissenys funcionin a tots els clients de correu electrònic. Aquí teniu una breu llista de clients de correu electrònic populars i els seus motors de renderització:
  • Ús d'Apple Mail, Outlook per a Mac, Android Mail i iOS Mail WebKit.
  • Ús d'Outlook 2000, 2002 i 2003 Internet Explorer.
  • Ús d'Outlook 2007, 2010 i 2013 Microsoft Word (sí, Word!).
  • Els clients de correu web utilitzen el motor respectiu del seu navegador (per exemple, Safari utilitza WebKit i Chrome utilitza Blink).

Un exemple d'HTML per a la web vs. Correu electrònic

Si voleu un exemple que il·lustri la complexitat de dissenyar en correu electrònic versus web, aquí teniu un exemple perfecte de l'article de Mailbakery 19 Grans diferències entre el correu electrònic i l'HTML web:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Com evitar problemes de disseny de correu electrònic

Els problemes de disseny de correu electrònic es poden evitar seguint un procés decent:

1. Disseny de plantilla – Creeu una plantilla amb diferents dissenys i blocs de contingut que incloguin tots els estils que vulgueu produir en els vostres dissenys de correu electrònic. Quan implementem un client, sempre l'impulsem dissenyar un correu electrònic per al futur – no només la propera campanya de correu electrònic que s'enviï. D'aquesta manera, podem dissenyar, desenvolupar, provar i implementar completament les solucions necessàries abans mai envien aquest primer correu electrònic.
2. Prova de plantilles – Entendre els clients de correu electrònic que utilitzen els vostres subscriptors i assegurar-vos que el vostre correu electrònic HTML estigui completament provat al mòbil i a l'escriptori és fonamental abans de desplegar qualsevol plantilla. Podem dissenyar un correu electrònic literalment des d'un disseny de Photoshop... però tallar-lo i tallar-lo en un client de correu electrònic creuat basat en taules és essencial per desplegar dissenys de correu electrònic que siguin òptims i coherents.
3. Prova interna – Un cop dissenyada i provada la vostra plantilla, s'ha d'enviar a una llista interna de llavors dins de l'organització per revisar-la i aprovar-la. Fins i tot potser voldreu començar amb un subconjunt molt limitat d'individus per assegurar-vos primer que no hi ha problemes de tallafocs o de seguretat associats amb la representació interna del correu electrònic. Si s'està creant una instància en un nou proveïdor de serveis de correu electrònic, és possible que fins i tot trobeu problemes de filtratge o bloqueig associats fins i tot a rebre el vostre correu electrònic a la safata d'entrada.
4. Versions de plantilles – No canvieu els vostres dissenys o dissenys sense treballar en una nova versió de la vostra plantilla que es pugui dissenyar, provar i desplegar adequadament. A moltes empreses els encanten els dissenys únics per a cada campanya... però això requereix que cada correu electrònic estigui dissenyat, desenvolupat i desplegat per a cada campanya. Això afegeix un munt de temps al procés intern de màrqueting per correu electrònic. A més, corre el risc de no entendre quins elements del vostre correu electrònic funcionen millor que els que no. La coherència no és només una manera de facilitar el procés, també és important per al comportament dels vostres subscriptors.
5. Excepcions del proveïdor de serveis de correu electrònic – Pràcticament tots els proveïdors de serveis de correu electrònic tenen un mitjà per solucionar els problemes que introdueix el seu creador de correu electrònic. Sovint podem afegir CSS en brut a un compte, o fins i tot tenir un bloc de contingut que s'ha d'incloure a cada correu electrònic, per tal que l'empresa utilitzi l'editor de correu electrònic integrat i no trenqui el disseny del vostre correu electrònic. Per descomptat, això pot requerir una mica de formació i control de processos per implementar aquests passos per garantir que es compleixin. O bé, és possible que, literalment, només vulgueu desenvolupar el vostre disseny de correu electrònic en una solució que s'ha demostrat que funciona entre clients i dispositius, i després enganxeu-lo de nou al vostre proveïdor de serveis de correu electrònic.

Plataformes de disseny de correu electrònic

Com que les plataformes de serveis de correu electrònic han fet una mala feina a l'hora de crear i mantenir constructors de clients creuats i entre dispositius de manera consistent, han sortit al mercat una sèrie de grans plataformes. Un que hem utilitzat àmpliament és Stripo.

Stripo no és només un creador de correu electrònic, també té una biblioteca de més de 900 plantilles que es poden importar fàcilment. Un cop dissenyeu el correu electrònic, podeu enviar-lo a més de 60 ESP i clients de correu electrònic, inclosos MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook i Gmail. El millor de totes les plantilles de Stripo inclouen les proves de representació de correu electrònic incloses perquè pugueu assegurar-vos que s'han provat i funcionen de manera coherent en més de 40 clients de correu electrònic.

Inicieu sessió a la demostració de l'Editor Stripo

Divulgació: estic enllaçant al meu empresa de consultoria de màrqueting que dissenya i desplega correus electrònics entre clients per a marques líders en pràcticament qualsevol proveïdor de serveis de correu electrònic. També sóc afiliat de Stripo i estic utilitzant el meu enllaç en aquest article.