Plocka upp varje nyans som ligger till grund för att skapa en pixelperfekt HTML-e-post och låt dina kampanjer vinna över dina prenumeranter!
Som e-postmarknadsförare har du förmodligen redan haft otaliga debatter som väger för- och nackdelar med e-postmeddelanden i vanlig text och HTML-e-postmeddelanden. Och detta måste ha sagt dig att det i slutet av dagen inte finns någon klar vinnare. Båda har sina förtjänster och brister och kan på ett skickligt sätt stödja ditt e-postmarknadsföringsprogram.
Beslutet handlar i slutändan om vad du vill uppnå med din kampanj. Om du är någon som råkar vara med på HTML-e-postvagnen är den här artikeln för dig. I den här artikeln diskuterar vi några bästa metoder att följa när du skapar ett HTML-e-postmeddelande.
Se till att dina e-postmeddelanden är responsiva
För närvarande mobila klienter gör för ungefär 41,6 % av alla e-postöppningar, ett antal som bara kommer att öka under de kommande dagarna. Därför har utvecklingen av responsiva HTML-e-postmeddelanden blivit i stort sett oförhandlingsbart. Om dina e-postmeddelanden inte är mobilvänliga och inte renderas optimalt över alla skärmstorlekar de visas på, kommer synligheten och räckvidden för dina kampanjer att få ett stort slag.
Prata med vilken branschexpert som helst där ute, så kommer de, utan undantag, att råda dig att använda mobilen först när du kodar och utformar dina e-postmeddelanden. Detta beror på att om din HTML-e-post renderas bra på en mobil enhet, kommer den alltid att se bra ut även på skrivbords- och surfplattor.
I det nuvarande schemat avgörs inte längre framgången för din e-postmarknadsföringskampanj enbart av kvaliteten på din e-postkopia och design; mycket vilar på användarupplevelsen du kan leverera.
Med åren har e-postmarknadsföring blivit mer användarcentrerad än innehållscentrerad och att öva responsiv design hjälper företag att anpassa sig till denna trend. Nu, även om ditt innehåll är insiktsfullt, kommer dina e-postmeddelanden inte att tas emot väl om de kompletteras med bildförhållande, engagemangslänk och problem med kontaktknappar.
Så vad kan du göra för att optimera din HTML-e-post för alla skärmstorlekar? Låt oss ta reda på det.
I alla dessa exempel kan du se hur lätt det är att navigera genom innehållet och identifiera de viktigaste delarna av mejlet.
Optimera dina ämnesrader och pre-headers: Ämnesraden är det första som en prenumerant lägger märke till om din e-post. Därefter kommer pre-header-en kort text som lägger till ämnesraden, vilket ger läsarna ytterligare klarhet om din e-post. Huruvida de öppnar e-postmeddelandet eller inte beror på fördelarna med dessa två. Därför ligger nyckeln till att effektivt fånga uppmärksamheten hos din mobila publik i att optimera dina ämnesrader och pre-headers. För mobila enheter anses den idealiska längden för båda vara mellan 25-30 tecken, vilket betyder högst 5-6 ord. Så att slå runt är inte ett alternativ, egentligen. Var direkt samtidigt som du försöker bjuda in nyfikenhet och brådska på samma gång.
Ta ett blad från boken med dessa ämnesrader:
- Zillow: Är hemsolenergi en ljus idé?
- Ritual: Vår mest efterfrågade produkt är här
- Peloton: Lanserar ett nytt, spännande sätt att styrketåg 💪
Var uppmärksam på teckenstorleken: Få saker är mer irriterande än att få läsa små teckensnitt på en mobilskärm. För att undvika oläslighet, se till att teckenstorleken i dina mobila e-postmeddelanden är minst 2-3 punkter större än vad du har använt för dina stationära versioner. Som sagt, gå inte överbord heller. Onaturligt stora teckensnitt drar omedelbart upp misstanken om spamfilter. Den söta punkten tros ligga mellan 22-26px för rubrikfonten och 14-16px för bodyfonten. Så länge dina läsare inte tvingas zooma in på sina skärmar för att läsa ditt meddelande är du bra att gå.
Var försiktig med bilder: Även om bilder utan tvekan ger liv åt dina kampanjer, kan du få problem att använda dem utan att vara försiktig. Kom ihåg att de flesta e-postklienter blockerar bilder som standard. Därför är det viktigt att vara noggrann med bilder i din HTML-e-post. Undvik i början att inkludera kritisk information i dina bilder.
Använd bilder för att komplettera din kopia istället för att förmedla något genom dem. Se till att alla bilder är av mycket hög kvalitet; det här går långt för att förbättra ditt varumärkes rykte. Men för många bilder av hög kvalitet kan försvåra din laddningstid, så optimera dem innan du lägger till dem. Och slutligen, glöm inte att lägga till alt-text. Förutom att hjälpa prenumeranter att använda skärmläsare, hjälper alt-text att ge bildens sammanhang till dina mottagare även när bilden blockeras av mobilklienten.
Öva e-posttillgänglighet
Mot bakgrund av det globala samhället som strävar efter att främja inkludering i alla samhällsskikt, har e-posttillgänglighet växt fram som en ledande trend för e-postmarknadsföring under de senaste åren. Ett antal internationella rättsliga ramar och policyer har gjort det obligatoriskt för företag att göra sitt innehåll och kommunikation tillgängligt för människor som lever med auditiva, visuella, kognitiva, tal och fysiska funktionshinder. Om du bryter mot dessa normer kan du hamna i oändliga tvister, för att inte tala om den outplånliga fläck det kommer att lämna på din varumärkesimage.
Nu är frågan, hur kan du koda din HTML-e-post för tillgänglighet? Hitta dina svar i punkterna nedan.
- Lägg till semantisk HTML-uppmärkning i din kod. Detta gör att du kan definiera innebörden av varje enskilt element i din e-post. Följaktligen blir det betydligt lättare för webbläsare och skärmläsare att tolka innehållet. Semantiska element ingår för att ge mer sammanhang till skärmläsare i syfte att främja smidig e-postnavigering. Till exempel kommer de väl till pass när de formar e-poststrukturen – med hjälp av rubrik- och stycketaggar kan du hjälpa skärmläsaren att effektivt skilja mellan olika delar av din e-post. I deras frånvaro kommer det att anta att varje innehållssegment har samma hierarki.
- Inkludera attributet “lang”. Utan det kommer skärmläsare att kommunicera e-postinnehållet inte på det språk som det är skrivet på, utan på det standardspråk som användaren ställde in under installationen.
- Infoga en hoppa över navigeringslänk. Skärmläsare analyserar innehåll sekventiellt och har inget sätt att ta reda på om en viss del av e-postmeddelandet är viktigare än resten. En hoppa över navigeringslänk gör det möjligt för läsaren att hoppa direkt till e-postmeddelandets mest kritiska del.
Ta hänsyn till din laddningstid för e-post
I denna tid av minskande uppmärksamhet är längden på din e-postladdningstid omvänt proportionell mot antalet nya potentiella kunder du skaffar. E-postladdningstid dikteras av flera faktorer; för att optimera den måste du ha följande punkter i åtanke:
- Som nämnts tidigare kan förekomsten av överdrivna högkvalitativa bilder öka din laddningstid. Så använd antingen få bilder eller se till att du optimerar dina bilder innan du bifogar dem.
- Håll användningen av anpassade typsnitt till ett minimum. Naturligtvis ser de fantastiska ut, men de gör dina e-postmeddelanden mer komplexa också. Det bästa tillvägagångssättet är att hålla sig till vanliga webbteckensnitt. Om du verkligen vill använda ett visst typsnitt, kontrollera först om det stöds av e-postklienten som majoriteten av dina mottagare använder.
- Använd en HTML-minifierare. Den kasserar automatiskt onödig kod i en HTML-fil. Att bli av med skräpkod kan förbättra din laddningstid med stormsteg.
Glöm aldrig att testa
Nej, att testa din HTML-e-post betyder inte att du testar den precis innan du måste skicka ut. Istället måste den inspekteras i varje skede av sin utvecklingsresa. På så sätt kommer du att kunna kontrollera om det håller emot olika enheter, operativsystem och e-postklienter eller inte. Skulle det finnas några inkonsekvenser kan du åtgärda det tidigast; något som du inte kommer att kunna göra om du schemalägger testprocessen i slutet.
Slår ihop det
Mycket går åt till att koda och designa en pixelperfekt HTML-e-post och för den oinitierade kan det vara lite överväldigande i början. Men med ovanstående bästa praxis i åtanke är vi säkra på att du hittar din fot på nolltid och skapar vinnande e-postkampanjer.
