HANDLEIDING VORMGEVING E-MAIL TEMPLATES
copyright 2012 Blinker BV
Inh houdsop pgave H1 Voorwoord......................................................................................... 2 H2 Een e-mail nieuwsbrief n ontwerpen ............................................................ 3 2.1 Wat we verwachten n ........................................................................ 3 2.2 De bree edte van je ontwerp o ................................................................ 3 2.3 De indeling van je ontwerp o ................................................................ 3 grondafbeeld dingen .................................................................. 4 2.4 Achterg 2.5 Lettertyype .................................................................................... 5 2.6 Flexibiliiteit .................................................................................. 5 2.7 Vaste elementen ............................................................................ 5 H3 Checklist........................................................................................... 7
Vorrmgeving E-mail templates
1
H1 Vo oorwoorrd Het ontwerpen van v een e-m mail template e is iets heel anders dan het ontwerppen van een web bsite. Omdatt scripts en veel v style-she eets niet geb bruikt kunne en worden, bben je beperkt in de mogelijkhede m n van je ontw werp. In dit document le eggen we uitt wat er wel mogelijk is.
Vorrmgeving E-mail templates
2
H2 Ee en e-maiil nieuwsbrief ontwerpe en 2.1
Wat we verw wachten Als jje een ontwe erp aanleverrt is het belaangrijk dat het h helemaal af is. Dit onntwerp zal worden omgezet naar het te emplate. He t ontwerp moet m worden aangeleverdd als and, opgedee eld in versch hillende lage en en opgemaakt in RGB kleuren. Phottoshop besta Alle e tekst moet in aanpasbare tekstlageen staan, zod dat de teksto opmaak (letttertype, groo otte, kleur, regelhoogte) r ) gemakkelij k achterhaald kan worde en.
2.2
De breedte van v je ontw werp Een e-mail word dt op de desk ktop bijna noooit over de h hele breedte e van je sche erm getoond.. Vaak heb je liinks van de e-mail e nog je e inbox met daarin een overzicht va an alle ontva angen e-maills. Daarom rade en wij aan de e e-mail sma al te houden n met een maxximale breed dte van 650 pixels. p Als je e e-mail veell op mobiel gelezen g word dt, kan je de eze het bestte nog smalle er maken. We W raden dan n 480 pixe els aan.
2.3
De indeling van v je ontw werp E-mail wordt op p verschillend de schermen n in verschillende programma's bekekken. Voor mmige ontvan ngers valt de e rechterkantt buiten bee eld, voor anderen de ondderkant. som Het enige deel van v je nieuw wsbrief dat vooor iedereen n direct geto oond wordt iss de linker bove enhoek. Dit is de plaats om je lezer te overtuige en de e-mail te lezen. Zoorg dat je in deze hoek de e lezer met nuttige n inform matie en we ervende tekstten verleidt.. Plaats in e hoek ook je logo of naam, zodat de e lezer direc ct ziet van wie w de e-maill afkomstig deze is.
2.3..1
Afbeeld dingen en tekst
In een ontvange en e-mail worden afbeeld dingen niet altijd a direct getoond, zoorg er voor ap duidelijk is i zonder afb beeldingen. Tekst T met op pvallende kooppen is dat je boodscha hierrvoor ideaal. Dit geldt met name vooor de eerder genoemde linker bovenhhoek van je e-m mail, maar is ook op de re est van het b bericht van toepassing. t ok niet te vee el tekst plaaatst. De gemiddelde ontv vanger zit nieet te Let op dat je oo wacchten op lang ge verhalen, hou je tekstt kort. Een handige h meth hode om de juiste hoevveelheid te krijgen: Bren ng je tekst t erug tot hett minimum. Schrap S hiervaan de helfft.
Vorrmgeving E-mail templates
3
2.3..2
De snipp pet
Versschillende e--mail clients tonen naastt je onderwe erpregel ook de eerste paaar woo orden tekst in je e-mail voordat v de e e-mail geopend is, deze noemen n we dde snippet. Gma ail, Mac Maill, Yahoo en de d e-mail ap pp van de iPh hone en iPad plaatsen deeze tekst onde er je onderw werpregel, Outlook O laat d deze tekst zien als je e-m mail ontvanggt. Hiervan kan je gebruik maken m door bovenaan b je e-mail een korte teaserr te plaatsenn die de leze er nieuwsgierrig maakt na aar het bericcht. Tip:: Plaats in de e snippet een link naar j e call-to-acttion om de le ezer snel binnnen te halen.
2.4
Ach htergronda afbeelding gen Wee es voorzichtig met achtergrondafbee eldingen. Een n achtergron ndafbeeldingg is een afbe eelding waarr iets anders overheen sttaat. Sinds Outlook O 2007 laat Outlookk deze afbe eeldingen nie et zien. Outllook is de me eest gebruik kte e-mail cliient in de zaakelijke marrkt en wordt ook door co onsumenten ggebruikt. e alternatiieve Als jje toch een achtergrondafbeelding ggebruikt, zorrg dan voor een achttergrondkleu ur. Ontvange ers met Outloook zullen dan deze achttergrondkleuur zien terw wijl andere ontvangers o de achtergron ndafbeelding g zien. ptie voor achtergrondafb eeldingen. Outlook O acce epteert wel eeen Er iss nog een op achttergrondafbe eelding in de e bodytag. D Dit betekent dat de afbee elding achterr het hele tem mplate komt te t staan. Deze afbeeldin ng zal zich alls een tegelttje herhalen tot de hele achttergrond gevvuld is. Gebrruik dus een achtergrond dafbeelding die d er goed uuitziet als hij zzich steeds herhaalt. h
en achtergron ndafbeeldingg die niet mooi m herhaaltt Voorbeeld 1: Ee
Voorbeeld 2: Ee en achtergron ndafbeeldingg die wel mo ooi herhaalt
Vorrmgeving E-mail templates
4
2.5
Letttertype Een e-mail toont alleen letttertypes die de ontvange er heeft. Voo or websites bbestaan er man nierer om ditt te omzeilen n, maar die w werken niet in e-mail. Daarom D makeen we gebrruik van een n font stack: Een rij verscchillende letttertypen die e van voor naaar achter worden nagelop pen. Als de ontvanger hett eerste letttertype heeftt wordt die ggebruikt, ers de tweed de en zo voo ort. De volge ende font-sta acks kunnen in het ontweerp ande gebrruikt worden n.
Aria al, Helvetica a, sans-serif Aria al Black, Gadget, sa ans-serif Com mic Sans MS S, cursive Cou urier New w, Courier r, monospa ace Geo orgia, serif Impact, Charco oal, sans-se erif Luc cida Cons sole, Mona aco, monos pace Luc cida Sans Unicode, U Lu ucida Gran nde, sans-se erif Palaatino Linoty ype, Book Antiqua, A Paalatino, serif Tah homa, Gene eva, sans-se erif Tim mes New Rom man, Times, serif Treb buchet MS, Helvetica, sans-serif Verrdana, Gen neva, sans-sserif
2.6
Fle exibiliteit Een template is de basis voo or verschillen nde e-mails.. Let op dat je j ontwerp oook gescchikt is voor een bericht dat veel lan nger of juist veel korter is. i Zorg dus vvoor een flexxibele opmaa ak.
2.7
Vasste elemen nten Een e-mail temp plate bevat een e aantal vvaste elemen nten. Neem deze d op in heet ontw werp: 2.7..1
De pre-header
Bove enaan een te emplate plaa atsen we een n korte tease er, een link naar de onli ne versie en e een afmeldlink. e teaser worrdt getoond aals snippet, hierover lees je meer in 2.3.2. • De korte • De “Lee es online”-lin nk biedt de l ezer de optiie om de e-m mail in een internettbrowser te openen. o • De afme eldlink staat bovenin om ervoor te zo orgen dat ee en lezer mindder snel gebruik maakt van knoppen k als “Ongewenstte e-mail” off “Rapporteeer als spam” in de e-mail client.
Vorrmgeving E-mail templates
5
2.7..2
Lees ve erder
Deze e link staat bij b elk artike el. Hiermee kan de lezerr een landing gspagina mett meer info ormatie of de e rest van he et artikel bezzoeken. Dit houdt h de nie euwsbrief ko rt en bren ngt de lezer naar de web bsite. 2.7..3
Social media m
Bij e elk artikel sttaan social media-iconen m n. Deze versc chijnen allee en bij een arrtikel als dege ene die de e-mail e verstu uurt zelf in hhet bericht aangeeft dat dit artikel ggedeeld magg worden. Wa anneer de le ezer op een iicoon klikt, deelt d hij een n gekozen linnk van het artikkel in het do oor hem geko ozen sociale netwerk. 2.7..4
De foote er
In de footer is er e ruimte voo or bedrijfs- e en contactinformatie, ee en optionele colofon en en", "Mijn geggevens", "Aanmelden" en n "Afmelden"". de links "Websitte", "Reagere
Vorrmgeving E-mail templates
6
H3 Ch hecklist Geb bruik deze ch hecklist om te t controlere en of het onttwerp aan allle eisen volddoet.
Eise en voor een n ontwerp Is he et bestand een e .PSD besttand? Besttaat het besttand uit mee erdere lagenn, waaronderr bewerkbare e tekstlagen?? Is he et ontwerp niet n breder dan d 650 (dessktop) of 480 0 (mobiel) pix xels? Kan het ontwerp p exact omgezet worden n zoals het er nu uitziet? Zijn n alle vaste elementen e diie de klant ggaat gebruike en aanwezig? (pre e-header, soccial media, footer) f Is allle nodige informatie voo or het omzettten van hett ontwerp bekend? Denk hierrbij aan locaties van link ks, indeling te emplate, etc c. Is err rekening ge ehouden met de beperkiingen van ac chtergrondafbeeldingen?
Vorrmgeving E-mail templates
7
