Nytt innholdselement: HTML innhold – Skriv din egen HTML rett i editoren 👌

Majoriteten av e-postklientene har ikke støtte for de samme HTML elementene som du ser på web. Ja, for det er stor forskjell på HTML for web og HTML for nyhetsbrev. Nettleserne har for eksempel muligheten til å kjøre skript og animasjoner, mens den typiske innboksen ikke er bygget for å kunne håndtere denne typen innhold.

HTML innhold er tilgjengelig fra høyremenyen under INNHOLD
html elementet

Ved introduksjonen av elementet for HTML innhold får du muligheten til å benytte forskjellige HTML elementer. I denne artikkelen vil jeg gå igjennom de forskjellige elementene og se på hvilke du kan benytte, og hvilke du bør unngå.

🔍 HTML og CSS (Cascading Style sheets) forklart på 30 sekunder

HTML er ikke et programmeringsspråk, men heller det som kalles et markup språk. Man benytter seg av predefinerte tagger eller markeringer for å definere elementer innenfor et dokument. I denne konteksten er det nyhetsbrevet som er dokumentet. Hvis du for eksempel vil ha noe tekst uthevet kan du “markere” denne teksten ved å omkranse den med taggen (les merkelappen) <strong>. En HTML tagg må alltid avsluttes med den korresponderende taggen for avslutning </>.

Jeg vil at <strong>denne teksten</strong> skal utheves, vil f.eks sette «denne teksten» i bold font.

CSS beskriver HTML på den måten at den definerer hvordan HTML elementene skal posisjoneres, hvilken form de skal ha og hvordan de ellers skal ta seg ut. Hvis du ikke definerer CSS regler selv, vil alle HTML elementene du benytter arve det stilsettet som er definert av Make.

HTML for e-post vs HTML for web

Teknologien som de fleste e-postklientene benytter seg av er langt fra så up-to-date som i hvilken som helst nettleser. Faktisk i enkelte tilfeller kan den ligge så mye som 20 – 25 år bak. Det betyr at interaktive elementer som Javascript, HTML skjema og iframe ikke fungerer slik du kanskje forventer.

Hvilket HTML innhold fungerer, fungerer delvis og fungerer ikke i innboksen.

Sikker HTML Brukes varsomt (test!) La oss ikke gå dit
Statiske, tabell <table> baserte layouter

HTML tabeller og nøstede tabeller.

Bredde på mal 600px – 800px

Inline CSS

Web-safe fonter / standardfonter

Bakgrunnsbilder

Webfonter

Brede layouter (> 800px)

Image maps

Embed CSS

Javascript <script>

Iframe <iframe>

Innebygget lyd <audio>

Innebygget video <video>

HTML skjema <form>

<div> basert layout

Ekstern CSS

Jeg har satt opp et område hvor du kan leke litt med tabeller.
Lær tabeller i HTML ved å bygge en størrelsesguide for herreskjorter sammen med meg 👉

Illustrasjon av hvordan du kan bygge en tabell ved bruk av HTML elementet <table> og embed CSS.
Sikker html tabell

HTML innhold du må bruke med varsomhet (test nyhetsbrevene)

Du kan inkludere elementer som bakgrunnsbilder og webfonter i dine Make maler. Ikke alle e-postklienter har støtte for de ulike elementene, så vi anbefaler på det sterkeste at du tester nyhetsbrevene dine før du sender de ut.

Animerte gif’er <img>

Noen e-postklienter støtter ikke animerte gif’er, dvs de viser første frame av animasjonen, men ikke animasjonen i sin helhet. Ønsker du å legge inn gif’er i nyhetsbrevet kan du dra inn innholdselementet «gif» og bruke innhold rett fra Giphy.

Litmus har en fin guide for animerte gif’er i nyhetsbrev.

Bakgrunnsbilder

I editoren i Make kan du legge til bakgrunnsbilder på hver enkelt rad. De vil ikke vises frem i alle e-postklienter, så sørg for å sette en kontrastfarge på bakgrunnen for raden. På den måten unngår du f.eks hvit tekst på hvit bakgrunn i de tilfellene bakgrunnsbildet ignoreres.

Heller ikke alle mobiler har støtte for bakgrunnsbilder og de vil vises frem på litt ulike måter. Det er derfor viktig, jeg understreker det igjen, å teste nyhetsbrevene før du sender dem.

Standardfonter vs webfonter

I editoren kan du velge blant standardfonter, såkalt web-safe fonter. Dette er fonter som har god, men ikke universell støtte, blant e-postklientene. Hvis du inkluderer en webfont / tilpasset font vil vi erstatte den med en standardfont, i tilfeller der e-postklienten ikke har støtte for dette.

Mer om støtte for webfonter

Webfonter nyhetsbrev

Brede e-poster

Flere og flere nyhetsbrev åpnes på mobil og i forhåndsvisningen på desktop klienter. Vær oppmerksom på at nyhetsbrev kan bli kuttet hvis bredden overstiger 600 – 800px.

Embed CSS <style>

Embed CSS skrives innenfor HTML taggen <style>, i motsetning til inline HTML, som legges på style attributten på hvert enkelt HTML element. Embed CSS har utstrakt støtte på mobile enheter, men blir ofte ignorert på desktop og web. Hvis tankegangen er mobile first, altså det skal først og fremst virke på mobil, så er det relativt problemfritt å bruke embed CSS. Det finnes selvfølgelig enkelte unntak. Inline CSS er dog et sikrere valg, men er mer knotete å jobbe med.

🔍 Hva er forskjellen på inline CSS og embed CSS?

Inline CSS skrives i style attributten på hvert enkelt HTML element
<a style=”text-decoration:underline”>…</a>

Embed CSS skrives innenfor HTML <style> taggen
<style>
a { text-decoration: underline; }
</style>

HTML innhold du ikke bør bruke i nyhetsbrev

De elementene som nevnes nedenfor blir blokkert av nesten alle de største e-postklientene. Støtten er svært begrenset, eller ikke eksisterende.

JavaScript <script>

Javascript er et programmeringsspråk som legger til et element av interaktivitet til internett. Det er svært vanlig å bruke på en nettside, men blir blokkert av e-postklientene da det kan brukes til å skjule uønskede hensikter. Bruk derfor aldri <script></script> i en e-post.

Bruk heller animerte gif’er til små animasjoner.

Iframe <iframe>

En iframe <iframe> er et HTML element som brukes til å enkelt hente innhold fra andre nettsteder og bygge det inn på ditt eget. Disse brukes ofte til å inkludere annonser, video <video> fra Youtube eller Vimeo, lyd <audio> eller skjemaer.

I prinsippet kan du bygge inn VG på ditt eget nettsted slik:

I frykt for at det eksterne innholdet inneholder scripts, vil mesteparten av e-postklientene blokkere iframes. Bruk heller lenker til å vise frem det innholdet du ønsker, ikke prøv å bygge det inn.

Flash

Flash blir som teknologi dessverre begravet i 2020. [https://isflashdeadyet.com/]. For noen av oss er Flash og Actionscript nå kun gode minner. I denne kontekst blir Flash uansett blokkert av de fleste e-postklienter og anbefales ikke.

HTML Skjemaer <form>

Tekstfelter, radiobuttons og checkboxes er HTML skjema elementer. Noen e-postklienter vil vise skjema i e-posten frem, men det er ikke mulig for brukerne å sende de inn. Unngå derfor bruk av skjemaer i e-post og bruk heller lenker for å vise frem skjemaer på et nettsted.

Innebygget media <audio>, <video>

Autoplay eller avspilling av media krever at e-postklienten støtter HTML5 <video> og <audio> tagger. Pr. nå er det kun Apple Mail som støtter disse elementene, og best practice er derfor å unngå bruk i e-post.

Bruk heller innholdselementet video. For å sende lydfiler kan du dele en lenke til lydfil.

Imagemap <map>

En imagemap er et bilde som er delt inn i ulike områder, definert ved koordinater, og der hvert område er assosiert med en lenke. Klikk innenfor områdene vil ta brukeren til lenken som gjelder for hvert enkelt område. På den måten kan ulike deler av et bilde lenke til forskjellige url’er.

Det er overraskende god støtte blant de største e-postklientene, men det er flere betenkeligheter ved bruk av imagemaps i e-post.

  • Mangel på alt tekst. Hvis bildet blir blokkert av e-postklienten kan man ikke se de individuelle lenkene i bildet.
  • Mangel på responsive egenskaper. Koordinatene som definerer områdene er statiske pixelverdier, slik at når nyhetsbrevet skaleres ned vil ikke områdene som definerer lenkene klare å tilpasse seg.
  • Vi har ikke støtte for sporing av lenker definert i <area>

Klikkbare områder i et imagemap her representert ved VG og Dagbladet.
imagemap ikke skalert

Imagemap mangler responsive egenskaper. Når bildet skaleres ned på mobil vil det beholde den opprinnelige størrelsen. Dette resulterer i at området for VG nå tar nesten hele bildet og lenken til Dagbladet forsvinner ut av viewport.
imagemap skalert

<div> baserte layouter

Ikke bli fristet til å bruke moderne HTML. Nyhetsbrev baserer seg i aller høyeste grad fortsatt på bruk av tabeller til strukturering av innholdet.

Ressurser:
👉 Lær tabeller i HTML ved å bygge en størrelsesguide for herreskjorter sammen med meg
👉 Avansert html for bygging av nyhetsbrev
👉 Få dine nyhetsbrev analysert hos Make
👉 Test nyhetsbrevet i 50+ e-postklienter med Litmus