Als je een contentmanagementsysteem opent om webpagina's te bouwen, is dat een vrij eenvoudig proces. Moderne webbrowsers ondersteunen HTML, CSS en JavaScript om a streng reeks webstandaarden. En het zijn eigenlijk maar een handvol browsers waar ontwerpers zich zorgen over hoeven te maken. Er zijn natuurlijk uitzonderingen ... en enkele eenvoudige oplossingen of functies die specifiek zijn voor die browsers.
Vanwege de algemene normen is het heel eenvoudig om paginabuilders te ontwikkelen in contentmanagementsystemen. Browsers voldoen aan HTML5, CSS en JavaScript... en ontwikkelaars kunnen ongelooflijk robuuste oplossingen bouwen om webpagina's te bouwen die reageren op apparaten en consistent zijn in alle browsers. Twee decennia geleden gebruikte vrijwel elke webdesigner desktopsoftware om webpagina's te ontwikkelen. Nu is het vrij ongebruikelijk dat een webdesigner een webpagina ontwikkelt - vaker wel dan niet, ze ontwikkelen sjablonen en gebruiken editors in inhoudssystemen om de inhoud in te vullen. Website-editors zijn fantastisch.
Maar e-maileditors lopen hopeloos achter. Dit is waarom…
Het ontwerpen van HTML-e-mails is veel complexer dan voor een website
Als uw bedrijf een mooie HTML-e-mail wil laten ontwerpen, is het proces om een aantal redenen exponentieel complexer dan het bouwen van een webpagina:
- Geen normen – Er is GEEN strikte naleving van een web normen door e-mailclients die HTML-e-mail weergeven. In feite, virtueel elke e-mailclient en elke versie van elke e-mailclient anders handelt. Sommige zullen CSS, externe lettertypen en moderne HTML respecteren. Anderen respecteren een bepaalde inline-styling, tonen alleen een verzameling lettertypen en negeren alles behalve tabelgestuurde structuren. Het is eigenlijk best belachelijk op dit moment dat niemand aan dit probleem werkt. Als gevolg hiervan is het ontwerpen van sjablonen die consistent worden weergegeven op clients en apparaten big business geworden en kan het behoorlijk duur zijn.
- Beveiliging van e-mailclient - Deze week is Apple Mail geüpdatet om standaard alle afbeeldingen in HTML-e-mails te blokkeren die niet in de e-mail zijn ingesloten. U geeft ofwel toestemming om ze een e-mail per keer te laden, of u moet de instellingen inschakelen om deze instelling uit te schakelen. Naast beveiligingsinstellingen voor e-mailclients zijn er ook bedrijfsinstellingen.
- IT Security – Uw IT-team kan strikte regelsets hanteren over welke objecten daadwerkelijk in een e-mail kunnen worden weergegeven. Als uw afbeeldingen bijvoorbeeld afkomstig zijn van een specifiek domein dat niet op de witte lijst staat in een bedrijfsfirewall, worden afbeeldingen gewoon niet weergegeven in uw e-mail. Soms moesten we e-mails ontwikkelen en alle afbeeldingen op de server van het bedrijf hosten, zodat hun eigen medewerkers de afbeeldingen konden zien.
- E-mailproviders – Om het nog erger te maken, de e-mailbouwers die e-mailserviceproviders (ESPs) daadwerkelijk problemen introduceren in plaats van ze te beperken. Terwijl ze hun redacteur promoten is Je Krijgt Wat Je Ziet (WYSIWYG), is het tegenovergestelde vaak waar met e-mailontwerp. Je bekijkt een voorbeeld van de e-mail op hun platform, waarna de e-mailontvanger allerlei ontwerpproblemen ziet. Bedrijven kiezen vaak onbewust voor een editor met veel functies in plaats van een vergrendelde editor, omdat ze denken dat de ene meer functies heeft dan de andere. Het tegenovergestelde is waar... als u e-mails wilt die consistent worden weergegeven in alle e-mailclients, hoe eenvoudiger hoe beter, omdat er minder mis kan gaan.
- E-mailclientweergave - Er zijn honderden e-mailclients, die elk HTML anders weergeven op desktop-, apps-, mobiele en webmailclients. Hoewel uw handige teksteditor op uw e-mailserviceprovider een instelling heeft om een kop in uw e-mail te plaatsen... kunnen de opvulling, marges, regelhoogte en lettergrootte op elke afzonderlijke e-mailclient verschillen. Als gevolg hiervan moet je de HTML verkleinen en elk afzonderlijk element anders coderen (zie het onderstaande voorbeeld) - en vaak in uitzonderingen schrijven die specifiek zijn voor e-mailclients - om een e-mail consistent weer te geven. Er zijn geen eenvoudige bloktypes, je moet tabelgestuurde lay-outs maken die het equivalent zijn van dertig jaar geleden bouwen voor het web. Daarom vereist elke nieuwe lay-out zowel ontwikkeling als cross-e-mailclient- en apparaattests. Wat je in je inbox ziet, kan totaal anders zijn dan wat ik in mijn inbox zie. Het is de reden waarom renderingtools zoals E-mail op zuur or Lakmoes zijn een must om ervoor te zorgen dat uw nieuwe ontwerpen in alle e-mailclients werken. Hier is een korte lijst van populaire e-mailclients en hun rendering-engines:
- Apple Mail, Outlook voor Mac, Android Mail en iOS Mail gebruiken WebKit.
- Outlook 2000, 2002 en 2003 gebruiken internet Explorer.
- Outlook 2007, 2010 en 2013 gebruiken Microsoft Word (ja, woord!).
- Webmailclients gebruiken de respectievelijke engine van hun browser (Safari gebruikt bijvoorbeeld WebKit en Chrome gebruikt Blink).
Een voorbeeld van HTML voor Web Vs. E-mail
Als je een voorbeeld wilt dat de complexiteit van ontwerpen in e-mail versus het web illustreert, is hier een perfect voorbeeld uit het artikel van Mailbakery 19 Grote verschillen tussen e-mail en web-HTML:
We moeten een reeks tabellen bouwen die alle inline-styling bevatten die nodig is om de knop correct te plaatsen en ervoor te zorgen dat deze er goed uitziet in e-mailclients. Er komt ook een begeleidende stijltag bovenaan deze e-mail om de lessen op te nemen.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>Web
We kunnen een externe stylesheet met klassen gebruiken om het geval, de uitlijning, de kleur en de grootte te definiëren van een ankertag die als een knop wordt weergegeven.
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>Problemen met e-mailontwerp vermijden
E-mailontwerpproblemen kunnen worden vermeden door een fatsoenlijk proces te volgen:
- Sjabloonontwerp – Bouw een sjabloon met verschillende lay-outs en inhoudsblokken die elke stijl omvat die u ooit in uw e-mailontwerpen zou willen produceren. Wanneer we een klant implementeren, pushen we ze altijd om: ontwerp een e-mail voor de toekomst – niet alleen de volgende e-mailcampagne die wordt verzonden. Op die manier kunnen we de nodige tijdelijke oplossingen volledig ontwerpen, ontwikkelen, testen en implementeren voor ze hebben ooit die eerste e-mail verzonden.
- Sjabloon testen – Inzicht in de e-mailclients die uw abonnees gebruiken en ervoor zorgen dat uw HTML-e-mail volledig wordt getest op mobiel en desktop, is van cruciaal belang voordat u een sjabloon implementeert. We kunnen een e-mail letterlijk ontwerpen vanuit een Photoshop-lay-out... maar het is essentieel om deze in een tabelgestuurde, cross-e-mailclient op te splitsen en op te delen voor het implementeren van e-mailontwerpen die optimaal en consistent zijn.
- Interne testen – Zodra uw sjabloon is ontworpen en getest, moet deze naar een interne seed-lijst binnen de organisatie worden gestuurd om te beoordelen en goed te keuren. Misschien wilt u zelfs beginnen met een zeer beperkte subset van individuen om er eerst voor te zorgen dat er geen firewall- of beveiligingsproblemen zijn bij het intern weergeven van de e-mail. Als dit een voorbeeld is van een nieuwe e-mailserviceprovider, kunt u zelfs enkele filter- of blokkeringsproblemen tegenkomen die verband houden met het zelfs maar krijgen van uw e-mail in de inbox.
- Sjabloonversies – Verander uw lay-outs of ontwerpen niet zonder te werken aan een nieuwe versie van uw sjabloon die kan worden ontworpen, goed getest en geïmplementeerd. Veel bedrijven houden van eenmalige ontwerpen voor elke campagne... maar daarvoor moet elke e-mail voor elke campagne worden ontworpen, ontwikkeld en geïmplementeerd. Dit voegt een hoop tijd toe aan het interne e-mailmarketingproces. En u loopt het risico niet te begrijpen welke elementen in uw e-mail goed presteren ten opzichte van welke elementen niet. Consistentie is niet alleen een manier om het proces gemakkelijker te maken, het is ook belangrijk voor het gedrag van uw abonnees.
- Uitzonderingen voor e-mailserviceproviders - Vrijwel elke e-mailserviceprovider heeft een manier om de problemen te omzeilen die hun e-mailbouwer introduceert. We kunnen vaak onbewerkte CSS aan een account toevoegen - of zelfs een inhoudsblok hebben dat in elke e-mail moet worden opgenomen - zodat het bedrijf de ingebouwde e-maileditor kan gebruiken en het ontwerp van uw e-mail niet kan breken. Dat kan natuurlijk enige training en procesbeheersing vereisen om die stappen te implementeren om ervoor te zorgen dat ze worden nageleefd. Of – misschien wil je gewoon je e-mailontwerp ontwikkelen in een oplossing waarvan is bewezen dat deze op verschillende clients en apparaten werkt, en deze vervolgens weer in je e-mailserviceprovider plakken.
E-mailontwerpplatforms
Omdat e-mailserviceplatforms slecht werk hebben geleverd bij het uitbouwen en onderhouden van consistent weergegeven bouwers voor meerdere clients en apparaten, zijn er een aantal geweldige platforms op de markt gekomen. Een die we veel hebben gebruikt, is: Stripo.
Stripo is niet alleen een e-mailbouwer, ze hebben ook een bibliotheek met meer dan 900 sjablonen die gemakkelijk kunnen worden geïmporteerd. Nadat u de e-mail hebt ontworpen, kunt u de e-mail naar meer dan 60 ESP's en e-mailclients sturen, waaronder: MailChimp, HubSpot, Campagnemonitor, AWeber, eSputnik, Outlook en Gmail. Het beste van alles is dat Stripo-sjablonen worden geleverd met de meegeleverde e-mailrenderingtests, zodat u zeker weet dat ze zijn getest en consistent werken in meer dan 40 e-mailclients.
Log in op de Stripo Editor-demo
Openbaarmaking: ik link naar mijn marketing adviesbureau die e-mails voor verschillende klanten ontwerpt en implementeert voor toonaangevende merken in vrijwel elke e-mailserviceprovider. Ik ben ook aangesloten bij Stripo en ik gebruik mijn link in dit artikel.
