Share
Att designa för e-post handlar om att komma till rätta och utnyttja den korta chansen du har med dina abonnenter. Du får bara ett skott, så det är värt att anställa så många tricks i boken som möjligt för att se till att ditt meddelande kommer igenom. De underliggande principerna handlar om att respektera dina läsare genom att ge dem något värdefullt i gengäld för sin tid, vilket trots allt är anledningen till att de anmälde sig att höra från dig i första hand.
Några av de förslag jag ska göra kommer inte att gälla för varje lista, företag eller produkt. Som alltid med e-post, testa något nytt och se hur det fungerar för att avgöra vad som är bäst för dina abonnenter.
Detta är verkligen viktigt. Undvik att använda förbryllande eller kryptiska avsändarnamn, ämnesrader, preheaders eller kopiera. Detta kommer bara att förvirra dina läsare och göra dem mer benägna att ta bort ditt e-postmeddelande eller markera det som skräp.
Berätta för dina läsare vem du är, exakt varför du mailar dem, och exakt vad de kommer att få ut av erfarenheten. Har allt detta så nära toppen av e-postmeddelandet som du kan få det. Det innebär att så snart din e-post är öppen är dina intentioner och identiteter tydliga och ditt förslag kommer inte att förbises.
Se till att ditt avsändarnamn, ämnesrad, preheader och innehållet "ovanför veckan" är alla meningsfulla och relevanta för din anledning att kontakta dina läsare.
Det kan tyckas tråkigt, men att vara konventionellt kommer verkligen till nytta med e-post. E-postmeddelanden är små och de öppnas under en mycket kort tid, så funktionen hos varje element behöver vara kristallklart.
Skapa snygga, stora, enkelt klickbara knappar och knappar för dina länkar. På mobilen, gör dem 100% av bredden så att de enkelt kan tappas med antingen tummen (ingen nått krävs).
Om du också vill ha textlänkar i din kopia, se till att de är fet och i kontrastfärg så att de sticker ut. Försök att inte ha för många länkar nära varandra, vilket kan få en användare att oavsiktligt trycka på fel.
Omkring 50% av öppet är på pekdon idag, så undvik språk som inte är meningsfullt, till exempel "klicka här".
Tveka inte att lägga till en pilstudier har visat att de är effektivare, men som alltid testar på dina egna abonnenter.
De bästa knapparna kombinerar fördelen att klickar igenom med själva åtgärden. Till exempel, "Börja använda ditt nya konto" eller "Hämta din kostnadsfria provning".
Skriv inte mycket. Dina mottagare skannar e-postmeddelandet för saker som intresserar dem istället för att läsa hela e-postmeddelandet, så dela det i bitar som är så korta som möjligt.
Ditt mål med marknadsföring av e-post är att få folk att klicka igenom till din webbplats, så det finns ingen anledning att försena det med en lång monolog, särskilt då en långsiktig epost kommer att överväldiga dina läsare med mental trötthet och göra dem mer troliga att slå "Ta bort".
Designa ditt mail för att vara snyggt. Text ska visas i tydliga, avgränsade bitar som kommer till den punkten.
Använd tydliga rubriker och ringa fram nyckelkoncept i fet stil så att dina skanningsläsare kan få kärnan, även om de inte läser allt (vilket de flesta inte kommer att göra).
Om du är verksam i att skicka längre innehåll som dina läsare tycker om, säger jag definitivt inte att det finns någon plats för det i e-postmarknadsföring.
Människor läser e-post i alla slags olika scenarier. Vissa kommer att vara "på språng" och mellan viktiga möten, andra kan vara mycket uttråkad i en tandläkare väntrum och jag är mycket ledsen att säga att andra fortfarande kommer att vara på toaletten. Dessa scenarier är alla väldigt olika, men det är lätt att tillgodose alla genom att hålla sig till en logisk hierarki.
Ge den kortaste och starkaste informationen först och ta sedan med ditt längre formulär innehåll nedan. På så sätt tvingar du ingen att vada genom längre innehåll utom de som arbetar aktivt igenom din email.
Om din e-post är lång och en användare har bläddrat hela vägen genom ditt innehåll, se till att de har enkel åtkomst till ett annat handlingsalternativ utan att behöva rulla hela vägen tillbaka till toppen av din e-post.
Dessa tips gäller marknadsföringsmeddelanden där det är typiskt en eller två viktigaste saker som du kontaktar dina abonnenter om.
Om du skriver till dina läsare om en sak, försök att inte späda meddelandet genom att lägga till många andra saker under eller i en sidofält. Med varje extra alternativ förknippade du risken att spåra dem.
Bedöm din eposts design, identifiera allt som inte är nödvändigt för att överföra ditt meddelande och ta bort det. Färre distraktioner innebär tydligare kommunikation.
För mycket val ökar kognitiv belastning på dina läsare, vilket gör dem mindre benägna att fatta beslut.
Tänk på vad minimikravet är att få någon att klicka igenom till din webbplats och sedan gradvis introducera mer av den nödvändiga detaljerna. Överbelastning av människor med för mycket val i början kommer bara att uppmuntra uppgift övergivande.
Om du försöker få dina abonnenter att välja en produkt och köpa, lägg inte fram alla alternativ i e-postmeddelandet. Hämta dem bara till din webbplats, och börja introducera den nödvändiga komplexiteten där.
Ibland är det skrämmande att få ett e-postmeddelande som omedelbart säger "KÖP DET! ANMÄRK! KOM!"
Istället försök att få folk över till din webbplats på ett tidigare steg av resan, till exempel "välj din skostorlek för att se tillgängliga stilar" istället för "köpa dessa skor".
Gör det primära samtalet till huvudkontakten för din e-post. Se till att dina läsare inte behöver söka efter ett samtal till ett hav av sammandrag.
Att skapa en kontaktpunkt är enkelt. Först och främst, se till att du har ett huvudmål. Då behöver du bara göra det större än allt annat, och se till att det finns tillräckligt med utrymme runt det så att ögat dras till detta område först. Detta gäller mer för din skrivbordsdesign när en användare kommer se ganska mycket av e-posten samtidigt.
Om du har många saker som alla har samma storlek och vikt utan någon blankutrymme runt dem, kommer de att visas som ett stort, amorft block som ögat enkelt kommer att hoppa över. Använd whitespace runt element för att hjälpa till att dra ögat till de saker som spelar roll.
Begrava inte, dölj eller dölja din avbeställningsinformation. Förutom att det är olagligt i många länder är det oförskämt och kontraproduktivt. Om någon vill avregistrera sig från ditt nyhetsbrev och du gör det omöjligt för dem att göra det, kommer de inte att gå tillbaka till att vara en lycklig abonnent. Det kommer bara att generera illvilja mot ditt varumärke eftersom de kommer att tvingas fortsätta bearbeta dina e-postmeddelanden (eller ställa in ett filter för att skicka dina meddelanden till papperskorgen).
Ju mer vertikala uppdelningar finns i en layout, desto mer distraherande är det för ögat. Håll dig till två eller tre vertikala avdelningar i ett rutnät.
Fasta gränser är också mycket distraherande för ögat, så behåll dessa till ett minimum.
Det här är i allmänhet den säkraste maximala bredden för din skrivbordsdesign för att säkerställa att användarna inte behöver rulla horisontellt.
Innan du ger varje ruta avrundade hörn och släpp skuggor, tänk på hur din layout fungerar utan dessa förbättringar. Behandla det som din "bas" -design, där du lägger till dina rundade hörn och skuggor som förbättringar.
Att skapa fet form med fyrkantiga kanter ser lika bra ut, och användare på nyare e-postklienter kommer att få se dina rundade hörn som en tilläggsbonus.
Detta tillvägagångssätt sparar mycket tid när det gäller att bygga din e-post. Om du måste skapa en runda hörnig textruta med en droppskugga och den måste fungera på alla e-postklienter måste du bygga effekterna med bilder, vilket kan vara mycket tidskrävande, särskilt när du skapar återanvändbara mallar.
Fira det faktum att det inte alltid är möjligt att få saker som ser identiska ut i varje e-postklient ner till sista pixeln. Design med detta i åtanke för att lindra huvudvärk längre ner på banan.
Skapa design som har lite andningsrum, där det inte spelar någon roll om en klient lägger till 7 pixlar av mysteriumutrymme underifrån. Åtminstone avstå från extra finiga små detaljer som kommer att se trasiga om de är en pixel ut.
Din e-post är en sammanhängande helhet, så tänk på hur allt fungerar tillsammans. Användarna kommer först att se e-postmeddelandet i inkorgen och läsa ditt avsändarens namn, ämne och preheader. Då kommer de förmodligen att se en version av ditt email med bilder inaktiverade, standard för de flesta e-postklienter. Slutligen ser de ditt e-mail som du tänkte på det - om de aktiverar bilder.
Se till att allt binder samman bra, och att abonnenterna fortfarande kan förstå ditt meddelande, även om bilderna är avstängda.
Ta inte med ditt huvudmeddelande i en bild. Det kommer att blockeras som standard och många e-postklienter kommer inte heller att visa dina alt-taggar.
I exemplet nedan kan du se hur nästan allt i meddelandet skulle saknas utan att bilder tänds, eftersom all text finns i bilder och alt-texten har inte stylats för att göra den läsbar.
Du kan lägga till CSS-format i bilder (eller deras föräldracell eller länktaggar) för att se till att de visas snyggt hos kunder som stöder alt-taggar. Detta kan verkligen förbättra den övergripande upplevelsen för dina abonnenter.
Om du använder Photoshop, är den inbyggd. Det finns också massor av verktyg som låter dig se hur din design ska se till de 10% av människor med någon form av färgvisionsbrist.
När du bygger, koppla inte bara dina knappar. Se till att du länkar allt så att användare kan klicka var som helst. Länk bilden, knappen och rubriken. Heck, länk även texten om den fungerar.
Det finns några sätt att du kan närma dig att skapa ett mobilvänligt e-postmeddelande.
Detta är hands-down det enklaste sättet att få ett mobilvänligt email. Med hjälp av denna metod är bilderna och texten inställda på att vara ganska stora, så att om e-postmeddelandet visas på ett skrivbord eller en mobil, är tecknet läsbart och bilderna är tillräckligt stora redan.
Fördelen med den här typen av design är att du bara behöver ange en enda layout. Det är definitivt ditt snabbaste och enklaste alternativ. Smartphone-klienter som stöder skalning kommer att skala din e-post ner till 100% bredd, och på de som inte gör det kommer det att finnas väldigt lite horisontellt rullning.
Nackdelen är att skrivbordet versionen är väldigt stor i skala (vilket jag inte personligen ser som en nackdel).
För att uppnå denna layout:
En fullständigt mottaglig HTML-e-post använder mediasökningar för att visa e-postmeddelandet på ett visst sätt, beroende på storleken på den enhet som den visas på. Nästan ingen av de stora skrivbords- och webbmailklienterna stöder mediefrågor, men många smarttelefon- och tablettpostklienter gör det. Det innebär att kodande responsiva e-postmeddelanden är lite bakifrån jämfört med kodande mottagliga webbplatser, eftersom din stationära version är din "basversion" och du använder en maxbreddsfråga för att anpassa layouten till mindre enheter.
Fördelen med den här typen av design är att du kan skapa en stor flera kolonn e-post som översätter till en lättläst mobilversion med en kolonn. Mediafrågor är också mångsidiga eftersom du kan rikta in specifika skärmstorlekar och även specifika pixeldensitetsskärmar (för visning av högupplösta bilder).
Nackdelen är att Gmail-appen för Android (den mest populära e-postklienten på Android) inte stöder mediefrågor och kan generera några ovanliga resultat när du gör ditt fullständigt lyhörda mailbyggande. Helt mottagliga e-postmeddelanden tar också mycket längre tid än att koda än deras agnostiska kusiner.
Tänk på detta som responsivitet utan mediafrågor.
Denna metod innebär att man skapar en vätskedesign, 100% bred, med en maximal bredd på ca 600 px satt på ytterbordet. Villkorliga kommentarer krävs (för Outlook) samt en mediafråga (för Apple Mail, som hilariously inte stöder egenskapen med max bredd).
Fördelen med den här typen av design är att det kommer att vara mottagligt i varje e-postklient, inklusive Gmail för Android-appen. Den här metoden kan också användas i samband med mediafrågor för att ytterligare förfina saker som textstorlek och knappar på de klienter som stöder dem.
Nackdelen är att det bara kommer att fungera bra med design som är ganska okomplicerade och vanligtvis inte har mer än en kolumn. Två kolumninnehåll är okej så länge det är tillräckligt liten för att se bra ut i en smal kolumn på en smarttelefon.
Du måste också kunna använda procentuella bredder för dina bilder, vilket inte alltid är möjligt när du skapar mallar (ofta bilder i mallar måste ha en viss pixelbredd).
Och äntligen finns det några fina saker som du kan använda för att börja skapa riktigt snygga e-postmeddelanden som verkligen sticker ut.
Bakgrundsbilder brukade vara något för "Too Hard" -högan, men tack vare Stig Morten Myre och folket på Campaign Monitor finns det nu en super lätt Bulletproof Email Backgrounds generator som tar allt krångel rätt ut ur det. Det finns inte längre något behov av att hålla tillbaka med att lägga till bakgrundsbilder till dina kampanjer.
Att använda webbfonter är också ett riktigt bra sätt att få din design att sticka ut från resten. Med lite extra design och en liten extra byggtid är det enkelt att implementera webbfonter som kommer att göra riktigt bra i ett överraskande antal e-postklienter.
Moderna e-postklienter (till exempel Apple Mail och de som finns på iPhone och Android-enheter) stöder faktiskt CSS3 Animation, vilket innebär att du kan börja tänka på att lägga till några allvarligt coola saker till dina kampanjer. Övergångar, liksom keyframe-animationer, gör det ganska bra och kan vara ett fantastiskt tillägg till e-post (så länge de försämras graciöst) eftersom de inte ökar filstorleken så mycket som en animerad GIF skulle.
Det finns en massa att ta hänsyn till när du utformar för e-post! De tips som anges i den här artikeln ger dig en bra start och ser ut till fler inlägg i den här serien som kommer att gå in i olika aspekter (som att använda webbfonter och lyhörd design) i mer detalj.
Accentsconagua