Hoe design je E-mail campagne


Enkele design tips voor een sterke e-mail campagne waarmee je in de meeste belangrijke e-mail-clients met een min of meer gelijke design je bericht presenteert. Omdat veel e-mail-clients op een verschillende manier met CSS om gaan (zie ook de blog post over CSS en e-mail clients) en omdat niet alle HTML geaccepteerd wordt is het belangrijk hier vooraf met je design rekening mee te houden. Eigenlijk is het ontwikkelen van een e-mail campagne een beetje old-school HTML.

Je gebruikt bijvoorbeeld tabellen om delen te positioneren en je gebruikt een extra span in je hyperlinks om deze van een kleur te voorzien.

De tips komen van een goede en uitgebreide Engelstalige handleiding “E-mail Design Guide” op CampaignMonitor.com.

  • Gebruik tabellen
  • Gebruik een ‘width’ attribuut in elke cell, niet in de tabel.
    <table cellspacing="0" cellpadding="10" border="0">
    <tr>
       <td width="80"></td>
       <td width="280"></td>
    </tr>
    </table>
  • Gebruik tabellen om een achtergrond kleur te gebruiken. Een achtergrond kleur via een CSS wordt door de meeste e-mail clients genegeerd.
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
       <td bgcolor=”#000000”>
       Je e-mail bericht code komt hier.
       </td>
    </tr>
    </table>
  • Plaats tabellen in elkaar (table nesting). Dit is een betrouwbaardere methode dan margins and paddings in cellen
  • Zorg ervoor dat er geen extra spaties (whitespaces) tussen de <td></td> tags staan. Deze extra spaties kunnen in sommige clients voor onbedoelde witruimte zorgen.
  • Plaats je CSS in het document (inline). Het gebruiken van style tags in je <head> of <body> worden door Gmail gestript. Dit lijkt veel werk, maar er zijn tools waarmee je dit eenvoudig kunt oplossen. Een voorbeeld van zo’n tool is http://premailer.dialect.ca/
  • Gebruik de verschillende style eigenschappen en niet de styles waarmee je bijvoorbeeld een font in één style kunt definieren. Zie onderstaand voorbeeld. Bij de eerste is van een gegroepeerde stijl gebruik gemaakt, bij de tweede is dezelfde stijl in de verschillende eigenschappen opgesplitst.
    p {
       font:bold 1em/1.2em georgia,times,serif;
    }
    p {
       font-weight: bold;
       font-size: 1em;
       line-height: 1.2em;
       font-family: georgia,times,serif;
    }
  • Gebruik een inline margin style om je paragrafen (p tag) te stijlen. De Premailer tool is hier opnieuw een eenvoudig hulpmiddel voor.
    p {
       margin: 0 0 1.6em 0;
    }
  • Voor het gebruiken van gekleurde hyperlinks maak je gebruik van een style in de a tag en een extra span met ook een color style daarin
    <a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
  • Afbeeldingen zijn in veel e-mail clients niet direct zichtbaar. Neem dit altijd mee in de beslissing of je wel of geen gebruik gaat maken van een afbeelding.
  • Voorkom het gebruik van ‘spacer’ afbeeldingen. Veel clients vervangen deze door een soort placeholder.
  • Maak geen gebruik van het bestandstype PNG.
  • Aangezien Outlook 2007 geen achtergrond afbeeldingen gebruikt is het verstandig om een achtergrond kleur mee te geven waar de client op terug kan vallen.
  • Gebruik altijd afbeelding formaten (width en height)
  • Vergeet geen alt tekst bij de afbeelding.
  • Gebruik geen floats om een afbeelding uit te lijnen. Gebruik bijvoorbeeld ‘align=”left”‘
  • Hou de breedte van een e-mail beneden de 600 pixels’

En misschien wel de belangrijkste. Vergeet je e-mail design niet te testen.

 

Een reactie plaatsen