Mails

Intructies:

  • Druk spatie voor volgende slide
  • Navigeer met pijltjes
  • ESC voor slide overzicht
Inhoud

  • Opmaak mails
  • Beperkingen in een mail
  • Bouwen van mails toen & nu
  • Responsive mails
  • Wat doen wij anders in onze eDM's?
  • Animaties in e-mail
eDM's opgemaakt in?

Opmaak in HTML + CSS

HyperText Markup Language

HTML

HTML is de basis voor een webpagina:

  • Teksten
  • Formulieren
  • URL's
  • Afbeeldingen en video's
HTML van volkswagen.nl
Cascading Style Sheet

CSS


Lettertype: Helvetica, Audi

Tekstkleuren

Achtergrondkleuren

Knoppen

Indelingen/posities van HTML blokken

HTML
HTML + CSS

Beperkingen in een mail

Een mail bouwen = webpagina bouwen

Bouwen in html en css


Dus wat maakt een mail beperkt?

Een e-mail verwerken is ingewikkelder in een mailclient:

  • Beveiliging & stabiliteit
  • Meeste mailclients erg strict

Mailclients strippen daarom stukken html en css

Rekening houden met regels van meerdere mailclients:

  • Minder gereedschap beschikbaar
  • Iets kan niet door mailclient X


Omslachtige wegen creƫren voor hetzelfde resultaat

Bijv: Alle mails in tabelstructuur voor Outlook.

Bouwen van mails

Editor

Bekijken op een browser

eDM testen in Litmus

Controleren in mailclients als:

Outlook 2007

Gmail

Thunderbird

Outlook 2010

Mac mail

Yahoo mail

Outlook 2013

Mail op Android

iOS mail

Outlook 2016

Tekstblok in eDM
Tekstblok in eDM (html)
Voorheen veel html schrijven.

Min. 2 uur werk

Min. 3 uur werk

Mailsysteem

  • Draait op Ruby en Sinatra.
  • Maakt gebruik van sjablonen dat html opmaakt
  • Minder schrijfwerk, minder tikfouten.

Responsive mails

Reageren op de breedte van het scherm.

Met behulp van CSS3

Niet ondersteund op de meeste desktop mailclients.

Wel bruikbaar voor de mobiele mailclients.

Mobiel: Veel blokken onderelkaar

Rechterblokken komen onder de linkerblokken

Uitzondering!
Tonen en verbergen van blokken

vb. SEAT/Audi mailOok te vinden op labs.crc-online.nl

Waarom gebruiken?


Bijvoorbeeld onderstaande:

En nu toegepast

2x de blokken opbouwen = extra tijd met testen

Let wel op!


  • De klant mag de mail niet aanpassen
  • Hij kan alleen de desktop versie aanpassen.


Deze aanpassingen betreft:


  • Aanpassing teksten of linkjes.
  • Beelden en/of behorende linkjes.
Wat doen wij anders in onze eDM's?

Vergeleken met andere mailbouwers op mobiel:

  • Mail fullscreen
  • Buttons fullscreen
  • Tekstgrootte veranderen
  • Veranderingen in witruimtes
  • Bepalen welke afbeeldingen schalen.

Mail fullscreen

???

Fullscreen horizontaal

Vaste breedte

100%

Buttons op mobiel

Tekstgrootte veranderen


Desktop

Mobiel

Niet aangepast

Mobiel

Aangepast

Witruimte

Beelden schalen / niet schalen

Animaties in e-mail

Animaties in header

OP = OP

Vragen?


Labs

labs.crc-online.nl