Màrqueting per correu electrònic i automatitzacióVídeos de màrqueting i vendes

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. Compatibilitat amb els navegadors web moderns HTML, CSS, i JavaScript amb estàndards web estrictes. I 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 senzill 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 un estricte compliment dels estàndards web per part dels clients de correu electrònic que mostren correu electrònic HTML. Pràcticament tots els clients de correu electrònic i cada versió de cada client de correu electrònic actuen de manera diferent. Alguns respectaran CSS, tipus de lletra externs i HTML modern. D'altres respecten alguns estils en línia, només mostren una col·lecció de tipus de lletra i ignoren tot menys les estructures basades en taules. És bastant ridícul 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 – Recentment, 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 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. Tot i que promocionen el seu editor és What You See Is What You Get (WYSIWYG), sovint passa el contrari amb el disseny de correu electrònic. Previsualitzareu el correu electrònic a la seva plataforma i el destinatari veurà tots els problemes de disseny. Les empreses sovint opten sense saber-ho per un editor ric en funcions en lloc d'un de bloquejat, pensant que un té més funcions. 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 – Centenars de clients de correu electrònic representen HTML de manera diferent a ordinadors de sobretaula, aplicacions, dispositius mòbils i clients 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 per a 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:

Correu electrònic HTML

Hem de construir una sèrie de taules que incorporin tot l'estil en línia necessari per col·locar el botó correctament i assegurar-nos que es vegi bé als clients de correu electrònic. També hi haurà una etiqueta d'estil adjunta a la part superior d'aquest correu electrònic per incorporar les classes.

<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>

HTML web

Podem utilitzar un full d'estil extern amb classes per definir el cas, l'alineació, el color i la mida d'una etiqueta d'ancoratge que apareix com a botó.

<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. 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 a mòbils i ordinadors é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.
  2. 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.
  3. 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.
  4. 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 Intuit Mailchimp, Hubspot, Campaign Monitor, Aweber, eSputnik, Outlooki 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

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.