Oppskriften på e-poster som ser bra ut – overalt

Ønsker du å revolusjonere designverdenen, sprenge grenser og bruke cutting-edge teknologi? Da er ikke e-postmaler rette stedet å starte. Å designe e-poster i 2025 føles nemlig mer som å bygge nettsider med teknologi fra 2005 – med bind for øynene – i motvind – på en tråsykkel. 

E-postklienter har en tendens til å ignorere moderne webstandarder, og det som fungerer flott på en nettside kan se helt håpløst ut i en e-post. Det finnes ingen standardisert måte å tolke HTML og CSS på, og forskjellige e-postklienter tolker koden i en e-post som om de spiller etter helt forskjellige regelbøker. 

Men fortvil ikke – det finnes håp! Her er noen av de viktigste retningslinjene du bør følge for å bygge solide og pålitelige e-poster. 

Det er ikke hvordan du sier det – men hva du sier 

Nei, du leste ikke feil. Når det gjelder e-post, er budskapet det viktigste. 

E-postklienter tolker styling på hver sin måte – og det som ser bra ut i én innboks, kan se helt annerledes (eller rett og slett ødelagt) ut i en annen. Å bruke masse tid på revolusjonerende design og fancy effekter er ofte lite effektivt, fordi mye av det du designer rett og slett ikke vises som du hadde tenkt. Fokuser derfor på det som faktisk kommer frem hos mottakeren: teksten. Den bør være tydelig, lettlest og godt strukturert. God e-postdesign handler ikke om å imponere, men om å kommunisere. 

Her er noen eksempler på styling som ofte ikke fungerer som forventet: 

• Bakgrunnsbilder: Mange e-postklienter ignorerer bakgrunnsbilde, eller viser bare en spesifikk farge (fallback-farge).
• Fontbruk: Bruk av spesialfonter støttes dårlig. Outlook og enkelte webmail-klienter faller ofte tilbake til standard systemfonter. Eksempler på gode fonter er «Arial» og «Verdana» for et rent og moderne uttrykk, mens «Times New Roman» og «Georgia» for et mer redaksjonelt og seriøst uttrykk.
• Margin og padding (luft/whitespace mellom elementer): Enkelte klienter tolker marger og padding ulikt og fjerner/reduserer luft.
• JavaScript og interaktive elementer: Blir konsekvent fjernet eller ignorert av samtlige e-postklienter.
• Avrundet hjørne: Avrundede hjørner på bilder eller knapper fungerer i noen klienter, men kan vises som spisse kanter i andre.
• Fargebruk i dark mode: Mange e-postklienter støtter i dag dark mode, og dette kan drastisk påvirke hvordan farger vises. Mørk tekst på lys bakgrunn kan automatisk inverteres, og bakgrunnsfarger kan overskrives. For å sikre god lesbarhet i begge moduser, bør du teste e-posten både i lys og mørk modus.

Design og layout - når det er nødvendig 

Et rent og oversiktlig design sikrer at e-posten vises korrekt på tvers av ulike e-postklienter og enheter. Unngå komplekse layouter, overdreven bruk av bilder og avansert CSS eller JavaScript, da disse elementene ofte ikke støttes fullt ut – spesielt i eldre eller mer begrensede e-postklienter. Et enkelt design forbedrer også lesbarheten og brukeropplevelsen, særlig på mobil. 

Enkelt betyr ikke generisk 

Bruk visuelle elementer som logo, farger og bilder strategisk for å styrke den visuelle identiteten. Ved å bruke bedriftens profilfarger, grafiske elementer og logo i topp eller bunn, hjelper du mottakeren med å umiddelbart kjenne igjen avsenderen. 

I tillegg kan e-posten bygges opp med flere rader og varierende antall kolonner for å skape et mer dynamisk og visuelt interessant oppsett. Dette gir deg mulighet til å fremheve ulike typer innhold – som tilbud, artikler eller kundehistorier – på en ryddig og engasjerende måte. 

Bilder bør brukes med måte og alltid kombineres med alternativ tekst (alt-tekst) i tilfelle de ikke vises automatisk. Det viktigste innholdet – som budskap og CTA – bør uansett alltid være tilgjengelig som tekst. 

For å overholde anti-spam-lover, må alle markedsførings-e-poster inneholde kontaktinformasjon, inkludert adresse. Dette sikrer at mottakeren vet hvem som sender e-posten og kan verifisere informasjonen.  

Mobiloptimalisering 

• 41,9 % av e-poster åpnes på mobilenheter
• 39,9 % åpnes via webmail (Eks. gmail.com, outlook.com)
• 18,2 % åpnes på stasjonære datamaskiner

Totalt betyr dette at over 80 % av alle e-poståpninger skjer på enheter som ikke er stasjonære, noe som tydelig fremhever hvor avgjørende det er å optimalisere e-poster for mobil og webbaserte plattformer. En maksimal bredde på 600 piksler er en etablert standard i e-postdesign. Denne bredden gir en optimal balanse mellom lesbarhet og estetikk på både stasjonære og mobile enheter. Mulighet for mobiloptimalisering er tilgjengelig i HubSpot sin drag-and-drop editor. 

Fleksibilitet uten koding – med drag-and-drop 

Å bruke en egendefinert (custom) e-postmal i HubSpot kan gi deg et mer skreddersydd design med faste plasseringer og tilpassede komponenter. Men fleksibelt? Ikke alltid.  

Selv små endringer – som å flytte på en knapp, endre rekkefølgen på innholdet eller legge inn et ekstra bilde – kan fort kreve innblanding fra noen med utviklerkompetanse. Du er ikke nødvendigvis helt låst, men friheten er begrenset, og det meste må passe inn i det som er definert på forhånd. 

Med HubSpot sin drag-and-drop-editor kan man gjøre endringer selv. Du trenger ikke tenke på koding, og kan fokusere på innholdet. Og når innholdet er klart, er det enkelt å teste hvordan e-posten ser ut hos mottakerne. HubSpot lar deg sende test-eposter til deg selv eller andre, slik at du kan kvalitetssikre både innhold og design. I tillegg kan du forhåndsvise e-posten i ulike e-postklienter og enheter – rett i editoren.