Hoe een e-mail te ontwerpen die mensen daadwerkelijk op hun telefoon zullen lezen
E-mailmarketing is een van de meest populaire manieren om een publiek te bereiken. Wacht, dat is waarschijnlijk geen nieuwe informatie. Maar wist u wat de meeste van die weergaven op een mobiel apparaat zullen zijn? Dus als u uw e-mails voor telefoons niet ontwerpt, is dit de dag om te beginnen.
Het ontwerpen van een mobiele e-mail vergt planning en denken. Veel e-mailsoftwarecliënten van derden bevatten responsieve sjablonen in hun pakketten, maar niet elke tool zal uw bericht automatisch converteren naar het ideeontwerp. U moet bedenken hoe uw e-mail eruit zal zien en ervoor zorgen dat het bericht gericht is. Het is misschien zelfs de perfecte plek om te beginnen met een mobile-first designstrategie.
Blijf bij één kolom
Het is misschien wel de meest eenvoudige ontwerpbeslissing die u ooit hebt genomen: als het gaat om mobiele e-mail, houdt u zich aan een indeling met één kolom. Alleen al deze beslissing maakt het gemakkelijker om elke afweging te maken. Het lost ook verschillende problemen met kleine schermen op.
Het eenkolomsformaat is gemakkelijk voor tijdgebonden gebruikers, creëert organisatie en stroom. Het is ook de ontwerpstandaard voor alles op een klein scherm. (Denk aan elke app of game die u opent. Ze bieden alles in één verticaal georiënteerd ontwerp.)
Het formaat met één kolom kan u dwingen enkele van uw standaard ontwerpstukken aan te passen. Mobiele e-mails hebben een vereenvoudigde koptekst en navigatie nodig. Ontwerpelementen moeten vrij klein zijn, zodat het begin van het e-mailbericht zichtbaar is op het eerste scherm.
Maak het type groter
Een van de grootste problemen bij mobiele e-mail is leesbaarheid. E-mails mogen niet moeilijk te lezen zijn. De oplossing is om het type een beetje groter te maken.
De standaard voor mobiel e-mailtype ligt tussen 14 en 16 punten voor hoofdteksttype en 22 tot 24 punten voor koppen. En vergeet niet de woordafbreking uit te schakelen, wat storend kan zijn voor het lezen van kleine blokjes. Deze standaard wordt zo gewoon dat Apple's iOS een minimale lettergrootte van 13 punten heeft en automatisch minder dan dat zal aanpassen.
Dit kan in het begin ongemakkelijk voelen. Het type ziet er waarschijnlijk enorm uit terwijl u door het ontwerp werkt, maar het wordt comfortabeler en gebruikers zullen u bedanken met meer openingen en langere interactietijden.
Vertel gebruikers dat ze iets moeten doen
Een mobiele e-mail heeft een duidelijke call-to-action nodig. Waarom verstuur je de e-mail? Is er een ontworpen ruimte voor gebruikers om deze actie te voltooien?
De tweede vraag is essentieel voor ontwerpers. Er zijn niet zoveel manieren om secundaire aanwijzingen te creëren in mobiele e-mails, zoals zweeftoestanden met tooltips, dus elk element moet zo worden ontworpen dat gebruikersactie voor de hand ligt. Dit kan van alles zijn, van het uiterlijk van knoppen tot tekst - "Koop nu", "Klik hier", "Meer informatie" - dat in het ontwerp wordt weergegeven.
Denk goed na over afbeeldingen
Er is een aanzienlijk segment gebruikers dat geen afbeeldingen van een mobiele e-mailnieuwsbrief zal zien. Apple's iOS-apparaten zijn het enige segment waar afbeeldingen automatisch worden weergegeven in e-mails. Dus het opnemen van afbeeldingen moet een bewuste beslissing zijn.
Doe wat onderzoek voordat u zich volledig afmeldt voor afbeeldingen. Bestudeer uw analyses om te zien vanaf welke apparaten gebruikers uw bericht bekijken. Afbeeldingen zijn een belangrijk hulpmiddel en mogen niet over het hoofd worden gezien vanwege apparaatspecificaties.
Houd bij het gebruik van afbeeldingen in mobiele e-mailontwerpprojecten rekening met het volgende:
- Grootte. De afbeelding moet zichtbaar zijn zonder te scrollen.
- Samenstelling. De inhoud van de afbeelding moet op een klein formaat begrijpelijk zijn.
- HTML. Trap niet in de val van het maken van tekst of knoppen in afbeeldingen. Tekst- en UI-elementen moeten HTML zijn en elke afbeelding moet ondersteunende HTML-tekst bevatten.
- Bericht. Onthoud dat uw bericht begrijpelijk moet zijn, zelfs als een gebruiker de afbeelding niet ziet.
- Ga niet overboord. Als je van plan bent afbeeldingen te gebruiken, blijf er dan bij. Gebruikers zullen gefrustreerd raken omdat een groot deel van het bericht lijkt te ontbreken.
Splits het scherm in uw ontwerpkader
In termen van mobiel e-mailontwerp is eenvoud de koning. Alles, van de taal tot het ontwerp, moet eenvoudig en gemakkelijk te begrijpen zijn. De boodschap en calls-to-action moeten duidelijk zijn.
Als je denkt aan mobiel ontwerp, stel je dan voor dat het kleine scherm uit drie delen bestaat: koptekst en branding, introductietekst en actie. In het ideale geval zou elk van deze een plaats moeten hebben op het eerste scherm van het e-mailontwerp. (Hoewel niet altijd.)
Overweeg apparaten en schaal
Het moeilijkste om te overwegen als het gaat om mobiel ontwerp, zijn alle mogelijke schermformaten die een e-mail zal weergeven. De realiteit is dit: het is onmogelijk om te doen.
Maar je kunt in overeenkomsten denken. Apple iOS zal mobiele e-mails automatisch schalen zodat ze op de breedte van het scherm passen, dus dat is een ding minder om over na te denken als u van plan bent een klein schermformaat te gebruiken. (Andere besturingssystemen doen dit nog niet.)
De meest standaardbreedte voor mobiel ontwerp is 640 pixels breed. De hoogtes variëren iets meer. U vindt een lijst met apparaten en formaten van Ken's Tech Tips.
Overweeg Touch en Ergonomie
Elementen die in de mobiele e-mail moeten worden aangeklikt of getikt, moeten een duidelijk ontwerp hebben. Dit omvat vaak het ontwerpen van deze elementen met gedurfdere kleuren en in grotere maten dan u misschien gewend bent.
Als vuistregel moet elk element dat is ontworpen voor gebruikersactie groot genoeg zijn om gemakkelijk met één vinger aan te raken en duidelijk te onderscheiden zijn van objecten in de buurt met voldoende ruimte. Elementen moeten ook gemakkelijk aan te raken zijn, rekening houdend met gebruikers die slechts één hand gebruiken om objecten op het scherm vast te houden en aan te raken.
- De standaard in "duimvriendelijke" maatvoering is minimaal 46 pixels in het kwadraat.
- Kies voor call-to-action over de volledige breedte, zodat links- of rechtshandige gebruikers ze gemakkelijk kunnen aanraken.
Zorg voor voldoende open ruimte rond klikbare elementen. Wanneer u links in de tekst gebruikt waarop moet worden geklikt, voegt u meer woorden toe aan de link om het aanraken van de link gemakkelijker te maken en het aantal inline links te beperken. Meerdere links dicht bij elkaar vergroten de kans dat een gebruiker de verkeerde aanraakt. Gebruik ontwerpelementen zoals kleur en vulling voor alle links, zodat gebruikers een duidelijke visuele aanwijzing hebben dat de tekst iets doet.
Bonus: 5 dingen om te vermijden
Nu u een idee heeft van wat u kunt doen met een mobiele e-mailcampagne, zijn er een paar dingen die u moet onthouden. Deze veelgemaakte fouten zijn de dingen die een verder geweldige mobiele e-mail kunnen vernietigen.
- Vergeten om navigatie toe te voegen. Voeg supereenvoudige navigatie toe die gebruikers terug naar uw website kan brengen, maar vergeet niet om deze voor mobiel te optimaliseren. De navigatiebalk van uw website is waarschijnlijk verkeerd geschaald voor een mobiel apparaat.
- Een "subtiel" kleurenpalet creëren. Gebruikers passen het contrast en de kleur op hun mobiele apparaten veel aan. Vermijd kleurenpaletten met zachte tinten of kleuren zonder veel contrast. Het moet leesbaar zijn.
- Klein type op een klein apparaat is moordend. Mensen zullen scrollen. Maak het type groot genoeg om gemakkelijk te kunnen lezen.
- Knoppen die klein zijn of verborgen door standaard UI-pictogrammen. Denk bijvoorbeeld aan de iPhone, waar de poging vanaf de onderkant van het scherm verschijnt. Als u knoppen of elementen op deze locatie plaatst, worden ze verborgen wanneer gebruikers proberen ermee te communiceren.
- Rommel is een mobiele ramp. Bepaal een enkel bericht voor mobiel en houd je eraan. Gebruikers hebben niet de tijd of aandacht om veel informatie uit een e-mail op hun telefoon te filteren.
Gevolgtrekking
Mobiele e-mailontwerpen kunnen enkele dingen testen die u denkt over ontwerpen voor het web. Het is een uniek aspect met verschillende overwegingen. Veel van de dingen die u moet overwegen, zijn anders dan bij andere projecten.
Mijn aanbeveling is dit: al uw e-mailnieuwsbrieven of correspondentie moeten worden geoptimaliseerd voor mobiel. Maak elk bericht met behulp van de bovenstaande tips en denk vervolgens na over eventuele kleinere wijzigingen die u kunt aanbrengen voor grotere formaten. Dit werkt omdat u een enkel en uniform bericht op verschillende platforms maakt met een gericht idee. U zult begrijpen wat u met de e-mail wilt bereiken voordat u te ver komt en al vroeg in het proces belangrijke inhoudsbeslissingen neemt en u zult niet het gevoel hebben dat u gedwongen wordt om inhoud voor mobiele gebruikers te verwijderen.
