Direct e-mail: Realisatie Les 3 HTML en CSS in e-mails Direct e-mail: Realisatie Les 3
HTML Hypertext Markup Language Combinatie van inhoud en opmaak Wat als we zelfde opmaak ook voor andere inhoud willen gebruiken? Personificatie Huisstijl/Herkenbaarheid Onderhoudbaarheid (bijv. nieuw logo) Direct e-mail: Realisatie
Template Het vaste deel wordt een “template” genoemd Inhoud voeg je met MailChimp in Templates worden ook vaak gevuld met bijv. ASP en PHPs Direct e-mail: Realisatie
Vergelijk Content en opmaak door elkaar Content en opmaak gescheiden <html><head><title> HAN - ICA </title></head> <body> <h1> Piet, welkom! </h1> </body> </html> <html><head><title> HAN - <? echo $instituut; ?> </title></head> <body> <h1> <? echo $user; ?>, <? echo $welkomststekst; ?>! </h1> </body> </html> Direct e-mail: Realisatie
Problemen HTML en CSS in e-mail Plaatjes worden niet of pas na druk op knop geladen Achtergrondplaatjes werken vaak niet Veel e-mailprogramma’s geven HTML en CSS beperkter weer dan een webbrowser De verschillen tussen e-mailprogramma’s zijn groot Direct e-mail: Realisatie
Niet weergeven plaatjes Wie is de afzender? Wat is de boodschap? Kan de ontvanger reageren?
Niet weergegeven plaatjes: oplossing Wordt (soms) getoond ipv plaatje (helaas is ondersteuning hier ook weer afhankelijk van het e-mailprogramma) Wordt voorgelezen door screen readers Beschrijft de inhoud of de functie van het plaatje <img src="file.jpg" width="120" height="200" alt="Home" /> <img src="file.jpg" width="120" height="200" alt="iPad3" /> Direct e-mail: Realisatie
Zorg dus dat… Je e-mail goed leesbaar is zonder plaatjes, De afzender duidelijk is zonder plaatjes De ontvanger nog steeds direct kan reageren De boodschap overkomt De layout duidelijk blijft Je onderschriften gebruikt indien nodig Je ALT-attributen gebruikt Je geen essentiële informatie alleen in plaatjes zet! Direct e-mail: Realisatie
CSS-problemen CSS wordt slecht ondersteund, met name CSS positionering Elk e-mailprogramma heeft z’n eigen eigenaardigheden Een bijzonder nuttige site: http://www.campaignmonitor.com/css/ Direct e-mail: Realisatie
Drie manieren van CSS-gebruik Extern (verwijzen naar extern CSS-bestand): werkt bijna nooit <link rel="stylesheet" type="text/css" href="layout.css"> Embedded (in het <head>-deel): werkt soms <style type="text/css"> <!-- h1 { color: #0000ff; } --> </style> Inline (in de betreffende tag): werkt meestal <p style="color: #ff00ff;">De tekst</p> Direct e-mail: Realisatie
Positioneringsprobleem oplossen Gebaseerd op tabellen Ouderwets Vloeken in de kerk voor webdesigners Niet volgens XHTML-standaard Maar het werkt wel Vaak worden tabellen “genest” (tabel in een cel van een andere tabel) Direct e-mail: Realisatie
Gebruik van rowspan en colspan om rijen of kolommen samen te voegen Voorbeeld Gebruik van rowspan en colspan om rijen of kolommen samen te voegen Achtergrond: 1 achtergrondplaatje voor de grote tabel (rood) en 1 voor de binnentabel (blauw) of Verschillende achtergrondplaatjes per cel Combinatie daarvan Direct e-mail: Realisatie
Richtlijnen bij gebruik tabellen Werk met vaste breedte (dus in px, niet in %) Geef de breedte aan in de tabelcellen, niet voor de hele tabel <table border="0" cellpadding="0" cellspacing="0" background="background.gif"> <tr> <td width="150">Tekst 1</td> <td width="400">Tekst 2</td> </tr> </table> Totale breedte max 550-600 px Hoogte preview-pane ong. 300-500 px, zet daar dus belangrijkste info Zet cellpadding en cellspacing altijd op 0 Direct e-mail: Realisatie
De enige manier om het zeker te weten: testen Bruikbaar zonder plaatjes en CSS? Weergave bij verschillende schermgrootte Weergave in verschillende e-mail programma’s Schaalbare tekst -> leesbaarheid Weergave bij kleurenblindheid: http://colorfilter.wickline.org/ Direct e-mail: Realisatie