Bij mobiel e-mailontwerp draait het eerst om de leesvolgorde: klanten moeten de aanbieding, de belangrijke voorwaarde en de volgende stap begrijpen zonder in te zoomen. Een productraster dat op een desktop ruim oogt, kan op een telefoon veranderen in een stapel kleine afbeeldingen. Ontwerp eerst voor de kleinere leesruimte en controleer daarna wat er gebeurt wanneer tekst langer wordt, afbeeldingen ontbreken of kolommen onder elkaar komen te staan.
Zorg voor een duidelijke leesvolgorde
Gebruik voor de hoofdboodschap een eenvoudige indeling met één kolom. Zet de belofte, toelichting en belangrijkste actie in een volgorde die ook logisch blijft wanneer afbeeldingen niet worden geladen. Extra productblokken horen die actie te ondersteunen, niet ermee te concurreren.
Houd belangrijke teksten als gewone, selecteerbare tekst in de e-mail. Lezers horen niet op een promotionele afbeelding te hoeven inzoomen om de aanbieding of voorwaarden te ontdekken. Kies een lettertype dat goed werkt in e-mail en een comfortabele tekstgrootte; ongeveer 16 pixels is een bruikbaar beginpunt, maar test de daadwerkelijke weergave. Een lange vertaling heeft mogelijk meer ruimte in de hoogte nodig, geen kleinere letters.
Richt het eerste scherm op één keuze
Schets eerst de smalle weergave en maak daarna pas een raster voor desktop. Bij een productlancering kan de leesvolgorde bijvoorbeeld zijn: productnaam, één zin over het gebruik, ondersteunende afbeelding, prijsinformatie en knop. De lezer hoort de aanbieding te begrijpen, ook als alleen dit eerste deel zichtbaar is. Een grote decoratieve banner mag nuttige informatie niet meerdere schermen omlaag duwen.
Begin met ongeveer 16 pixels voor de hoofdtekst en voldoende regelafstand om de regels prettig van elkaar te scheiden; controleer daarna de verzonden e-mail. Dit zijn startpunten voor het ontwerp, geen eis dat elk label en elke kop dezelfde grootte heeft. Maak een duidelijk onderscheid tussen hoofdtekst en koppen en laat genoeg ruimte rond de belangrijkste actie. De hele template verkleinen omdat de indeling te vol is, is meestal de verkeerde oplossing.
Gebruik je twee productkaarten, houd dan de afbeelding, titel, prijs en link van elk product bij elkaar in hetzelfde onderdeel. Wanneer de kaarten onder elkaar komen, ziet de klant eerst één volledig product voordat het volgende begint. Voorkom een indeling waarin eerst beide afbeeldingen en pas daarna beide beschrijvingen verschijnen: zo moet de lezer zelf uitzoeken welke gegevens bij elkaar horen.
Laat onderdelen meegroeien met de inhoud
Gebruik geen tekstvakken met een vaste hoogte of geforceerde regeleinden die alleen nodig zijn om één desktopkop mooi uit te lijnen. Geef knoppen genoeg opvulling voor een langer label en maak het hele klikbare gebied prettig aanraakbaar. Zorg voor afstand tussen links die dicht bij elkaar staan, zodat een duim niet per ongeluk de verkeerde bestemming kiest.
Gebruik beschrijvende alternatieve tekst bij informatieve afbeeldingen en voorkom onnodige ruis bij decoratieve afbeeldingen. Controleer het contrast van tekst tegen de echte achtergrond, ook wanneer de donkere modus iets verandert. Een licht label dat op je monitor elegant oogt, kan buiten op een telefoon moeilijk leesbaar zijn.
Gebruik een previewmatrix om zwakke onderdelen te vinden
Een bruikbare matrix bevat een smalle weergave op telefoonformaat, een groter scherm, een situatie waarin afbeeldingen ontbreken, donkere modus waar die wordt ondersteund en realistische klantgegevens. Neem voor vertalingen de langste versie op in plaats van alleen de kortste te testen. Bekijk eerst het hele bericht en controleer daarna de onderdelen die het vaakst problemen geven: productnamen, prijsnotaties, knoppen en links in de voettekst.
- Vouwt een knoplabel naar een tweede regel, laat de knop dan hoger worden en controleer de opvulling; knip het actiewoord niet af.
- Raakt een productnaam het volgende onderdeel, verwijder dan een vaste hoogte en geef de tekst ruimte om af te breken.
- Verdwijnt belangrijke informatie wanneer afbeeldingen ontbreken, zet die dan in gewone tekst en gebruik de afbeelding als ondersteuning.
- Zijn links naast elkaar moeilijk afzonderlijk aan te raken, vergroot dan de tussenruimte of beperk het aantal concurrerende acties.
Test expres de situaties waarin het mis kan gaan
Bekijk in Sendvio de template met echte klantgegevens en controleer die op een smalle breedte. Test een lange naam, een ontbrekend personalisatieveld, een langere prijsnotatie en een product met een uitzonderlijk lange titel. Stuur daarna testberichten naar de e-mailapps die je klanten vaak gebruiken.
Controleer bij een promotie met twee producten of de afbeelding, naam, prijs en actie van elk product bij elkaar blijven wanneer de onderdelen onder elkaar komen. Raken ze van elkaar gescheiden, vereenvoudig het blok dan. Het doel is niet om de desktopindeling koste wat kost na te bootsen, maar om de betekenis te behouden en de volgende actie duidelijk te maken zonder inzoomen, gokken of horizontaal scrollen.
Controleer het contrast van de daadwerkelijke combinatie van tekst en achtergrond. Voor gewone tekst is een contrastverhouding van ten minste 4,5:1 een bruikbaar toegankelijkheidsuitgangspunt; voor voldoende grote tekst geldt een lagere minimumwaarde van 3:1. Deze waarden vervangen geen volledige toegankelijkheidscontrole, maar helpen kleurkeuzes minder subjectief te maken. Controleer kleine grijze labels net zo zorgvuldig als de hoofdkop.
Sla het herstelde onderdeel op in de herbruikbare template en test het opnieuw na grote wijzigingen. Een goede mobiele template voorkomt niet alleen horizontaal scrollen: de leesvolgorde blijft logisch, klanten kunnen de aanbieding begrijpen en de volgende stap blijft duidelijk en bruikbaar in de e-mailomgevingen die je daadwerkelijk ondersteunt.