HANDLEIDING VORMGEVING TEMPLATES

Maat: px

Weergave met pagina beginnen:

Download "HANDLEIDING VORMGEVING E-MAIL TEMPLATES"

Willem van den Pol
8 jaren geleden
Aantal bezoeken:

2 Inhoudsopgave H1 H2 H3 Voorwoord... 2 Een nieuwsbrief ontwerpen Wat we verwachten De breedte van je ontwerp De indeling van je ontwerp Achtergrondafbeeldingen Lettertype Flexibiliteit Vaste elementen... 5 Checklist... 7 Vormgeving templates 1

.. 3 2.4 Achtergrondafbeeldingen... 4 2.5 Lettertype... 5 2.6 Flexibiliteit.

3 H1 Voorwoord Het ontwerpen van een 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 templates 2

Omdat scripts en veel style-sheets niet gebruikt kunnen worden, ben je

4 H2 Een 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 wordt op de desktop bijna nooit over de hele breedtee van je scherm getoond.. Vaak heb je links van de nog je inbox met daarin een overzicht van alle ontvangen s. Daarom raden wij aan de smal te houdenn met een maximale breedte van 650 pixels. Als jee 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 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 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 l afkomstig is Afbeeldingen en tekst In een ontvangen 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 , 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 templates 3

Alle tekst moet in aanpasbare tekstlagen staan, zodat de tekstopmaak (lettertype, grootte, kleur, regelhoogte) ) gemakkelijk achterhaald kan worden. 2.

5 De snippet Verschillende clients tonen naastt je onderwerpregel ook de eerste paar woorden tekst in je voordat de geopend is, deze noemen n we de snippet. Gmail, Mac Mail, Yahoo en de app van de iphone en ipad plaatsen deze tekst onder je onderwerpregel, Outlook laat deze tekst zien als je ontvangt. Hiervan kan je gebruik maken door bovenaan je 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 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 templates 4

Hiervan kan je gebruik maken door bovenaan je e-mail een korte teaserr te plaatsenn die de lezer nieuwsgierig maakt naar het bericht.

6 2.5 Lettertype Een toont alleen lettertypes die de ontvanger heeft. Voor websites bestaan er manierer om dit te omzeilen, maar die werken niet in . 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 s. 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 template bevat een aantal vaste elementen. Neem deze d op in het ontwerp: 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 De Lees online -link biedt de lezer de optie om de in een internetbrowser te openen. De afmeldlink staat bovenin om ervoor te zorgen dat een lezer minder snel gebruik maakt van knoppen als Ongewenste off Rapporteer als spam in de client. Vormgeving templates 5

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.

7 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 Social media Bij elk artikel staan social media-iconen n. Deze verschijnen alleen bij een artikel als degene die de 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 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 templates 6

Deze verschijnen alleen bij een artikel als degene die de e-mail verstuurt zelf in het bericht aangeeft dat dit artikel gedeeld mag worden.

8 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 templates 7

Kan het ontwerp exact omgezet wordenn zoals het er nu uitziet? Zijn alle vaste elementen die de klant gaat gebruiken aanwezig?

Vergelijkbare documenten

Naast deze specificaties zijn deze de volgende opzetten in PSD formaat een goede basis om mee aan de slag te gaan: Desktop Mobiel

Naast deze specificaties zijn deze de volgende opzetten in PSD formaat een goede basis om mee aan de slag te gaan: Desktop Mobiel Design aanleveren Zelf een design voor een nieuw e-mailtemplate aanleveren welke door ons moet worden omgezet in code? Houd dan rekening met specificaties en beperkingen die hierop van toepassing zijn.