Hoe maak ik een responsive nieuwsbrief voor mobiel?

In dit artikel lees je over hoe je een nieuwsbrief responsive kan maken voor mobiel.

1. Responsive nieuwsbrief maken
2. Herorganiseren op mobiel
   1. Niet herorganiseren op mobiel
   2. Omgekeerde volgorde op mobiel
3. Inhoud verbergen
4. Rijen verbergen
5. Mobiele ontwerpmodus
6. Zichtbaarheidsopties
7. Verborgen inhoud
8. Mobiele styling
9. Beperkingen in de mobiele ontwerpmodus

Responsive nieuwsbrief maken

Heel vaak is de inhoud van een e-mail georganiseerd in meerdere kolommen. Wanneer ze op een mobiel apparaat worden bekeken, kunnen die kolommen te smal worden en leiden tot een suboptimale leeservaring. Om een ​​betere ervaring te bij het lezen van e-mails op mobiele apparaten, de builder HTML-code die zorgt ervoor dat kolommen verticaal worden gestapeld. De inhoud is dus gereorganiseerd om te en gemakkelijk met de vinger te kunnen scrollen.

Soms wil je misschien wijzigingen aanbrengen in de standaardinstellingen voor mobiele optimalisatie die de editor gebruikt. Er zijn tal van verschillende functies die je hiervoor kunt gebruiken. Laten we kijken naar de verschillende opties die van invloed kunnen zijn op de mobiele versie van jouw ontwerp.

Herorganiseren op mobiel

Niet herorganiseren op mobiel
Met de instelling 'Niet herorganiseren op mobiel' kun je de standaard volgorde van kolommen overschrijven.

De optie is beschikbaar in het rechterdeelvenster als een rij-eigenschap, standaard uitgeschakeld.

Best practices voor e-mailontwerp suggereren een zorgvuldig gebruik van deze weergave-instelling. Een gebruiksvriendelijke verticale lay-out op mobiel is in de meeste gevallen zinvol. Zoals altijd is het aan jou en je creativiteit wanneer en hoe je deze optie gebruikt.

Hier is een voorbeeld:

Hetzelfde template heeft ook een sectie waar afbeeldingen aan de rechterkant worden uitgelijnd.

Dit is hoe deze twee secties standaard op mobiel worden weergegeven:

Hier zie je hoe de lay-out wordt weergegeven wanneer kolommen in omgekeerde volgorde worden georganiseerd:

Inhoud verbergen

Alle inhoudsblokken in de editor bevatten een instelling 'Verbergen op' in het eigenschappenvenster. Om het te gebruiken, scrol je naar beneden totdat je het gedeelte Blokopties ziet.

Je kunt het resultaat controleren door naar het voorbeeld te gaan en de mobiele weergave te selecteren. Je zult zien dat de inhoudsblokken waarvoor 'Verbergen' aan staat niet zichtbaar zijn.

Rijen verbergen

Als je een groter deel van jouw ontwerp wilt verbergen, kun je overwegen om in plaats daarvan een hele rij te verbergen. De workflow is bijna identiek aan degene die je gebruikt om afzonderlijke inhoudsblokken te verbergen.

Om te beginnen, moet je ervoor zorgen dat je de rij selecteert die je wilt verbergen. Je vindt deze optie onderaan het gedeelte Rij-eigenschappen van de zijbalk. Deze sectie bevindt zich direct boven de sectie Kolomeigenschappen.

Mobiele ontwerpmodus

Wanneer je in de editor werkt, zie je twee icoontjes in de linkerbovenhoek van de editor.

Deze icoontjes functioneren als een schakelaar waarmee je kunt schakelen tussen een desktop- en mobiele weergave. Met de desktopweergave kun je met dezelfde editor werken waarmee je al bekend bent. Als je overschakelt naar de mobiele weergave, wordt het inhoudsgebied verkleind tot 320px.

Als je de mobiele weergave hebt ingeschakeld, kun je doorgaan met het ontwerpen van je bericht met dezelfde functies en opties. Houd er rekening mee dat de mobiele ontwerpmodus een grijze achtergrond gebruikt die geen deel uitmaakt van uw berichtontwerp.

Zichtbaarheidsopties

Als je "Verbergen op mobiel/desktop" gebruikt voor inhoudsblokken in jouw bericht, zie je een extra icoontje rechts van de schakelaar voor de ontwerpmodus. Dit icoontje bepaalt of je inhoudsblokken die verborgen zijn voor jouw geselecteerde ontwerpmodus, al dan niet wilt vullen in het bouwstadium.

In de onderstaande schermafbeelding zien we iemand aan het werk in de mobiele ontwerpmodus met de schakelaar ingeschakeld.

Als zichtbaarheid is ingeschakeld, kan de ontwerper nog steeds inhoud zien die verborgen is voor mobiele apparaten in het bouwstadium. Als de ontwerper wil dat de ontwerpmodus meer als een voorbeeld functioneert, kan deze optie worden uitgeschakeld.

Verborgen inhoud

Is het je opgevallen dat een bepaald inhoudsblok doorschijnend of onscherp lijkt? Je kijkt waarschijnlijk naar een inhoudsblok dat verborgen is voor het type apparaat dat de door jouw gekozen ontwerpmodus weerspiegelt.

Stel dat je bijvoorbeeld twee versies van jouw bedrijfslogo in een ontwerp hebt ingevoegd. Het ene logo is geoptimaliseerd voor mobiel, terwijl het andere is geoptimaliseerd voor desktop. Als gevolg hiervan heb je deze inhoudsblokken voor de deze apparaten verborgen.

Wanneer je met de builder werkt in de ontwerpmodus voor desktops, zal alle inhoud die voor die weergave verborgen is, doorschijnend lijken.

In het bovenstaande voorbeeld wordt de button onderaan de tekst weergegeven. Het ziet er dan ook uit zoals verwacht in deze ontwerpmodus. De button is echter verborgen voor de mobiele weergave - dus de zichtbaarheid van het inhoudsblok is verwijderd, zodat je gemakkelijk kunt identificeren welke dat is, zonder dat je de inhoudsinstellingen hoeft te controleren.

Op dezelfde manier zie je het tegenovergestelde gedrag in hetzelfde voorbeeld in de mobiele ontwerpmodus.

Nu is de zichtbaarheid verminderd op de voor desktop geoptimaliseerde inhoud.

Houd er rekening mee dat wanneer verborgen inhoud is geselecteerd in de ontwerpmodus waarvoor deze is verborgen, je er alleen wijzigingen in kunt aanbrengen in de zijbalk van de bouwer. Als de verborgen inhoud bijvoorbeeld op tekst is gebaseerd, moet je overschakelen naar de ontwerpmodus waar deze altijd zichtbaar is om de inhoud bij te werken. Je kunt de instellingen voor het inhoudsblok echter vanuit elke weergave wijzigen.

Dit gedrag treedt alleen op wanneer de zichtbaarheidsmodus is ingeschakeld. Als je liever alleen de versie van de inhoud ziet die geschikt is voor jouw ontwerpmodus, kun je de zichtbaarheidsmodus uitschakelen.

Mobiele styling

Je kunt bepaalde inhoudseigenschappen selecteren om alleen op mobiel toe te passen. Als je in de mobiele ontwerpmodus op het pictogram 'Mobiel' van een inhoudsproperty klikt, zijn de wijzigingen die je aanbrengt alleen van toepassing op de mobiele uitvoer.

Deze functie is beschikbaar voor de volgende eigenschappen van inhoudsblokken. Houd er rekening mee dat niet alle inhoudsblokken dezelfde eigenschappen hebben.

Opvulling / Padding

Uitlijning

Lettertype Grootte

Beperkingen in de mobiele ontwerpmodus

In de mobiele ontwerpmodus behoudt de editor de meeste functionaliteiten, op enkele uitzonderingen na:

• Je kunt de breedte van het inhoudsgebied niet wijzigen; het kan alleen worden gewijzigd in de bureaubladweergave.
• Je kunt kolommen achter elkaar toevoegen en verwijderen, maar je kunt ze niet vergroten of verkleinen.