Front-end vraagstukken: HTML e-mail
Het is alweer een tijdje geleden dat een Fronteers lid voor het laatst een front-end vraagstuk op het blog aan iedereen wilde voorleggen, maar Monique Martens heeft nu een vraag over HTML e-mail:
Het (b)lijkt dat HTML mails niet goed worden weergegeven in sommige versies van Outlook (danwel in andere e-mail clients). Bouw je een schitterende mailing volgens de webrichtlijnen met div id-tjes en class-jes, ziet die er in Outlook niet uit!
Wat vinden de andere leden hier van?
Gewoon stug vasthouden aan de huidige techniek?
Of back to basic (?) en mail(ings) weer met tabellen, font tags e.d. opmaken?
Reacties
- 1 Sander v. L. op 20-04-2011 om 22:52 uur:
- Ik moet bekennen dat ik sinds 2004 geen HTML email meer heb samengesteld (bewust; ik vond het altijd een ramp, en ben op een gegeven moment gewoon gaan wijgeren dat soort werk te doen, totdat m'n opdrachten altijd op een hoger niveau uitkwamen), en dat ik persoonlijk ook nog altijd fan ben van pure plain text emails, dus ik ben wel benieuwd naar wat tegenwoordig de stand van zaken is.
Wat is de marketshare van e-mail clients tegenwoordig, waar test je in? gmail zal veel groter zijn; is dat ten koste gegaan van desktop clients, of juist van yahoo en hotmail? Is outlook een uitzondering met slechte support en is de rest meer consistent in hoe html emails getoond worden, of is het overal troep? - 2 Wim op 21-04-2011 om 00:14 uur:
- Outlook is sinds enkele versies afgestapt van IE render engine en overgeschakeld op die van Word. Waardoor we enkele jaren terug in de tijd zijn gegaan wat HTML e-mail voor het zakenleven zeg maar.
Zorg in ieder geval boven aan je HTML e-mail voor een duidelijk leesbare link naar een website waar de nieuwbrief/mailing in volle glorie zichtbaar is.
@Sander: het is nog steeds een ramp als je klanten Outlook gebruiken helaas. - 3 Sander Aarts op 21-04-2011 om 04:00 uur:
- http://www.email-standards.org/
- 4 Wiebe Cnossen op 21-04-2011 om 06:35 uur:
- Gebaseerd op mijn eigen gebruikerservaringen vraag ik me af of een tekst als "is deze mail onleesbaar, klik dan hier" bovenin erg effectief is.
Nieuwsbrieven die niet tonen, lees ik sowieso niet, daar verandert zo'n link niks aan.
En nieuwsbrieven die wel tonen, lees ik alleen als de inleiding mij daartoe triggert. Die inleiding bestaat echter bij veel nieuwsbrieven uit "is deze mail onleesbaar, klik dan hier". Die lees ik dus ook nooit. - 5 John van Dijk op 21-04-2011 om 08:29 uur:
- Bij HTML E-mails is het back to the nineties...
Table design + hoofdpijn
Je kunt litmus.com gebruiken voor het testen
en de llnk hierboven (www.email-standards.org) als lijdraad bij het bouwen. - 6 Luc De Brouwer op 21-04-2011 om 08:36 uur:
- HTML e-mails is inderdaad helemaal terug naar de 90s.
En zodra je het werkend hebt voor iedere Outlook versie dan moet je het nog werkend niet te krijgen in Lotus Notes ( er zou een speciaal plekje in de hel gereserveerd moeten worden voor Lotus Notes ontwikkelaars ). - 7 Jeroen Oliemans op 21-04-2011 om 13:45 uur:
- HTML mails zijn inderdaad lastig. Er moet eignelijk in het design al rekening mee worden gehouden. Vreemd genoeg heeft ook Gmail een aantal vreemde dingen bij het tonen van html mail.
Op deze site (wel van een commercieel mailpakket) is veel practische informatie beschikbaar http://www.campaignmonitor.com/resources/ - 8 Sander Swuste op 21-04-2011 om 14:23 uur:
- Over het algemeen is het dan toch maar weer terug naar tables. Niet fijn maar werkt vaak wel.
Lotus Notes is zoals Luc De Brouwer al schrijft echt een drama.
Oplossingen door een email compleet als "plaatje" te versturen is ook niks, vooral niet als je conversie links wilt meten vanuit de email.
Overigens moet je tegenwoordig niet alleen met de oude clients (outlook, lotus notes etc) en de webbased clients rekening houden maar ook nog eens met mobile devices. Een email op een iPhone en blackberry lezen is namelijk ook wel zo fijn. - 9 Marien van Os op 22-04-2011 om 10:12 uur:
- Ik heb onlangs met http://www.mailchimp.com/ gewerkt. Buiten dat het erg fijn werkt met lijsten en statistieken van gebruikers/subscribers heeft mailchimp ook een template systeem waar je op basis van bestaande templates, welke in de meest gangbare email clients goed werken/er hetzelfde (bijna dan) uit zien, je eigen template/design kan maken. Het neemt erg veel hassle weg...
- 10 Wouter op 22-04-2011 om 10:14 uur:
- Wij hanteren de regel dat het moet werken in Lotus Notes (en ja de ontwikkelaars, looking at you IBM, zouden een speciale plek in hell moeten krijgen) want als het daar in werkt werkt het overal.
In de praktijk is dit bijna altijd het geval, wel een uitdaging soms met de wensen die er zijn - 11 steltenpower op 22-04-2011 om 13:45 uur:
- "klik hier", zonder dat het linkt, kom ik vaak tegen. Zelfs bij hele grote merken.
- 12 Wiebe Veenstra op 22-04-2011 om 13:50 uur:
- Net als Jeroen Oliemans zegt maken wij bij MediaCT gebruik van de online E-mail marketing tool: Yime.nl Het voordeel hiervan is dat je css is te includen binnen je template waardoor je niet meer alle css inline in hoeft te definiëren, daarnaast kun je er ook direct een test doen voor alle huidige e-mail clients zowel offline als online clients zodat je zeker bent van de opmaak binnen deze e-mail clients. Maar nieuwsbrieven opmaken op de huidige manier kan echt frustrerend zijn.
- 13 Jules Ernst op 22-04-2011 om 18:20 uur:
- Ik ben zojuist weer een nieuwsbrief aan het HTML-en. Het kan niet smerig genoeg gaan, en da's op zijn tijd ook wel lekker :-)
http://www.campaignmonitor.com/css/
Dit overzicht is ook altijd wel handig - je ziet dat je niet veel mogelijkheden hebt en da's een uitdaging. Ik zorg erwel voor dat mailings zo eenvoudig mogelijk zijn opgebouwd (dus geen kolommen en zo. Dat houd de boel lekker toegankelijk en leesbaar. - 14 Sander Swuste op 26-04-2011 om 12:02 uur:
- Wat ik altijd wel adviseer is om de text variant van de email iets meer info mee te geven dan alleen een "kunt u deze email niet lezen ga dan naar de website".
Hier kan eenvoudig een text-based extract van de content staan. Dat is toch meer userfriendly en zal de conversie naar de achterliggende pagina versterken. - 15 Astrid Bouman op 28-04-2011 om 20:20 uur:
- Campaign monitor is wat mij betreft een ideaal online tool hiervoor. Er zijn een heleboel geteste (tabel) opgemaakte sjablonen beschikbaar, die je naar eigen wens kunt inrichten. Desondanks vind ik het vaak een frustrerende bezigheid, omdat je meer met testen bent dan met de boodschap/vormgeving. Vergeleken met het bouwen van site, sterk achterhaalde techniek met weinig mogelijkheden voor fancy stuff.
- 16 Robin Gruyters op 09-05-2011 om 09:44 uur:
- Ik denk dat iedereen wel verandering wilt zien, maar zolang er geen standaard is voor HTML e-mails zullen wij nog steeds moeten werken met tabellen en font tags, etc.
- 17 Bas van Dorst op 11-05-2011 om 17:41 uur:
- Het is wel te verklaren als je het gaat bekijken vanuit security oogpunt:
1) CSS: background-images
Stel een mailclient zou een background-image altijd inladen, dan kun je eenvoudig bekijken of de e-mail is gelezen.
m.a.w. je kunt controleren of een e-mailadres bestaat (dus of het een potentieel spam adres is)
2) CSS: position; z-index; overflow
Stel je mag absoluut positioneren binnen een webmail, dan kun je dus eenvoudig een eigen loginscherm gaan positioneren in deze webmail client.
m.a.w. Je gaat phishing wel heel makkelijk maken
3) ActiveX, Flash, javascript, iframes
Een jaar of 10 geleden was het in Outlook Express nog mogelijk om ActiveX componenten, animated GIF's, VBscripts en externe iframes in te laden.
Tegenwoordig zijn de mogelijkheden beperkt, want het laatste wat je wilt is een e-mail met een iframe naar "foute" pagina's.
m.a.w. Om malmware tegen te gaan is dit uiteraard logisch...
Verder kun je je ook afvragen wat de definitie van een HTML e-mail is. "We" gaan er maar direct vanuit dat een HTML e-mail ook CSS moet ondersteunen. Dit is natuurlijk niet zo, dus moeten we ook niet raar op staan te kijken als er steeds meer CSS-ondersteuning (vanwege security) verdwijnt.
Meestal hanteer ik voor een nieuwsbrief de volgende "regels":
Technisch:
- maximaal 600px breed
- positioneren met 1 tabel (1 kolom, 5-10 rijen)
- Tekst zwart, hyperlinks niet kleuren
- Soms gebruik maken van font-family/font-size, maar verder geen CSS
Inhoudelijk:
- 1 header image
- maximaal 5 nieuwsberichten (titel, korte omschrijvingm, thumbnail)
- Hyperlinks naar "lees meer"
- footer met subscribe,forward... - 18 Rik op 17-05-2011 om 20:07 uur:
- Bas, de meeste clients tonen standaard geen afbeeldingen voor afzenders die niet in het adresboek staan, maar dat is wel wat anders dan het totaal niet ondersteunen.
Alles onder punt 2 heb je niet zo vaak nodig, dus dat is geen probleem. Overigens zullen position e.d. alleen gelden voor de preview-pane en niet voor de hele client.
Alles onder punt 3 kan me gestolen worden ;-)
Ik zou al tevreden zijn met volledige CSS2 ondersteuning. Nu is het iedere keer weer een 'trip down memory lane'. - 19 Nick op 19-05-2011 om 17:29 uur:
- Standaarden gebruiken voor HTML emails? Vergeet het maar. :) Als ik een HTML email moet maken vergeet ik even de w3c en de standaarden, dan weet je dat je na wat testen en aanpassingen een cross client email hebt.
- 20 Tommy Kolkman op 25-05-2011 om 20:39 uur:
- Zoals Astrid al zegt: Campaignmonitor is de absolute winnaar (wat mij betreft) op dit gebied. De tests worden voor je gedaan, je hoeft alleen maar te checken welke HTML/CSS tags en properties gaan werken in welke emailclient.
Lotus Notes als uitgangspunt nemen vind ik wat vreemd want uit alle Campaignmonitor tests komt deze er toch als "vreemde eend in de bijt" uit... bijna niets werkt!