Älskar dem eller hatar dem, HTML-e-postmeddelanden är ett vildt populärt marknadsföringsverktyg och du kommer nästan definitivt att komma över klienter som vill att du ska bygga dem.
Om du inte vet något om HTML-e-postmeddelanden är det irriterande att utveckla och bryta alla regler som du någonsin har lärt dig som webbdesigner, men att kunna koda dem är en värdefull färdighet att besitta. Idag ser vi på tio snabba och enkla tips för att få nybörjare på väg till att skapa vackra och funktionella e-postmeddelanden.
# 1 Använd tabeller
Vänta, va? Övergav vi icke-semantiska bordsbaserade mönster för några år sedan? Ja, och nu får du uppleva glädjen igen. Tyvärr stöder de flesta e-postklienter inte en vanlig gammal CSS-layout som du brukar. Istället är det tillbaka till 90-talet och bekantar sig med cellutrymme.
Om du inte känner till tabellbaserade layouter är det här ett enkelt exempel.
Varje tabell är uppdelad i rader med celler. Varje rad representeras av
I utgåvan ovan visas grundläggande syntax för inline CSS. Som du kan se är koden i princip densamma, du lägger bara in den direkt i HTML-koden i stället för att länka till ett annat dokument.
Inline CSS-verktyg
Om du är mer bekväm med att använda ett externt stilark under utveckling, använd bara ett av verktygen nedan för att konvertera det till inline styling när du är klar.
- Premailer: Konverterar CSS till inline-format och kontrollerar din kod mot e-poststandarder
- HTML Inline Styler: Konverterar CSS-regler till inline-stilattribut
# 3 Nest dina bord
En annan otrogenhet om e-postklienter är att de är ganska inkonsekventa när det gäller att tolka marginaler och vadderingar. För att komma till rätta med detta problem, använd genast tabeller när det är möjligt. Koden är lite snyggare men du har mycket större överensstämmelse över hela linjen.
Att? Bo? ett bord innebär helt enkelt att placera ett bord inuti en annan. Du kan hyra flera tabeller, var bara försiktig med överträffning och skapa en stor röra. Vissa e-postklienter börjar få buggy kring åtta bonar, men du borde kunna komma långt under detta nummer för de flesta av dina mönster.
# 4 Titta på din bredd
Flera e-postklienter är ganska begränsade i sin bredd. Tänk på att se online Gmail-klienten. Att bygga en normal webbsida och sedan visa den i det lilla Gmail-fönstret kommer att tvinga användaren till obekväm horisontell rullning.
Det finns för många möjliga kunder och skärmstorlekar att koda för varje scenario, så konsensusen i webbsamhället är oftast bara för att hålla dina e-postmeddelanden ganska smala. Som en tumregel, försök att hålla dig under 600 pixlar bred i varje e-postdesign du skapar.
# 5 Var försiktig med bilder
Det finns flera komplikationer att tänka på när du använder bilder i HTML-e-post. För det första stöder vissa klienter inte bakgrundsbilder, andra stöder dem men kommer ofta att ha dem avstängda som standard. Detta är inte på något sätt ett argument att du inte ska använda bilder i din design. Den starkaste försäljningsdelen av HTML-e-postmeddelanden är att de överträffar kvaliteten och möjligheterna till den rika texten som redan finns tillgänglig hos de flesta e-postklienter. Att eliminera bilder helt och hållet kan verkligen minska fördelarna.
I stället för att helt överge bilder, bara se till att ditt meddelande fungerar bra utan dem. Använd bakgrundsfärger som en återgång, så någon text kommer att förbli läsbar och testa din layout med bilder inaktiverade.
En annan sak du måste vara medveten om med bilder är att du inte (eller åtminstone inte borde) bädda in dem i e-postmeddelandet. I stället måste du vara värd för dem på lång sikt på en pålitlig server och länka sedan till dem i din kod.
Slutligen, se till att du tittar på dina belastningstider. Människor brukar klicka på ett e-postmeddelande och se innehållet, inte vänta på att bilder ska laddas. Om du får mig att utstå långa belastningstider, kommer jag att slänga radera snabbare än du kan förklara varför det blir värt att vänta.
# 6 Tillåt Enkel Avmelding
HTML-e-postmeddelanden är oftast en del av ett flöde av nyhetsbrev som prenumeranteras av en användare. Många gånger registrerar användarna en tjänst och inser inte ens att det innebär att de får ett nyhetsbrev. Andra gånger beslutar de medvetet att anmäla sig men ändrar sig senare.
I båda fallen bör avstängning vara en smärtfri process som nästan alla som tittar på e-posten ska kunna räkna ut. För att uppnå detta, inkludera en unsubscribe länk och se till att det är lätt att upptäcka. Designers och marknadsförare som försöker dölja denna länk saknar integritet och respekt för sin publik.
Om personen inte vill ha ditt e-postmeddelande läser de inte det ändå. Det finns inget värde i att skicka 10 000 e-postmeddelanden till spammappar över hela världen. Det är mycket bättre att veta att de som får ditt nyhetsbrev är faktiskt intresserade.
# 7 Överväga innehållet noggrant
Marknadsförare och företagare ser ofta ett nyhetsbrev som den enda källan till konsekvent kontakt med sin kundbas. De är därför ofta frestad att fylla den med så mycket innehåll och information som möjligt. Som designer, hjälpa dem att motstå denna uppmaning genom att designa en mall som visar lite information mycket bra snarare än mycket information mycket dåligt.
Nyckeln här är kvalitet över kvantitet. Ingen på kommer läsa tusen ord marknadsföring email. Du har i bästa fall 3-5 sekunder för att ta tag i läsarens uppmärksamhet innan de slår radera. Utför detta med snabblastning, attraktiva bilder, kortfattad kopia och tydliga beskrivande rubriker.
# 8 Inkludera andra visningsalternativ
Förutom att inkludera ett prenumerationsalternativ bör du presentera minst två alternativa sätt att visa e-postmeddelandet för alla som inte får sin föredragna upplevelse. För minimalisterna är en enkel textversion bäst.Det finns gott om människor där ute som tycker att e-post ska vara enkelt och helt enkelt inte vill se din fancy-pants uppmärksamhet gripande grafik.
I motsatta änden av spektret är användare som vill ha den fulla erfarenheten men hålls tillbaka av en buggy-e-postklient. För dessa användare ingår en ganska framträdande länk (ofta högst upp) som låter dem se e-posten i en webbläsare. Eftersom webbläsare är oändligt bättre för att visa HTML och CSS kan du till och med nötka upp den webbläsarbaserade versionen genom att koda den mer som att du skulle ha en vanlig webbsida (eller helt enkelt få webbläsaren att visa originalversionen).
# 9 Test noggrant
När du utformar en webbsida, är en av de mest irriterande processerna du måste gå igenom webbläsartestning. Denna process involverar vanligtvis testning för Webkit, Mozilla, IE och kanske även Opera om du verkligen är dedikerad. Om du kan tro det är det ännu värre att designa för e-postklienter!
Det finns upp till 30 populära e-postklienter, var och en med sina egna standarder och varierande stöd för olika kommandon. För att börja, testa i de e-postklienter du har praktiskt. Registrera dig för konton med populära webmailklienter som Gmail, AOL och Yahoo. Se även till att prova standardapparna för både Mac och PC.
Självklart kan du inte testa varje kund. Om du har budgeten, anmäla dig till en månad av en tjänst som Litmus under testfasen. Detta gör att du snabbt kan få en förhandsgranskning av den färdiga produkten på 33 olika e-postklienter och är ett av de bästa sätten att se till att alla är täckta.
Under designfasen, se till att kolla in e-poststandardprojektet. Detta är en av de bästa källorna som finns tillgängliga för detaljerade rapporter om vad som är och stöds inte av olika e-postklienter.
# 10 Använd en mall
Det bästa sättet att jag har hittat för att starta processen med att designa din första HTML-e-post är att fånga en mall. Även om du har en mycket specifik design i åtanke, kan du ändra otaliga timmar i felsökningstiden genom att ändra en professionellt utvecklad mall i stället för att börja från början.
Detta kommer också att ge dig en bra titt på hur andra utvecklare strukturerar och stilar sina bord. Kom bara ihåg att om du ska omfördela eller sälja en e-postmall som stock art, ska du inte stjäla från andras arbete! I dessa fall vill du verkligen veta vad du gör och utveckla din egen struktur från grunden.
Gratis e-postmallar
Lyckligtvis behöver du inte betala en krona för att fästa några kvalitetsfria mallar för att starta din designprocess. De flesta av premium-e-posttjänsterna erbjuder gratis nedladdningar för att komma igång, ofta utan att behöva anmälas. Kolla in resurserna nedan:
- Kampanjövervakning: 30 Mallar
- Mail Chimp: 4 Mallar
- CakeMail: 21 Mallar
Slutsats
Sammanfattningsvis, när du utformar e-postmallar, börja med en bra grundläggande mall, kod som din pappa gjorde för tio år sedan, behåll ditt innehåll både konceptuellt och fysiskt lutande (mindre än 600 pixlar bred), gör det enkelt att avregistrera och se alternativa versioner , och test som galen.
Lämna en kommentar nedan och meddela om du hittade artikeln till hjälp. Också vara säker på att dela med dig några visdomstyper du har tagit på vägen för att designa HTML-e-postmeddelanden.