Mailchimp responsive designs

Mailchimp heeft 2 soorten templates: drag & drop en een inline editor. Ze zijn allebei responsive. In dit artikel heb ik het over de drag & drop designs. Drag & drop bouw je op uit blokken en daardoor kan het soms fout gaan. Met name als je in het verleden een template hebt laten maken door een designer is het zaak even te controleren of je nieuwsbrief responsive is.

Responsive designs: indeling van je nieuwsbrief

De indeling van de responsive designs van Mailchimp kan verschillen. Het is zaak om voor het maken van je nieuwsbrief ongeveer te weten wat je wilt.

Blokken over de volle breedte: Er zijn blokken over de volle breedte van je nieuwsbrief. Deze blokken worden een beetje smaller als je nieuwsbrief gelezen wordt op een mobiel device.

Blokken over de halve breedte: Er zijn ook blokken over de halve breedte. Als je lezer desktop leest staan er dan 2 blokken naast elkaar. Maar als je lezer mobiel leest, dan schuiven deze blokken onder elkaar.

Blokken over 1/3 van de breedte: En dan zijn er ook nog blokken die een derde van de breedte van je nieuwsbrief in beslag nemen. Desktop ziet je lezer 3 blokken naast elkaar. Maar een lezer die mobiel leest ziet er 3 onder elkaar.

Zijbalken

Bij een responsive design moest je erg goed nadenken als je een template met een zijbalk koos. Want je moest er dan rekening mee houden dat de zijbalk voor de mobiele lezer niet naast de bodytekst getoond zou worden.

De meeste mensen realiseerden zich dat niet waardoor er rare nieuwsbrieven kwamen. Nu is dat niet meer aan de orde want de zijbalken zijn afgeschaft. En dit is niet erg, want nieuwsbrieven worden voor meer dan 50% mobiel gelezen.

En mensen die mobiel lezen zien de zijbalk helemaal niet als zijbalk. Ze zien gewoon een extra stukje tekst of een extra afbeelding onder hun nieuwsbrief. En dat stukje tekst of die extra afbeelding kun je evengoed plaatsen.

Mailchimp responsive designs

In maart 2015 heeft Mailchimp een aantal nieuwe templates voor het responsive design toegevoegd. Hierdoor heb je meer mogelijkheden om je afbeeldingen te rangschikken. En je hebt meer mogelijkheden om te spelen met tekst en afbeeldingen.

Heel veel mensen hebben om deze nieuwe mogelijkheden om je nieuwsbrief vorm te geven gevraagd. Ik vind de nieuwe mogelijkheden ook echte verbeteringen.

Let op: bij Mailchimp Free krijg je 5 templates. Of je met jouw versie van Mailchimp het template van je keuze kunt gebruiken kun je zien door er met je muis overheen te gaan. Als je dan te zien krijgt dat je moet upgraden, dan moet je eerst upgraden voordat je dat template kunt gebruiken.

Ook bij het kiezen uit deze nieuwe templates basic design moet je er – net als bij de templates die er al waren – rekening mee houden dat de afbeeldingen niet naast elkaar getoond worden als je nieuwsbrief mobiel bekeken wordt.

Denk eraan dat het basic template een responsive design is. Afbeeldingen en teksten schuiven onder elkaar als de nieuwsbrief mobiel gelezen wordt. Maar dan is het wel zaak ervoor te zorgen dat je afbeeldingen in een blok voor afbeeldingen zet en niet in een tekstblok. Want anders is je nieuwsbrief niet meer responsive.

Omslagpunt

Dit een aandachtspunt waar je echt rekening mee moet houden. Hoe die verhouding precies is en waar het omslagpunt precies ligt kan ik je niet zeggen, maar als je een template gebruikt met 6 afbeeldingen + een afbeelding als header en je zet daar 3 regels tekst tussen, dan kun je problemen verwachten. Ga uit van een verhouding van minimaal 65% tekst en maximaal 35% afbeeldingen.

Ik wil dit expliciet benoemen, want deze templates met erg mooie mogelijkheden voor extra afbeeldingen nodigen ertoe uit om veel meer afbeeldingen dan tekst te plaatsen. Het is goed als je weet wat hier de risico’s van zijn.

Reageert je nieuwsbrief responsive?

Als je nieuwsbrief zich aanpast aan het device waarop hij gelezen wordt, dan kun je dat binnen Mailchimp zien in de preview.

Soms kan het het echter gebeuren dat je nieuwsbrief zich wel aanpast aan het device waarop de ontvanger ‘m leest, terwijl je toch van links naar rechts moet scrollen. Wees hier extra alert op, want de oorzaken zijn dan bijna altijd:

• Je afbeeldingen zijn te breed. Houd een formaat aan van 600px tot 800px breed.
• Of je hebt afbeeldingen in een tekstblok gezet.

Verouderde templates

Als je ziet dat je van links naar rechts moet scrollen en je hebt ooit een mooi template laten maken, dan is je template gewoon verouderd. Tegenwoordig lezen veel mensen hun nieuwsbrieven mobiel, maar vroeger was dat natuurlijk niet zo.

Als jouw template gemaakt is in de tijd dat het nog niet gangbaar was om mobiel te lezen, dan is je template hier ook niet voor gemaakt. Heb jij nu net ontdekt dat je een verouderd template gebruikt dat zich niet aanpast aan het device waarop gelezen wordt? Dan heb je iets nieuws nodig want rond 50% van de lezers leest nieuwsbrieven mobiel.

Zelf een template maken

Een drag en drop template krijg je niet kant-en-klaar van je designer. Dit template bouw je op terwijl je je nieuwsbrief maakt. Een ander kan het wel gemakkelijker voor je maken om er iets moois van te maken. Bijvoorbeeld door het instellen van lettertypes en kleuren. Het drag & drop template is ontworpen om er zelf mee aan de slag te kunnen. De inline helemaal erg gemakkelijk om mee te werken. Over beide editors heb ik een gratis cursus voor je.

Ik ben een erkende Mailchimp PRO partner en ik bied Mailchimp support.