E-mail marketing: Mobiele opmaak aanpassen in de e-mailbouwer

Met de instellingen voor mobiele weergave in de e-mailbouwer (Email Builder) van Voluit Suite bepaal je hoe je e-mails op mobiele apparaten worden weergegeven, zonder het desktopontwerp aan te passen. Je kunt onder andere de witruimte, knoptekst, media en socialmedia-iconen aanpassen. Mobiele stijlen nemen standaard de desktopinstellingen over. Alleen instellingen die je wijzigt, krijgen een aparte mobiele waarde. In deze handleiding lees je hoe je de mobiele weergave aanpast, bekijkt en test.

Wat zijn de instellingen voor mobiele weergave in de e-mailbouwer?

Met de instellingen voor mobiele weergave kunnen ondersteunde secties en elementen er op mobiel anders uitzien dan op desktop. Bij ondersteunde stijlopties kun je wisselen tussen Desktop en Mobiel (Mobile). Zo pas je bijvoorbeeld de witruimte, knoppen, afbeeldingen, logo's, video's en socialmedia-iconen aan.

Mobiele stijlen nemen standaard de desktopinstellingen over. Alleen instellingen waarvoor je een mobiele aanpassing inschakelt, krijgen een aparte waarde voor mobiel.

Voordelen van de instellingen voor mobiele weergave

Met deze instellingen verbeter je de weergave van je e-mails op kleinere schermen, zonder het desktopontwerp te veranderen.

Aparte mobiele stijlen: Pas ondersteunde instellingen voor mobiel aan zonder de desktopstijlen te wijzigen.
Flexibele witruimte: Pas de padding en marges aan van ondersteunde secties en elementen.
Betere knoppen op mobiel: Pas de uitlijning, breedte, witruimte en typografie van knoppen aan.
Media die goed schaalt: Pas de uitlijning en afmetingen van ondersteunde afbeeldingen, logo's en video's aan.
Instellingen voor socialmedia-iconen: Pas de uitlijning, grootte en tussenruimte van ondersteunde socialmedia-elementen aan.
Bestaande ontwerpen blijven behouden: E-mails blijven er hetzelfde uitzien totdat je de mobiele stijlen aanpast.

Vereisten en beperkingen

Je hebt een e-mailsjabloon of campagne in de ontwerpbewerker (Design Editor) van Voluit Suite nodig. De mobiele instellingen zijn beschikbaar bij ondersteunde secties en elementen. Welke opties je ziet, hangt af van wat je selecteert.

Mobiele stijlen nemen de desktopwaarden over totdat je ze aanpast.
Niet elke mobiele instelling is beschikbaar voor elk element.
Bestaande sjablonen en campagnes veranderen niet zolang je de mobiele stijlen niet aanpast.
Sommige e-mailprogramma's tonen mogelijk de standaardstijl in plaats van bepaalde mobiele aanpassingen.
Mobiele opmaak verandert hoe content eruitziet. Met zichtbaarheid per apparaat bepaal je of content wordt weergegeven.

Let op: De beschikbare instellingen verschillen per sectie en element. Bekijk daarom de opties die beschikbaar zijn voor de content die je aanpast.

Zo werken desktop- en mobiele stijlen samen

De desktopstijl bepaalt de standaardweergave van je e-mail. Met de instellingen voor mobiele weergave kun je afzonderlijke eigenschappen aanpassen voor kleinere schermen.

Geen mobiele aanpassing: De instelling gebruikt de desktopwaarde of standaardwaarde.
Mobiele aanpassing ingeschakeld: Ondersteunde e-mailprogramma's gebruiken de aparte mobiele waarde.
Desktopstijl: Een aanpassing voor mobiel verandert het desktopontwerp niet.

Je kunt bijvoorbeeld een knop op desktop de gebruikelijke breedte geven en dezelfde knop op mobiel schermbreed maken.

Zo behoud je één e-mailontwerp en pas je alleen de onderdelen aan die op kleinere schermen anders moeten worden weergegeven.

Instellingen voor mobiele opmaak

De instellingen verschillen per sectie en element. Selecteer de content die je wilt aanpassen en bekijk welke opties beschikbaar zijn.

Indeling en witruimte

Pas de padding en marges voor mobiel aan bij ondersteunde secties en contentelementen. Zo creëer je passende witruimte op kleinere schermen zonder de desktopindeling te wijzigen.

Minder onnodige witruimte aan de zijkanten kan ervoor zorgen dat content beter op een smal scherm past.

Knoppen

Afhankelijk van de knop kunnen de mobiele instellingen onder andere bestaan uit:

Uitlijning
Schermbrede weergave
Witruimte en padding
Tekengrootte
Tekstdikte
Tekststijl
Tekstdecoratie

Met deze instellingen houd je oproepen tot actie leesbaar en prettig aantikbaar op kleinere schermen.

Afbeeldingen, logo's en video's

Bij ondersteunde afbeeldingen, logo's en video's kun je de uitlijning, afmetingen en padding voor mobiel aanpassen, los van de desktopinstellingen.

Als de beeldverhouding is vergrendeld, blijven de verhoudingen van afbeeldingen en video's behouden wanneer je ze aanpast.

Socialmedia-iconen

Bij ondersteunde socialmedia-elementen kun je voor mobiel het volgende aanpassen:

Uitlijning
Grootte van de iconen
Tussenruimte tussen de iconen

Schakelaars voor mobiele aanpassingen

Voor sommige instellingen moet je eerst een schakelaar inschakelen om een aparte mobiele waarde te gebruiken. Als de mobiele aanpassing uitstaat, neemt de instelling de desktop- of standaardwaarde over.

Schakel de gewenste mobiele aanpassing in als die optie beschikbaar is. Vul de mobiele waarde in en bekijk het resultaat voordat je de e-mail opslaat.

Als de tekengrootte van een desktopkop bijvoorbeeld geen aparte waarde heeft, gebruikt de mobiele versie ook die standaardwaarde. Schakel de mobiele aanpassing voor de tekengrootte in om voor ondersteunde e-mailprogramma's een andere waarde op te geven.

Mobiele opmaak en zichtbaarheid per apparaat

Met mobiele opmaak verander je hoe content eruitziet. Met zichtbaarheid per apparaat bepaal je of content wordt weergegeven. Deze functies lossen dus verschillende problemen op.

Gebruik mobiele opmaak als je:

De tekengrootte wilt aanpassen.
De uitlijning wilt wijzigen.
De witruimte wilt veranderen.
Een ondersteund element op mobiel anders wilt opmaken.

Gebruik zichtbaarheid per apparaat als je:

Een element op mobiel wilt verbergen.
Een element alleen op mobiel wilt tonen.
Content alleen voor desktop wilt gebruiken.
Aparte contentblokken voor desktop en mobiel wilt maken.

Wil je bijvoorbeeld niet dat een grote afbeelding op mobiel wordt weergegeven? Gebruik dan de zichtbaarheidsinstellingen. Alleen de mobiele opmaak aanpassen is daarvoor niet voldoende.

Zichtbaarheid van indelingen op mobiel en desktop

In Voluit Suite kun je ook de zichtbaarheid van een volledige e-mailindeling per apparaat instellen. Dat is handig als een hele sectie er op mobiel anders uit moet zien of daar niet mag worden weergegeven.

Zichtbaarheid op indelingsniveau kan handig zijn wanneer:

Een desktopsectie een complexe indeling met meerdere kolommen heeft.
Een eenvoudigere mobiele sectie beter leesbaar is.
Je aparte versies voor desktop en mobiel nodig hebt.
Een volledig promotieblok op een bepaald type apparaat verborgen moet blijven.

Je hebt daarmee drie manieren om de mobiele weergave aan te passen:

Mobiele opmaak voor stijlwijzigingen.
Zichtbaarheid van elementen voor afzonderlijke contentelementen.
Zichtbaarheid van indelingen voor volledige indelingsblokken.

Beperkingen van e-mailprogramma's en mediaquery's

Mobiele e-mailstijlen zijn afhankelijk van de ondersteuning voor responsieve e-mails. Sommige mobiele instellingen gebruiken mediaquery's, die niet door elk e-mailprogramma op dezelfde manier worden verwerkt.

Dat betekent het volgende:

E-mailprogramma's die de instellingen ondersteunen, kunnen je mobiele aanpassingen weergeven.
E-mailprogramma's die ze niet ondersteunen, kunnen de standaard- of basisstijl gebruiken.
De preview komt mogelijk niet precies overeen met de e-mail die iemand ontvangt.

Zorg dat je standaardontwerp leesbaar en bruikbaar blijft, ook als een mobiele aanpassing niet wordt toegepast.

Belangrijk: Gebruik mobiele aanpassingen niet om een belangrijk probleem in de indeling op te lossen als de e-mail daardoor onbruikbaar wordt wanneer het e-mailprogramma die aanpassing negeert.

Tips voor een responsief ontwerp

Een e-mail werkt het best op mobiel als je bij het hele ontwerp rekening houdt met smalle schermen, niet alleen met de typografie.

Zorg dat de hoofdtekst leesbaar is zonder in te zoomen.
Vermijd erg lange tekstregels.
Gebruik duidelijke witruimte tussen secties.
Maak knoppen groot genoeg om prettig aan te tikken.
Zet niet te veel oproepen tot actie dicht bij elkaar.
Zorg dat afbeeldingen goed schalen.
Controleer secties met meerdere kolommen goed.
Gebruik zo nodig een eenvoudigere mobiele indeling.
Zet belangrijke informatie bovenaan de e-mail.

E-mailelementen in Voluit Suite zijn standaard responsief. Gebruik mobiele aanpassingen wanneer ze het ontwerp daadwerkelijk verbeteren.

Instellingen voor mobiele weergave gebruiken in de e-mailbouwer

Maak eerst het desktopontwerp af. Pas daarna waar nodig de opmaak voor mobiel aan. Je kunt de instellingen voor mobiele weergave gebruiken voor ondersteunde secties en elementen in bestaande of nieuwe e-mailsjablonen en campagnes.

Stap 1: Open de e-mailbouwer

Selecteer in je account in Voluit Suite Marketing.
Selecteer E-mails (Emails).
Open Sjablonen (Templates) of Campagnes (Campaigns).
Open een bestaande e-mail of maak een nieuwe.
Ga verder naar de ontwerpbewerker (Design Editor).

Stap 2: Kies de stijl voor desktop of mobiel

Bij ondersteunde secties en elementen kun je wisselen tussen de stijlinstellingen voor desktop en mobiel.

Selecteer de sectie of het element dat je wilt aanpassen.
Open de beschikbare stijlinstellingen.
Zoek waar beschikbaar naar de opties Desktop en Mobiel (Mobile).
Selecteer Mobiel.
Schakel indien nodig de bijbehorende mobiele aanpassing in.
Vul de gewenste waarden voor mobiel in.
Ga terug naar Desktop om te controleren of het oorspronkelijke desktopontwerp ongewijzigd is.

Optioneel: pas de tekstopmaak voor mobiel aan

In het gedeelte Uiterlijk (Appearance) vind je ook de beschikbare instellingen voor mobiele tekstopmaak. Daarmee houd je koppen en hoofdtekst leesbaar op kleinere schermen.

Selecteer in de e-mailbouwer Uiterlijk.
Zoek naar Mobiele opmaak (Mobile Formatting).
Bekijk de beschikbare instellingen voor tekstopmaak.
Schakel indien nodig de gewenste mobiele aanpassing in.
Pas de beschikbare tekengrootte, regelhoogte of uitlijning aan.
Open de mobiele preview en bekijk het resultaat.
Controleer de desktopversie voordat je opslaat.

Stap 3: Pas de padding en marges voor mobiel aan

Aparte instellingen voor witruimte kunnen de leesbaarheid verbeteren als de desktopwitruimte te groot is voor een kleiner scherm.

Selecteer de sectie of het ondersteunde element dat je wilt aanpassen.
Open de instellingen voor Stijl (Style).
Klap Marge en padding (Margin & padding) uit.
Open de apparaatkeuze en selecteer Mobiel.
Pas de beschikbare waarden voor Padding aan.
Pas de beschikbare marges aan.
Controleer de witruimte in de mobiele weergave.
Ga terug naar Desktop om te controleren of de oorspronkelijke desktopwitruimte ongewijzigd is.

Stap 4: Pas knoppen aan voor mobiel

Met mobiele knopinstellingen maak je oproepen tot actie leesbaar en goed aantikbaar op kleinere schermen, zonder het desktopontwerp van de knop te veranderen.

Selecteer het element Knop (Button) in de e-mail.
Open het tabblad Stijl.
Klap Uitlijning (Alignment) uit.
Open de apparaatkeuze en selecteer Mobiel.
Kies een beschikbare uitlijning voor mobiel.

Je kunt de knoptypografie ook apart voor mobiel aanpassen.

Klap Typografie (Typography) uit.
Open de apparaatkeuze en selecteer Mobiel.
Pas de beschikbare instellingen voor tekstopmaak aan, zoals:

Lettertype (Font)
Grootte (Size)
Vet (Bold)
Cursief (Italic)
Onderstrepen (Underline)

Pas waar beschikbaar ook andere mobiele knopinstellingen aan, zoals witruimte, padding of schermbrede weergave.
Bekijk de knop in zowel de mobiele als de desktopweergave.

Stap 5: Pas afbeeldingen, logo's en video's aan

Met de mobiele instellingen voor media pas je de positie en afmetingen van ondersteunde visuele elementen aan, zonder de desktopinstellingen te wijzigen.

Selecteer een element Afbeelding (Image), Logo of Video.
Open de bijbehorende stijlinstellingen.
Selecteer waar beschikbaar Mobiel.
Pas de beschikbare uitlijning aan.
Pas de beschikbare afmetingen aan.
Wijzig indien beschikbaar de padding.
Bekijk de media in zowel de mobiele als de desktopweergave.

Als de beeldverhouding is vergrendeld, blijven de verhoudingen van afbeeldingen en video's behouden wanneer je ze aanpast.

Stap 6: Pas socialmedia-iconen aan

Met de instellingen voor socialmedia-iconen houd je de links naar profielen overzichtelijk en goed leesbaar op mobiele apparaten.

Selecteer het Social-element (Social).
Open de stijlinstellingen.
Selecteer waar beschikbaar Mobiel.
Pas de uitlijning van de iconen aan.
Wijzig de beschikbare grootte van de iconen.
Pas de tussenruimte tussen de iconen aan.
Bekijk het socialmedia-element in zowel de mobiele als de desktopweergave.

Stap 7: Sla je wijzigingen op

Controleer na het aanpassen van mobiele stijlen of de mobiele en desktopindeling er allebei goed uitzien.

Controleer het mobiele ontwerp.
Ga terug naar Desktop en controleer of de stijl ongewijzigd is.
Sla de e-mail op met de beschikbare opslagoptie in de editor.
Bekijk en test de e-mail voordat je deze verstuurt.

Mobiele e-mails bekijken en testen

Met een preview controleer je de weergave in de e-mailbouwer. Met een testmail controleer je hoe de e-mail in een echte inbox wordt weergegeven. Beide zijn belangrijk, want e-mailprogramma's kunnen responsieve stijlen verschillend verwerken.

Bekijk de mobiele versie in de preview

Selecteer in je account in Voluit Suite Marketing.
Selecteer E-mails.
Open Sjablonen of Campagnes.
Open de e-mail in de ontwerpbewerker.
Klik rechtsboven op Voorbeeld (Preview).
Selecteer Mobiel bij de opties voor apparaatweergave.
Controleer de witruimte, tekst, knoppen, afbeeldingen, video's en socialmedia-iconen.
Ga terug naar Desktop om het oorspronkelijke ontwerp te controleren.

Controleer dit in de mobiele preview

Padding en marges van secties
Uitlijning en breedte van knoppen en leesbaarheid van de knoptekst
Afmetingen en verhoudingen van afbeeldingen en video's
Grootte en uitlijning van logo's
Uitlijning, grootte en tussenruimte van socialmedia-iconen
Tekengrootte van koppen en hoofdtekst
Regelafbreking en witruimte tussen elementen
Het schalen van afbeeldingen
Welke content zichtbaar of verborgen is
Of de desktopstijl ongewijzigd is na het toepassen van mobiele aanpassingen

Stuur een testmail

Zoek in de ontwerpbewerker naar Voorbeeld (Preview).
Klik op het menu met de drie puntjes naast Voorbeeld.
Selecteer Testmail (Test Email).
Vul de velden E-mailadres afzender (Sender Email), Naam afzender (Sender Name), E-mailadres ontvanger (Receiver Email), Voorbeeldtekst (Preview Text) en Onderwerp (Email Subject) in.
Klik op Testmail versturen (Send Test Email).
Open de ontvangen e-mail in een echte inbox.
Controleer de weergave op de apparaten en in de e-mailprogramma's die voor jouw doelgroep het belangrijkst zijn.

Aanbevolen: Gebruik zowel de preview in de e-mailbouwer als een testmail. Responsieve stijlen kunnen per e-mailprogramma anders worden weergegeven.

Veelgestelde vragen

V: Waarom verandert de tekengrootte op mobiel niet?

Antwoord: Controleer of de mobiele aanpassing voor de tekengrootte is ingeschakeld. De weergave kan ook afhangen van de ondersteuning voor responsieve CSS en mediaquery's in het e-mailprogramma van de ontvanger.

V: Hebben mobiele instellingen invloed op de desktopversie?

Antwoord: Nee. Mobiele aanpassingen veranderen de mobiele weergave en laten de desktop- of standaardstijl ongewijzigd.

V: Kan ik een knop alleen op mobiel schermbreed maken?

Antwoord: Ja. Met de ondersteunde mobiele knopinstellingen kun je de knop schermbreed maken zonder het desktopontwerp te veranderen.

V: Kan ik socialmedia-iconen op mobiel anders opmaken?

Antwoord: Ja. Bij ondersteunde socialmedia-elementen kun je voor mobiel de uitlijning, grootte en tussenruimte van de iconen aanpassen.

V: Veranderen bestaande sjablonen of campagnes automatisch?

Antwoord: Nee. Bestaande e-mails behouden hun huidige weergave totdat je de mobiele stijlen aanpast.

V: Verandert de beeldverhouding als ik een afbeelding of video aanpas?

Antwoord: Als de beeldverhouding is vergrendeld, blijven de verhoudingen behouden wanneer je de afbeelding of video aanpast.

V: Waarom ziet mijn ontvangen e-mail er anders uit dan de mobiele preview?

Antwoord: E-mailprogramma's gebruiken verschillende weergavetechnieken en verwerken responsieve CSS niet allemaal op dezelfde manier. Stuur daarom altijd een testmail om de weergave in de inbox te controleren.