E-mailmarketing en automatiseringMarketing op mobiele apparaten en tablets

16 mobielvriendelijke best practices voor HTML-e-mail die de plaatsing en betrokkenheid van de inbox maximaliseren

In 2023 is het waarschijnlijk dat mobiel de desktop zal overtreffen als het primaire apparaat voor het openen van e-mail. HubSpot heeft dat zelfs gevonden 46 procent van alle geopende e-mails vindt nu plaats op mobiel. Als u geen e-mails voor mobiel ontwerpt, laat u veel betrokkenheid en geld op tafel liggen.

  1. E-mail authenticatie: Je verzekeren e-mails worden geverifieerd naar het verzendende domein en IP adres is van cruciaal belang om naar de inbox te gaan en niet naar een map met ongewenste e-mail of spam te worden geleid. Het is natuurlijk ook essentieel dat u een manier biedt om u af te melden voor de e-mail via een platform dat een afmeldlink bevat.
  2. Reagerend ontwerp: De HTML e-mail zou moeten zijn ontworpen om responsief te zijn, wat betekent dat het zich kan aanpassen aan de schermgrootte van het apparaat waarop het wordt bekeken. Dit zorgt ervoor dat de e-mail er goed uitziet op zowel desktop als mobiele apparaten.
  3. Duidelijke en beknopte onderwerpregel: Een duidelijke en beknopte onderwerpregel is belangrijk voor mobiele gebruikers omdat ze mogelijk alleen de eerste paar woorden van de onderwerpregel zien in hun e-mailvoorbeeldvenster. Het moet kort zijn en de inhoud van de e-mail nauwkeurig weergeven. De optimale tekenlengte van een onderwerpregel van een e-mail kan variëren, afhankelijk van een aantal factoren, zoals de inhoud van de e-mail, het publiek en de e-mailclient die wordt gebruikt. De meeste experts raden echter aan om de onderwerpregels van e-mails kort en bondig te houden, meestal tussen de 41-50 tekens of 6-8 woorden. Op mobiele apparaten kunnen onderwerpregels die langer zijn dan 50 tekens worden afgebroken en in sommige gevallen worden alleen de eerste paar woorden van de onderwerpregel weergegeven. Dit kan het voor de ontvanger moeilijk maken om de hoofdboodschap van de e-mail te begrijpen en kan de kans verkleinen dat de e-mail wordt geopend.
  4. Voorwoord: Een e-mailpreheader is een korte samenvatting van de inhoud van een e-mail die naast of onder de onderwerpregel in de inbox van een e-mailclient verschijnt. Het is een belangrijk element dat van invloed kan zijn op de open rate van uw e-mails wanneer deze is geoptimaliseerd. De meeste clients gebruiken HTML en CSS om ervoor te zorgen dat de preheader-tekst correct is ingesteld.
<!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. Lay-out met één kolom: E-mails die zijn ontworpen met een lay-out met één kolom, zijn gemakkelijker te lezen op mobiele apparaten. De inhoud moet in een logische volgorde worden georganiseerd en in een eenvoudig, gemakkelijk leesbaar formaat worden gepresenteerd. Als u meerdere kolommen heeft, kunt u met behulp van CSS de kolommen netjes ordenen in een lay-out met één kolom.

Hier is een HTML-e-maillay-out dat zijn 2 kolommen op desktop en samengevouwen tot een enkele kolom op mobiele schermen:

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

Hier is een HTML-e-maillay-out dat zijn 3 kolommen op desktop en samengevouwen tot een enkele kolom op mobiele schermen:

<!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. Lichte en donkere modus: De meeste e-mailclients ondersteunen de lichte en donkere modus CSS prefers-color-scheme om tegemoet te komen aan de voorkeuren van de gebruiker. Zorg ervoor dat u afbeeldingstypen gebruikt met een transparante achtergrond. Hier is een codevoorbeeld.
<!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. Grote, leesbare lettertypen: De lettergrootte en -stijl moeten zo worden gekozen dat de tekst gemakkelijk leesbaar is op een klein scherm. Gebruik een lettergrootte van minimaal 14pt en vermijd het gebruik van lettertypen die moeilijk leesbaar zijn op kleine schermen. Veelgebruikte lettertypen hebben een grote kans om consistent te worden weergegeven in verschillende e-mailclients, dus het gebruik van Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma en Trebuchet MS zijn doorgaans veilige lettertypen. Als u een aangepast lettertype gebruikt, zorg er dan voor dat u een fallback-lettertype identificeert in uw 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. Optimaal gebruik van afbeeldingen: Afbeeldingen kunnen de laadtijden vertragen en worden mogelijk niet correct weergegeven op alle mobiele apparaten. Gebruik afbeeldingen spaarzaam en zorg ervoor dat ze de juiste afmetingen hebben gecomprimeerde voor mobiele weergave. Zorg ervoor dat u de alt-tekst voor uw afbeeldingen invult voor het geval dat de e-mailclient ze blokkeert. Alle afbeeldingen moeten worden opgeslagen en er moet naar worden verwezen vanaf een beveiligde website (SSL). Hier is een voorbeeldcode van responsieve afbeeldingen in een HTML-e-mail.
<!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. Duidelijke call-to-action (CTA): Een duidelijke en prominente CTA is belangrijk in elke e-mail, maar het is vooral belangrijk in een mobielvriendelijke e-mail. Zorg ervoor dat de CTA gemakkelijk te vinden is en dat deze groot genoeg is om op een mobiel apparaat te klikken. Als je knoppen opneemt, kun je ervoor zorgen dat je ze ook in CSS laat schrijven met inline style tags:
<!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. Korte en bondige inhoud: Houd de inhoud van de e-mail kort en bondig. De tekenlimiet voor een HTML-e-mail kan variëren, afhankelijk van de e-mailclient die wordt gebruikt. De meeste e-mailclients stellen echter een maximumgrootte voor e-mails, doorgaans tussen 1024-2048 kilobytes (KB), die zowel de HTML-code als eventuele afbeeldingen of bijlagen bevat. Gebruik tussenkopjes, opsommingstekens en andere opmaaktechnieken om de inhoud gemakkelijk scanbaar te maken tijdens het scrollen en lezen op een klein scherm.
  2. Interactieve elementen: Integratie van interactieve elementen die de aandacht van uw abonnee trekken, verhogen de betrokkenheid, het begrip en de conversieratio's van uw e-mail. Geanimeerde GIF's, afteltimers, video's en andere elementen worden ondersteund door de meeste e-mailclients voor smartphones.
  3. Personalisatie: Het personaliseren van de aanhef en inhoud voor een specifieke abonnee kan de betrokkenheid aanzienlijk vergroten, maar zorg ervoor dat u het goed doet! Bijv. Het is belangrijk om terugvalmogelijkheden te hebben als er geen gegevens in een voornaamveld staan.
  4. Dynamische inhoud: Segmentatie en aanpassing van de inhoud kan uw afmeldingspercentages verlagen en uw abonnees betrokken houden.
  5. Campagne-integratie: De meeste moderne e-mailserviceproviders hebben de mogelijkheid om automatisch toe te voegen Zoekreeksen voor UTM-campagnes voor elke link, zodat u e-mail als een kanaal in analyses kunt bekijken.
  6. Voorkeurscentrum: E-mailmarketing is te belangrijk voor alleen een opt-in of opt-out benadering van e-mails. Het opnemen van een voorkeurencentrum waar uw abonnees kunnen wijzigen hoe vaak ze e-mails ontvangen en welke inhoud voor hen belangrijk is, is een fantastische manier om een ​​sterk e-mailprogramma met betrokken abonnees te behouden!
  7. Testen, testen, testen: Zorg ervoor dat u uw e-mail op meerdere apparaten test of gebruik hiervoor een applicatie bekijk een voorbeeld van uw e-mails in e-mailclients om ervoor te zorgen dat het er goed uitziet en goed werkt op verschillende schermformaten en besturingssystemen VOORDAT u verzendt. Lakmoes meldt dat de top 3 van meest populaire mobiele open omgevingen hetzelfde blijft: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Voeg ook testvarianten van uw onderwerpregels en inhoud toe om uw open- en klikfrequenties te verbeteren. Veel e-mailplatforms bevatten nu geautomatiseerde tests die een steekproef van de lijst nemen, een winnende variant identificeren en de beste e-mail naar de resterende abonnees sturen.

Als uw bedrijf worstelt met het ontwerpen, testen en implementeren van responsieve mobiele e-mails die de betrokkenheid stimuleren, aarzel dan niet om contact op te nemen met mijn bedrijf. DK New Media heeft ervaring met de implementatie van vrijwel elke e-mailserviceprovider (ESP).

Douglas Karr

Douglas Karr is CMO van INZICHTEN openen en de oprichter van de Martech Zone. Douglas heeft tientallen succesvolle MarTech-startups geholpen, heeft geholpen bij het due diligence-onderzoek van meer dan $ 5 miljard aan Martech-overnames en -investeringen, en blijft bedrijven helpen bij het implementeren en automatiseren van hun verkoop- en marketingstrategieën. Douglas is een internationaal erkend expert en spreker op het gebied van digitale transformatie en MarTech. Douglas is ook een gepubliceerde auteur van een Dummie's-gids en een boek over zakelijk leiderschap.

Gerelateerde artikelen

Terug naar boven knop
Sluiten

Adblock gedetecteerd

Martech Zone kan u deze inhoud gratis aanbieden omdat we inkomsten genereren met onze site via advertentie-inkomsten, gelieerde links en sponsoring. We zouden het op prijs stellen als u uw adblocker zou verwijderen terwijl u onze site bekijkt.