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

About the author

Digital markedsfĂžrer & partner
Snakk med meg om denne artikkelen →

Related Posts