9 trucs om te ontwerpen De perfecte HTML-nieuwsbrief

Een e-mailnieuwsbrief is de perfecte manier om contact te houden met uw klanten of volgers. Vaak heeft uw bedrijf of website talrijke productupdates of mogelijk aankomende evenementen die u wilt delen. Het is altijd mogelijk om nieuwe informatie op uw blog of op sociale mediastreams te plaatsen, maar uw doelgroep kan alleen zo ver gaan om u te bereiken. In dit geval is e-mail zeker geen dode technologie, maar een onbenut potentieel.

Het maken en verzenden van een nieuwsbrief is een stuk eenvoudiger dan je denkt, maar om een aangepaste sjabloon te ontwerpen en je eigen code te maken - dit kan wat langer duren.

We hebben een aantal fantastische tips samengesteld om je te helpen hoogwaardige HTML-nieuwsbrieven te ontwerpen zoals nooit tevoren. Zelfs als je een nieuweling bent voor het onderwerp, vind je ongetwijfeld waardevolle informatie om je op weg te helpen in het e-mailmarketingproces.

Doelen van een nieuwsbrief

Voordat we ingaan op de ontwerpaspecten, moeten we uw doel voor het maken van een nieuwsbrief verduidelijken. Afhankelijk van het type website dat u gebruikt, kan de informatie in uw nieuwsbrief dramatisch afwijken van andere, maar het belangrijkste doel van een nieuwsbrief is om handige updates rechtstreeks aan de inbox van uw lezer te leveren.

Zware internetgebruikers zullen hun e-mail waarschijnlijk meer dan twee keer per dag checken. Zelfs degenen die constant bezig zijn, zullen de tijd nemen om hun berichten minstens één keer per dag door te nemen. Dit is de perfecte tijd om aandacht trekken zelfs zonder dat u naar uw site moet gaan. Zelfs als niemand door uw links klikt, is de informatie dat wel nog steeds ontvangen, wat geweldig is voor het bouwen van een merknaam.

Overweeg enkele van de onderwerpen die u in uw ontwerp zou moeten aanbieden. Neemt u links op om u aan te melden voor uw service; mogelijk blogkoppelingen of meest recent gepubliceerde artikelen op uw site? De lay-out van uw nieuwsbrief zal weerspiegelen hoe u wenst dat uw lezers reageren, maar uiteindelijk wilt u interessante interesses doorgeven en enkele interessante weetjes overhandigen aan de massa's..

1. Gebruik tabellen in uw lay-outs

Dit lijkt misschien een beetje tegenstrijdig met de huidige moderne webstandaarden, maar e-mails zijn nog steeds archaïsch in hun rendering-engines, dus je moet bouwen naar oudere modellen. Helaas zijn tabellen dat wel de makkelijkste manier om alles goed te laten werken tussen de verschillende e-mailclients. Afhankelijk van uw kennis van het bouwen van op tabellen gebaseerde lay-outs, komt dit mogelijk als goed nieuws!

Je kunt je ook afvragen waarom div en andere blokelementen zijn niet zo'n goed idee. De meeste e-mailclients zijn gebouwd om externe CSS weg te halen inhoud. Dit betekent dat je niet veel kunt gebruiken, behalve voor inline CSS (en zelfs volledige ondersteuning is belachelijk). Klanten zoals Microsoft Outlook 2007 en Gmail van Google hebben zeer slechte ondersteuning voor vlottende elementen en directe positionering.

De beste oplossing zou zijn om nest meerdere tafels in elkaar. Opvulling en marges zijn niet ingesteld op een bepaalde schaal tussen veel e-mailclients. Dit is een reden om bij het gebruik te blijven width = "value" op al uw tabelcelelementen. Deze geven altijd dezelfde breedte weer, ongeacht welke e-mailclient uw lezers gebruiken, dus het is veel veiliger en meer consistent om vulling en marges in te stellen met behulp van lege tabelcellen.

2. Positionering met vaste breedte

Je hebt een paar opties bij het maken van de concepten van je nieuwsbrieflay-out, maar de beste optie is om te volgen om vaste breedtes in te stellen voor uw bevattende tabel. Er zijn veel verschillende monitorresoluties - u zult niet iedereen tevreden kunnen stellen. Als u geen specifieke elementen met statische breedten heeft, kunt u deze altijd gebruiken width = "100%" op uw tabel. Hiermee kunt u uw inhoud de volledige breedte van alle e-mailclients vullen.

Voor veel mensen is deze methode echter iets te laks. Constructieve nieuwsbrieven vereist in de meeste gevallen een vaste breedte, vooral als u banners en afbeeldingen gebruikt die op een bepaald formaat zijn ingesteld. Ik raad aan om mee te werken 500px - 600px maximale documentbreedte. De horizontale schermgrootte van de iPhone en sommige BlackBerry-modellen zijn beperkt tot 320px, dus zelfs bij 500px zal uw e-mailsjabloon verkleind om goed te passen.

Gezien het feit dat veel mobiele gebruikers ervoor kiezen om e-mail zonder HTML toch te bekijken, zou dit geen enorm probleem moeten zijn. Gebruikers van desktop- en webmailclients zullen waarschijnlijk een vergelijkbare configuratie ervaren, ongeacht het besturingssysteem dat ze gebruiken. Bij twijfel maak een paar sjabloonontwerpen en kies degene die je het beste bevalt!

3. Pixeleenheden

Tenzij u vloeibare elementen in uw nieuwsbrief gebruikt, is het waarschijnlijk dat u een paar dingen moet opmeten. Probeer het erin te houden pixels (px) in plaats van in een ander type eenheid. Percentages kunnen gemakkelijk verward raken met de vele webmailclients en softwarevensters. Met minder pagina-elementen kunnen vloeiende lay-outs ongeschonden verschijnen, zij het met een paar bugs.

Maar pixels zijn altijd zeker. Werkend binnen de maximale breedte van 600 px, kun je eigenlijk heel veel inhoud erin passen. Belichting is gemakkelijker als u uw lay-outs in twee of drie kolommen splitst en altijd uw maten in pixels schrijft. De enige uitzondering kan zijn lettergroottes waar ems kan uw lezers beter ondersteunen, maar em de grootte zal op een vergelijkbare manier verschillen, percentages zouden dat ook zijn houd voor de eenvoud vast aan pixelgebaseerde alignments.

4. De mogelijkheden met CSS

Het lijkt misschien alsof e-mail ontwerpen erop gericht is om het gebruik van CSS-stijlen te vernietigen. Hoewel er veel niet-ondersteunde functies zijn, is CSS in veel gevallen nog steeds perfect acceptabel. Campagnemonitor heeft een prachtige tabel met ondersteunde CSS-eigenschappen die per e-mailclient worden vermeld. Allen zullen de basisbeginselen ondersteunen zoals font-family en lettertype, zodat je het kunt overslaan label als je dat wenst.

Wees voorzichtig met uw lettertypestijlen om de grenzen niet te ver te verleggen. Als u zich ongemakkelijk voelt met inline stijlen, is het altijd mogelijk om de HTML-lettertypetag te gebruiken, ook al is deze al verouderd. Als u een CSS-ontwerper bent, hoeft u het systeem niet te sluiten, maar elke verkorte CSS-codering kan buggy-ontwerpen tot gevolg hebben. Als voorbeeld de lettertype: 12px / 14px Arial, schreefloos; steno kan veel ruimte besparen, maar wordt niet volledig geaccepteerd voor e-mailontwerp, zelfs als het wordt gebruikt met inline-stijlen.

Zelfs je kleurkeuzes moet met de hand geschreven worden. Hex-kleuren zoals #ccc of # E3F moet volledig worden geschreven als #cccccc of # ee33ff, respectievelijk. Als je zonder CSS kunt bouwen wat je nodig hebt, zou ik dat pad aanbevelen, maar schrik niet volledig af van CSS in e-mailontwerpen, want in tegenstelling tot wat vaak wordt gedacht, wordt het in de meeste gevallen ondersteund.

5. Best practices van ankerlinks

Je zult zeker een aantal links in je nieuwsbrief willen opnemen. Dit kunnen uitgaande links zijn naar andere pagina's op internet of naar links die naar de populairste pagina's op uw website leiden. Bovendien zullen de meeste voetteksten een afmeldlink bevatten voor uw lezers om zich af te melden voor het e-mailproces, maar hoe moet u al deze links in uw ontwerp verwerken??

Wel moet als eerste worden opgemerkt dat e-mailclients erg kieskeurig zijn met hun ontwerpen. Velen zullen ervoor kiezen om uw linkstijlen te overschrijven, zelfs met inline CSS. Een leuke truc is om omvatten zowel inline-kleuren als een extra span-tag binnen het ankerelement. Als de kleur en vormgeving van uw links belangrijk zijn voor het algehele ontwerp, wilt u de extra voorzorgsmaatregelen nemen. Ik heb hieronder een klein codevoorbeeld toegevoegd:

wat linktekst

Zwevende effecten zijn niet ondersteund in Outlook 2007/2010, Gmail, iOS of Android. U wilt misschien nog steeds het a: hover stijl voor alle ondersteunende clients: Outlook 2000/2003, Hotmail, Apple Mail en Yahoo! mail, maar persoonlijk zie ik niet veel voordelen in de gedeeltelijke gebruikerservaring, omdat de ankerselectie niet zwaar wordt ondersteund, adviseer ik biedt slechts 2-3 linkkleuren om overal in uw ontwerp te gebruiken.

Als een vermoeden verwachten gebruikers ook dat uw links worden geopend in een nieuw tabblad of venster. In het ideale geval de target = "_ blank" attribuut zou voldoende moeten zijn voor alle browsers om deze functionaliteit te herkennen, en de opname van dit attribuut op uw ankerschakels mag e-mail software zoals Lotus Notes of Outlook niet negatief beïnvloeden.

6. Test in alle belangrijke klanten

Een recent onderzoek naar de meest populaire e-mailclients (uitgevoerd door Campaign Monitor) toont tien van de populairste e-mailclients van het afgelopen jaar. Het lijkt misschien een beetje vervelend, maar ontwerpers moeten de gewoonte krijgen om hun nieuwsbrieven te controleren op alle belangrijke e-mailclients, op zijn minst enkele van de meest voorkomende clients zoals Gmail, Hotmail of Yahoo! Mail.

Dit omvat niet alleen webmail, maar ook besturingssoftware op zowel Mac OS X als Windows. Ook volgens hun diagram iOS Mail en Android Beide zijn de afgelopen jaren in de top 10-lijst verschenen. In feite rangschikt de iPhone, iPod Touch en iPad Mail de nummer 2 meest populaire recht onder Outlook! Helaas is er geen manier om deze te testen zonder een van de apparaten te bezitten - dus je zult genoegen moeten nemen met andere opties.

Een bug met de mobiele ondersteuning komt in veel iPhone- en Android-modellen. Mobiele e-mailweergave zal vaak formaat van de tekst binnen uw sjabloon. Dit is misschien niet van invloed op je ontwerp, maar het kan voor sommige lezers vervelend zijn. De CSS gebruiken -webkit-text-size-adjust: geen;, zullen zorg voor een gelijkmatige standaardtekstgrootte voor alle ontleedmotoren zonder het te hoeven testen.

Als u vrienden of collega's kent die alternatieve software gebruiken, wilt u dat misschien vraag hun hulp bij het testen van de nieuwsbrief. Je kan of stuur ze een kopie van de e-mail om te controleren op hun apparaat of leen het apparaat om codeerfouten actief te verwijderen. Gelukkig biedt Outlook een Mac-installatieversie, dus je hoeft voor deze optimalisaties geen Windows-gebruiker op te sporen, maar als het gaat om Lotus Notes of Windows Mail, heb je misschien pech.

Het alternatief is om betaal voor een oplossing zoals Preview mijn e-mail, helaas bieden ze geen gratis demo-accounts, maar hun service staat bekend om het aanbieden van geweldige voorbeelden van uw ontwerp. E-mail op Acid is een vergelijkbare dienst die wel een gratis account aanbiedt, maar u niet laat testen op alle clients, wat het doel verslaat. Online renderingservices moeten handig zijn als u op de lange termijn veel bulletin-sjablonen wilt testen zonder het gebruik van alternatieve computers, maar deze zijn niet van fundamenteel belang, dus niet stress als je ze niet allemaal kunt testen!

7. Bied altijd web-gebaseerde weergaven aan

Lezers zullen uw e-mail niet altijd (of willen) kunnen bekijken. Het aanbieden van een andere versie ergens op het web geeft een gevoel van gemak en compatibiliteit. Dit proces kan niet volledig worden geautomatiseerd, tenzij u op zoek bent naar een platte tekst versie.

Op deze manier zou je dat doen verwijder alle HTML-tags van de lay-out van de nieuwsbrief. U zou links of stijlen voor niets kunnen opnemen. Alle inhoud zou eenvoudig zijn worden uitgelegd als een gewoon tekstbestand voor lezers zonder de weergavemogelijkheden. Dit is zeker een goed alternatief, maar als je een volledige webversie van dezelfde nieuwsbrief aanbiedt, is dit een goed alternatief neemt de schade weg die is veroorzaakt door een rendering-bug. De meeste lezers zullen een up-to-date webbrowser gebruiken, waarmee je je nieuwsbrief kunt stylen en bouwen tot in de perfectie.

Hoe je de pagina hebt ingesteld is helemaal jouw keuze. Sommige websites zullen dat doen wijdt een volledige blogpost aan het dupliceren van de inhoud van de e-mail, misschien met wat Extra informatie. Anderen zullen maak een aparte pagina buiten de hoofdwebsite zonder directe links in de navigatie. Deze methode kan nuttig zijn, omdat de lezers niet worden afgeleid door uw hoofdwebsjabloon of zijbalkinhoud.

8. Beeldinhoud toevoegen

Afbeeldingen zijn een andere reden om uw lezers een webgebaseerde oplossing aan te bieden. Standaard e-mailclients zijn ingesteld om afbeeldingen uit de inhoud te verwijderen. Als uw adres is toegevoegd aan een veilige lijst, worden alle afbeeldingen standaard weergegeven, maar de gebruiker moet deze opstelling accepteren dus het is zeker geen garantie. Net zorg ervoor dat afbeeldingen niet nodig zijn als onderdeel van de hoofdinhoud, maar opgenomen als een extra topping voor pagina-esthetiek.

Zodra u grafische afbeeldingen gaat exporteren, zijn er een paar tips om afbeeldingen specifiek voor e-mail te maken. Je wilt het altijd stel de kenmerken width en height in op uw img labels. Zonder deze specificaties op volgorde, sommige clients vervormen de beeldinhoud. Een alt tag zal ook nuttig zijn, zodat bezoekers weten wat de inhoud van de afbeelding bevat voordat deze wordt geladen.

Zoals eerder vermeld, kan het lastig zijn om de afbeeldingen in uw e-mail te plaatsen. Vermijd het gebruik van drijvers tegen elke prijs! De afbeelding align = "left" attribuut zal veel beter werken, of anders breng exacte tabelcellen in kaart om uw afbeeldingen aan de boven-, linker- of rechterkant van uw nieuwsbrief te plaatsen. Je zult niet in staat zijn om een perfecte match-up te krijgen met zoveel clients (met name mobiele clients), maar optimaliseer uw afbeeldingen en houd bestandsgroottes klein voor de beste resultaten.

Wat betreft de opslag van afbeeldingen, is het raadzaam dat u bewaar alle bestanden op uw eigen webserver. Dit is de betere optie in plaats van een andere imagehost te gebruiken of door de bestanden te uploaden naar een online nieuwsbriefdienst. Bovendien zou u dat moeten doen scheid de inhoud van uw nieuwsbrieven van de rest van uw afbeeldingen in een mappenstructuur zoals zo / Img / e-mail of / Img / email / 2011.

9. Vermijd de map Spam!

Dit kan moeilijk zijn om te horen, maar niet alle e-mailclients zijn vriendelijk voor nieuwsbrieven. Er worden elke dag miljarden e-mails verzonden en de meerderheid bevat spam of schadelijke inhoud. Het is dus duidelijk dat veiligheidsmaatregelen in de Inbox zijn ingebouwd om veiligheidsmaatregelen te treffen.

Maar als het gaat om internetmarketing, kun je gemakkelijk worden ontmoedigd om te zien dat je laatste nieuwsbrief eindigt met de rommel. Om de kans dat dit gebeurt te verkleinen, zou je dat moeten doen ruim je ontwerp op voor eenvoud. Maak geen vervelende afbeeldingen of blaas je titeltekst op met honderden zoekwoorden.

Probeer ook houd uw inhoud kort en on-topic. U hoeft geen volledige inhoud op te nemen voor al uw artikelen of pagina's. Probeer een zin of twee toe te voegen met een alternatieve link naar uw website in plaats van een lange lijst. De hoe meer uw e-mail eruitziet, hoe waarschijnlijker het is dat het spamcontrole doorstaat.

Nieuwsbrief Design Gallery

Wat is er leuker aan een artikel in een e-mailnieuwsbrief zonder een paar fantastische voorbeelden? Er zijn tal van ontwerpen en sjablonen voor e-mailnieuwsbrieven die u kunt checken in Google. HTML E-mail Galerij is een zeer populaire bron voor inspiratie.

Hieronder heb ik schermafbeeldingen van de vele nieuwsbrieven in de galerij van Campaign Monitor opgenomen. Hopelijk kunnen deze geweldige lay-outs u enkele geweldige ideeën bieden voor uw eigen ontwerpen.

Veel plezier met het ontwerpen van uw ideale nieuwsbrieven!

Alert voor bedrijven