Skip to main content
Aangepast op: 6 jun 2023

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.

12 | MailChimp do's and dont's
mijn excuus voor de achtergrond ruis

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.

desktop achtergrondafbeelding MailChimp
desktop weergave in MailChimp(je laptop)

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

mobile achtergrondafbeelding MailChimp
  • mobile (online versie op mobiel)
  • 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.

    outlook-2007 achtergrondafbeelding MailChimp
    in outlook 2007 (e-mailprogramma) – oranje vlak ipv afbeelding – gaat hier mis

    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.

    outlook-2015 achtergrondafbeelding MailChimp
  • outlook 2015
  • achtergrondafbeelding wordt getoond

    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).

    alleen mogelijk met een Image Card block

    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

    Nog een voorbeeld van maatwerk. Dit is niet mogelijk met de standaard blokken.

    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>
    Dit kan fout gaan in sommige e-mailclients

    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

    Comments (5)

    Geef een reactie

    Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

    Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

    Voordelen MailChimp

    • AllRound e-mailmarketing pakket
    • Social Cards
    • Socials Post
    • Creative Assistent
    • Tags
    • Gratis koppeling met Gravity Forms
    • Meer intergratie mogelijkheden
    • Surveys
    • Pol
    • Meer opmaakmogelijkheden
    • Automation triggers zijn uitgebreider

    Voordelen La Posta

    • In het Nederlands
    • Gratis tot 2000 lezers
    • Automation aanwezig
    • Groepen aanwezig
    • Campagne bouwer is makkelijk te leren
    • Server staat in Nederland
    • Minder mogelijkheden en daardoor simpeler
    • Verwerkers overeenkomst makkelijk te vinden en te ondertekenen
    • Voor Zapier koppelingen zijn er aantal Zaps voorbereid

    Nadelen MailChimp

    • Server staat niet in Nederland
    • Na 2019 alleen gratis tot 500 abonnees
    • Alleen in het engels

    Nadelen La Posta

    • Geen tags
    • Geen automatische RSS feed trigger
    • Dure koppeling met Gravity Forms (250€)
    • Integratie in website lastiger