Share
Net als veel andere webontwerpers, gedij ik op het coderen van mooie en toch flexibele webpagina's die vrijwel identiek zijn in elke webbrowser. Helaas, het ontwerpen van e-mailnieuwsbrieven stuurt je tien jaar terug. Verouderde tags, tabellen, inline styling, oh my! In dit artikel zal ik zes methoden noemen die uw e-maillay-outs onmiddellijk zullen verbeteren.
Als nieuwe huur bij opt-in e-mailmarketingservice AWeber, was mijn eerste opdracht om een paar dozijn nieuwe HTML-e-mailnieuwsbriefsjablonen voor onze klanten te maken. Voor de schone, codale webontwerper is HTML-e-mail een herinnering aan een akelig verleden. Na weken van werk en talloze hoofdpijn, heb ik de goederen afgeleverd. Ik heb ook veel geleerd over ontwerpen voor e-mail.
Om u te helpen veel van de hoofdpijnen te vermijden die ik tijdens het testen tegenkwam, zijn hier 15 dingen die u kunt doen om goed uitziende HTML-e-mails te maken.
Als u slechts één tip van dit artikel weghaalt, laat dit dan alstublieft zijn. Als ontwerpers spenderen we veel tijd aan het creëren van de perfecte gebruikerservaring op internet en testen we die ervaring op meerdere platforms. Maar als het op e-mail aankomt, slagen te velen van ons er niet in om dezelfde aandacht voor detail te geven.
Heel erg zoals het testen voor het Web, kan het creëren van een e-maillay-out die het zelfde in elke e-mailcliënt toont een absolute nachtmerrie zijn.
Om er zeker van te zijn dat uw abonnees uw bericht zoals bedoeld ontvangen - test alles wat je kunt!
Dit omvat maar is niet beperkt tot:
Maar wacht - er is meer!
Sommige van deze e-mailclients hebben meerdere versies, elk daarvan zal CSS en HTML anders weergeven.
Dit is onderdeel van een HTML-e-mail die wordt weergegeven door de oude versie van Yahoo.
Hier is exact dezelfde e-mail die wordt weergegeven door de nieuwe versie van Yahoo. 
Subtiele verschillen, dat geef ik toe. Maar genoeg van deze subtiele verschillen en het komt neer op een slordig ontwerp. En als dat niet genoeg is ... de internetbrowser van de gebruiker kan ook een rol spelen bij het ontwerp van uw ontwerp.
Nu, voordat je je computer uit frustratie het raam uit gooit ... kunnen de volgende paar stappen je helpen om een meerderheid van de testproblemen uit te sluiten.
Het verbaast me dat een aantal van de grootste adverteerders de algemene usability-regels voor HTML-e-mail overtreedt.
Hier zijn enkele richtlijnen om te leven door:
Dit is een header van een e-mail die ik heb ontvangen van Discovery Health:
Ik nam deze screenshot van mijn Gmail-account - voordat u afbeeldingen inschakelt. Zie hoe de ALT-tekst "bullet" en "spacer" in de weg zitten?
Het toevoegen van ALT-tags aan elementen die alleen voor ontwerpdoeleinden dienen, verstrengelt het ontwerp en leidt af van uw bericht.
Huh? Ik heb al die tijd doorgebracht met het leren van CSS en nu moet ik teruggaan naar de tabellen? Als het op e-mailontwerp aankomt, zijn de tabellen net zo populair als in 2003 - ze komen het dichtst in de buurt van de normen die we hebben.
Een paar dingen om op te letten:
Notitie: Je achtergrondafbeeldingen gedragen zich alsof ze zijn betegeld ... dus plan dienovereenkomstig.
Ik dacht het ook niet.
Sommige populaire e-mailclients negeren de code in uw head-tags. Gmail en Hotmail zijn bepaalde boosdoeners die in je opkomen.
Met uw opmaak in tabelformaat ingesteld, is het tijd om stijlen toe te passen op uw tekst en afbeeldingen.
Hier zijn enkele tips en trucs om er zeker van te zijn dat uw bericht er bijna identiek uitziet
browser:
Wist u dat de onderwerpregel van elke e-mail die naar een Gmail-account wordt verzonden, wordt gevolgd door de eerste tekstfragmenten in die specifieke e-mail??
Waarom zou u dit niet in uw voordeel gebruiken!
Hierboven ziet u een afbeelding uit mijn Gmail-inbox.
Beide nieuwsbrieven hebben dezelfde header-inhoud.
Slechts één verschil - Nieuwsbrief 1 maakt gebruik van de inbox-indeling van Gmail.
Hier is hoe ik het deed:
Plaats een afbeelding van 1px x 1px als het allereerste element in uw e-mail. Wikkel de afbeelding in span-tags in die de kleur van het lettertype instellen op dezelfde als de achtergrond. Welke tekst u ook in de ALT-tags voor uw 1px x 1px-afbeelding plaatst, vervangt nu dat Google-fragment in de inbox van de gebruiker.
Het is zo eenvoudig als dat! Dit subtiele verschil zal je boodschap onderscheiden van andere e-mails in de inbox van de lezer.
Ik heb mijn best gedaan om enkele dingen te delen die ik doe bij het maken van HTML-e-mails. Het is jouw beurt!
Hoe gaat het met het ontwerpen, coderen en testen van uw e-mailcampagnes?
Alle aanbevelingen, tips of trucs die u zou willen toevoegen, zullen zeer op prijs worden gesteld door uw collega-ontwerpgemeenschap.
Accentsconagua