E-Mail Marketing & AutomatiounMarketing & Verkafsvideoen

D'Erausfuerderungen (A Frustratiounen) vum HTML E-Mail Design verstoen

Wann Dir en Inhaltsmanagementsystem opmaacht fir Websäiten ze bauen, ass et e relativ einfache Prozess. Modern Webbrowser ënnerstëtzen HTML, CSS, a JavaScript op strikt Webstandards. A si sinn nëmmen eng Handvoll Browser, déi Designer sech Suergen maache mussen. Et ginn Ausnahmen, natierlech ... an e puer einfache Léisungen oder Funktiounen spezifesch fir dës Browser.

Wéinst den allgemenge Standarden ass et einfach Säit Builder an Content Management Systemer z'entwéckelen. Browser entspriechen HTML5, CSS, a JavaScript ... an Entwéckler kënnen onheemlech robust Léisunge bauen fir Websäiten ze kreéieren déi reaktiounsfäeger op Apparater a konsequent iwwer Browser sinn. Virun zwee Joerzéngten huet quasi all Webdesigner Desktop Software benotzt fir Websäiten z'entwéckelen. Elo ass et zimmlech ongewéinlech fir e Webdesigner eng Websäit z'entwéckelen - méi dacks wéi net, si entwéckelen Templates a benotzen Redaktoren an Inhaltssystemer fir den Inhalt auszefëllen. Websäit Redaktoren sinn fantastesch.

Awer E-Mail Redaktoren sinn wuel hannendrun. Hei ass firwat ...

HTML E-Mailen designen ass vill méi komplex wéi fir eng Websäit

Wann Är Firma e schéine HTML E-Mail entworf wëllt, ass de Prozess exponentiell méi komplex wéi eng Websäit aus verschiddene Grënn auszebauen:

  • Keng Normen - Et gëtt KENG strikt Anhale vu Webnormen vun E-Mail Clienten déi HTML E-Mail weisen. Bal all E-Mail Client an all Versioun vun all E-Mail Client handelt anescht. E puer wäerten CSS, extern Schrëften a modernen HTML respektéieren. Anerer Éieren e puer Inline Styling, weisen nëmmen eng Sammlung vu Schrëften, an ignoréieren alles ausser Dësch-Undriff Strukturen. Et ass ganz lächerlech datt keen un dësem Thema schafft. Als Resultat ass Templates designen déi iwwer Clienten an Apparater konsequent renderen ass grouss Geschäft ginn a kënnen zimlech deier sinn.
  • Email Client Sécherheet - Viru kuerzem ass Apple Mail aktualiséiert fir all Biller an HTML E-Mailen als Standard ze blockéieren déi net an der E-Mail agebonne sinn. Dir gitt entweder d'Erlaabnis hinnen eng E-Mail gläichzäiteg ze lueden oder musst d'Astellunge aktivéieren fir dës Astellung auszeschalten. Zesumme mat Email Client Sécherheet Astellunge ginn et och Firmen Astellunge.
  • IT Sécherheet - Är IT-Team kann strikt Reegelen ofsetzen iwwer wéi eng Objekter tatsächlech an enger E-Mail geliwwert kënne ginn. Wann Är Biller, zum Beispill, aus engem spezifesche Domain kommen, deen net an enger Firmen-Firewall op Whitelist ass, ginn d'Biller einfach net an Ärer E-Mail op. Heiansdo hu mir E-Maile missen entwéckelen an all d'Biller um Server vun der Corporation hosten, sou datt hir eege Mataarbechter d'Biller konnten gesinn.
  • Email Service Ubidder - Fir d'Saache méi schlëmm ze maachen, d'E-Mail Builder déi E-Mail Service Ubidder (wiers) tatsächlech Problemer aféieren anstatt se ze limitéieren. Wärend se hir Redakter förderen ass Wat Dir gesitt ass wat Dir kritt (WYSIWYG), de Géigendeel ass dacks wouer mam E-Mail Design. Dir wäert d'E-Mail op hirer Plattform virschau, an den Empfänger wäert all Designproblemer gesinn. Firmen entscheeden dacks onbewosst fir e Feature-räiche Editor amplaz vun engem gespaarten, denken datt een méi Features huet. De Géigendeel ass wouer ... wann Dir E-Maile wëllt, déi konsequent iwwer all E-Mail Clienten ofginn, wat méi einfach, wat besser, well manner ka falsch goen.
  • E-Mail Client Rendering - Honnerte vun E-Mail Clienten liwweren HTML anescht iwwer Desktops, Apps, mobilen Apparater a Webmail Clienten. Wärend Ären zécken Texteditor op Ärem E-Mail Service Provider e Kader huet fir eng Rubrik an Ärer E-Mail ze setzen, kënnen d'Padding, d'Margen, d'Zeilhéicht an d'Schrëftgréisst fir all E-Mail Client ënnerscheeden. Als Resultat musst Dir den HTML erofsetzen an all eenzel Element anescht codéieren (kuckt d'Beispill hei ënnen) - an dacks an Ausnahmen schreiwen, déi E-Mail Client-spezifesch sinn - fir eng E-Mail konsequent ze maachen. Et gi keng einfach Blocktypen, Dir musst Dësch-Undriff Layouten maachen, déi d'Äquivalent vum Bau fir de Web virun drësseg Joer sinn. Dofir erfuerdert all neie Layout souwuel Entwécklung wéi Cross-E-Mail Client an Apparat Testen. Wat Dir an Ärer Inbox gesitt kann ganz anescht sinn wat ech a menger Inbox gesinn. Dofir Rendering Tools wéi Email Op Acid or Litmus sinn e Must fir sécherzestellen datt Är nei Designs iwwer all E-Mail Clienten funktionnéieren. Hei ass eng kuerz Lëscht vu populäre E-Mail Clienten an hir Renderingmotoren:
    • Apple Mail, Outlook fir Mac, Android Mail an iOS Mail benotzen WebKit.
    • Outlook 2000, 2002 an 2003 benotzen Internet Explorer.
    • Outlook 2007, 2010 an 2013 benotzen Microsoft Word (jo, Wuert!).
    • Webmail Clienten benotzen de jeweilege Motor vum Browser (zum Beispill Safari benotzt WebKit a Chrome benotzt Blink).

E Beispill vun HTML fir Web vs. E-Mail

Wann Dir e Beispill wëllt dat d'Komplexitéit vum Design an E-Mail versus de Web illustréiert, hei ass e perfekt Beispill aus dem Mailbakery Artikel 19 Grouss Differenzen tëscht E-Mail a Web HTML:

E-Mail an HTML

Mir mussen eng Serie vun Dëscher bauen déi all Inline Styling integréieren déi néideg ass fir de Knäppchen richteg ze placéieren an ze garantéieren datt et gutt iwwer E-Mail Clienten ausgesäit. E begleetende Stiltag wäert och uewen op dëser E-Mail sinn fir d'Klassen ze integréieren.

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

Web HTML

Mir kënnen en externen Stylesheet mat Klassen benotzen fir de Fall, d'Ausrichtung, d'Faarf an d'Gréisst vun engem Ankertag ze definéieren deen als Knäppchen erschéngt.

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

Wéi E-Mail Design Themen ze vermeiden

E-Mail Designprobleemer kënne vermeit ginn andeems Dir en anstännege Prozess verfollegt:

  1. Schabloun Testen - D'E-Mail Clienten ze verstoen déi Är Abonnente benotzen an ze garantéieren datt Är HTML E-Mail komplett iwwer Handy an Desktop getest gëtt ass kritesch ier Dir eng Schabloun ofsetzt. Mir kënnen eng E-Mail wuertwiertlech aus engem Photoshop Layout designen ... awer et an en Dësch-gedriwwen Cross-E-Mail Client ze schneiden an ze schneiden ass essentiell fir E-Mail-Designen z'installéieren déi optimal a konsequent sinn.
  2. Intern Testen - Wann Är Schabloun entworf a getest ass, sollt et op eng intern Som Lëscht bannent der Organisatioun geschéckt ginn fir ze iwwerpréiwen an z'accordéieren. Dir wëllt vläicht souguer mat engem ganz limitéierten Ënnerdeel vun Individuen unzefänken fir als éischt sécherzestellen datt et keng Firewall- oder Sécherheetsprobleemer mat der interner E-Mail assoziéiert sinn. Wann dëst eng Instanz op engem neien E-Mail-Déngschtleeschter opbaut, kënnt Dir souguer e puer Filter- oder Blockéierungsprobleemer fannen, déi mat Ärem E-Mail an d'Inbox verbonne sinn.
  3. Schabloun Versioun - Verännert Är Layouten oder Designen net ouni un enger neier Versioun vun Ärer Schabloun ze schaffen, déi ka designt, richteg getest an ofgesat ginn. Vill Entreprisen hu gär eemolege Designe fir all Kampagne ... awer dat erfuerdert datt all E-Mail fir all Kampagne entworf, entwéckelt an ofgesat gëtt. Dëst füügt eng Tonn Zäit un den E-Mail Marketing Prozess intern. An Dir riskéiert net ze verstoen wat Elementer an Ärer E-Mail gutt performen iwwer wéi Elementer net sinn. Konsistenz ass net nëmmen e Wee fir de Prozess méi einfach ze maachen, et ass och wichteg fir d'Behuele vun Ären Abonnenten.
  4. E-Mail Service Provider Ausnahmen - Bal all E-Mail Service Provider huet e Mëttel fir d'Themen ëmzegoen déi hiren E-Mail Builder agefouert huet. Mir kënnen dacks rau CSS op e Kont addéieren - oder souguer en Inhaltsblock hunn, deen an all E-Mail abegraff muss sinn - fir datt d'Firma den agebaute E-Mail Editor benotzt an net den Design vun Ärer E-Mail briechen. Natierlech kann dat e puer Training a Prozesskontrolle erfuerderen fir dës Schrëtt z'installéieren fir sécherzestellen datt se agehale ginn. Oder - Dir wëllt wuertwiertlech just Ären E-Mail-Design entwéckelen an enger Léisung déi bewisen ass fir iwwer Clienten an Apparater ze schaffen, da paste se zréck an Ären E-Mail Service Provider.

E-Mail Design Plattformen

Well E-Mail-Serviceplattformen eng schlecht Aarbecht gemaach hunn beim Ausbau an Erhalen vu Cross-Client a Cross-Device konsequent rendered Builder, sinn eng Zuel vu super Plattformen op de Maart komm. Een dee mir extensiv benotzt hunn ass Sträif.

Stripo ass net nëmmen en E-Mail Builder, si hunn och eng Bibliothéik vun iwwer 900 Templates déi einfach importéiert kënne ginn. Wann Dir d'E-Mail designt, kënnt Dir d'E-Mail un 60+ ESPs, an E-Mail Clienten, inklusiv Intuit Mailchimp, HubSpot, Campagne Monitor, AWebereSputnik, Ausbléck, an Gmail. Bescht vun allen Stripo Templates kommen mat den E-Mail Rendering Tester abegraff sou datt Dir sécher kënnt datt se getest goufen a konsequent iwwer iwwer 40 E-Mail Clienten funktionnéieren.

Login op de Stripo Editor Demo

Douglas Karr

Douglas Karr ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

Verbonnen Artikelen

Zréck erop zum Knäppchen
Zoumaachen

Adblock entdeckt

Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.