E-postmarknadsföring och automationMobil- och surfplattemarknadsföring

16 mobilvänliga HTML-e-postmetoder som maximerar placering och engagemang i inkorgen

År 2023 är det troligt att mobilen kommer att överträffa skrivbordet som den primära enheten för att öppna e-post. Faktum är att HubSpot hittade det 46 procent av alla e-postöppningar sker nu på mobilen. Om du inte designar e-postmeddelanden för mobilen, lämnar du mycket engagemang och pengar på bordet.

  1. E-postautentisering: Säkerställa din e-postmeddelanden är autentiserade till den sändande domänen och IP Adressen är avgörande för att komma till inkorgen och inte dirigeras till en skräp- eller skräppostmapp. Det är naturligtvis också viktigt att du tillhandahåller ett sätt att välja bort e-postmeddelandet med en plattform som innehåller en avregistreringslänk.
  2. Responsiv design: Smakämnen html e-post ska vara utformad för att vara lyhörd, vilket innebär att den kan anpassas till skärmstorleken på enheten som den visas på. Detta säkerställer att e-postmeddelandet ser bra ut på både stationära och mobila enheter.
  3. Tydlig och koncis ämnesrad: En tydlig och kortfattad ämnesrad är viktig för mobilanvändare eftersom de kanske bara ser de första orden i ämnesraden i förhandsgranskningsfönstret för e-post. Det ska vara kortfattat och korrekt återspegla innehållet i e-postmeddelandet. Den optimala teckenlängden för en e-postämnesrad kan variera beroende på ett antal faktorer, såsom e-postinnehållet, publiken och e-postklienten som används. De flesta experter rekommenderar dock att e-postens ämnesrader är korta och konkreta, vanligtvis mellan 41-50 tecken eller 6-8 ord. På mobila enheter kan ämnesrader som är längre än 50 tecken skäras av, och i vissa fall kan de bara visa de första orden i ämnesraden. Detta kan göra det svårt för mottagaren att förstå huvudbudskapet i e-postmeddelandet och kan minska sannolikheten för att e-postmeddelandet öppnas.
  4. Preheader: En preheader för e-post är en kort sammanfattning av innehållet i ett e-postmeddelande som visas bredvid eller under ämnesraden i en e-postklients inkorg. Det är ett viktigt element som kan påverka öppningshastigheten för dina e-postmeddelanden när de är optimerade. De flesta klienter använder HTML och CSS för att säkerställa att preheader-texten är korrekt inställd.
<!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. Enkolumns layout: E-postmeddelanden som är utformade med en enkolumnslayout är lättare att läsa på mobila enheter. Innehållet bör organiseras i en logisk ordningsföljd och presenteras i ett enkelt, lättläst format. Om du har flera kolumner kan användning av CSS organisera kolumnerna elegant i en enkolumnslayout.

Här är en HTML-e-postlayout det vill säga två kolumner på skrivbordet och komprimeras till en enda kolumn på mobilskärmar:

<!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>

Här är en HTML-e-postlayout det vill säga två kolumner på skrivbordet och komprimeras till en enda kolumn på mobilskärmar:

<!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. Ljus och mörkt läge: bro e-postklienter stöder ljust och mörkt läge CSS prefers-color-scheme för att tillgodose användarens preferenser. Se till att använda bildtyper där du har en transparent bakgrund. Här är ett kodexempel.
<!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. Stora, läsbara teckensnitt: Teckenstorlek och stil bör väljas för att göra texten lätt att läsa på en liten skärm. Använd en teckenstorlek på minst 14 pkt och undvik att använda teckensnitt som är svåra att läsa på små skärmar. Vanligt använda typsnitt har stor sannolikhet att renderas konsekvent över olika e-postklienter, så att använda Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma och Trebuchet MS är vanligtvis säkra typsnitt. Om du använder ett anpassat teckensnitt, se till att ha ett reservteckensnitt identifierat i din 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 användning av bilder: Bilder kan sakta ner laddningstider och kanske inte visas korrekt på alla mobila enheter. Använd bilder sparsamt och se till att de är i storlek och komprimerad för mobil visning. Var noga med att fylla i alt-texten för dina bilder i händelse av att e-postklienten blockerar dem. Alla bilder ska lagras och hänvisas till från en säker webbplats (SSL). Här är exempelkoden för responsiva bilder i ett HTML-e-postmeddelande.
<!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. Rensa uppmaning (CTA): En tydlig och framträdande CTA är viktig i alla mejl, men det är särskilt viktigt i ett mobilvänligt mejl. Se till att CTA är lätt att hitta och att det är tillräckligt stort för att kunna klickas på en mobil enhet. Om du inkluderar knappar kan du se till att du har dem skrivna i CSS med inline-stiltaggar också:
<!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 och koncist innehåll: Håll innehållet i e-postmeddelandet kort och rakt på sak. Teckengränsen för ett HTML-e-postmeddelande kan variera beroende på vilken e-postklient som används. De flesta e-postklienter inför dock en maximal storleksgräns för e-postmeddelanden, vanligtvis mellan 1024-2048 kilobyte (KB), som inkluderar både HTML-koden och eventuella bilder eller bilagor. Använd underrubriker, punktpunkter och andra formateringstekniker för att göra innehållet lätt att skanna medan du rullar och läser på en liten skärm.
  2. Interaktiva element: införliva interaktiva element som fångar din prenumerants uppmärksamhet kommer att öka engagemanget, förståelsen och konverteringsfrekvensen från din e-post. Animerade GIF-filer, nedräkningstimer, videor och andra element stöds av majoriteten av smarttelefonens e-postklienter.
  3. Anpassning: Att anpassa hälsningen och innehållet för en specifik prenumerant kan avsevärt öka engagemanget, bara se till att du får det rätt! T.ex. Det är viktigt att ha reservdelar om det inte finns några data i ett förnamnsfält.
  4. Dynamiskt innehåll: Segmentering och anpassning av innehållet kan minska dina avregistreringsfrekvenser och hålla dina prenumeranter engagerade.
  5. Kampanjintegrering: De flesta moderna e-postleverantörer har möjlighet att automatiskt lägga till UTM-kampanjfrågesträngar för varje länk så att du kan se e-post som en kanal i analytics.
  6. Preferenscenter: E-postmarknadsföring är för viktig för bara en opt-in eller opt-out-strategi för e-post. Att införliva ett preferenscenter där dina prenumeranter kan ändra hur ofta de får e-postmeddelanden och vilket innehåll som är viktigt för dem är ett fantastiskt sätt att behålla ett starkt e-postprogram med engagerade prenumeranter!
  7. Testa, testa, testa: Se till att testa din e-post på flera enheter eller använd en applikation för att förhandsgranska dina e-postmeddelanden i e-postklienter för att säkerställa att det ser bra ut och fungerar korrekt på olika skärmstorlekar och operativsystem INNAN du skickar. Litmus rapporterar att de tre mest populära mobila öppna miljöerna fortsätter att vara desamma: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Inkludera även testvarianter av dina ämnesrader och ditt innehåll för att förbättra dina öppnings- och klickfrekvenser. Många e-postplattformar innehåller nu automatiska tester som kommer att prova listan, identifiera en vinnande variant och skicka det bästa e-postmeddelandet till de återstående prenumeranterna.

Om ditt företag kämpar med att designa, testa och implementera mobilresponsiva e-postmeddelanden som driver engagemang, tveka inte att kontakta min firma. DK New Media har erfarenhet av implementering av praktiskt taget alla e-postleverantörer (ESP).

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.