HTML voor nieuwsbrieven



Vergelijkbare documenten
HTML in Outlook Hoe zorgt u ervoor dat uw goed in beeld komt?

ailexpert Tips & Tricks design

HTML richtlijnen marketing. part of the valley

Whitepaper. design best practices

Checklist opmaken van een nieuwsbrief Sendt

design guidelines

A Inloggen. B - Wachtwoord Veranderen

Web building basis: HTML. Karel Nijs 2008/09

Programmeren in MyShop

Agenda. Wat is HTML? Meer over HTML... Waarom HTML leren? Aniel Bhulai. Inleiding Computergebruik - HTML 1. Waarin maak je een HTML-bestand?

A Inloggen. B - Wachtwoord Veranderen

Frontend ontwikkeling

1. Aanleverspecificaties PSD

WEBSITE USABILITY. white-paper

Wat is een child-theme?

Werken met afbeeldingen in webpagina's

Handleiding Nieuwsbrief InSocial in Mailchimp

Eindopdracht webdesign

HANDLEIDING VORMGEVING TEMPLATES

Inleiding. Als u zelf uw website niet bijhoudt dan kan uw webmaster deze tips gebruiken.

Web building basis: HTML. Karel Nijs 2008/09

Nieuwsbrieven versturen met MailPoet

Aanleverspecificaties online W E L K O M B I J RADIO

LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting.

AutoTrack.nl. Handleiding Implementatie Voorraadlijst

Handleiding Glimworm nieuwsbrief

Extra: Hoe u uw website met HTML kunt verbeteren

Welkom bij mijn website tutorial (Deel 2)

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans

Les 13. Voorbereiding

Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.

Websitecursus deel 1 HTML

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).

Website rapport zazoutotaal.nl

Om te beginnen heb je een geraamte van je website nodig. Maak een nieuwe map met de naam gevorderden_website aan om je website in te zetten.

Globale kennismaking

6. Indexatie: Zijn de verschillende pagina s binnen de site geïndexeerd door Google?

HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie.

Publicatie formulieren en surveys

Handleiding - Styling van OFB Web 4.0

Website beoordeling weeknummers.nl

Editing Guide v1.2.2

Week 1 1/4. Week 1 2/4

Leerlingdossier & handelingsplannen. Welke mogelijkheden biedt de online tekstverwerker in ESIS? FAQ

16 TIPS VOOR EEN SUCCESVOLLE MARKETINGCAMPAGNE

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

Verstuur een eigen Kerst ! Mét muziek en bewegende plaatjes!

Websitecursus deel 2 CSS

Internet_html.doc 1/6

Hoe zorg je ervoor dat jouw NIET in de spambox belandt?

HTML-EDITOR GEBRUIKEN

marketing Do s & Don ts MailPlus & Kittyhawk

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond

Website analyse anytime.nl

Eindopdracht HTML/CSS: hovenier

1. Inloggen Uw account Wachtwoord veranderen Alle gegevens bekijken Credits (mail-bundels) kopen 3

Een webpagina maken. Een website bouwen met HTML en CSS practicum 1

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM

11. Website controleren

Tips voor uw nieuwsbrief. Hoe komt u goed voor de dag?

Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp

Foutcontrole met Javascript

marketing whitepaper

WHITE PAPER. Outlook versus Mailplus. Van Os Marketing 1

Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?

Handleiding PSU Adressenbeheer Module: Direct Mail

FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40

Whitepaper. 7 tips voor een hogere openingsratio

Naast deze specificaties zijn deze de volgende opzetten in PSD formaat een goede basis om mee aan de slag te gaan: Desktop Mobiel

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

3.1 TEST ONTWERP VAN JE BUTTONS LEESBAAR MAKEN VOOR MOBIELE APPARATEN CALL-TO-ACTION: GEBRUIK ANIMATIE... 13

Inhoudsopgave. Inhoudsopgave Inleiding Het begin Opmaak Formulieren Editors Webbrowsers...

Online SEO-CHECKLIST. Switch Reclamebureau bv I Rendementsweg 2-Q I Mijdrecht I I

Websites & Zoekmachines

Succesvolle nieuwsbrieven

Hoe maak ik goede digitale nieuwsbrieven? Lotte Wieland Anne Sikken

MailPlus-template voor BrightEdit

Transcriptie:

Voorwaarden en specificaties HTML voor nieuwsbrieven HTML e mails zoals wij die versturen, voldoen aan een aantal richtlijnen voor een optimale verzending en aflevering van nieuwsbrieven. Op advies van Emailvision, Europees marktleider op het gebied van e mailmarketing die de verzending van onze nieuwsbrieven verzorgt, brengen wij u in dit document een aantal voorwaarden en specificaties waaraan uw uiting zou moeten voldoen. Voor een optimale verzending en aflevering van de e mail en daarmee ook voor een optimale exposure van uw boodschap. Stelregel is dat HTML codering voor e mail nieuwsbrieven veel gecompliceerder is dan voor websites: Waar voor het internet gecodeerd wordt voor bijvoorbeeld Internet Explorer, Mozilla, Firefox etc. wordt voor e mail gebruikt gemaakt van talloze e mailprogramma s (Outlook, Gmail, Hotmail, Horde, Squirrel etc) die op hun beurt de HTML code weer op hun eigen manier renderen, weergeven. Alleen al de manier van rendering in Outlook 2002 ten opzichte van Outlook 2007 en Outlook 2010 (bèta versie) is ingrijpend gewijzigd. Dit document kunt u doorgeven aan uw webdesigner of reclamebureau die voor u deze uitingen verzorgt. Heeft u nog vragen? Stel ze gerust aan uw contactpersoon. Met vriendelijke groet, Eisma Media Groep

Tips voor 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, kan ertoe leiden dat de nieuwsbrief met uw uiting door e mailblocks en filters als spam worden geïnterpreteerd met alle gevolgen van dien. Met die gedachte volgen hier enkele algemene HTML codering tips voor e mail nieuwsbrieven: Codeer HTML e mail nieuwsbrieven net als een webpagina met de basis <HTML>, <HEAD>, <TITLE>, en <BODY> tags Gebruik in tegenstelling tot uw website waar het gebruik van semantisch html en css codering gewenst is HTML tables voor het ontwerp Indien de ontvangers van uw e mailing bekend zijn met uw website gebruik dan zoveel mogelijk de lay out van uw website. Dit bevordert de herkenbaarheid en zal zorgen voor een groter gevoel van betrouwbaarheid door de ontvanger. Formaat: maximaal 648 pixels breed en 600 pixels hoog. Maximaal 100 kb. LET OP: dit formaat wisselt per merk, u krijgt het juiste formaat met de opdracht door. Zoniet, informeer bij uw contactpersoon. Gebruik geen attributen in de <BODY> tag, deze kunnen door spamfilters worden aangemerkt als spam met een block als gevolg Probeer nested tables zo veel mogelijk te vermijden (tabellen in tabellen), deze kunnen door sommige e mail clients niet goed gerenderd worden. Alle tekst bij voorkeur als tekst in de HTML opnemen (niet als plaatje) HTML compliant tekens gebruiken: dus geen é, maar é en geen & maar & etc. Dit is vooral erg belangrijk in urls en links; vaak doen ze het niet wanneer er speciale tekens in staan! Zorg ervoor dat alle tags de juiste closing tags hebben. De meest voorkomende fout is de afwezigheid van een closing tag zoals </td></tr></span> etc. Test de HTML code met een HTML validator conform de W3C standaard Een eventuele onderwerpregel mag niet langer dan 65 karakters zijn, inclusief spaties. Lever bij de HTML een url voor de landingspagina. Dit is de pagina waarop de ontvanger van de nieuwsbrief terecht komt na het klikken op de uiting.

Style Sheets (CSS) Webdesigners gebruiken Cascade Style Sheets (CSS) om een constante style toe te passen op hun website. Echter, dat kan problemen veroorzaken aangezien e mail clients verschillend met style sheets omgaan. E mail clients Hotmail Yahoo GMail Outlook linked style sheet nee stripped nee nee ja embedded tussen <HEAD> tags nee stripped nee nee stripped ja embedded tussen <BODY> tags nee stripped nee nee stripped ja Onder voorbehoud van gebruikte versie Een voorbeeld dat problemen geeft: <html> <head> <style type="text/css" media="screen"> h1 { font family: arial; font size: 12px } </style> </head> <body> <h1>tekst</h1> </body> </html> In bovenstaand voorbeeld wordt de stijl (font en grootte) in sommige clients genegeerd omdat de header uit het bericht wordt verwijderd. De voorkeur verdient derhalve: <html> <head> </head> <body> <h1 style= font family: arial; font size: 12px >Tekst</h1> </body> </html> In bovengenoemd voorbeeld zal de stijl in de meeste clients wél goed worden weergegeven.

Background color Gebruik voor uw uiting 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 e mail clients zoals Hotmail verwijderen de inhoud van body tag. Gebruik voor de achtergrondkleur beide HTML tags (style="background color:#000000"en bgcolor="#000000"), hierdoor worden de achtergrondkleuren in de meeste providers ondersteund. Font Vermijd het gebruik van fonts die naar alle waarschijnlijkheid niet op een ieders computer staat. Gebruik daarentegen de gangbare fonts zoals Arial, Verdana, Times New Roman e.d. Maak de font grootte minimaal 10 pixels, 10 points 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. Gebruik alleen ASCII karakters Font colors 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 e mail te plaatsen door witte tekst te gebruiken op een witte achtergrond.

Images Indien u gebruik maakt van images, laat deze verwijzen naar de server waar de images staan en embed ze niet in uw e mail. Sommige ISP's blocken e mail berichten met embedded images Aangezien in de meeste e mail clients images in eerste instantie geblocked worden is het raadzaam ervoor te zorgen dat de tekst in de e mail direct duidelijk maakt waar de e mail over gaat. Als de ontvanger niet de boodschap direct begrijpt is de kans groter dat de e mail de prullenbak in verdwijnt. Vermijd dus tekst in images Zorg ervoor dat u uw images de hoogte en breedte attributen meegeeft. Indien u dat niet doet loopt u het risico dat de images gestretcht worden en daardoor de rest van uw content incorrect gerenderd wordt Gebruik het ALT attribuut om het plaatje een naam mee te geven zodat de ontvanger die tekst ziet voordat de e mail clients de images downloaden. Vergeet niet de image tag <img> goed af te sluiten conform de laatste (X)HTML standaard, dus <img src="/" /> 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 geplaatst is op de image. Hou daar dus rekening mee bij uw ontwerp en in het geval u splitted images gebruikt Background images achtergrondplaatjes Het gebruik van achtergrondplaatjes is in zijn geheel af te raden. Zo goed als alle nieuwe versies van desktop e mail clients en web based e mail clients ondersteunen het HTML attribute background niet. Dat geldt ook voor het inline style attribuut background image.

Padding en Margin attributen 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 e mail 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. Buttons (call to action) 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, omdat veel email clients in de eerste instantie afbeeldingen blokkeren. Indien u toch een image gebruikt, is het raadzaam de link van de call to action ook tekstueel in uw ontwerp te plaatsen. Formulieren Gebruik geen formulieren in uw e mail nieuwsbrief. Bijvoorbeeld, Hotmail laat wel het formulier zien maar verwijdert alle waarden zodat uw formulier zinloos wordt. Zorg er dus voor dat uw formulieren op uw landingpages staan en niet in de e mail. Scripts Vermijd scripts zoals Javascript en VBscript vanwege beperkte support. Daar komt bij dat veiligheidsrisico's de laatste jaren toegenomen zijn, waardoor de meeste e mail clients ze uit uw e mail strippen.

Spamwoorden De meeste spamfilters kijken mede naar de meegezonden tekst in het e mailbericht. Het bericht wordt gescand op woorden die vaak voorkomen in spam e mails en daarom op een zwarte lijst staan. Spamwoorden en tekens moeten te allen tijden worden vermeden. Echter kan je soms niet om het gebruik heen, omdat die gratis aanbieding wel over moet komen. Wees dus uiterst spaarzaam met onderstaande woorden.!!!!!!! 100% gratis 50% korting Afvallen Alle woorden over seks of pornografie Alle woorden over kuren, medicijnen Bel nu Beperkte tijd Bijverdienste Bingo Bonus Cash Casino Elimineer schuld Financiële vrijheid Free Samples! Geen spam Gevraagde informatie Gezien op TV GRATIS Gunstige voorwaarden Hypotheek HOOFDLETTERS Klik hier Kopen Korting Krediet Krijgen kruiden Laagste prijzen verzekering Leningen Lorum Ipsum Nu aanvragen Nu handelen Nu slechts Schuld verbazend Verdubbel uw inkomen Vergelijk Verlaag uw hypotheekrente verliezen Verwijder Viagra Voor slechts Voor u Vriend Winnaar/ Winnen