Share
Ontwerpen voor e-mail gaat over het ter zake komen en het benutten van de korte kans die je hebt met je abonnees. Je krijgt maar één kans, dus het is de moeite waard om zo veel mogelijk trucs in het boek te gebruiken om ervoor te zorgen dat je bericht doorkomt. De onderliggende principes hebben alles te maken met het respecteren van uw lezers door hen iets waardevols te geven in ruil voor hun tijd, dat is immers de reden waarom zij zich hebben aangemeld om van u te horen in de eerste plaats.
Sommige suggesties die ik ga doen zijn niet van toepassing op elke lijst, bedrijf of product. Zoals altijd met e-mail, test alles wat nieuw is en kijk hoe het presteert om te bepalen wat het beste is voor uw abonnees.
Dit is echt belangrijk. Vermijd het gebruik van puzzels of cryptische afzendernamen, onderwerpregels, voorleeskopers of kopiëren. Dit zal je lezers alleen maar verwarren en ze waarschijnlijker maken om je e-mail te verwijderen of als rommel bestempelen.
Vertel je lezers wie je bent, waarom je ze e-mailt en wat ze precies uit de ervaring zullen halen. Zorg dat dit alles zo dicht mogelijk bij de bovenkant van de e-mail staat zoals u het kunt krijgen. Dit betekent dat zodra uw e-mail wordt geopend, uw intenties en identiteit duidelijk zijn en uw voorstel niet over het hoofd wordt gezien.
Zorg ervoor dat uw afzendernaam, onderwerpregel, preheader en uw 'above the fold'-inhoud allemaal zinvol en relevant zijn voor uw reden om contact op te nemen met uw lezers.
Het lijkt misschien saai, maar conventioneel zijn is van pas komen met e-mail. E-mails zijn klein en ze worden gedurende een korte periode geopend, dus de functie van elk element moet glashelder zijn.
Maak leuke, grote, gemakkelijk aanklikbare en tappable knoppen voor uw links. Op mobiel, maak ze 100% van de breedte zodat ze gemakkelijk kunnen worden afgetapt met een duim (geen bereik vereist).
Als u ook tekstkoppelingen in uw exemplaar wilt hebben, zorg dan dat ze vet en in een contrasterende kleur zijn, zodat ze opvallen. Probeer niet te veel links bij elkaar te hebben, waardoor een gebruiker per abuis op de verkeerde kan tikken.
Ongeveer 50% van de opens is tegenwoordig op touch-apparaten, dus vermijd taal die geen steek houdt, zoals "klik hier".
Aarzel niet om een pijl toe te voegen. Studies hebben aangetoond dat ze effectiever zijn, maar zoals altijd testen op uw eigen abonnees.
De beste knoppen combineren het voordeel van doorklikken met de actie zelf. Bijvoorbeeld: "Begin met uw nieuwe account" of "Claim uw gratis proefperiode".
Schrijf niet veel. Uw ontvangers scannen de e-mail op dingen die hen interesseren in plaats van de volledige e-mail te lezen, dus verdeel het in hapklare stukken die zo kort mogelijk zijn.
Uw doel met marketingmail is om mensen naar uw website te laten doorklikken, dus dat hoeft niet te worden uitgesteld met een lange monoloog, vooral omdat een lang uitziende e-mail uw lezers zal overspoelen met mentale vermoeidheid en ze waarschijnlijker maken om te klikken op "Verwijderen".
Ontwerp uw e-mail om punchy te zijn. Tekst moet verschijnen in duidelijke, afgebakende brokken die ter zake komen.
Gebruik duidelijke koppen en haal sleutelbegrippen vetgedrukt tevoorschijn zodat uw scannende lezers de essentie kunnen lezen, zelfs als ze niet alles lezen (wat de meesten van hen niet zullen doen).
Als u bezig bent met het verzenden van langere inhoud die uw lezers leuk vinden, zeg ik absoluut niet dat er geen plaats voor is in e-mailmarketing.
Mensen lezen e-mail in allerlei verschillende scenario's. Sommigen zullen 'onderweg' zijn en tussen belangrijke vergaderingen door, anderen kunnen zich extreem vervelen in de wachtkamer van een tandarts en het spijt me heel erg dat ik u nog zal vertellen dat anderen nog op de wc zullen zijn. Deze scenario's zijn allemaal heel verschillend, maar het is gemakkelijk om aan iedereen tegemoet te komen door vast te houden aan een logische hiërarchie.
Geef eerst de kortste en meest pittige informatie en voeg vervolgens uw langere inhoud hieronder toe. Op deze manier dwing je niemand langer door langere inhoud te waden, behalve degenen die zich actief via je e-mail werken.
Als uw e-mail lang is en een gebruiker helemaal door uw inhoud is gegaan, zorg dan dat deze gemakkelijk toegang heeft tot een andere oproep tot actie zonder dat u helemaal naar de bovenkant van uw e-mail hoeft te scrollen.
Deze tips zijn van toepassing op marketingberichten waarbij er meestal een of twee belangrijke zaken zijn waarmee u contact opneemt met uw abonnees.
Als u uw lezers over één ding schrijft, probeer dan het bericht niet te verdunnen door nog een heleboel andere dingen onder of in een zijbalk toe te voegen. Met elke extra optie die u samenstelt, bestaat het risico dat ze ontsporen.
Beoordeel het ontwerp van uw e-mail, identificeer alles dat niet essentieel is voor het overbrengen van uw bericht en verwijder het vervolgens. Minder afleidingen betekent een duidelijkere communicatie.
Te veel keuze verhoogt de cognitieve belasting van uw lezers, waardoor ze minder snel een beslissing nemen.
Bedenk wat de minimumvereiste is om iemand door te laten dringen naar uw website en geleidelijk aan meer van de vereiste details te introduceren. Overbelasting van mensen met te veel keuze aan het begin is alleen maar om taakverlating aan te moedigen.
Als u probeert uw abonnees een product te laten kiezen en kopen, moet u niet alle opties in de e-mail vermelden. Haal ze gewoon door naar uw website en begin daar met de nodige complexiteit.
Soms is het intimiderend om een e-mail te ontvangen die onmiddellijk zegt: "KOPEN! AANMELDEN! COMMIT !!"
Probeer in plaats daarvan mensen naar uw site te brengen tijdens een eerdere stap van de reis, zoals 'selecteer uw schoenmaat om beschikbare stijlen te zien' in plaats van 'deze schoenen te kopen'.
Maak van de primaire call-to-action het belangrijkste punt van uw e-mail. Zorg ervoor dat uw lezers niet hoeven te zoeken naar een oproep tot actie in een zee van eenheid.
Een brandpunt maken is eenvoudig. Zorg er allereerst voor dat je een hoofddoel hebt. Dan moet je het alleen maar groter maken dan al het andere en ervoor zorgen dat er voldoende ruimte omheen is, zodat het oog eerst naar dit gebied wordt getrokken. Dit is meer van toepassing op uw bureaubladontwerp wanneer een gebruiker heel veel van de e-mail tegelijk te zien krijgt.
Als je veel dingen hebt die allemaal een vergelijkbare grootte en hetzelfde gewicht hebben zonder witruimte om hen heen, zullen ze verschijnen als één groot, amorf blok dat het oog eenvoudigweg zal overslaan. Gebruik spatie om elementen heen om het oog te helpen trekken naar de dingen die er toe doen.
Verberg, verberg of obscuur uw afmeldinformatie niet. Afgezien van het feit dat het in veel landen onwettig is, is het onbeleefd en contraproductief. Als iemand zich wil afmelden voor uw nieuwsbrief en u het hen onmogelijk maakt om dit te doen, zullen ze niet terugkeren naar een tevreden abonnee. Het genereert alleen maar een slechte wil voor je merk omdat ze gedwongen worden om door te gaan met het verwerken van je e-mails (of een filter instellen om je berichten naar de prullenbak te sturen).
Hoe meer verticale indelingen er in een lay-out zijn, hoe meer afleiding het voor het oog is. Blijf bij twee of drie verticale divisies binnen een raster.
Stevige randen zijn ook erg storend voor het oog, dus beperk deze tot een minimum.
Dit is over het algemeen de veiligste maximale breedte voor uw bureaubladontwerp om ervoor te zorgen dat gebruikers niet horizontaal hoeven te schuiven.
Voordat u elke doos afgeronde hoeken en slagschaduwen geeft, moet u bedenken hoe uw lay-out werkt zonder deze verbeteringen. Behandel dat als je 'basis' ontwerp, waaraan je je afgeronde hoeken en schaduwen toevoegt als verbeteringen.
Het maken van krachtige vormen met vierkante randen ziet er net zo goed uit, en gebruikers van nieuwere e-mailclients krijgen uw afgeronde hoeken als een toegevoegde bonus te zien.
Deze aanpak bespaart u veel tijd als het aankomt op het bouwen van uw e-mail. Als u een afgerond tekstvak in het vakgebied met een slagschaduw moet maken en dit op elke e-mailclient moet werken, moet u de effecten met afbeeldingen maken, wat zeer tijdrovend kan zijn, vooral wanneer u herbruikbare sjablonen maakt.
Omarm het feit dat het niet altijd mogelijk is om dingen er in elke e-mailclient identiek uit te laten zien tot op de laatste pixel. Ontwerp dit met het oog om hoofdpijn verder in het circuit te verminderen.
Creëer ontwerpen met een beetje ademruimte, waarbij het niet uitmaakt of een client 7 megapixels aan ruimte eronder toevoegt. Op zijn minst, onthoud je van extra kleine details die er gebroken uitzien als ze één pixel uit zijn.
Uw e-mail is een samenhangend geheel, dus denk erover na hoe alles samenwerkt. Gebruikers zien de e-mail eerst in hun inbox en lezen uw afzendernaam, onderwerp en preheader. Dan zullen ze waarschijnlijk een versie van uw e-mail zien met afbeeldingen uitgeschakeld, de standaard voor de meeste e-mailclients. Ten slotte zullen ze uw e-mail zien zoals u van plan was - als ze afbeeldingen inschakelen.
Zorg ervoor dat alles goed met elkaar is verbonden en dat abonnees uw bericht nog steeds kunnen begrijpen, zelfs als de afbeeldingen zijn uitgeschakeld.
Neem uw hoofdboodschap niet op in een afbeelding. Het wordt standaard geblokkeerd en veel e-mailclients zullen uw alt-tags ook niet weergeven.
In het onderstaande voorbeeld kunt u zien hoe bijna alles in het bericht zal worden gemist zonder dat afbeeldingen zijn ingeschakeld, omdat alle tekst in afbeeldingen staat en de alt-tekst niet is opgemaakt om deze leesbaar te maken.
U kunt CSS-stijlen toevoegen aan afbeeldingen (of hun bovenliggende cel of linktags) om ervoor te zorgen dat ze mooi worden weergegeven in clients die alt-tags ondersteunen. Dit kan de algehele ervaring voor uw abonnees echt verbeteren.
Als u Photoshop gebruikt, is deze ingebouwd. Er zijn ook veel tools waarmee u kunt zien hoe uw ontwerp eruit gaat zien voor 10% van de mensen met een of andere vorm van kleurenzienstekort.
Koppel bij het bouwen niet alleen uw knoppen. Zorg ervoor dat u alles koppelt, zodat gebruikers overal kunnen klikken. Koppel de afbeelding, de knop en de kop. Heck, koppel de tekst zelfs als het werkt.
Er zijn een aantal manieren om een mobielvriendelijke e-mail te maken.
Dit is zonder meer de gemakkelijkste manier om een mobielvriendelijke e-mail te hebben. Met behulp van deze methode worden de afbeeldingen en tekst vrij groot ingesteld, zodat het lettertype leesbaar is en de afbeeldingen al groot genoeg zijn, ongeacht of de e-mail wordt bekeken op een desktop of een mobiel apparaat..
Het voordeel van dit type ontwerp is dat u slechts één lay-out hoeft te coderen. Het is absoluut je snelste en gemakkelijkste optie. Smartphone-clients die schaalvergroting ondersteunen, schalen uw e-mail naar 100% breed en voor diegene die dat niet doen, zal er heel weinig horizontaal scrollen zijn.
Het nadeel is dat de desktopversie erg groot is (wat ik persoonlijk niet zie als een nadeel).
Om deze lay-out te bereiken:
Een volledig responsieve HTML-e-mail gebruikt mediaquery's om de e-mail op een bepaalde manier weer te geven, afhankelijk van de grootte van het apparaat waarop deze wordt bekeken. Bijna geen van de grote desktop- en webmailclients ondersteunt mediaquery's, maar veel e-mailclients voor smartphones en tablets. Dit betekent dat het coderen van responsieve e-mails een beetje back-to-front is vergeleken met het coderen van responsieve websites, in die zin dat uw desktopversie uw 'basis'-versie is en dat u een max-breedtevraag gebruikt om de lay-out aan te passen aan kleinere apparaten.
Het voordeel van dit type ontwerp is dat u een geweldige e-mail met meerdere kolommen kunt maken die zich vertaalt naar een gemakkelijk leesbare mobiele versie met één kolom. Mediaquery's zijn ook veelzijdig omdat u specifieke schermformaten kunt targeten en ook specifieke pixeldichtheidsschermen (voor het weergeven van afbeeldingen met een hoge resolutie).
Het nadeel is dat de Gmail-app voor Android (de meest populaire e-mailclient op Android) geen mediaquery's ondersteunt en ongewone resultaten kan genereren bij het maken van uw volledig responsieve e-mail. Volledig responsieve e-mails duren ook veel langer om te coderen dan hun apparaat-agnostische neven en nichten.
Zie dit als responsiviteit zonder de mediaquery's.
Bij deze methode wordt een vloeiend ontwerp gemaakt, 100% breed, met een maximale breedte van ongeveer 600 px ingesteld op de buitenste tafel. Voorwaardelijke opmerkingen zijn vereist (voor Outlook) en een mediaquery (voor Apple Mail die op hilarische wijze de eigenschap max-width niet ondersteunt).
Het voordeel van dit type ontwerp is dat het in elke e-mailclient reageert, inclusief de Gmail voor Android-app. Deze methode kan ook worden gebruikt in combinatie met mediaquery's om zaken als tekstgrootte en knoppen verder te verfijnen op de clients die deze ondersteunen.
Het nadeel is dat het alleen goed werkt met ontwerpen die vrij ongecompliceerd zijn en over het algemeen niet meer dan één kolom bevatten. Inhoud met twee kolommen is in orde, zolang het maar klein genoeg is om er in een smalle kolom op een smartphonescherm goed uit te zien.
U moet ook percentagewaarden voor uw afbeeldingen kunnen gebruiken, wat niet altijd mogelijk is bij het maken van sjablonen (vaak moeten afbeeldingen in sjablonen een vaste pixelbreedte hebben).
En tot slot zijn er een paar mooie dingen die u goed kunt gebruiken om echt mooie e-mails te maken die er echt uitspringen.
Achtergrondafbeeldingen waren vroeger iets voor de stapel "Te hard", maar dankzij Stig Morten Myre en de mensen bij Campaign Monitor is er nu een supereenvoudige Bulletproof Email Backgrounds-generator die alle rompslomp er uit haalt. U hoeft geen achtergrondafbeeldingen toe te voegen aan uw campagnes.
Het gebruik van weblettertypen is ook een geweldige manier om uw ontwerp te onderscheiden van de rest. Met een beetje extra ontwerpoverwegingen en een beetje extra bouwtijd, is het eenvoudig om weblettertypen te implementeren die heel goed zullen werken in een verrassend aantal e-mailclients.
Moderne e-mailclients (zoals Apple Mail en die op de iPhone en Android-apparaten) ondersteunen eigenlijk CSS3 Animation, wat betekent dat je kunt gaan nadenken over het toevoegen van een aantal echt coole dingen aan je campagnes. Overgangen, evenals keyframe-animaties, worden heel goed weergegeven en kunnen een fantastische toevoeging zijn voor e-mail (zolang ze netjes worden afgebroken) omdat ze de bestandsgrootte niet vergroten, net zoals een geanimeerde GIF zou.
Er is een lot om rekening te houden bij het ontwerpen voor e-mail! De tips in dit artikel geven u een goed begin en kijken uit naar meer berichten in deze serie die meer in detail gaan over verschillende aspecten (zoals het gebruik van weblettertypen en responsief ontwerp)..
Accentsconagua