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. Naast deze specificaties zijn deze de volgende opzetten in PSD formaat een goede basis om mee aan de slag te gaan: Desktop Mobiel Aanleveren Benodigdheden Een aangeleverd ontwerp moet helemaal af zijn. Dit ontwerp wordt 1-op-1 omgezet naar een e- mailtemplate. Het ontwerp moet aan de volgende spelregels voldoen: Aanleveren als als Photoshop-bestand Opgedeeld in verschillende lagen Resolutie van 72 dpi, in RGB kleuren Alle tekst in aanpasbare tekstlagen Wij gebruiken alle zichtbare lagen in het uiteindelijke template. Als het template mobiel geoptimaliseerd wordt, dan verwachten we een apart mobiel ontwerp. Breedte Een e-mail wordt op de desktop van een ontvanger niet over de gehele breedte van het beeldscherm getoond. Vaak bevat een inbox meerdere elementen die de e-mail versmallen. Daarom raden wij aan de e-mail smal te houden met een maximale breedte van 600 tot 650 pixels. E-mail wordt op verschillende schermen in verschillende programma's bekeken. Voor sommige ontvangers valt de rechterkant buiten beeld, voor anderen de onderkant. Het enige deel dat voor iedereen direct getoond wordt is de linker bovenhoek. Dit is de plek om je lezer te overtuigen van de relevantie van het bericht. Zorg dus dat je in deze hoek direct nuttige informatie aanbiedt en plaats hier ook je logo of bedrijfsnaam, zodat de lezer direct ziet van wie de e-mail afkomstig is. Variabele inhoud Afhankelijk van het beoogde doel kan een e-mailtemplate zich soms in verregaande mate dynamisch gedragen, bijvoorbeeld doordat bepalen onderdelen van de inhoud optioneel zijn, in verschillende varianten worden gebruikt, of meerdere keren worden herhaald. Neem in het ontwerp dus alle contentblokken en -varianten op die eventueel nodig zijn. Header en Footer https://flowmailer.com/kb/ 1/5 Printed on 2017-10-09 19:28
Snippet Verschillende e-mail clients tonen naast de onderwerpregel ook de eerste paar woorden van de inhoud. Wat hier wordt getoond kunnen we beinvloeden door een korte introductieregel bovenaan te plaatsen; dit noemen we de snippet. Veel e-mail clients plaatsen deze tekst onder je onderwerpregel. Outlook laat deze tekst bovendien zien in de notificatie als je e-mail ontvangt. Om gebruik te maken van de snippet dient er bovenin het design een mogelijkheid te zijn waar een zin geplaatst kan worden. Let op: deze zin dient als eerste element weergegeven te worden. Een logo of andere onderdelen uit de pre-header mogen pas na de snippet worden getoond. Header De header is een vast element in het template. Neem in de header in ieder geval een logo op en eventueel andere huisstijlelementen of verwijzingen naar bijvoorbeeld social media. Het toevoegen van een 'minimenu' variant welke verwijst naar de eigen website zorgt voor nog meer herkenbaarheid en verkeer terug naar de website. Footer In de footer is er ruimte voor bedrijfs- en contactinformatie. Voor commerciele berichten geldt volgens de reclamecode van 2012 dat de lezer gemakkelijk contact op moet kunnen nemen met de afzender vanuit de e-mail. Content Tekst Voorkom het gebruik van grote contentblokken met te veel tekst en maak gebruik van een "Lees meer" link of button om door te verwijzen naar aanvullende informatie. Het voordeel hiervan is dat het klikgedrag van je lezer inzichtelijk wordt en hieruit kan concluderen wat de ontvangers interessant vinden. Ronde hoeken Als jouw ontwerp ronde hoeken bevat worden deze in het template gemaakt door middel van afbeeldingen. Het is dus niet mogelijk om content in deze ronde hoeken te plaatsen. Dummy links Neem in elk tekstblok een dummylink op zodat wij kunnen herleiden hoe eventuele tekstlinks eruit moeten zien. Achtergrondafbeeldingen Het is mogelijk om een achtergrondafbeelding te gebruiken achter het hele bericht. Deze afbeelding zal zich als een tegeltje herhalen tot de hele achtergrond gevuld is. Gebruik dus een https://flowmailer.com/kb/ 2/5 Printed on 2017-10-09 19:28
achtergrondafbeelding die er goed uitziet als hij zich steeds herhaalt. Sinds Outlook 2007 laat Outlook geen achtergrondafbeeldingen zien achter specifieke elementen, zoals een tabel. Dat toch gewenst is, zorg dan voor een alternatieve achtergrondkleur. Ontvangers met Outlook zullen dan deze achtergrondkleur zien terwijl andere ontvangers de achtergrondafbeelding zien. Verhouding en afmetingen In een ontvangen e-mail worden afbeeldingen niet altijd direct getoond. Zorg ervoor dat de boodschap ook duidelijk is zonder afbeeldingen. Afbeeldingen In een e-mailtemplate staat de breedte van de afbeeldingen vast, de hoogte is variabel. De afbeeldingen worden daarnaast altijd met scherpe hoeken weergegeven. Eventuele afrondingen moeten dus in de afbeelding zelf worden toegepast. Lettertypes Een e-mail toont alleen lettertypes die de ontvanger op zijn computer heeft. Voor websites bestaan er manieren om dit te omzeilen, maar die werken niet in e-mail. Daarom maken we gebruik van een groep met lettertypes: een rij verschillende lettertypes die van voor naar achter worden nagelopen. Als de ontvanger het eerste lettertype heeft wordt die gebruikt, anders de tweede enzovoorts. De volgende groepen kunnen in het ontwerp gebruikt worden: Arial, Helvetica, 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 Toman, Times, serif Trebuchet MS, Helvetica, sans-serif Verdana, Geneva, sans-serif Wij adviseren een pixelgrootte tussen de 11 en de 14 pixels. Mobiel design Breedte De mobiele weergave is smaller dan de weergave op desktop. Een e-mail wordt op de meeste mobiele apparaten het beste weergegeven als deze 320 pixels breed is. Naast het desktop ontwerp ontvangen we dus ook graag een mobiel ontwerp zodat we kunnen herleiden hoe het template op een https://flowmailer.com/kb/ 3/5 Printed on 2017-10-09 19:28
mobiel apparaat moet reageren. Header De elementen van de header nemen vaak onnodig veel ruimte in op een mobiel apparaat waardoor ze de content naar onder duwen. Daarom adviseren wij om kritisch te kijken naar de onderdelen van de header en wellicht te kiezen niet alles weer te geven op de mobiele versie, zoals menu items of een inhoudsopgave. Menu items kunnen bijvoorbeeld ook onder- in plaats van naast elkaar worden weergegeven. Footer In de footer zijn vaak, net als in de desktop versie, zaken zoals contactgegevens en servicelinks terug te vinden. In de mobiele versie kunnen deze onder elkaar geplaatst worden. Zorg er voor dat hier genoeg ruimte tussen de links zit, zodat de lezer niet per ongeluk de verkeerde link aantikt. Content Omdat e-mails op mobiel smaller zijn, veranderen we de indeling van de contentblokken en afbeeldingen voor optimale leesbaarheid. De onderdelen van het template kunnen op verschillende manieren in de mobiele weergave aangepast worden: Tekstvlakken worden smaller. De lettergrootte zal gelijk blijven, maar de regels worden eerder afgebroken. Zo ontstaat een smaller maar langer tekstblok. Twee elementen die naast elkaar staan, komen onder elkaar te staan. Hierbij komt de rechter onder de linker te staan. Dit kunnen twee smalle artikelen naast elkaar zijn, maar ook tekst en een bijbehorende foto. Delen van het ontwerp die op de desktop zichtbaar zijn kunnen op mobiel verborgen worden. Links Een touchscreen is minder precies dan een muis. Zorg daarom dat je bij de mobiele versie genoeg ruimte tussen je links plaatst, zodat de gebruiker niet per ongeluk de verkeerde link aantikt. Zorg dat buttons over de gehele breedte van het mobiele scherm lopen en minimaal 30 pixels hoog zijn. Dit in verband met het aanklikken met wijsvinger of duim door de ontvanger. Afbeeldingen Op mobiel worden de afbeeldingen: Verkleind, de afbeelding zal dan in zijn geheel en naar ratio verkleind worden. Het is mogelijk om een deel van de afbeelding weg te laten vallen, maar dit kan niet visueel worden bewerkt door de gebruiker. Niet aangepast. Als een afbeelding op desktop minder breed is dan 320px, zal er op mobiel niets met de afmeting van deze afbeelding gebeuren. Vergroten van de afbeelding naar 320px komt namelijk de kwaliteit van de afbeelding niet ten goede. https://flowmailer.com/kb/ 4/5 Printed on 2017-10-09 19:28
From: https://flowmailer.com/kb/ - Flowmailer Knowledgebase Permanent link: https://flowmailer.com/kb/content/nederlands/services/designaanleveren Last update: 2016-04-21 15:18 https://flowmailer.com/kb/ 5/5 Printed on 2017-10-09 19:28