Prima. Ik heb nu meer dan genoeg gegevens om een uitgebreid, goed geciteerd blogbericht te schrijven. Laten we het artikel samenstellen.
Jouw Mailchimp e-mailmarketingontwerp gids begint hier. Goed ontwerp is niet alleen decoratie. Het is het verschil tussen een campagne die converteert en een die wordt verwijderd voor je tot halverwege bent gescrolld.
E-mailmarketingcampagnes hebben een gemiddelde ROI van 36 keer, wat betekent dat bedrijven 36 euro verdienen voor elke euro die zij besteden. Maar dat rendement hangt volledig af van of jouw e-mails worden geopend, gelezen en ergens op gereageerd. De ontwerpkeuzes die je maakt in Mailchimp bepalen allemaal drie aspecten.
Deze gids behandelt elke laag van de Mailchimp e-mailmarketingontwerp gids: van lay-outdimensies en typografie tot CTA-knoppen, beeldverhoudingen, mobiele optimalisatie en Mailchimp's AI-ontwerptools. Of je nu bouwt vanuit een template of je schrijft aangepaste HTML, dit zijn de beslissingen die meetallen verbeteren.
Belangrijkste Inzichten
- Tussen de 50 en 60% van e-mailopeningen komt van mobiele apparaten in 2024, wat mobiel-eerst ontwerp een basisvereiste maakt, geen optionele upgrade.
- Mailchimp-templates zijn ontworpen om niet breder dan 600px te zijn, zodat ze passen in de weergavemogelijkheden van de meeste e-mailclients.
- Goed e-mailontwerp gaat over visuele hiërarchie: lezers moeten in enkele seconden weten wat ze moeten doen, met één primaire kop, duidelijke spatiëring, leesbare lettertypen, duidelijke CTA-plaatsing en een mobiel-vriendelijke lay-out.
- De 60/40-regel (60% tekst, 40% afbeeldingen) is de meest geaccepteerde richtlijn voor beeldverhouding, omdat SpamAssassin, een van de meest gebruikte spamdetectiesystemen, dit als een algemene drempel herkent.
- Met Mailchimp's Brand Kit kun je je logo's, lettertypen, kleuren en merkidentiteit opslaan en bijwerken zodat AI-tools snel merkgebonden afbeeldingen en lay-outs voor je e-mails en automatiseringsflows kunnen genereren.
1. Begin Elk Ontwerp met een Duidelijk Doel
Voordat je een template opent en begint met ontwerpen, neem je even stap terug en bepaal je wat je wilt bereiken. Zet je verkeer naar een blogpost? Moedig je ontvangers aan om je nieuwste collectie te kopen? Promoot je een evenement? Je doel zou elke ontwerpkeuze moeten beïnvloeden, van de e-mailheader tot en met de uiteindelijke call to action. Wanneer je ontwerp aansluit bij een enkel, gericht doel, zal je e-mailmarketingbericht duidelijker en overtuigender zijn.
Hier gaat de meeste Mailchimp-campagnes mis. Proberen alles in één e-mail te zeggen is meestal de snelste manier om klikken te verminderen.
Voordat je iets bouwt, beantwoord je drie vragen:
- Wat is de enige actie die ik wil dat de lezer onderneemt?
- Wie ontvangt deze e-mail precies?
- Hoe ziet succes er voor deze verzending uit?
Al je overige ontwerpelementen, inclusief lay-out, afbeeldingen en kopilengte, moeten deze antwoorden dienen. Niets anders.
2. Lay-outbeginselen: Breedte, Structuur en Kolomkeuze
Je HTML-e-mail zou ergens tussen 600 en 800 pixels breed moeten zijn, omdat veel e-mailclients een voorbeeldvenster bieden dat niet erg breed is. In de praktijk zijn Mailchimp-templates ontworpen om niet breder dan 600px te zijn, zodat ze passen in de weergavemogelijkheden van de meeste e-mailclients, en dit is de veiligste standaard voor maximale rendercompatibiliteit.
De lay-out die je kiest, vormt de basis voor je hele e-mail. Een lay-out met één kolom werkt goed voor het bekijken op mobiele apparaten en houdt het ontwerp eenvoudig, terwijl een ontwerp met meerdere kolommen meerdere producten of functies tegelijk kan showcasen.
Zo kies je tussen hen:
- Eén kolom: Beste voor nieuwsbrieven, aankondigingen, onboarding-e-mails en elke content waar leesvolgordetaal belangrijk is. Wordt netjes weergegeven op alle schermformaten.
- Meerdere kolommen: Werkt goed voor productgrids, functievergelijkingen of verzamelde content-samenstelling. Vereist testen op mobiel, omdat ontwerpen met meerdere kolommen meestal over kleine mobiele schermen breken.
Informatiehiërarchie is erg belangrijk. Gebeurtenisdetails en kritieke inhoud moeten altijd bovenaan en prominent in grootte staan. Als aanwezig, moet de call-to-action duidelijk zijn gedefinieerd en gemakkelijk in één oogopslag te onderscheiden.
Eenvoud doet ertoe. Ontwerp een e-mail niet zoals je een website zou ontwerpen. Over het algemeen: hoe korter je e-mail is, hoe beter deze zal presteren.
3. Typografie: Lettertypen, Grootte en Leesbaarheid
Typografie is een van de meest genegeerde hefbomen in e-mailontwerp. Slechte letterkeuzes verminderen de leesbaarheid en ondermijnen de professionele indruk die je merk moet maken.
Typografie is belangrijk. Lettertypegrootte en letterfamilie maken een groot verschil in leesbaarheid. Het is belangrijk om je "haak" bovenaan de e-mail te hebben, omdat mobiele e-mailclients de gehele boodschap mogelijk niet downloaden.
Voor mobiel-leesbare lichaamskopiering wordt een minimale lettertypegrootte van 16px aanbevolen. Apple raadt 17 tot 22px aan; Google raadt 18 tot 22px aan. Mailchimp's eigen naslaggids vond 16px Georgia leesbaar en effectief.
Praktische typografieregels voor Mailchimp-e-mails:
- Gebruik webveilige lettertypen (Arial, Georgia, Helvetica, Verdana) voor de tekst om weergave in alle e-mailclients te garanderen.
- Beperk jezelf tot maximum twee letterfamilies: één voor koppen, één voor lichaamskopiering.
- Stel regelafstand in op 1,4 tot 1,6 keer de lettertypegrootte voor comfortabel lezen.
- Sluit nooit kritieke tekst in afbeeldingen in. Als afbeeldingen zijn geblokkeerd, verdwijnt die tekst helemaal.
Gebruik webveilige lettertypen met duidelijke grootte en gewicht om je CTA-knop gemakkelijk leesbaar en opvallend te maken.
4. Afbeeldingen: Hoe je ze gebruikt zonder de bezorgbaarheid te schaden
Afbeeldingen maken e-mails aantrekkelijker, maar ze moeten opzettelijk worden gebruikt.
Afbeeldingen zijn een uitstekende manier om inhoud aantrekkelijker, aanlokkeliker en professioneler te maken. Gebruik afbeeldingen echter om je bericht te versterken, niet om het af te leiden.
De 60/40-regel in de praktijk
Voor marketing- of promotiee-mails is de aanbevolen verhouding 60% tekst tot 40% afbeeldingen. Dit biedt een balans tussen visuele aantrekkelijkheid en bezorgbaarheid, met overtuigende kopie ondersteund door sterke productvisuals. Voor nieuwsbrieven wordt een verhouding van 70% tekst tot 30% afbeeldingen aanbevolen, waarbij de primaire waarde uit geschreven inhoud komt, terwijl afbeeldingen dienen om de tekst aan te vullen en op te breken.
Testen tegen 23 van de meest populaire spamfilters toonden aan dat als een e-mail 500 tekens of meer bevat, de content-naar-afbeeldingsverhouding geen invloed op bezorgbaarheid heeft. Desalniettemin is het behouden van een gezonde balans nog steeds verstandig, vooral voor B2B-publiek en Outlook-gebruikers.
Belangrijke afbeeldingsregels voor Mailchimp:
- Voeg altijd beschrijvende alt-tekst toe. Het niet verstrekken van beschrijvende alt-tekst maakt je e-mail ontoegankelijk wanneer afbeeldingen zijn geblokkeerd of voor gebruikers die op schermlezers vertrouwen.
- Houd afbeeldingen onder 200KB. Grote afbeeldingen duuren langer om te laden en verbruiken waardevolle gegevens.
- Vermijd e-mails die volledig uit afbeeldingen bestaan. Een e-mail die geheel uit afbeeldingen bestaat, blijft een aanzienlijk rode vlag voor bezorgbaarheid, grotendeels vanwege zorgen over het omzeilen van tekstgebaseerde filters, evenals bezorgdheid over toegankelijkheid en slechte gebruikerservaring.
- De meeste e-mailclients tonen afbeeldingen nu standaard. Litmus heeft automatische afbeeldingsdownloads uitgebreid getest en ontdekt dat alle mobiele e-mailclients afbeeldingen standaard toestaan.
5. CTA-knoppen: Ontwerpelementen die Klikken Aandrijven
Je call-to-action-knop is het belangrijkste functionele element in elke Mailchimp-e-mail. Alles anders in het ontwerp bestaat om de lezer naar die klik te brengen.
Zonder een effectieve call to action weten klanten niet wat ze moeten doen als ze je e-mail hebben geopend. E-mailknoppen kunnen abonnees aanmoedigen actie te ondernemen, zodat ze terugkeren naar je website waar ze kunnen converteren.
Ontwerp CTA's die opvallen en klikken aandrijven. Gebruik contrasterende kleuren en overtuigende actiemwoorden die duidelijk communiceren wat er gebeurt wanneer abonnees klikken. Houd CTA's eenvoudig en actiegericht door je op één primaire actie per e-mail te concentreren om je publiek niet in verwarring te brengen en je bericht niet uit te dunnen.
Voor mobiel is knopgrootte belangrijker dan de meeste marketeers beseffen. Call-to-action-aanraakdoelen, zoals knoppen, moeten minstens 46px vierkant zijn. Apple raadt 44px vierkant aan; Google raadt 48px vierkant aan.
Aanvullende CTA-ontwerpprincipes:
- HTML-knoppen laden sneller en worden in alle clients weergegeven, zelfs wanneer afbeeldingen zijn uitgeschakeld, waardoor je e-mail effectiever wordt omdat gebruikers je CTA zien en weten wat ze moeten doen.
- Je CTA mag slechts enkele woorden lang zijn om klanten precies te vertellen wat ze moeten doen.
- Plaats je primaire CTA boven de vouw waar mogelijk. Je call-to-action-knop moet zichtbaar zijn zonder te hoeven scrollen.
- Op mobiel, overweeg het hebben van belangrijke CTA's zoals knoppen die de volledige breedte van de e-mail overspannen, wat zowel rechtshandige als linkshandige lezers dekt.
Voor meer informatie over het schrijven van onderwerpregels die mensen naar de CTA brengen, lees onze gids over E-mailonderwerpregels Best Practices Die Openingspercentages Met 27% Verhogen.
6. Mobiel-Eerst Ontwerp in Mailchimp
Mobiele clients verklaren 41,6% van e-mailopeningen, gevolgd door webmail-openingen op 40,6% en desktopopeningen op 16,2%. Ontwerpen voor desktop eerst en vervolgens aanpassen voor mobiel is een achterwaartse aanpak die je engagement kost.
Het belang van mobiel-vriendelijk e-mailontwerp is van het grootste belang voor succesvolle e-mailmarketingcampagnes. Met het merendeel van de e-mails dat nu op mobiele apparaten wordt geopend, ervoor zorgen dat je e-mails goed er op mobiel uitzien is niet alleen een aanbeveling, het is een noodzaak.
Bedrijven zien een stijging van 15% in mobiele klikken wanneer zij een mobiel-responsief e-mailontwerp creëren.
Mobiele ontwerpchecklist voor Mailchimp-campagnes:
- Gebruik lay-outs met één kolom als je standaardstructuur.
- Stel minimale lettertypegroottes in op 16px voor lichaamskopiering.
- Gebruik e-mailbreed CTA-knoppen op mobiel, zodat ze aantikbaar zijn met beide handen.
- Houd onderwerpregels onder de 40 tekens. Desktops tonen 60 tekens van het onderwerpregels van een e-mail. Abonnees die smartphones gebruiken, zien tussen de 25 en 30 tekens, dus plaats de meest essentiële informatie eerst.
- Het opnemen van een boeiende preheader in een e-mail geeft lezers een extra reden om te klikken en leidt hen voorzichtig in de introductie van de inhoud. Het toevoegen van een preheader verhoogt openingspercentages met 13,72%.
Met Mailchimp kun je eenvoudig een voorbeeld van je e-mails bekijken om er zeker van te zijn dat ze er goed uitzien op verschillende web- en mobiele e-mailclients met behulp van het ingebouwde Inbox Preview-hulpmiddel voordat je verzendt.
7. Mailchimp's Brand Kit en AI-Ontwerptools Gebruiken
Mailchimp heeft AI op een manier in zijn ontwerpworkflow geïntegreerd die werkelijk nuttig is voor teams zonder toegewijde ontwerpers.
Mailchimp's Brand Kit laat je je logo's, lettertypen, kleuren en merkidentiteit opslaan en bijwerken. Het gebruikt AI en de assets in je brand kit om snel stijlvolle, merkgebonden afbeeldingen en lay-outs voor je e-mails, social posts, automatiseringsflows en meer te genereren.
De backend AI achter dit alles is aanzienlijk. Een gebruiker voert gewoon zijn website-URL in in Mailchimp's Content Studio, en de AI detecteert, analyseert en classificeert automatisch alle detecteerbare merkelementen. De dienst legt logo's, merkakleuren, achtergrond- en tekstkleurparen, lettertypen en letterstijlen, merkafbeeldingen en een compleet website-stijlgids vast, inclusief knopstijlen, navigatiepatronen en achtergrondbehandelingen.
Voor feedback over kopie en ontwerp analyseert de Content Optimizer, aangedreven door technologie die lijkt op ChatGPT, je kopie en ontwerp en biedt suggesties om leesbaarheid, toon en call-to-action-elementen te verbeteren.
Wat betreft wat AI goed aanpakt: Creative Assistant kan een webinaruitnodigingse-mail in ongeveer 4 minuten bouwen in plaats van 25 minuten bouwen van nul. De AI-gegenereerde lay-out is doorgaans 80% klaar, waarbij slechts de headerafbeelding en CTA-knopkleur hoeven te worden aangepast. Het worstelt met complexe lay-outs met meerdere kolommen, e-commerce-e-mails met dynamische productgrids en alles dat aangepaste HTML of CSS vereist.
Om een consistent merk in de inboxen van je publiek te behouden, is het belangrijk om een e-mailtemplate te hebben die je voor je campagnes gebruikt. Een sterk brand kit gecombineerd met een kleine set herbruikbare templates elimineert de inconsistentie die voortvloeit uit het van nul af bouwen van elke campagne.
Voor een dieper inzicht in personalisatie buiten ontwerp, zie onze gids over 7 E-mailpersonalisatietechnieken Die Conversies Met 47% Verhogen.
8. Testen, Voorbeelden Bekijken en Met Vertrouwen Verzenden
Ontwerp is niet klaar wanneer je op "opslaan" klikt. De campagnes die je in Mailchimp ontwerpt, zien er altijd iets anders uit wanneer ze in de inboxen van ontvangers worden weergegeven. Verschillende e-mailclients en apparaten geven HTML-e-mails weer volgens hun individuele renderingengines.
Voordat je een e-mail verzendt, test je je inhoud zodat je geen e-mails verzendt met ontbrekende gegevens of verbroken links. Mailchimp's voorbeelden- en testtools helpen ervoor te zorgen dat je afbeeldingen correct laden en dat alle hyperlinks en knoppen werken. Verstuur een paar test-e-mails naar jezelf om er zeker van te zijn dat alles eruitziet zoals je wilt.
Checklijst voor het verzenden:
- Bekijk op desktop en mobiel met behulp van Mailchimp's Inbox Preview.
- Verstuur een test-e-mail naar jezelf en minstens één ander apparaat.
- Controleer alle links, vooral CTA-knoppen.
- Controleer of afbeeldingen correct worden weergegeven en alt-tekst aanwezig is.
- Bevestig dat je onderwerpregels en preheader-tekst er goed uit zien in beide clients.
- Controleer dat je alle hoofdletters, te veel uitroeptekens en gekunstelde woorden of zinnen hebt vermeden, waarop spamfilters letten.
Voor lijstsegmentatie die ervoor zorgt dat de juiste mensen deze goed ontworpen e-mails op de eerste plaats zien, lees onze gids over E-maillijst-segmentatiestrategieën Die ROI Met 760% Verhogen. 
Veelgestelde Vragen
Wat is de aanbevolen e-mailbreedte voor Mailchimp-templates?
Mailchimp-templates zijn ontworpen om niet breder dan 600px te zijn, zodat ze passen in de weergavemogelijkheden van de meeste e-mailclients. Hoewel je een template breder kunt maken, is dit de standaard die betrouwbaar wordt weergegeven in Gmail, Outlook, Apple Mail en mobiele clients.
Moet ik lay-outs met één kolom of meerdere kolommen in Mailchimp gebruiken?
Het hangt af van je inhoudstype. Een lay-out met één kolom werkt goed voor het bekijken op mobiele apparaten en houdt het ontwerp eenvoudig, terwijl een ontwerp met meerdere kolommen meerdere producten of functies tegelijk kan showcasen. Voor de meeste use cases is één kolom de veiliger standaard omdat het voorspelbaar wordt weergegeven op elk schermformaat.
Welke lettertypegrootte moet ik gebruiken in Mailchimp-e-mails voor mobiel?
Een minimale lettertypegrootte van 16px wordt aanbevolen voor mobiel. Apple raadt 17 tot 22px aan en Google raadt 18 tot 22px aan. Alles kleiner dan 16px vereist dat gebruikers knijp-zoomen, wat de betrokkenheid aanzienlijk vermindert.
Hoe behoud ik merktoegankelijkheid in Mailchimp-e-mailcampagnes?
Sla je logo's, lettertypen, kleuren en merkidentiteit op in Mailchimp's Brand Kit. Het platform zal AI en die assets gebruiken om snel stijlvolle, merkgebonden afbeeldingen en lay-outs voor je e-mails, social posts en automatiseringsflows te genereren. Combineer dat met een kleine set herbruikbare campagnetemplates en je ontwerpoutput blijft consistent zonder elke keer van nul af te beginnen.
