Ben jij een starter en wil je zelf aan de slag? Lees dan hier verder>>

MailChimp, achtergrondafbeeldingen en meer

Aangepast op: 20 sep 2022

Helaas zijn niet alle ontwerpen uit te voeren in de drag & drop versie van MailChimp. Je zult hiervoor moeten kiezen voor een duur maatwerk template. Of creatief omgaan met de mogelijkheden die er wel zijn.

Styling voor nieuwsbrieven is veel beperkter dan voor websites. Wil je een ontwerp gaan maken voor je klant of wil je het laten uitbesteden? Dan is het goed om dit blog er bij te pakken. Ik laat je zien wat wel en niet kan.

In deze blog en video aandacht voor deze ontwerpen. Wat kan wel en wat kan ‘niet’.

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.
Wil je niet veel tijd en geld kwijt zijn voor je nieuwsbrief dan werk je met:

  • de drag&drop functie
  • je gebruikt geen achtergrondafbeeldingen
  • je plakt geen plaatjes in een tekstblok
  • kies je voor een 1 koloms
  • Maak een plaatje met de tekst er op en upload het als afbeelding (let op of het scherp blijft)

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)

Litmus inbox checker

Hieronder een voorbeeld waarbij ik gebruik heb gemaakt van de Litmus inbox checker (hier koop je in MailChimp tokens voor). Ik heb in 2018 voor deze 13 e-mailclients een test gedaan. Je ziet dat het uit maakt wel e-mailprogramma je gebruikt, maar ook wel besturingsysteem en/of welke browser. Dat maakt het dus ook zo lastig, zo niet onmogelijk om een nieuwsbrief die er overal hetzelfde uit ziet. Ik denk dat je dat idee moet los laten en moet afwegen wat in het voordeel werkt van jouw boodschap.

  1. Desktop
    Outlook 2007 (toont geen afbeelding)
    Outlook 2010 (toont geen afbeelding)
    Outlook 2015
  2. Mobile
    iPad
    iPhone 6
    Android Gmail
  3. Web-based (online mailprogramma)
    AOL (Chrome)
    Gmail (Chrome)
    outlook.com (Chrome) (toont geen afbeelding)
    Yahoo! (Chrome
    Office365 (Firefox)
  4. Gmail (IE)(toont geen afbeelding)
    Office365 (IE)(toont geen afbeelding

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

    Reacties (5)

    Geef een antwoord

    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.

    Vul een zoekterm in:

    Meer uit MailChimp halen?

    volg een training of 1-op-1 sessie

    De data voor de gezamenlijke sessies moeten nog gepland worden. Maar je kan altijd opnemen als je interesse hebt.

    Laat me vooral weten of je een 1-op-1 zou willen, online, of in een groep.

    Post- en vestigingsadres

    Timmermeesterslaan 44 8014 EM Zwolle

    Bezoekadres / Kantoor
    Ik heb momenteel een flexplek bij verschillende verzamelgebouwen.

    Btw-ID NL001413297B10
    KVK 53368959

    Let op: alle genoemde prijzen op deze website zijn excl. 21% btw

    Contactgegevens

    Fotografie

    De meeste foto's zijn gemaakt door Marieke Vogelzang van Time to shine. Beelden zijn eigendom van Marieke en mogen niet gebruikt worden zonder toestemming.

    Overige foto's komen van Unsplash of zijn in eigen beheer gemaakt met toestemming van mijn klanten.