Email Design | Responsive HTML slicen | Landingspagina's
More

E-mail leeft en doet het goed met meer dan 68% effectiviteit beter dan de meeste andere marketingkanalen.
Om het belang van e-mail te begrijpen, hadden wij in 2013 de standaard set best practices voor e-maildesign ontwikkeld.

Echter, om u te helpen een ongeëvenaarde e-mail ervaring te realiseren door middel van zeer visuele e-mail ontwerpen en foutloze code, presenteren wij de best practices met nieuwe ideeën voor e-mail ontwerpen.

Niet alleen responsive
Denk mobile first!

E-mails die op smartphones worden geopend is boven de 50% gestegen en groeit verder naar 67% als we alle
mobiele telefoons daarbij rekenen. Designen met een mobile first mentaliteit is essentieel.

Mobile Email Client App

Bepaal, bij de realisatie van het design, eerst het aantal applicaties van derden. Bijvoorbeeld, de native applicatie op de iPhone is Mail, terwijl Gmail, Yahoo!, Mailbox en Sparrow ook toepassingen van derden voor iOS aanbieden.

hybrid email

Gebruik een enkele kolom layout als de meerderheid van uw abonnees gebruikers van een derde partij zijn. Het formaat van een kolom is gemakkelijk leesbaar, terwijl twee of meer kolommen het kleine scherm "volproppen". Overweeg een hybride benadering om uw email responsive te tonen in de apps van derden die geen media-queries ondersteunen. Probeer dit hybride e-mail voorbeeld ontwikkeld door EmailMonks.

iphone email design

Design emails voor 320 en 480 px view. Update media queries die terugvallen bij een 320 px breakpoint naar 414 px voor de iPhone 6 Plus.

Video Email

Als u gebruik wilt maken van de videotag voor het afspelen van media in een e-mail, heroverweeg dan de strategie, vooral met iOS 8-gebruikers. Gebruik een stilstaande afbeelding met een speelknop. Voor anderen, gebruik de automatische video-achtergrond met fallbacks voor abonnees die worden bekeken in non-WebKit-programma's en Apple-devices! Probeer dit video e-mail voorbeeld ontwikkeld door EmailMonks.

Mobile Email Copy

Houd het body font type voor mobiele e-mail tussen 14 en 16 px houd de headers tussen 22 en 24 px. Vermijd afgebroken regels en koppeltekens in de mobiele e-mail copy.

CTA in Email

Gebruik minimaal 44*44 px voor de grootte van CTA's met voldoende witruimte eromheen. Indien mogelijk, zorg dat deze de volledige breedte bestrijkt en dat hij makkelijk klikbaar is.

Accordion Use in Email

Maak een informatiehiërarchie aan. Informatie die afwijkt van het hoofddoel van de e-mail, dient altijd na de hoofdinhoud van de e-mail en Call to Action (CTA's) te komen. Gebruik een accordeon om uitgebreide e-mails op te vullen met inhoud. Probeer onze accordeon in email.

Menus in email

Vermijd enorm aanwezige navigatie (onthoud, dit is niet een landingspagina). Zorg voor een intuïtieve navigatie en gebruik menu's in de email. Probeer menus in de email ontwikkeld door EmailMonks.

Imagery is the key to
highly visual emails.

Apple Email Images

Als de meeste van jouw e-mails worden geopend op Apple-apparaten, gebruik dan retina beelden. Verdubbel de normale afmeting van de afbeeldingen rond 1100 pixels en sla ze op op 5% kwaliteit. Dit zal de bestandsgrootte verminderen met 20% zonder kwaliteitsverlies.

Scale images in email

Zorg ervoor dat jouw foto's het juiste formaat hebben om te voorkomen dat ze pletten of uitrekken. Voor fluid e-mails, zorg ervoor dat ze kunnen schalen naar 599px.

background image in email

Het gebruik van achtergronden en knoppen als deze zullen helpen met het weergeven van achtergrondafbeeldingen ook voor Outlook. Echter, moet je wel controleren of jouw ESP VML (Vector Markup Language) codering ondersteunt, een op XML gebaseerd bestandsformaat voor tweedimensionale vector graphics.

Use of Pixel Art in Email

Gebruik creatieve en kleurrijke pixel art om alt-tags te tonen. Terwijl je de pixel art in het beeld gebruikt vergeet ze niet te schalen voor kleinere apparaten.

Gif in email

Gebruik GIF in e-mails. En als je dat doet, geef het eerste frame wat extra seconden voordat het uiteindelijke bericht in de Gif getoond wordt in de e-mail client.

Een goede introductie met
duidelijke pre-headers – is het halve werk!

Pre-header in email

Volgens een Salesforce onderzoek, optimaliseert 41% niet zijn pre-headers of snippet tekst. Het is essentieel om hier aandachtig en zorgvuldig over na te denken.

  • Hoi Linda, wil je wat coole pre-header tips hebben?

  • Ja, graag!

  • Top, beperk pre-header-tekst tot 85-100 karakters die anders is dan het onderwerp..

  • Oh! Ok - Thanks voor de tip! Is dat inclusief de "bekijk online" tekst?

  • Goeie vraag! Nee. Als je de "Bekijk online" tekst niet wilt tonen is het belangrijk dat je dit in de HTML duidelijk aangeeft. Hier is een stukje code waar je dat mee kunt doen:

  • < body> <div> Op deze manier kun je de pre-header text definiëren. </div> </body>

  • Ah da's echt top! En hoe zit het met lettertypes dan?

  • Sowieso altijd web safe fonts gebruiken tussen 8 en 12 px. Maak de CTA met bold tekst op en gebruik zwart om duidelijk leesbaar te blijven. Gebruik ook leestekens, plus tekens "+", streepjes en meer voor het verbinden van zinnen.

  • Ohh! Cool, dat ziet er dan een stuk beter uit.

  • Ja, absoluut! Zorg ook dat jou pre-header tekst links is uitgelijnd. Het zorgt ervoor dat de tekst makkelijker te lezen is op mobiele devices.

  • Natuurlijk, we mogen de mobiele gebruiker niet vergeten!

  • En "last but not least", test pre-header inhoud door het te bekijken in meerdere e-mail clients zodat je een idee krijgt van hoeveel karakters ontvangers zien. Test ook de verticale en horizontale weergave.

  • Ja top, thanks. Dank je Linda voor de tips.

Header & Footer - Hou ze netjes!

Design de header en de footer met zowel desktop
als mobiele gebruikers in het achterhoofd.

Voeg achtergrondkleuren toe aan de header en de footer om
visueel onderscheid te maken van de body content.

Zorg dat je je aan de regels houdt als het gaat om e-mailadressen en unsubscibe links, etc. in de footer.

Een aantal handige tips
voor de volgende kaskraker!

Gebruik raster-gebaseerde lagen en vermijd gecompliceerde
elementen die HTML-floats of positionering
nodig hebben.

Een andere effectieve aanpak is om
ervoor te zorgen dat de belangrijke inhoud
in een F-vormig patroon wordt geplaatst.
Studies tonen aan dat de lezers eerst
de kop zullen zien, gevolgd door
de tekst aan de zijkant en eindelijk het
middelste gedeelte van de tekst.

Voeg regeleinden toe elke 60 tekens in
uw gewone tekst e-mails om de
leesbaarheid te vergroten.

email template success

Gebruik aantrekkelijke typografie, maar gebruik
websafe lettertypes zoals Arial, Helvetica,
Tahoma, Times Roman en Georgia.
Moderne webfonts worden ondersteund in
minder dan 50% van de e-mail clients.
Het gebruik van aangepaste lettertypes
in een tekstformaat is niet stabiel genoeg
in e-mail, dus ze moeten als een foto
in je e-mail sjablonen worden gevoegd
of gebruik de juiste fall-back
die overeenkomt met de websafe lettertypes.

Kies een of twee kleuren voor
e-mails. Hoe minder kleuren u gebruikt,
des te cleaner het ontwerp er uitziet.

Email Design Company

Emailmonks. Voor emaildesign en slicen van Emails, Nieuwsbrieven en Landingpagina’s.
Wil je meer weten hello@emailmonks.nl of ga naar www.emailmonks.nl