E-postmarkedsføring og automatiseringMobil- og nettbrettmarkedsføring

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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.
  2. 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.
  3. 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.
  4. Dynamisk innhold: Segmentering og tilpasning av innholdet kan redusere antallet avmeldinger og holde abonnentene engasjert.
  5. 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.
  6. 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!
  7. 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).

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.