HANDLEIDING VORMGEVING E-MAIL TEMPLATES copyright 2012 Blinker BV
Inhoudsopgave H1 H2 H3 Voorwoord... 2 Een e-mail nieuwsbrief ontwerpen... 3 2.1 Wat we verwachten... 3 2.2 De breedte van je ontwerp... 3 2.3 De indeling van je ontwerp... 3 2.4 Achtergrondafbeeldingen... 4 2.5 Lettertype... 5 2.6 Flexibiliteit... 5 2.7 Vaste elementen... 5 Checklist... 7 Vormgeving E-mail templates 1
H1 Voorwoord Het ontwerpen van een e-mail templatee is iets heel anders dan het ontwerpen van een website. Omdat scripts en veel style-sheets niet gebruikt kunnen worden, ben je beperkt in de mogelijkheden van je ontwerp. In dit document leggen we uitt wat er wel mogelijk is. Vormgeving E-mail templates 2
H2 Een e-mail nieuwsbrief ontwerpen 2.1 Wat we verwachten Als je een ontwerp aanlevert is het belangrijk dat het helemaal af is. Dit ontwerp zal worden omgezet naar het emplate. Het ontwerp moet worden aangeleverdd als Photoshop bestand, opgedeeld in verschillende lagen en opgemaakt in RGB kleuren. Alle tekst moet in aanpasbare tekstlagen staan, zodat de tekstopmaak (lettertype, grootte, kleur, regelhoogte) ) gemakkelijk achterhaald kan worden. 2.2 De breedte van je ontwerp Een e-mail wordt op de desktop bijna nooit over de hele breedtee van je scherm getoond.. Vaak heb je links van de e-mail nog je inbox met daarin een overzicht van alle ontvangen e-mails. Daarom raden wij aan de e-mail smal te houdenn met een maximale breedte van 650 pixels. Als jee e-mail veel op mobiel gelezen wordt, kan je deze het beste nog smaller maken. We raden dann 480 pixels aan. 2.3 De indeling van je ontwerp E-mail wordt op verschillende schermenn in verschillende programma's bekeken. Voor sommige ontvangers valt de rechterkantt buiten beeld, voor anderen de onderkant. Het enige deel van je nieuwsbrief dat voor iedereen direct getoond wordt iss de linker bovenhoek. Dit is de plaats om je lezer te overtuigen de e-mail te lezen. Zorg dat je in deze hoek de lezer met nuttige informatie en wervende teksten verleidt.. Plaats in dezee hoek ook je logo of naam, zodat dee lezer direct ziet van wie w de e-maill afkomstig is. 2.3..1 Afbeeldingen en tekst In een ontvangen e-mail worden afbeeldingen niet altijd direct getoond, zorg er voor dat je boodschap duidelijk is i zonder afbeeldingen. Tekst met opvallende koppen is hiervoor ideaal. Dit geldt met name voor de eerder genoemde linker bovenhoek van je e-mail, maar is ook op de rest van het bericht van toepassing. Let op dat je ook niet te veel tekst plaatst. De gemiddelde ontvanger zit niet te wachten op lange verhalen, hou je tekstt kort. Een handige methode om de juiste hoeveelheid te krijgen: Breng je tekst terug tot het minimum. Schrap S hiervan de helft. Vormgeving E-mail templates 3
2.3..2 De snippet Verschillende e-mail clients tonen naastt je onderwerpregel ook de eerste paar woorden tekst in je e-mail voordat de e-mail geopend is, deze noemen n we de snippet. Gmail, Mac Mail, Yahoo en de e-mail app van de iphone en ipad plaatsen deze tekst onder je onderwerpregel, Outlook laat deze tekst zien als je e-mail ontvangt. Hiervan kan je gebruik maken door bovenaan je e-mail een korte teaserr te plaatsenn die de lezer nieuwsgierig maakt naar het bericht. Tip: Plaats in de snippet een link naar je call-to-action om de lezer snel binnen te halen. 2.4 Achtergrondafbeeldingen Wees voorzichtig met achtergrondafbeeldingen. Een achtergrondafbeelding g is een afbeelding waar iets anders overheen staat. Sinds Outlook 2007 laat Outlookk deze afbeeldingen niet zien. Outlook is de meest gebruikte e-mail client in de zakelijke markt en wordt ook door consumenten gebruikt. Als je toch een achtergrondafbeelding gebruikt, zorg dan voor een e alternatieve achtergrondkleur. Ontvangers met Outlook zullen dan deze achtergrondkleur zien terwijl andere ontvangers de achtergrondafbeelding zien. Er is nog een optie voor achtergrondafbeeldingen. Outlook accepteert wel een achtergrondafbeelding in de bodytag. Dit betekent dat de afbeelding achterr het hele template komt te staan. Deze afbeelding zal zich als een tegeltje herhalen tot de hele achtergrond gevuld is. Gebruik dus een achtergrondafbeelding die d er goed uitziet als hij zich steeds herhaalt. Voorbeeld 1: Een achtergrondafbeeldingg die niet mooi herhaaltt Voorbeeld 2: Een achtergrondafbeeldingg die wel mooi herhaalt Vormgeving E-mail templates 4
2.5 Lettertype Een e-mail toont alleen lettertypes die de ontvanger heeft. Voor websites bestaan er manierer om dit te omzeilen, maar die werken niet in e-mail. Daarom D maken we gebruik van een font stack: Een rij verschillende lettertypen diee van voor naar achter worden nagelopen. Als de ontvanger hett eerste lettertype heeftt wordt die gebruikt, anders de tweede en zo voort. De volgende font-stacks kunnen in het ontwerp gebruikt worden. Arial, Helvetica, sans-serif Arial Black, Gadget, sans-serif Comic Sans MS, cursive Courier New, Courier, monospace Georgia, serif Impact, Charcoal, sans-serif Lucida Console, Monaco, monospace Lucida Sans Unicode, Lucida Grande, sans-serif Palatino Linotype, Book Antiqua, Palatino, serif Tahoma, Geneva, sans-serif Times New Roman, Times, serif Trebuchet MS, Helvetica, sans-serif Verdana, Geneva, sans-serif 2.6 Flexibiliteit Een template is de basis voor verschillende e-mails. Let op dat je j ontwerp ook geschikt is voor een bericht dat veel langer of juist veel korter is. i Zorg dus voor een flexibele opmaak. 2.7 Vaste elementen Een e-mail template bevat een aantal vaste elementen. Neem deze d op in het ontwerp: 2.7..1 De pre-header een template plaatsen we eenn korte teaser, een link naar de online versie Bovenaan en een afmeldlink. De korte teaser wordt getoond als snippet, hierover lees je meer in 2.3.2. De Lees online -link biedt de lezer de optie om de e-mail in een internetbrowser te openen. De afmeldlink staat bovenin om ervoor te zorgen dat een lezer minder snel gebruik maakt van knoppen als Ongewenste e-mail off Rapporteer als spam in de e-mail client. Vormgeving E-mail templates 5
2.7..2 Lees verder Dezee link staat bij elk artikel. Hiermee kan de lezer een landingspagina mett meer informatie of de rest van het artikel bezoeken. Dit houdt de nieuwsbrief kort en brengt de lezer naar de website. 2.7..3 Social media Bij elk artikel staan social media-iconen n. Deze verschijnen alleen bij een artikel als degene die de e-mail verstuurt zelf in het bericht aangeeft dat dit artikel gedeeld mag worden. Wanneer de lezer op een icoon klikt, deelt hij eenn gekozen link van het artikel in het door hem gekozen sociale netwerk. 2.7..4 De footer In de footer is er ruimte voor bedrijfs- en contactinformatie, een optionele colofon en de links "Website", "Reageren", "Mijn gegevens", "Aanmelden" enn "Afmelden". Vormgeving E-mail templates 6
H3 Checklist Gebruik deze checklist om te t controleren of het ontwerp aan alle eisen voldoet. Eisen voor een ontwerp Is het bestand een.psd bestand? Bestaat het bestand uit meerdere lagen, waaronderr bewerkbaree tekstlagen?? Is het ontwerp niet breder dan 650 (desktop) of 480 (mobiel) pixels? Kan het ontwerp exact omgezet wordenn zoals het er nu uitziet? Zijn alle vaste elementen die de klant gaat gebruiken aanwezig? (pre-header, social media, footer) f Is alle nodige informatie voor het omzetten van het ontwerp bekend? Denk hierbij aan locaties van links, indeling template, etc. Is er rekening gehouden met de beperkingen van achtergrondafbeeldingen? Vormgeving E-mail templates 7