16 Mobilvennlig HTML-e-post-beste praksis som maksimerer innboksplassering og engasjement
I 2023 er det sannsynlig at mobil vil overgå skrivebordet som den primære enheten for å åpne e-post. Faktisk fant HubSpot det 46 prosent av alle e-poståpninger skjer nå på mobil. Hvis du ikke designer e-poster for mobil, legger du igjen mye engasjement og penger på bordet.
- E-postautentisering: Sikre din e-poster er autentisert til avsenderdomenet og IP adresse er avgjørende for å komme til innboksen og ikke rutes til en søppel- eller spam-mappe. Det er også viktig, selvfølgelig, at du tilbyr en måte å velge bort e-posten ved å bruke en plattform som inneholder en avmeldingslenke.
- Responsiv utforming: De HTML e-post skal være designet for å være responsiv, noe som betyr at den kan justeres til skjermstørrelsen på enheten den vises på. Dette sikrer at e-posten ser bra ut på både stasjonære og mobile enheter.
- Klar og kortfattet emnelinje: En klar og kortfattet emnelinje er viktig for mobilbrukere fordi de kanskje bare ser de første få ordene i emnelinjen i forhåndsvisningsruten for e-post. Den skal være kort og nøyaktig gjenspeile innholdet i e-posten. Den optimale tegnlengden på en e-postemnelinje kan variere avhengig av en rekke faktorer, for eksempel e-postinnholdet, publikummet og e-postklienten som brukes. De fleste eksperter anbefaler imidlertid å holde e-postemnelinjene korte og konkrete, vanligvis mellom 41-50 tegn eller 6-8 ord. På mobile enheter kan emnelinjer som er lengre enn 50 tegn bli kuttet av, og i noen tilfeller kan de bare vise de første få ordene i emnelinjen. Dette kan gjøre det vanskelig for mottakeren å forstå hovedbudskapet i e-posten og kan redusere sannsynligheten for at e-posten åpnes.
- Forhåndshode: En e-postoverskrift er et kort sammendrag av innholdet i en e-post som vises ved siden av eller under emnelinjen i en e-postklients innboks. Det er et viktig element som kan påvirke åpningshastigheten til e-postene dine når de er optimalisert. De fleste klienter inkorporerer HTML og CSS for å sikre at preheader-teksten er riktig konfigurert.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- Enkeltkolonne layout: E-poster som er utformet med en enkelt-kolonne layout er lettere å lese på mobile enheter. Innholdet bør organiseres i en logisk rekkefølge og presenteres i et enkelt, lettlest format. Hvis du har flere kolonner, kan bruk av CSS på en elegant måte organisere kolonnene i en enkelt-kolonne layout.
Her er en HTML e-postoppsett det vil si 2 kolonner på skrivebordet og skjules til en enkelt kolonne på mobilskjermer:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
Her er en HTML e-postoppsett det vil si 3 kolonner på skrivebordet og skjules til en enkelt kolonne på mobilskjermer:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Lys og mørk modus: bro e-postklienter støtter lys og mørk modus CSS
prefers-color-scheme
for å imøtekomme brukerens preferanser. Sørg for å bruke bildetyper der du har en gjennomsiktig bakgrunn. Her er et kodeeksempel.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- Store, lesbare skrifter: Skriftstørrelsen og stilen bør velges for å gjøre teksten lett å lese på en liten skjerm. Bruk minst en skriftstørrelse på 14 pkt og unngå å bruke skrifter som er vanskelige å lese på små skjermer. Ofte brukte skrifter har stor sannsynlighet for å gjengi konsekvent på tvers av forskjellige e-postklienter, så bruk av Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma og Trebuchet MS er vanligvis sikre skrifter. Hvis du bruker en egendefinert skrift, må du sørge for å ha en reservefont identifisert i CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- Optimal bruk av bilder: Bilder kan redusere nedlastingstiden og vises kanskje ikke riktig på alle mobile enheter. Bruk bilder med måte, og sørg for at de er i størrelse og komprimert for mobilvisning. Sørg for å fylle inn alt-teksten for bildene dine i tilfelle e-postklienten blokkerer dem. Alle bilder skal lagres og henvises til fra et sikkert nettsted (SSL). Her er eksempelkode for responsive bilder i en HTML-e-post.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Fjern handlingsfremmende uttrykk (CTA): En tydelig og fremtredende CTA er viktig i enhver e-post, men det er spesielt viktig i en mobilvennlig e-post. Sørg for at CTA-en er enkel å finne og at den er stor nok til å klikkes på en mobilenhet. Hvis du inkluderer knapper, kan du også sørge for at du har dem skrevet i CSS med innebygde stilkoder:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>
- Kort og konsist innhold: Hold innholdet i e-posten kort og saklig. Tegngrensen for en HTML-e-post kan variere avhengig av e-postklienten som brukes. Imidlertid pålegger de fleste e-postklienter en maksimal størrelsesgrense for e-poster, vanligvis mellom 1024-2048 kilobyte (KB), som inkluderer både HTML-koden og eventuelle bilder eller vedlegg. Bruk underoverskrifter, punkttegn og andre formateringsteknikker for å gjøre innholdet enkelt skanbart mens du blar og leser på en liten skjerm.
- Interaktive elementer: Innlemming interaktive elementer som fanger oppmerksomheten til abonnenten din vil øke engasjement, forståelse og konverteringsfrekvens fra e-posten din. Animerte GIFer, nedtellingstidtakere, videoer og andre elementer støttes av de fleste smarttelefon-e-postklienter.
- Personalisering: Personalisering av hilsenen og innholdet for en spesifikk abonnent kan øke engasjementet betydelig, bare vær sikker på at du får det riktig! F.eks. Det er viktig å ha reserver hvis det ikke er data i et fornavnsfelt.
- Dynamisk innhold: Segmentering og tilpasning av innholdet kan redusere antallet avmeldinger og holde abonnentene engasjert.
- Kampanjeintegrering: De fleste moderne e-posttjenesteleverandører har muligheten til å legge til automatisk UTM-kampanjespørrestrenger for hver lenke slik at du kan se e-post som en kanal i analyse.
- Preferansesenter: E-postmarkedsføring er for viktig for bare en opt-in eller opt-out-tilnærming til e-post. Å inkludere et preferansesenter der abonnentene dine kan endre hvor ofte de mottar e-poster og hvilket innhold som er viktig for dem, er en fantastisk måte å holde et sterkt e-postprogram med engasjerte abonnenter!
- Test, test, test: Sørg for å teste e-posten din på flere enheter eller bruk en applikasjon til forhåndsvise e-postene dine på tvers av e-postklienter for å sikre at den ser bra ut og fungerer som den skal på forskjellige skjermstørrelser og operativsystemer FØR du sender. Lakmus rapporterer at de tre mest populære mobile åpne miljøene fortsetter å være de samme: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Inkluder også testvarianter av emnelinjene og innholdet for å forbedre åpnings- og klikkfrekvensen. Mange e-postplattformer har nå automatisert testing som vil prøve listen, identifisere en vinnende variant og sende den beste e-posten til de gjenværende abonnentene.
Hvis bedriften din sliter med å designe, teste og implementere mobilresponsive e-poster som skaper engasjement, ikke nøl med å kontakte firmaet mitt. DK New Media har erfaring med implementering av praktisk talt alle e-postleverandører (ESP).