088 - 120 34 00

E-mail design voor op je telefoon

Werk jij met e-mail marketing? En heb je ontvangers in je doelgroep die hun mail lezen op hun mobiele telefoon? Dan ben je ongetwijfeld al eens tegen het probleem aangelopen dat diverse mobiele telefoons vaak een geheel zelf geïmproviseerde versie van de oorspronkelijke e-mail laten zien. Vooral als je heel veel waarde hecht aan het ontwerp van de e-mail kan dit een enorme frustratie zijn. Gelukkig zijn er een aantal handige trucs waarmee je dit probleem grotendeels kunt oplossen.

E-mail ontvangen: PC versus smartphone
Een steeds grotere trend is het verzenden en vooral ontvangen van e-mail op de smartphone. Hoewel smartphones steeds meer op een totale pc in je broekzak of handtas beginnen te lijken, blijven er wel nadelen zitten aan het ontvangen van e-mail op een smartphone. Meest voor de hand liggend is natuurlijk de schermgrootte van je telefoon. Een voorbeeld hiervan: Een website kan er op je enorme breedbeeldmonitor geweldig uitzien, maar kan onleesbaar zijn op je mobiel. Om nog maar te zwijgen over de stijlaanpassingen die sommige mobiele browsers uit zichzelf toepassen, zoals het groter maken van stukken tekst om de leesbaarheid te bevorderen.

Efficiency is het keyword
Nieuwsbrieven zijn tegenwoordig prachtig klaargemaakte vijfsterrengerechten met een ideale mix van html en grafische verfraaiingen. Echter is het wel zo dat deze er zo prachtig uitzien op je computerscherm, maar (nog) lang niet altijd ook op je telefoon. Voor telefoons is meestal een tekstversie meegezonden. Dit heeft wel als groot nadeel dat er geen mogelijkheden zijn voor een mooie opmaak van je bericht. Efficiency is het keyword bij het schrijven van e-mail voor ontvangst op mobiele telefoons. In het huidige tijdperk willen steeds meer marketeers en redacteurs, maar vooral ook ontvangers, dezelfde prachtige kunstwerken op de mobiele telefoon te zien krijgen. Hoewel we niet in de toekomst kunnen kijken  is het aannemelijk dat we nooit telefoons zullen gaan meenemen op monitorformaat. Hoewel diverse tablets tegenwoordig een mooie tussenoplossing vormen, ga ik er niet vanuit dat de telefoon in de nabije toekomst uit het straatbeeld gaat verdwijnen. Wat kunnen we op dit moment dus concreet doen om toch de beleving van een e-mail op je mobiele telefoon te verbeteren?

Wat zijn de huidige mogelijkheden bij de ontvangers
Allereerst is het erg belangrijk om te weten wat de huidige mogelijkheden zijn van de diverse meest gebruikte software op telefoons. In onderstaand schema is te zien dat eigenlijk alle telefoons wel html e-mails kunnen lezen zonder al teveel problemen, op Blackberry’s met oude firmware na.


Binnenkort komt de Blackberry 6 software uit, waar wel volledige html webkit support op zal zitten. Daarmee kan het overgrote deel van de mobiele e-mail ontvangers allemaal html e-mails ontvangen.
Kijkend naar de tabel lijken Images hier in eerste oogopslag een probleem te gaan vormen, maar gelukkig heeft dit enkel te maken met het automatisch uitschakelen van images. Bij de andere toestellen dan de iPhone dienen deze handmatig ingeschakeld te worden wegens beveiligingsredenen, waarvoor een grote knop beschikbaar is in het betreffende scherm. Images zijn dus het grootste probleem eigenlijk niet. Verder is er uit dit schema nog te concluderen dat alt teksten niet overbodig zijn, maar (voorlopig) enkel leesbaar voor Android-gebruikers. Met Preview Text worden de eerste paar woorden uit de betreffende e-mail bedoeld. Scale is de schaal waarop de e-mail wordt getoond. Enkel de iPhone past zelf de grootte van de mail aan naar de schermgrootte, waar op andere toestellen de gebruiker zelf naar links en naar rechts zal moeten scrollen om een volledige e-mail te kunnen lezen. En last but not least,  is er nog Modify Fonts. Deze ‘irritatie’ voor veel designers noemde ik al eerder. De complete lay-out kan compleet overhoop gehaald worden door ineens groter getoonde fonts en woordafbrekingen op rare plekken.

Maar goed, dit blog zou tot nu toe iedereen alleen maar laten afzien van mobiele e-mailcampagnes, als er geen oplossingen zouden zijn. Gelukkig zijn die er wél! En simpeler dan ik had verwacht.

Eerst een technisch snufje:
Om te zorgen dat die grote irritatie van het veranderen van fonts door mobiele telefoons wordt tegengegaan kan je een stukje CSS plaatsen in de <head>-tag van je e-mail. Plak daar het volgende stukje code:


Dit stukje code vertelt de telefoon dat bij het weergeven van de e-mail op een scherm van 480 pixels breedte (een op zijn kant gedraaide iPhone) of kleiner, de tekstgrootte niet mag worden aangepast door de telefoon. Het staat er twee keer om voor zowel e-mail clients te werken die de <body>-tag accepteren, als voor degene die de <body>-tag negeren.

Definieer styles in-line
Hoewel dit artikel niet is bedoeld om alle vuistregels voor html e-mail op te sommen, zijn een paar regels wel van toepassing bij deze zaken. De belangrijkste regel bij het opstellen van html e-mails is naar mijn idee: Gebruik in-line-CSS! Het is sterk af te raden om te linken naar externe style sheets aangezien veel van de e-mail parsers deze niet meepakken. Verder is het ook niet slim om styles te definiëren in de <head> tag. Een groot aantal e-mail providers negeert alles boven de body tag.

Maar Mark… Je zegt net dat we een stukje CSS in de <head> moesten plakken tegen het veranderen van font-grootte…
Klopt! Maar er komt nog een volgende stap die dat oplost.

Opmaak van je e-mail converteren naar in-line CSS met één klik
Als je momenteel een template gebruikt met stijldefinities in de <head>-tag of er een aan het ontwikkelen bent in bijvoorbeeld Adobe Dreamweaver (voegt automatisch style tags in de <head> toe tijdens het ontwikkelen), niet getreurd. Ik ben namelijk een fantastische tool tegengekomen op internet die in enkele seconden je complete e-mail omzet naar in-line gecodeerde CSS. Deze kan je vinden op de website van Premailer.
Na afronding van je e-mail plak je de html van je zojuist gemaakte e-mail in de tool onder ‘Paste HTML as the source’. Dit mag dus prima een mail zijn met ons eerder toegevoegde stukje CSS en eventueel nog meer stijldefinities in de <head>-tag. Vervolgens geef je verdere wensen aan bij de checkboxes (ik vink ze meestal alle vier aan) en druk op ‘Submit’. Vervolgens krijg je een overzicht met gemaakte wijzigingen en de nieuwe, totaal in-line gecodeerde html code. Deze sla je op, en je e-mail is in principe klaar voor verzending.
Een extra aanrader is dat je ook de daaronder door Premailer gegenereerde tekstversie meestuurt als tekstversie van je html e-mail voor een optimaal resultaat. Het kan namelijk altijd zijn dat de ontvanger heeft ingesteld dat hij of zij automatisch de tekstversie wil ontvangen en niet de html versie.

Wat moet je dus doen met elke mailing?
Om ervoor te zorgen dat je e-mail zo goed mogelijk gelezen kan worden op mobiele telefoons adviseer ik dan ook de volgende stappen:

1 – Maak je e-mail klaar in bijvoorbeeld Adobe Dreamweaver en houd je aan de algemeen geldende vuistregels voor html e-mails.
2 – Plaats het eerder genoemde stukje CSS erbij in de <head>-tag van je e-mail.
3 – Haal de html van je e-mail door Premailer heen
4 – Plak de klaargemaakte html en tekstversie in je E-mail programma.
5 – Test je e-mail
6 – Verstuur je e-mail

Voorbeeld met de Onetomarket nieuwsbrief
De nieuwsbrief van Onetomarket van afgelopen mei is nog verzonden zonder het extra stukje CSS of Premailer te gebruiken. Links is de versie te zien zonder extra CSS en Premailer, rechts de versie mét deze twee extra stappen. Het resultaat moge duidelijk zijn.


Wat opvalt bij de mail links is dat de leesbaarheid niet slecht is zonder de extra stappen die besproken worden in deze blog post. Dat betekent dat de nieuwsbrief oorspronkelijk al was ingericht met een mogelijke verandering van fontgrootte in het achterhoofd, wat natuurlijk erg handig is. Maar de verschillen zijn natuurlijk enorm. Indien het u opvalt: de footer van de e-mail links en rechts verschilt van blauwe tint. Dit heeft te maken met een kleurverloop in de gebruikte achtergrond. Dit is dus geen aanpassing die door de uitgevoerde stappen is gekomen.

Conclusie
Een 100% garantie van goede ontvangst bij echt alle ontvangers is niet te geven. Wel is mijn mening dat je met het uitvoeren van deze stappen op dit moment het best mogelijke resultaat kunt behalen. Het kan goed zijn dat jouw ESP (E-mail Service Provider) deze mogelijkheden van zichzelf uit al ondersteunt. Mocht je niet over dergelijke software beschikken of dit verhaal té technisch voor je zijn, neem dan gerust contact op met Onetomarket. Wij kunnen diverse oplossingen op maat bieden om je e-mailcampagnes tot een succes te maken.

Happy mailing!

Jouw vraag voor een speeddate van 15 minuten met het team

onze partners