Hoogstwaarschijnlijk lees jij je e-mail meerdere keren per dag vanaf mobiel of tablet. Dan zul je als geen ander begrijpen hoe fijn het is wanneer je een e-mail direct fatsoenlijk kunt bekijken. Dat je niet hoeft in te zoomen en de e-mail van zichzelf leesvriendelijk is. Deze optimalisatie voor mobiel heet responsive weergave. Bij Hellodialog wordt iedere e-mail automatisch responsive. In deze blog lees je vier insider-tips voor het geavanceerd fine-tunen van je responsive design.
1. Verberg items op een mobiel apparaat
Het doel van e-mailmarketing is om je lezer via dit kanaal te enthousiasmeren, inspireren of informeren en daarbij tot actie over te laten gaan. Het begrip ’tot actie overgaan’ betekent het doorklikken vanuit de e-mail naar de bijbehorende landingspagina en idealiter iets kopen/een aanmelding voor bijvoorbeeld een event.
Het verschil tussen effectief design op desktop en mobiel
Het design van je nieuwsbrief bepaalt in sterke mate hoe effectief de e-mail is. Een effectief design op desktop ziet er echter anders uit dan op mobiel. In een responsive weergave wordt de leesvriendelijkheid gewaarborgd op verschillende apparaten. Responsive weergave beïnvloedt echter ook hoe een design overkomt. Daarmee verandert de opbouw van een nieuwsbrief op mobiel in vergelijking tot desktop. De kans is aanwezig dat nieuwsbriefelementen die de e-mail op desktop versterken op mobiel juist de impact beperken, bijvoorbeeld omdat het teveel ruimte inneemt. Daarom is het zinnig om je design te fine-tunen voor mobiel. Je kunt er bijvoorbeeld voor kiezen om bepaalde elementen op de mobiele weergave weg te laten.
Elementen van je nieuwsbrief weglaten op een mobiel apparaat
In de afbeelding hieronder zie je dezelfde nieuwsbrief zoals hij er op verschillende apparaten uitziet. De opbouw op desktop en tablet is hetzelfde. De opbouw op mobiel wijkt af. Op de mobiele weergave zie je dat het logo van het bedrijf niet is weergegeven. Dat is een bewuste keuze vanuit de verzender van de e-mail, omdat het begin van de e-mail anders teveel ruimte inneemt. Dit kan met ieder element uit je nieuwsbrief, zoals een logo, afbeelding, call-to-action button of tekst.
In de praktijk items verbergen op een mobiel apparaat
Specifieke elementen verbergen op een mobiel apparaat kun je eenvoudig realiseren in de Hellodialog e-maileditor. Open de e-maileditor en klik op het element dat je wil verbergen op mobiel. Aan de rechterzijde zie je de optie ‘Mobiele apparaten: tonen of verbergen’. Selecteer hier een van de twee opties.
2. Afbeeldingen op mobiel in de volle breedte tonen
Een nieuwsbriefdesign is 600 pixels breed met daar omheen lege ruimte (wit of met achtergrondkleur) of een achtergrond. Op desktopweergave komt dat meestal mooi uit. Wanneer je dezelfde nieuwsbrief bekijkt op mobiel, worden de elementen automatisch herrangschikt tot een responsive weergave. De lege ruimte of achtergrond rondom de e-mail wordt eveneens smal getoond omdat het onderdeel is van de e-mail. Soms versterkt dit de nieuwsbrief. Vaak is het op mobiel mooier wanneer deze lege ruimte of achtergrond niet wordt getoond. Overweeg eens om die ruimte links en rechts weg te laten op mobiel. In onderstaand voorbeeld zie je het verschil tussen de twee opties. Het voorbeeld links laat smal de achtergrond van de nieuwsbrief zien, terwijl dat bij het rechtervoorbeeld niet wordt getoond.
In de praktijk mobiele afbeeldingen tonen op volle breedte
Als je ook vindt dat de achtergrond van een e-mail op mobiel beter niet kan worden getoond, kan dat eenvoudig met Hellodialog. Open je nieuwsbrief en klik op het vierde tabblad aan de rechterzijde. Daar staat de optie Mobile Padding en kun je deze op ‘Ja’ of ‘Nee’ zetten. Zet de optie ‘Nee’ wanneer je de e-mail op mobiel in de volledige breedte wil laten zien.
3. Fine-tune specifieke delen van je nieuwsbrief door deze wel of juist niet te optimaliseren voor mobiel
In een responsive weergave worden kolommen op mobiel automatisch onder elkaar gepositioneerd. Dat is erg handig om de leesbaarheid te vergroten. Toch kan het zijn dat specifieke elementen in een responsive weergave minder goed uitkomen. Denk daarbij aan social media iconen onderaan je nieuwsbrief. Wanneer je de standaard social media iconen gebruikt uit de Hellodialog e-maileditor gebruikt, wordt dit automatisch op een mooie manier weergegeven. Meestal voegt een bedrijf echter custom-made social media iconen toe die als afbeeldingen worden geupload met hierachter hyperlinks. Daarbij is het wel degelijk belangrijk om rekening te houden met de mobiele weergave ervan.
Social media iconen wel of niet responsive maken
Wanneer je de drie voorbeelden uit onderstaand voorbeeld simpelweg naast elkaar invoegt, worden ze onder elkaar weergegeven in de mobiele weergave. Dat zie je in het voorbeeld aan de linkerkant. In het rechtervoorbeeld zie je hoe de social media elementen eruit zien wanneer je deze niet optimaliseert voor mobiel. Ze worden nu naast elkaar geplaatst, wat een stuk leesvriendelijker overkomt. In dit geval is het dus beter om een specifiek gedeelte van de nieuwsbrief niet te optimaliseren voor mobiel.
In de praktijk specifieke delen van je nieuwsbrief wel/niet optimaliseren voor mobiel
Het instellen van bepaalde elementen van de nieuwsbrief als wel/niet mobielvriendelijk gaat als volgt. Open de nieuwsbrief in de e-maileditor en klik op het element dat je op mobiel niet meer wilt optimaliseren (aangezien de hele nieuwsbrief automatisch wel wordt geoptimaliseerd). Aan de rechterzijde zie je het menu ‘Mobile Friendly’ met de selectiemogelijkheden ‘Ja’ en ‘Nee’. Stel deze optie in op ‘Nee’ en het element wordt niet langer geoptimaliseerd voor mobiel.
4. Optimaliseer de gehele nieuwsbrief wel of niet voor mobiel
Bij Hellodialog wordt je nieuwsbrief automatisch responsive. Dat is in de meeste gevallen de beste oplossing en raden we je altijd aan. Toch zijn er uitzonderingen. Bijvoorbeeld wanneer een nieuwsbrief een aantal afbeeldingen laat zien in een overzichtweergave. In onderstaande nieuwsbrief laat kledingmerk Oasis zien op welke manieren je een jurk kunt dragen. De niet-responsive weergave in het voorbeeld links is daarbij effectiever om deze boodschap over te dragen, dan de responsive weergave aan de rechterzijde.
In de praktijk je hele nieuwsbrief wel of niet optimaliseren
Als je een nieuwsbrief in zijn totaliteit niet meer wil optimaliseren op mobiel, dan gaat dat als volgt in zijn werk. Open de nieuwsbrief in de Hellodialog e-maileditor. Klik aan de rechterzijde op het vierde tabblad. Daar staat de optie ‘Mobile Friendly’ met de opties ‘Optimaliseren’ en ‘Niet optimaliseren’. Selecteer ‘Niet optimaliseren’.
Bekijk de mobiele preview
Om te ontdekken wat bij jouw nieuwsbrief tot de beste mobiele weergave leidt, is het handig om regelmatig naar de preview te kijken op verschillende apparaten. Dat staat bovenaan in de Hellodialog e-maileditor aangegeven bij het roze omcirkelde icoon:
Als je hierop klikt, dan kun je per apparaat bekijken hoe je nieuwsbrief eruit ziet.
Aan de slag met mobiele optimalisatie
Bovenstaande tips geven je concrete handvatten om je nieuwsbrief naast de reguliere responsive weergave nog verder te fine-tunen voor mobiel. Ben je enthousiast om aan de slag te gaan? Maak dan nu een demo aan bij Hellodialog. Als je vragen hebt over het optimaliseren voor mobiel, kun je contact opnemen met onze supportafdeling.
Veel succes!