Nyhetsbrev mal – En dypere forståelse av HTML for nyhetsbrev

Bittelitt HTML historie

På mange måter er et nyhetsbrev det samme som å sende en HTML nettside til et gitt antall kontakter. En nyhetsbrev mal består kun av HTML av den udaterte varianten. For de som ikke vet hva HTML er, så er det et markup språk der man omkranser elementer med predefinerte tagger for å få de til å oppføre seg på en bestemt måte. CSS (Cascading Style Sheets) er noe som benyttes for å beskrive HTML elementet, som å styre farge, posisjon og lignende. Den største forskjellen på moderne HTML og HTML i e-post, er at HTML for e-post har blitt værende i 2005 og fremstår i dag som et lite teknisk mareritt.

For noen tiår siden ble nettsteder utviklet i tabeller.

<table>
    <tr>
        <td>Kolonne A</td>
        <td>Kolonne B</td>
        <td>
            <table>
                <tr>
                    <td>Kolonne C1</td>
                    <td>Kolonne C2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Kort fortalt ble tabeller brukt som en hack, for å få elementer til å stå der man ønsket. Tabeller ble brukt til layout, og ikke bare til å vise frem data på en ryddig måte. I dagens HTML benyttes «div» og CSS for å oppnå dette, og man får samtidig skilt formatering og stil, fra innhold. Når det gjelder e-post blir det fortsatt brukt tabeller for å strukturere innholdet.

At e-post fortsatt kodes med tabeller er i seg selv ikke ødeleggende, men det er konsekvensene av det som medfører problemer. I tidligere tider skrev man forskjellig kode (både HTML og Javascript) for hovedsakelig Internet Explorer og Netscape. I dag må man fortsatt ta hensyn til 50 forskjellige e-postklienter som tolker HTML på litt forskjellige måter. Det innebærer at man fortsatt forlenger det problemet som har blitt løst på moderne web.

Scopet for denne artikkelen

Denne artikkelen er ikke en helt uttømmende kilde for hvordan man skal produsere nyhetsbrev maler. Vi søker heller å gi et bilde av de ulike elementene som inngår i en e-post og en innføring i de problemstillingene man gjerne vil møte i forbindelse med utvikling av HTML e-poster.

Basis template for en standard nyhestbrev mal

Et HTML dokument inkluderer alltid følgende elementer:

<!-- Chassis for HTML -->
<!DOCTYPE html>
    <html>
        <head></head>
        <body></body>
    </html>

I denne artikkelen vil vi hovedsakelig se på det som skjer innenfor «head» seksjonen. Selve innholdet i e-posten og det kontaktene ser, er det som settes inn i «body» og da som består av en serie med nøstede tabeller.

La oss se nærmere på head i nyhetsbrev mal

Alt som følger under i denne seksjonen er elementer som skal legges inn under HTML head taggen.

Content-Type:

Fortell hva dokumentet skal gjengis som. Spesifiser også hvilket tegnsett som brukes.
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Viewport:

Kontrollerer layout på mobile enheter. Sett bredden lik bredden på skjermen og zoom til 1:1.
<head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

Unlink diverse elementer på IOS:

For å fjerne telefonnummer, dato, adresse og e-post som linker i HTML på IOS
<head>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
...

Anti blå linker:

For å unngå at linkene (<a>) overstyres og blir blå på Apple sine produkter.
<head>
    <style>
        a[href^="x-apple-data-detectors:"] {
            color: red;

CSS Blokk(er):

Når det gjelder CSS er det mest oversiktlig å samle det i en eller flere <style> blokker i headeren. Det er ikke noe i veien for å plassere <style /> i <body>, annet at det fort kan bli uoversiktlig.

<head>
    <style>
        body { … }
        a { … }
        p { … }
...
    </style>

Preheader – tekst hack

Preheader er underteksten som kommer opp i forhåndsvisningen av e-posten. Hvis den ikke er eksplisitt definert vil tekst fra mailbody bli hentet inn og kan dra med seg uforutsette konsekvenser som rare sammentrekninger av ord eller kutt i teksten. Det finnes en nokså ukjent løsning for dette problemet. kalt “the preview text hack”. Selve hacken består i at man først definerer en optimalisert tekst for preheader og deretter fyller den resterende plassen med whitespace, nettopp for å unngå de problemstillingene nevnt over.

Det ser ikke pent ut, men det fungerer som en serie av no breaking space og zero width no joiners.
 ‌ ‌ ‌

En innføring i Media Queries

Media queries er avgrensninger som bestemte deler av CSS-koden skal fungere innenfor og som er det som responsiv design henspeiler på. For å få elementer til å tilpasse seg ulike skjermoppløsninger kan man skrive spesifikk kode for å bestemme hvordan elementene skal oppføre seg på ulike oppløsninger. På denne måten kan samme nyhetsbrev mal få forskjellig utseende på desktop, nettbrett og mobil.

Denne CSS-koden kjøres for vinduer mindre enn 500px:

@media all and (max-width: 500px) {
    Målrettet kode her
}

Dessverre så har per nå blant annet ikke Gmail på Android støtte for media queries. Se fullstendig liste for støtte for media queries her.

Tabell celler som på desktop innebærer kolonner, bør for eksempel ikke fungere som kolonner i mobile visninger. Det er dermed vanlig, på mobil, å gjøre om cellene til blokk-elementer, slik at de legger seg under hverandre.

Outlook, Outlook, Outlook – betinget HTML

Som på mange andre områder er Microsoft, også i e-post henseende, en kilde til frustrasjon for mange. De foretrekker som kjent å skape sine egne standarder fremfor og innrette seg etter det andre har blitt enige om. At Microsoft bruker Word som HTML gjengiver og at de 14 ulike Outlook-versjonene heller ikke gir samme resultatet, gjør at man må tilpasse koden til de ulike versjonene. I mange tilfeller kan man komme rundt dette ved å skrive koden, som da enten kjøres eller gjemmes, for ulike versjoner av Outlook. Velkommen til HTML if’er.

Eksempel på kode som kjøres for alle versjoner av Outlook større eller lik 2000.

<!--[if gte mso 9]>
    Din kode her...
<![endif]-->

Liste over tilgjengelige operatorer:

Operator Eksempel Kommentar
! [if mso 9] Not
lt [if lt mso 9] Mindre enn
lte [if lte mso 9] Mindre enn eller lik
gt [if gt mso 9] Større enn
gte [if gte mso 9] Større enn eller lik
() [if !(mso 9)] Deluttrykk
& [if (gt mso 9)&(lt mso 15)] Logisk OG
| [if (gte mso 9)|(IE)] Logisk ELLER

En smart måte å implementere dette på er å legge til en fallback. Legg merke til css klassen mso-hide:all; som kun gjenkjennes av Microsoft Office.

<!--[if mso]>
    <v:shape>...</v:shape>
        <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
    <![endif]-->

    [fallback goes here]

<!--[if mso]></div><![endif]-->

Fullstendig lister over betinget HTML (HTML conditionals) finner du her.

Din Nyhetsbrev mal er ferdig! Hva nå?

For å teste nyhetsbrev malen du har laget anbefaler vi Litmus. Her får du en fin oversikt over hvordan nyhetsbrev malen din ser ut i 50+ e-postklienter, men som i de fleste tilfeller er utseende derimot ikke alt.

Hva med emnefeltet? Er det langt nok, for kort, inneholder det spam-uttrykk eller lignende. Er du sikker på at det ikke er noen 404 linker i e-posten? Hvordan er vektforholdet mellom ren tekst og mengden HTML kode? Har du satt opp DKIM og SPF på avsenderen av nyhetsbrevet? Heldigvis kan du spare masse tid ved å benytte vårt verktøy for kvalitetssikring og analyse av nyhetsbrev mal. Dette er en gratistjeneste alle kan benytte helt uavhengig av leverandør.

Hvis e-posten din har fått en spam-prognose, dvs en karakter under 9, vil første steg være å se på avsenderen du bruker for å sende nyhetsbrevet. Alle kan sende et nyhetsbrev som ved første øyekast ser ut som det kommer fra en legitim aktør. For å tette igjen denne muligheten har det blitt utviklet standarder for DKIM, SPF og DMARC. Kort fortalt så betyr dette at du må eie det domenet som du sender e-posten fra, dvs det som kommer etter @ i avsenderadressen. Hvis du ikke kan verifisere at du eier domenet vil det mest sannsynlig bli sendt i spam.

Les mer om SPF, DKIM og DMARC.

Veiledning i hvordan du går frem for å verifisere domenet du skal sende e-posten fra.

Hvorfor ikke bare sende din nyhetsbrev mal med Outlook?

Det er mange grunner til at det ikke fungerer å masseutsende e-poster fra f.eks Outlook. Her er noen av de viktigste grunnene:

  • Du har ikke anledning til å spore hvilke e-poster som har blitt levert, åpnet eller returnert. Det er heller ikke mulig med sporing av klikk.
  • Det er en lav øvre begrensning for hvor mange du kan sende til hver dag.
  • Fare for svartelisting (dette er helt klart den viktigste grunnen).

Vi har allerede har vært gjennom denne prosessen

Vi i Make har i likhet med mange andre leverandører vært igjennom denne prosessen, og en del mer til, allerede. På mange måter er det som å gå tilbake i tid da man laget forskjellige nettsider for Internet Explorer, Netscape, Safari etc, men med enda flere aktører å ta hensyn til. Vi anbefaler egentlig ikke å starte på dette prosjektet selv, men heller finne noen som allerede har funnet opp hjulet for deg, og da fortrinnsvis oss i Make 😃