Opmaak in HTML + CSS

HyperText Markup Language

HTML

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:

• 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.

Niet ondersteund op de meeste desktop mailclients.

Wel bruikbaar voor de mobiele mailclients.

Mobiel: Veel blokken onderelkaar

Rechterblokken komen onder de linkerblokken

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.

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

Witruimte

Beelden schalen / niet schalen

Animaties in e-mail

Animaties in header

OP = OP