Opmaak nieuwsbrief tips - HTML email nieuwsbrieven
In dit artkel gaan we verder in op de opmaak van nieuwsbrieven. Handige tips voor de opmaak van HTML email nieuwsbrieven op het gebied van de codering en wat wel te doen en wat niet te doen om uw email campagne tot een succes te maken.
HTML codering voor email nieuwsbrieven is veel gecompliceerder dan voor websites. Waar voor het internet gecodeerd wordt voor bijvoorbeeld Internet Explorer, Mozilla, Firefox etc. wordt voor email gebruikt gemaakt van talloze email clients (Outlook, Gmail, Hotmail, Horde, Squirrel etc.) die op hun beurt de HTML code weer op hun eigen manier rendert. Alleen al de manier van rendering in Outlook 2002 ten opzichte van Outlook 2007 en Outlook 2010 (bèta versie) is ingrijpend gewijzigd.
HTML email nieuwsbrieven, Outlook 2007 & Outlook 2010
Vóór Outlook 2007 maakte Outlook gebruik van IE om te renderen. Vanaf Outlook 2007 wordt gebruik gemaakt van de beperkte HTML support van Word 2007. Het gebruik van bijvoorbeeld background images in HTML email nieuwsbrieven behoren sindsdien tot het verleden. De nieuwe Outlook 2010 kampt met dezelfde beperkingen, althans in de bèta versie. Verbeteringen echter hoeven we niet te verwachten.
Voorbeelden email clients
Desktop email clients: Apple Mail, Lotus Notes, Microsoft Outlook, Outlook Express, Thunderbird
Web-based email clients: AOL Mail, Gmail, live Hotmail, Mail.com, Mobile Me, Yahoo! Mail, horde, Squirell
Tips voor een goede opmaak van nieuwsbrieven
Correcte HTML zorgt voor een attractief en bruikbaar bericht dat een hogere conversierate oplevert dan "gewone" tekstberichten. Slecht gecodeerde HTML levert onleesbare en niet correct functionerende nieuwsbrieven op, en erger nog, ertoe kan leiden dat uw nieuwsbrief door email blocks en filters als spamworden geïnterpreteerd met alle gevolgen van dien.
Met die gedachte volgen hier enkele algemene HTML codering tips voor email nieuwsbrieven:
- Codeer HTML email nieuwsbrievennet als een webpagina met de basis , ,
, en <BODY> tags</li> <li>Zorg ervoor dat alle tags de juiste closing tags hebben. <br />De meest voorkomende fout is de afwezigheid van een closing tag zoals </td></tr></span> etc.</li> <li>Test de <strong>HTML code</strong> met een <a href="http://validator.w3.org/" target="_blank">HTML validator</a> conform de W3C standaard</li> <li>Gebruik geen atributen in de <BODY> tag, deze kunnen door spamfilters worden aangemerkt als spam met een block als gevolg</li> <li>Zorg ervoor dat uw boodschap duidelijk omschreven staat in uw <strong>email-</strong>onderwerp</li> <li>Creëer<span style="color: #000000; font-weight: normal;"> tevens een tekstversie voor de ontvangers die geen <strong>HTML nieuwsbrieven</strong> kunnen ontvangen</span></li> <li>Breng een link aan met een webversie van uw <strong>email nieuwsbrief </strong>zodat, mocht onverhoopt uw <strong>HTML email nieuwsbrief</strong> toch niet goed gerendered worden, de ontvanger middels deze link toch de boodschap kan lezen</li> </ul> <h3>Style Sheets (CSS)</h3> <p>Webdesigners gebruiken Cascade Style Sheets (CSS) om een constante style toe te passen op hun website. Echter kan dat problemen veroorzaken aangezien <strong>email clients</strong> verschillend met style sheets omgaan.<img src="/images/studio16/email_marketing.jpg" border="0" alt="Opmaak nieuwsbrief tips html email" title="HTML nieuwsbrieven voor email marketing campagnes" width="316" height="204" style="width: 316px; float: right; height: 204px; margin-left: 20px;" /></p> <table border="0" cellspacing="1" cellpadding="0"> <tbody> <tr><th scope="col" align="left" valign="top" bgcolor="#e9f8eb" width="210">Email-clients</th><th scope="col" align="center" valign="top" bgcolor="#d8edf5" width="75">Hotmail</th><th scope="col" align="center" valign="top" bgcolor="#e9f8eb" width="75">Yahoo</th><th scope="col" align="center" valign="top" bgcolor="#d8edf5" width="75">GMail</th><th scope="col" align="center" valign="top" bgcolor="#e9f8eb" width="75">Outlook</th></tr> <tr> <td align="left" valign="top" bgcolor="#e9f8eb">linked style sheet</td> <td align="center" valign="top" bgcolor="#d8edf5">nee<br />stripped</td> <td align="center" valign="top" bgcolor="#e9f8eb">nee</td> <td align="center" valign="top" bgcolor="#d8edf5">nee</td> <td align="center" valign="top" bgcolor="#e9f8eb">ja</td> </tr> <tr> <td align="left" valign="top" bgcolor="#e9f8eb">embedded tussen <HEAD> tags</td> <td align="center" valign="top" bgcolor="#d8edf5">nee<br />stripped</td> <td align="center" valign="top" bgcolor="#e9f8eb">nee</td> <td align="center" valign="top" bgcolor="#d8edf5">nee<br />stripped</td> <td align="center" valign="top" bgcolor="#e9f8eb">ja</td> </tr> <tr> <td align="left" valign="top" bgcolor="#e9f8eb">embedded tussen <BODY> tags</td> <td align="center" valign="top" bgcolor="#d8edf5">nee<br />stripped</td> <td align="center" valign="top" bgcolor="#e9f8eb">nee</td> <td align="center" valign="top" bgcolor="#d8edf5">nee<br />stripped</td> <td align="center" valign="top" bgcolor="#e9f8eb">ja</td> </tr> <tr> <td colspan="5" align="left" valign="top">Onder voorbehoud van gebruikte versie</td> </tr> </tbody> </table> <div> </div> <ul class="list"> <li>Indien u gebruik wilt maken van CSS, plaats het <STYLE> element dan tussen de <BODY> tags en niet tussen de <HEAD> tags. De meeste email-clients verwijderen het <STYLE> element tussen de <HEAD> tags</li> <li>Beter is om het style element aan te brengen in de <TABLE><TD><SPAN> of <FONT> tags. <br />Bijvoorbeeld <TD style="font-size:12px;"></li> <li>Gebruik geen CSS voor het positioneren van elementen. <br />Het zal de lay-out in de meeste <strong>email clients</strong> ernstig in de war brengen.</li> </ul> <h3>Lay-out</h3> <ul class="list"> <li>De meeste <strong>HTML email nieuwsbrieven </strong>zijn tussen de 500 en 650 pixels breed. De meeste Web-based <strong>email clients</strong> zijn daarop gebaseerd (afhankelijk van uw schermresolutie). Hou die breedte dan ook aan om horizontale scrolling te voorkomen. Vermijd dit omdat dit als irritant door de ontvanger ervaren wordt en derhalve ten koste kan gaan voor uw conversie ratio. Om een horizontale scroll te voorkomen bij gebruik van een schermresolutie van 1024 pixels bij 768 pixels is in het geval van Gmail een maximale breedte van 550 pixels aan te bevelen. Hotmail / Livemail daarentegen een maximale breedte van 650 pixels bij dezelfde resolutie.</li> <li>Gebruik in tegenstelling tot uw website waar het gebruik van <a href="/email-marketing.html" target="_self" title="Semantisch HTML / SEO">semantisch html </a>en css codering gewenst is <strong>HTML</strong> tables voor het ontwerp</li> <li>Vermijd krapte tussen de elementen (tekst, images etc.) in uw lay-out. Als uw elementen genoeg ruimte hebben is de kans kleiner dat uw lay-out verstoord wordt door de talloze <strong>email clients</strong>.</li> <li><span style="color: #000000; font-weight: normal;">Probeer nested tables te vermijden (tabels in tabels), deze kunnen door sommige <strong>email clients</strong> niet goed gerenderd worden</span></li> <li>Codeer de <strong>HTML</strong> handmatig. WYSIWYG editors (Frontpage e.d.) hebben de neiging extra code toe te voegen die door de verschillende <strong>email clients</strong> weer tot weergaveproblemen kan leiden. Indien u toch een editor wilt gebruiken maak dan gebruik van editors die dat niet doen zoals Dreamweaver.</li> <li>Indien de ontvangers van uw <strong>emailing</strong> bekend zijn met uw website gebruik dan zoveel mogelijk de lay-out van uw website. Dit bevordert de herkenbaarheid en zal zorgen voor eengroter gevoel van betrouwbaarheid door de ontvanger.</li> </ul> <h3>Kleurgebruik</h3> <p>Kleurgebruik is heel belangrijk. Het kan echter ook problemen op leveren. Gebruik geen donkere achtergrondkleur, het zal de leesbaarheid van uw tekst en call to action doen afnemen.</p> <h3>Background color</h3> <p>Gebruik een witte of in ieder geval een lichte achtergrond kleur met een donkere font kleur om de leesbaarheid te vergroten. Maak gebruik van background atributen van zoals <TABLE> en <TD> en niet in de <BODY> tag. Sommige web-based <strong>email clients</strong> zoals Hotmail verwijderen de inhoud van body tag. Wilt u een achtergondkleur op de gehele pagina hebben maak dan een extra tabel aan waarin u uw <strong>nieuwsbrief</strong> plaatst en geef die de achtergrond kleur mee die u wenst.</p> <h3>Font</h3> <ul class="list"> <li>Vermijd het gebruik van fonts die naar alle waarschijnlijkheid niet op een ieders computer staat. Gebruik daarentegen de gangbare fonts zoals <span style="font-family: arial,helvetica,sans-serif; font-size: 10pt;">Arial, <span style="font-family: verdana,geneva; font-size: 10pt;">Verdana, <span style="font-family: times new roman,times; font-size: 10pt;">Times New Roman e.d.</span></span></span></li> <li>Maak de font grootte minimaal 10 pixels, 10 points</li> <li>Gebruik absolute font groottes, dus in pixels of points en niet bijvoorbeeld font size="2" aangezien, afhankelijk van de computer instellingen van de ontvangende partij, deze niet consistent weergegeven zullen worden.</li> <li>Gebruik alleen ASCII karakters</li> </ul> <h3>Font colors</h3> <p>Vermijd witte fonts. Het lijkt aardig op een donkere achtergrond maar komt de leesbaarheid niet ten goede. Een nog veel groter probleem is dat spamfilters het gebruik van wit (#FFFFFF) in een <FONT> tag zien als spam. Spammers gebruiken dit om onzichtbare informatie in een <strong>email</strong> te plaatsen door witte tekst te gebruiken op een witte achtergrond.</p> <h3>Background images - achtergrondplaatjes</h3> <p>Het gebruik van achtergrondplaatjes is in zijn geheel af te raden. Zo goed als alle nieuwe versies van desktop <strong>email clients</strong> en web-based <strong>email clients</strong> ondersteunen het <strong>HTML</strong> attribute background niet. Dat geldt ook voor het inline style attribuut background-image. Een uitzondering is overigens Outlook 2007. Daar werkthet inline style attribuut background-image wel, echter uitsluitend in de body-tag. Net als de rest van de images wordt deze zichtbaar indien er toestemming gegeven wordt plaatjes te downloaden. U moet wel rekening houden met het feit dat het doorgaans bijbehorende background-repeat attribuut weer niet werkt met als gevolg dat uw plaatje over de hele pagina zowel verticaal als horizontaal herhaald zal worden.In dat geval doet u er raadzaam aan het plaatje in ieder geval hoger te maken dan de nieuwsbrief zelf, tenzij de herhaling uiteraard de bedoeling is.</p> <h3>Images</h3> <ul class="list"> <li>Indien u gebruik maakt van images, laat deze verwijzen naar de server waar de images staan en embed ze niet in uw email. Sommige ISP's blocken <strong>email berichten</strong>met embedded images</li> <li>Aangezien in de meeste <strong>email clients</strong> images in eerste instantie geblocked worden is het raadzaam ervoor te zorgen dat de tekst in de <strong>email</strong> direct duidelijk maakt waar de <strong>email</strong> over gaat. Als de ontvanger niet de boodschap direct begrijpt is de kans groter dat de email de prullebak in verdwijnt. Vermijd dus tekst in images</li> <li>Zorg ervoor dat u uw images de hoogte en breedte atributen meegeeft. Indien u dat niet doet loopt u het risico dat de images gestretched worden en daardoor de rest van uw content incorrect gerenderd wordt</li> <li>Gebruik het ALT atribute om het plaatje een naam mee te geven zodat de ontvanger die ziet voordat de email-clients de images downloaden.</li> <li>Vergeet niet de image tag <img> goed af te sluiten conform de laatste (X)HTML standaard, dus <img src="/" <strong>/</strong>> en niet <img src="/">. Outlook 2007 heeft anders de neiging extra ruimte aan de onderkant van de image toe te voegen indien er een link geplaats is op de image. Hou daar dus rekening mee met uw ontwerp en in het geval u splitted images gebruikt</li> </ul> <h3>Padding en Margin attributen</h3> <p>Indien u extra ruimte wilt tussen bepaalde elementen binnen uw nieuwsbrief voorkom dan het gebruik van de attributen padding en margin. Deze worden niet consistent gerenderd door de verschillende email clients. In plaats van padding en margin is het aan te raden extra cellen te plaatsen binnen uw tabellen of gebruik te maken van cellspacing en cellpadding.</p> <h3>Buttons (call to action)</h3> <p>Knoppen en andere supporting images moeten de aandacht trekken van de ontvanger. Zorg dat de tekst erin goed opvalt en goed leesbaar is. Nog belangrijker is dat de ontvanger de call to action goed begrijpt. Beter is nog om de knop in HTML te maken. Dit in verband met het blocken van images in eerste instantie door de meeste <strong>email clients</strong>. Indien u toch een image gebruikt is het raadzaam de link van de call to action ook tekstueel in uw ontwerp te plaatsen.</p> <h3>Formulieren</h3> <p>Gebruik geen formulieren in uw <strong>email nieuwsbrief</strong>. Bijvoorbeeld, Hotmail laat wel het formulier zien maar verwijdert alle waarden hetgeen uw formulier zinloos maakt. Zorg er dus voor dat uw formulieren opuw landingpages staan en niet in de <strong>email</strong>.</p> <h3>Scripts</h3> <p>Vermijd scripts zoals Javascript en VBscript vanwege beperkte support. Daar komt bij dat veiligheids risico's de laatste jaren toegenomen zijn waardoor de meeste email-clients ze uit uw email strippen.</p> <h3>Eindconclusie</h3> <p>Ondanks de bovenstaande tips blijft het belangrijk om uw <strong>HTML email nieuwsbrieven</strong>te blijven testen op de gangbare <strong>email clients</strong> die uw ontvangers gebruiken. Trek daar genoeg tijd voor uit. De kosten van uitvoerig testen weegt immers niet op tegen het verlies aan ROI van uw email campagnes indien uw emails niet leesbaar zijn. Een 100% compatibiliteit is moeilijk haalbaar voor ingewikkelde ontwerpen aangezien de <strong>email clients</strong> zicht voortdurend blijven ontwikkelen. Streef in ieder geval naar het beste compromis. Als u echter bovenstaande tips hanteert moet u een eind kunnen komen.</p></div> </div> </div></main> <footer id="footer"> <div id="contact" itemscope="" itemtype="http://data-vocabulary.org/Organization"><h3 itemprop="name">Studio 16 Websolutions</h3> <ul> <li itemprop="streetAddress">Legebuorren 17</li> <li><span itemprop="postalCode">8525 GX</span> <span itemprop="addressLocality">Langweer</span></li> <li class="provincie" itemprop="addressRegion">Friesland</li> <li class="land" itemprop="addressCountry">The Netherlands</li> </ul> <ul class="contactlist"> <li class="tel"><a href="tel:+31513262801"> <span itemprop="telephone">+31 (513) 26 28 01</span></a></li> <li class="email"><a href="mailto:ivo@studio16.info"> <span itemprop="email">ivo@studio16.info</span></a></li> <li class="www"><a href="http://studio16-websolutions.nl" itemprop="url">studio16-websolutions.nl</a></li> <li class="www"><a href="http://www.studio16.info" itemprop="url">studio16.info (blog/archief)</a></li> </ul> <ul> <li class="follow"><span>Volg ons op:</span><a href="http://www.linkedin.com/company/studio-16-websolutions" target="_blank" rel="noopener" class="social linkedin" aria-label="Volg Studio 16 Websolutions op Linkedin"></a> <a href="https://www.google.nl/search?hl=nl&q=Studio+16+Websolutions&ludocid=15820120620503420188&lsig=AB86z5VP3OhIxiFSL8V9ZVR2wCy-" target="_blank" rel="noopener" class="social googleplus" aria-label="Volg Studio 16 Websolutions op GooglePlus"></a></li> <li class="bottomlinks"><a href="/privacy.html" rel="nofollow">Privacy</a> | <a href="/disclaimer.html" rel="nofollow">Disclaimer</a> <br /> <a href="https://studio16-websolutions.nl/leveringsvoorwaarden.html" rel="nofollow">Leveringsvoorwaarden</a> | <a href="/cookiebeleid.html">Cookiebeleid</a></li> </ul></div> <script> function SetCookie(c_name,value,expiredays,path) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) } </script> <div class="cookie"> <div class="cookieinner"> <div class="heading">Cookies op Studio 16.info</div> <p>Studio 16 Websolutions maakt gebruik van functionele en analytische cookies voor een optimale gebruikerservaring. Door op 'Akkoord' te klikken, of als u gebruik blijft maken van deze website gaat u akkoord met het plaatsen hiervan. Voor meer informatie over hoe wij cookies gebruiken verwijzen wij u naar ons <a href="/cookiebeleid.html">cookiebeleid</a>.</p> <input class="cookie submit" onclick="SetCookie('cookiecheck','true','30','/')" type="submit" value="Akkoord" /></div> </div> </footer> <div id="c2a"><span class="c2abutton"></span><div class="forminner"></div></div> <script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://www.studio16.info//templates/responsive/js/javascript.js"></script> </body> </html>