MailChimp, achtergrondafbeeldingen en meer

In MailChimp kan je achtergrondafbeeldingen toevoegen. Alleen kan niet elke e-mailclient (zoals bijvoorbeeld outlook) deze tonen.

De veilige weg is dan om er ook een kleurvlak onder te zetten als backup of het helemaal achterwege te laten.

Mogelijkheden zijn beperkt

Styling voor nieuwsbrieven is veel beperkter dan voor websites. Je verstuurd iets wat in een e-mailprogramma binnenkomt en wat eventueel ook nog eens offline wordt bekeken. En kunnen tonen van een achtergrond is daar een van. Als het niet om een online programma gaat zoals webmail of gmail, dan zijn er al de factoren van het soort apparaat, besturingsprogramma en e-mailclient die meespelen. Plus de vraag: is het allemaal up-to-date. Daar kan je bijna niet tegen aan programmeren.

Kijk in je statistieken wat lezers gebruiken om de keuze te kunnen maken of je wel of niet een functie gebruikt die niet iedereen zal kunnen gebruiken.

E-mailclients

E-mailclients zijn de programma’s waar jouw e-mail in binnen komt. Hieronder een overzicht, je ziet dit zijn er heel veel. Dan begrijp je ook dat je bij maatwerk templates heel veel tijd kwijt bent met het testen voor al deze clients. Met MailChimp gebruik je contentblokken die in de meeste gevallen goed overkomen. Test altijd!

Wat kan je het beste doen?

• gebruikt geen achtergrondafbeeldingen
• je plakt geen plaatjes in een tekstblok
• kies voor een of twee kolommen die onder elkaar komen te staan op mobiel
• Maak een plaatje met de tekst er op via de Creative Assistent

Achtergrondafbeeldingen met tekst er over

Oudere outlook programma’s en Internet Explorer (gestopt in 2020) tonen deze niet altijd. De meeste inmiddels wel. Raadpleeg je statistieken, als de meeste lezers een moderne e-mailclient hebben, dan zullen ze het plaatje te zien krijgen. De anderen krijgen een kleurvlak te zien.

Achtergrond afbeelding support

Outlook is het minst geschikt. Wil je toch een achtergrondafbeelding dan raad MailChimp aan om een custom template met eigen code te laten maken.

Check de tips van MailChimp voor beste resultaat>

Preview binnen MailChimp

Bij de preview test binnen MailChimp zien de desktop en mobiele versie er vaak wel goed uit, maar dit is soms wat misleidend. Want dit is in de browser en niet in een e-mailprogramma.

Het is daarom wijs om in de statistieken na te gaan of jouw lezers deze oude e-mailclients nog gebruiken. Zo niet dan zou je ook met achtergrondafbeeldingen kunnen gaan werken. Hier staat een stappenplan om dit te vinden

Hieronder twee afbeeldingen die tonen hoe een mail er in Outlook er uit zien. De grootste spelbrekers zijn de oudere versies van Outlook en de Internet Explorer browser.

Het is dus mogelijk in MailChimp maar niet alle e-mail clients tonen dit en dan ziet jouw lezer helemaal geen header maar een achtergrond kleur als fallback (dat betekend dat hij terugvalt op een kleurvlak). Deze kleur kan je dan vaak wel opgeven.

Aflopende afbeeldingen

Dit zijn afbeeldingen die tot aan de rand van het template lopen zonder witruimte. Dit is alleen mogelijk bij het afbeeldingen blok. Of bij gebruik van eigen html (maatwerk oplossing).

Meerdere foto’s naast en/of boven elkaar die tegen elkaar aan staan en tegen de rand, is helaas niet mogelijk binnen de de drag en drop. Een kleurvlak met een foto

Achtergrondkleuren

Je kan verschillende achtergrondkleuren instellen, afhankelijk van welk template je kiest als basis. De 1 koloms heeft deze opties voor de page, preheader, header, body en footer.

• Page – zwart (achtergrondkleur van het hele vlak. Dit kan op desktop weergave dus erg aanwezig zijn, dus vaak lichte kleur.)
• Preheader – blauw
• Header – grijs
• Body – geel
• Footer – roze

Achtergrondkleur in een 2 koloms

Het blok Image Card heeft de optie voor een achtergrondkleur. Maar niet de optie va 2 koloms. Het blok Image + Text kan je wel op 2 koloms zetten maar heeft weer geen optie voor achtergrondkleuren. Hieronder zie je een voorbeeld van een foto tegen een kleurvlak aan. Dit is alleen mogelijk met het Image Card blok. Deze gaat over de hele breedte.

Kleur/foto vlakken tegen elkaar aan

Meerdere kleur(foto)vlakken tegen elkaar aan plaatsen is ook niet mogelijk. Er zal boven het lichtgrijze (in dit voorbeeld) altijd een witruimte komen. De oplossing is het bovenste vlak in Photoshop o.i.d. op te maken en als afbeelding te plaatsen.

Buttons

Er is een optie om een button blok te plaatsen. Maar je zou graag een button binnen een blok willen plaatsen. Dit is helaas niet mogelijk. De oplossing is een plaatje te plaatsen. Je kan eerst een button maken. Maak hier een schermopname van. Snijd hem netjes bij en plak hem als plaatje. Test deze oplossing wel, ik geef geen garantie op de werking. Hieronder een aantal variaties. Als je button in dezelfde kleur zet als het vlak, matcht het visueel met elkaar en snap je dat die button daarbij hoort. Of gewoon een tekstlink.

Inline css

Heel soms voeg ik toch een beetje html code toe binnen een blok, maar dit is niet aan te raden omdat veel e-mailclients de code er weer uit strippen.

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">

 your content here....

 </span>

Tabellen

Tabellen in nieuwsbrieven is ook een lastige. Het is mogelijk om te werken met tabellen, maar ook een risico dat de html code die hier voor nodig is er uit wordt gestript. Lees ook Mailchimp Pattern Library

<table class="mc-table"> 
  <thead> 
    <tr class="odd"> 
      <th>Table header
      </th> 
      <th>Table header
      </th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr class="odd"> 
      <td>Data
      </td> 
      <td>Data
      </td> 
    </tr> 
  </tbody> 
</table>

De makkelijkste oplossing is een screenshot te maken en deze er in te plakken. Bij veel overzichten uit excell kan je overwegen deze als een pdf bijlage mee te sturen.

Maatvoering

De nieuwsbrieven zijn standaard niet breder dan 600 pixels. Een 2 koloms word op mobiel getoond als 1 koloms.
De maten hieronder zijn:

• afbeeldingen zijn 265pixels breed en op mobiel onder elkaar dus iets breder invoeren
• witruimte is 65 pixels
• Links en rechts 20 pixels
• Boven en onder kan je werken met dividers en zo meer witruimte creëren.

Headerphoto by Solen Feyissa on Unsplash