5 tips voor een mobielvriendelijke nieuwsbrief

Een nieuwsbrief kan er op een groot computerscherm overzichtelijk uitzien, maar op een smartphone heel anders worden weergegeven. Kolommen worden smaller, teksten worden moeilijker leesbaar en knoppen kunnen te klein zijn om gemakkelijk aan te klikken.

Dat is zonde, want veel ontvangers bekijken hun e-mail onderweg of tussendoor op hun telefoon. Wanneer een nieuwsbrief niet prettig werkt op een kleiner scherm, is de kans groot dat iemand afhaakt voordat de belangrijkste boodschap is gelezen.

Een mobielvriendelijke nieuwsbrief past zich aan het scherm van de ontvanger aan. De inhoud blijft overzichtelijk, teksten zijn goed leesbaar en belangrijke knoppen zijn eenvoudig aan te klikken. In onze LinkedIn-carrousel delen we vijf belangrijke tips. In deze blog leggen we uitgebreid uit hoe je deze tips in de praktijk toepast.

Wat is een mobielvriendelijke nieuwsbrief?

Een mobielvriendelijke nieuwsbrief is ontworpen om ook op een smartphone duidelijk en gebruiksvriendelijk te worden weergegeven. De ontvanger hoeft niet horizontaal te scrollen of in te zoomen om de tekst te kunnen lezen.

Bij een responsive nieuwsbrief past de vormgeving zich automatisch aan de beschikbare schermruimte aan. Kolommen kunnen bijvoorbeeld onder elkaar worden geplaatst en afbeeldingen worden aangepast aan de breedte van het scherm.

Toch is een responsive template alleen niet voldoende. Ook de hoeveelheid tekst, witruimte, onderwerpregel, knoppen en pagina’s waarnaar je verwijst, bepalen hoe prettig de mobiele ervaring is.

1. Kies een overzichtelijke indeling met bij voorkeur één kolom

Op een desktop is voldoende ruimte beschikbaar om verschillende onderdelen naast elkaar te plaatsen. Op een smartphone is die ruimte veel beperkter. Een nieuwsbrief met meerdere smalle kolommen kan daardoor onrustig en moeilijk leesbaar worden.

Een indeling met één duidelijke kolom werkt op mobiel meestal het beste. De lezer kan de inhoud van boven naar beneden bekijken zonder te hoeven zoeken naar de juiste leesvolgorde.

Wil je toch meerdere kolommen gebruiken? Zorg er dan voor dat deze op mobiel netjes onder elkaar worden geplaatst. Controleer ook in welke volgorde de verschillende onderdelen verschijnen. Een afbeelding die op desktop rechts van een tekst staat, kan op mobiel bijvoorbeeld boven of onder de tekst terechtkomen.

In de mobiele ontwerpmodus van MailCamp kun je controleren hoe kolommen worden gestapeld. Je kunt onder andere de volgorde aanpassen en bepalen of bepaalde onderdelen op mobiel of desktop zichtbaar moeten zijn.

Een goede mobiele opbouw begint meestal met:

• een herkenbaar logo of een eenvoudige header;
• een duidelijke hoofdkop;
• een korte introductie;
• de belangrijkste boodschap;
• één duidelijke vervolgstap;
• de gebruikelijke contact- en afmeldgegevens.

Probeer niet te veel verschillende onderwerpen in één nieuwsbrief te verwerken. Hoe meer onderdelen je toevoegt, hoe langer en onoverzichtelijker de nieuwsbrief op een smartphone kan worden.

2. Maak je tekst goed leesbaar

Mobiele lezers bekijken een nieuwsbrief vaak snel. Ze scrollen door de inhoud en zoeken naar informatie die voor hen relevant is. Lange tekstblokken maken dit lastiger.

Werk daarom met korte alinea’s, duidelijke tussenkoppen en voldoende witruimte. Een alinea van twee tot vier zinnen is op mobiel vaak prettiger leesbaar dan één groot tekstblok.

Zorg ook dat het lettertype groot genoeg is. Een tekst die op een computerscherm goed leesbaar lijkt, kan op een smartphone alsnog te klein zijn. Voorkom dat ontvangers moeten inzoomen om de inhoud te begrijpen.

Maak de belangrijkste boodschap daarnaast gemakkelijk scanbaar. Zet relevante informatie bovenaan en gebruik opsommingen wanneer je meerdere voordelen, stappen of aandachtspunten wilt benoemen.

Let bij de mobiele leesbaarheid op de volgende onderdelen:

• gebruik korte alinea’s;
• plaats voldoende ruimte tussen verschillende onderdelen;
• gebruik duidelijke tussenkoppen;
• kies een goed leesbare lettergrootte;
• beperk lange en ingewikkelde zinnen;
• zorg voor voldoende contrast tussen tekst en achtergrond.

In de mobiele ontwerpmodus van MailCamp kun je bepaalde instellingen specifiek voor mobiel aanpassen. Denk bijvoorbeeld aan de lettergrootte, uitlijning en ruimte rondom een inhoudsblok.

3. Gebruik duidelijke en gemakkelijk aanklikbare knoppen

Een call-to-action laat de lezer zien welke vervolgstap je van hem of haar verwacht. Denk aan het bekijken van een product, lezen van een blog, aanvragen van informatie of inschrijven voor een evenement.

Op een smartphone wordt een knop met een vinger aangeklikt. Een kleine knop of tekstlink is daardoor lastiger te gebruiken dan op een computer, waar iemand met een muis werkt.

Maak een call-to-action daarom groot genoeg en plaats voldoende ruimte rondom de knop. Zo voorkom je dat een ontvanger per ongeluk op een andere link klikt.

Gebruik daarnaast een korte en duidelijke knoptekst. De ontvanger moet direct begrijpen wat er na de klik gebeurt. Teksten zoals ‘Lees de blog’, ‘Bekijk het aanbod’ of ‘Schrijf je in’ zijn meestal duidelijker dan een algemene tekst zoals ‘Klik hier’.

Let bij mobiele call-to-actions op de volgende punten:

• gebruik een duidelijke en actiegerichte knoptekst;
• zorg voor voldoende contrast met de achtergrond;
• maak de knop gemakkelijk aanklikbaar;
• plaats voldoende witruimte rondom de knop;
• beperk het aantal verschillende call-to-actions;
• controleer of de gekoppelde pagina ook mobielvriendelijk is.

Dat laatste punt wordt regelmatig vergeten. Een goede mobiele nieuwsbrief levert alsnog een slechte ervaring op wanneer de ontvanger na het aanklikken op een website terechtkomt die niet geschikt is voor een smartphone.

4. Houd je onderwerpregel kort en zet de belangrijkste boodschap vooraan

Op een smartphone is minder ruimte beschikbaar om de onderwerpregel te tonen. Een lange onderwerpregel kan daardoor halverwege worden afgebroken. De ontvanger ziet dan mogelijk niet waar de e-mail werkelijk over gaat.

Zet de belangrijkste boodschap daarom zo veel mogelijk vooraan. De eerste woorden moeten voldoende informatie geven om te begrijpen waarom de e-mail relevant is.

Vergelijk bijvoorbeeld de volgende onderwerpregels:

Gebruik de preheader om de onderwerpregel aan te vullen. De preheader is het korte stukje tekst dat in veel inboxen naast of onder de onderwerpregel wordt weergegeven. Hiermee kun je extra context geven zonder de onderwerpregel onnodig lang te maken.

Zorg dat de afzendernaam, onderwerpregel en preheader samen één duidelijke boodschap vormen. Vermijd herhaling en gebruik geen misleidende teksten die niet aansluiten op de werkelijke inhoud van de nieuwsbrief.

5. Test je nieuwsbrief op mobiel voordat je deze verstuurt

Ook wanneer je een responsive template gebruikt, blijft testen belangrijk. E-mailprogramma’s kunnen HTML en opmaak namelijk verschillend weergeven. Een nieuwsbrief kan er in de ene inbox goed uitzien en in een andere inbox kleine afwijkingen vertonen.

Gebruik daarom eerst de mobiele voorbeeldweergave in de editor. Controleer daarna bij voorkeur ook een echte testmail op verschillende apparaten en in verschillende e-mailprogramma’s.

Bekijk tijdens het testen niet alleen of de nieuwsbrief er mooi uitziet. Controleer ook of alle onderdelen goed werken.

Let tijdens de mobiele controle op:

• de volgorde waarin kolommen en afbeeldingen verschijnen;
• de leesbaarheid van koppen en gewone tekst;
• de ruimte rondom tekst, afbeeldingen en knoppen;
• de grootte en aanklikbaarheid van call-to-actionknoppen;
• de kwaliteit en laadtijd van afbeeldingen;
• de werking van alle links;
• de onderwerpregel en preheader in de inbox;
• de mobiele weergave van de gekoppelde pagina’s.

Met de mobiele ontwerpmodus van MailCamp kun je tussen de desktop- en mobiele weergave wisselen. Ook kun je voor verschillende onderdelen mobiele instellingen toepassen, zoals padding, uitlijning en lettergrootte. Lees meer over het maken van een responsive nieuwsbrief in MailCamp.

Daarnaast kan de controlefunctie in de editor helpen bij het herkennen van mogelijke verbeterpunten, zoals ontbrekende links, grote afbeeldingen of problemen met de structuur. Een automatische controle vervangt alleen niet de menselijke eindcontrole. Verstuur daarom altijd een voorbeeldmail voordat je de definitieve campagne verzendt.

Vergeet afbeeldingen en laadtijd niet

Grote afbeeldingsbestanden kunnen een nieuwsbrief onnodig langzaam maken. Dat valt vooral op wanneer iemand de e-mail via een mobiele internetverbinding opent.

Verklein afbeeldingen daarom voordat je ze uploadt en kies een bestandsformaat dat past bij de afbeelding. Gebruik geen afbeelding van enkele duizenden pixels breed wanneer deze in de nieuwsbrief veel kleiner wordt weergegeven.

Zorg daarnaast dat de belangrijkste informatie niet alleen in een afbeelding staat. Afbeeldingen kunnen worden geblokkeerd of langzaam laden. De ontvanger moet de kern van je boodschap daarom ook zonder afbeeldingen kunnen begrijpen.

Voeg beschrijvende alternatieve teksten toe aan belangrijke afbeeldingen. Deze teksten helpen ontvangers wanneer een afbeelding niet wordt geladen en maken je nieuwsbrief toegankelijker voor mensen die ondersteunende software gebruiken.

Checklist voor een mobielvriendelijke nieuwsbrief

Maak mobiel onderdeel van je vaste controle

Een mobielvriendelijke nieuwsbrief begint bij een overzichtelijke opbouw. Kies bij voorkeur voor één kolom, houd teksten kort en maak knoppen gemakkelijk aanklikbaar. Zet de belangrijkste informatie vooraan en controleer altijd hoe de nieuwsbrief op een kleiner scherm wordt weergegeven.

Maak de mobiele controle onderdeel van je vaste werkwijze. Bekijk iedere campagne in de mobiele voorbeeldweergave en verstuur een testmail voordat je de definitieve nieuwsbrief verzendt. Zo ontdek je problemen voordat je ontvangers ermee te maken krijgen.

Met de drag-and-drop-editor van MailCamp kun je nieuwsbrieven ontwerpen en vooraf op verschillende schermformaten bekijken. Zo werk je stap voor stap aan een nieuwsbrief die niet alleen op desktop, maar ook op mobiel prettig te lezen en te gebruiken is.