Afbeelding met tekst rondom

Mailchimp heeft een blok voor een afbeelding + tekst. En je kunt instellen dat die afbeelding links moet en de tekst rechts, of andersom. En je tekst daar te lang voor is kun je een nieuw tekstblok nemen en onder de afbeelding doorgaan. Maar hoe pakt dit uit op de verschillende devices? Want wilt ook geen gaten in je nieuwsbrief omdat het net niet netjes uitkomt.

Pak het blok beet met je muis en sleep het naar je nieuwsbrief.

Tabblad Content

Als het op z’n plaats gevallen is ben je direct in het tabblad Content waar je het bijschrift en een afbeelding kunt plaatsen.

Tabblad Style

Kijk ook nog even naar het tabblad Style want daar kun je het blok leuk opmaken. En als je dan toch bezig bent, kijk dan ook onder het tabblad Settings want daar bepaal je de positie van de afbeelding:

• onder de tekst
• boven de tekst
• links van de tekst
• of rechts van de tekst

Dat is allemaal vreselijk leuk en ingenieus bedacht, maar er is echt een probleem.

Het probleem is dat we niet weten hoe breed het device is waarop de nieuwsbrief gelezen wordt. Kijk bijvoorbeeld even naar deze nieuwsbrief van Mango Travel. Het was de bedoeling dat er een afbeelding kwam met een stukje tekst er naast. En het was niet de bedoeling dat er een groot stuk wit onder de afbeelding zou komen.

Zo zag dit er in Mailchimp niet uit en zo zag het er in mijn mailbox ook niet uit. Maar zo zag het er wel uit in de mailbox van Mango Travel. En omdat er nogal veel soorten mailboxen zijn, kun je niet precies weten hoe dit uitpakt. Of je moet een mailbox preview kopen.

Mooier zou het geweest zijn als de tekst rond de afbeelding had gelopen. Dat kan, maar dan moet je de afbeelding in een tekstblok zetten. Geef dan een marge aan en hoop dat het goed gaat.

Dit gaat meestal niet goed

Ga er niet vanuit dat dit vanzelf goed gaat, want als je afbeelding ietsje te groot is dan is je nieuwsbrief niet meer responsive. En dat betekent dat mensen die mobiel lezen van links naar rechts moeten scrollen in plaats te scrollen van boven naar beneden. Als je voor iedere zin van links naar rechts moet scrollen ben je snel klaar met lezen.

Zorg dat je afbeelding heel klein is. Niet meer dan 200px.

Overigens: Mailchimp zegt dat je tot maximaal 300 px kunt gaan, maar dat vind ik echt een enorm risico waar ik me niet aan wil wagen.

En test je nieuwsbrief door en door, met name op mobiele devices en in Outlook. Een afbeelding in een tekstblok plaatsen omdat je wilt dat de tekst mooi rond de afbeelding loopt is een foutgevoelige oplossing.

Als je in Mailchimp een tekstblok gebruikt en daar een afbeelding in zet, test dan vooral ook in Outlook, want Outlook geeft sowieso vaak problemen met de lay-out. De tekst staat dan soms helemaal tegen de afbeelding aan. Als het niet lukt om dit te verbeteren, maak dan even een afbeelding met een randje wit er omheen.

De problemen met Outlook gelden niet alleen als je Mailchimp gebruikt, het geldt voor iedere HTML-nieuwsbrief. Outlook zet de HTML om in Word en dat kan vreemde effecten hebben.

Realiseer je ook dat de tekst eigenlijk een bijschrift is en het zit allemaal samen in hetzelfde blok. Gooi dus niet de afbeelding weg in de verwachting dat de tekst blijft staan want dat is niet zo.

Zoals je ziet gaat het niet altijd allemaal vanzelf. Dit artikel maakt deel uit van een cursus over de Mailchimp blokken. Je kunt deze cursus gratis gebruiken, dus doe er je voordeel mee.

Ik ben een erkende Mailchimp expert Mailchimp PRO partner en ik help je in het Nederlands.