Email Maketi & OtometiMaketiga feaveaʻi ma Tablet

16 Mobile Friendly HTML Email Fa'ata'ita'iga Sili e Fa'ateleina le Tu'uina ma Fa'auiga

I le 2023, e foliga mai o le telefoni feaveaʻi o le a sili atu i luga o le komepiuta e avea ma masini muamua mo le tatalaina o imeli. O le mea moni, na maua e HubSpot lena mea 46 pasene o imeli uma matala ua tupu nei i luga o le telefoni feaveaʻi. Afai e te le o mamanuina imeli mo telefoni feaveaʻi, o loʻo e tuʻuina le tele o faʻamau ma tupe i luga o le laulau.

  1. Email Authentication: Mautinoa lou imeli e fa'amaonia i le vaega e auina atu ma IP O le tuatusi e taua tele i le o'o atu i le pusa meli ae le o le alu atu i se pusa lapisi po'o spam. E taua foi, ioe, ia e tuʻuina atu se auala e filifili ai mai le imeli e faʻaaoga ai se faʻavae e aofia ai se fesoʻotaʻiga e le faʻamaonia.
  2. Fuafuaga Tali: le HTML imeli e tatau fuafuaina e tali atu, o lona uiga e mafai ona fetuunai i le lau tele o le masini o loʻo vaʻaia ai. O lenei mea e faʻamautinoa ai e foliga lelei le imeli i luga o le komepiuta ma masini feaveaʻi.
  3. Fa'amatalaga manino ma manino mataupu: E taua tele se laina mataupu manino ma pupuu mo tagata fa'aoga feavea'i aua e na'o nai upu muamua o le laina mataupu latou te va'aia i totonu o la latou fa'aaliga muamua imeli. E tatau ona fa'apuupuu ma fa'aalia sa'o le anotusi o le imeli. Ole umi ole amio ole laina ole imeli e mafai ona fesuisuiai e faalagolago ile tele o mea, e pei ole imeli meli, le au maimoa, ma le imeli o loʻo faʻaaogaina. Ae ui i lea, o le tele o tagata atamamai e fautuaina le faʻapuupuu o laina mataupu imeli ma i le tulaga, masani i le va o 41-50 mataitusi poʻo 6-8 upu. I masini feavea'i, e mafai ona motusia laina autu e umi atu nai lo le 50 mataitusi, ma i nisi tulaga, e ono fa'aalia na'o nai upu muamua o le laina autu. O lenei mea e mafai ona faigata ai i le tagata e mauaina ona malamalama i le savali autu o le imeli ma e ono faʻaitiitia ai le avanoa e tatalaina ai le imeli.
  4. Ulutala: Ole fa'auluulu ole imeli ole fa'amatalaga pu'upu'u ole anotusi ole imeli o lo'o fa'aalia i tafatafa po'o lalo ole laina mataupu ile pusa meli a le tagata fa'atau imeli. Ose elemene taua e mafai ona a'afia ai le avanoa tatala o au imeli pe a fa'alelei. Ole tele o tagata fa'atau e tu'ufa'atasia le HTML ma le CSS e fa'amautinoa ai o lo'o fa'atulaga lelei le tusitusiga muamua.
<!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. Fa'atonu koluma tasi: O imeli e faʻatulagaina ma se faʻasologa o le koluma e tasi e faigofie ona faitau i masini feaveaʻi. O le anotusi e tatau ona faʻatulagaina i se faʻasologa talafeagai ma tuʻuina atu i se faʻaoga faigofie, faigofie ona faitau. Afai e tele au koluma, o le fa'aogaina o le CSS e mafai ona fa'atulaga lelei ia koluma i se fa'asologa o koluma e tasi.

O le mea lenei HTML fa'atulagaina imeli e 2 koluma i luga o le desktop ma pa'u i le tasi koluma i luga o lau telefoni feaveai:

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

O le mea lenei HTML fa'atulagaina imeli e 3 koluma i luga o le desktop ma pa'u i le tasi koluma i luga o lau telefoni feaveai:

<!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. Faiga Malamalama ma Pogisa: aupito e lagolagoina e tagata imeli le tulaga malamalama ma le pogisa CSS prefers-color-scheme e fa'aogaina mana'oga o le tagata fa'aoga. Ia mautinoa e fa'aoga ituaiga ata e iai sau fa'amatalaga manino. O se fa'ata'ita'iga fa'ailoga.
<!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. Mata'itusi tetele ma mafai ona faitau: E tatau ona filifilia le tele o le vai papatisoga ma le sitaili e faafaigofie ai ona faitau le tusitusiga i luga o se tamai lau. Fa'aoga a itiiti ifo i le 14pt le tele o le font ma aloese mai le fa'aogaina o mataitusi e faigata ona faitau i luga o lau laiti. O fonuka e masani ona fa'aogaina e maualuga le avanoa e tu'uina atu ai i taimi uma i luga o fa'atau imeli eseese, o le fa'aaogaina o Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, ma Trebuchet MS e masani lava ona saogalemu fonuka. Afai e te fa'aogaina se fa'amanu masani, ia mautinoa e i ai se fa'ailoga fa'afo'i e iloa i lau 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. Fa'aoga lelei o ata: O ata e mafai ona fa'agesegese taimi o uta ma atonu e le fa'aalia lelei i masini feavea'i uma. Fa'aaoga fa'aitiiti ata, ma ia mautinoa e lapopo'a ma faʻamalosi mo le va'aiga feavea'i. Ia mautinoa e faʻatumu le alt text mo au ata i le tulaga e poloka ai e le kalani imeli. O ata uma e tatau ona teuina ma faʻasino mai se upega tafaʻilagi malupuipuia (SSL). Ole fa'ata'ita'iga code o ata tali mai ile imeli HTML.
<!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. Fa'amanino le vala'au e fai (CTA): O se CTA manino ma taʻutaʻua e taua i soʻo se imeli, ae e sili ona taua ile imeli feaveaʻi. Ia mautinoa o le CTA e faigofie ona maua ma e lava lona telē e kiliki i luga o se masini feaveaʻi. Afai e te faʻapipiʻiina faʻamau, e mafai ona e mautinoa o loʻo e tusia i le CSS faʻatasi ai ma pine faʻailoga inline:
<!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. Mea pu'upu'u ma fa'a'oto: Fa'amaumau mea o lo'o i totonu ole imeli ia fa'apuupuu ma fa'atatau. Ole tapula'a ole amio mo se imeli HTML e mafai ona fesuisuia'i e fa'atatau ile imeli ile fa'aaogaina. Ae ui i lea, o le tele o tagata imeli e tuʻuina atu se tapulaa maualuga mo imeli, masani i le va o le 1024-2048 kilobytes (KB), lea e aofia uma ai le HTML code ma soʻo se ata poʻo mea faʻapipiʻi. Fa'aaogā ulutala, fa'ailoga pulu, ma isi faiga fa'apena e fa'afaigofie ai le su'esu'eina o mea a'o ta'avale ma faitau i luga o se lau la'ititi.
  2. Elemene fegalegaleai: tuufaatasia elemene fegalegaleai e pu'eina le manatu o lau tagata fai saofaga o le a fa'ateleina le fa'auiga, malamalama, ma fua faatatau o le liua mai lau imeli. Animasi GIF, fa'asologa o taimi, vitio, ma isi elemene e lagolagoina e le tele o tagata fa'atau imeli telefoni.
  3. Faʻapitoa: O le fa'avasegaina o le fa'afeiloa'iga ma le anotusi mo se tagata fai saofaga fa'apitoa e mafai ona fa'aosoina le fa'auiga, ia mautinoa e te sa'o! Eg. E taua le i ai o fa'aletonu pe afai e leai ni fa'amatalaga ile igoa muamua.
  4. Fa'atosina o mea: O le fa'avasegaina ma le tu'ufa'atasiga o mea e mafai ona fa'aitiitia ai lau tau e le'i lesitalaina ma fa'aauau pea ona fa'agaoioi lau au fai saofaga.
  5. Tu'ufa'atasiga Fa'asalalauga: Ole tele ole 'au'aunaga imeli fa'aonaponei e iai le agava'a e fa'apipi'i otometi UTM campaign querystrings mo so'otaga uma ina ia mafai ona e va'ai imeli o se auala i au'ili'iliga.
  6. Nofoaga Autu: E taua tele le maketiina o imeli mo na'o se filifiliga i totonu po'o le opt-out i imeli. O le tu'ufa'atasia o se nofoaga autu e fiafia i ai e mafai ai e lau au fai saofaga ona suia le tele o taimi latou te mauaina ai imeli ma o le a le mea e taua ia i latou o se auala sili lea e tausia ai se polokalame imeli malosi ma le au fai saofaga!
  7. Su'ega, Su'ega, Su'ega: Ia mautinoa e faʻataʻitaʻi lau imeli ile tele o masini pe faʻaoga se talosaga i mua'i va'ai au imeli i fa'atau imeli ina ia mautinoa e foliga lelei ma galue lelei i luga o le tele o lau mata eseese ma faiga faʻaogaina AO LEʻI auina atu. Litmus lipoti o le pito i luga 3 sili ona lauiloa feaveaʻi siosiomaga tatala e faaauau pea ona tutusa: Apple iPhone (iOS Meli), Google Android, Apple iPad (iPadOS Meli). Fa'apena fo'i, tu'ufa'atasia su'ega su'ega o au laina mataupu ma anotusi e fa'aleleia atili ai lau tau tatala ma kiliki. O le tele o fa'asalalauga imeli ua tu'ufa'atasia nei fa'ata'ita'iga otometi e fa'ata'ita'i ai le lisi, fa'ailoa se suiga manumalo, ma lafo le imeli sili i tagata o lo'o totoe.

Afai o loʻo tauivi lau kamupani i le mamanuina, suʻega, ma le faʻatinoina o imeli tali feaveaʻi o loʻo faʻauluina le faʻauiga, aua le faʻatuai e faʻafesoʻotaʻi laʻu kamupani. DK New Media ei ai le poto masani i le faʻatinoina o toetoe lava o tuʻuina atu auaunaga imeli (ESP).

Douglas Karr

Douglas Karr o CMO o OpenINSIGHTS ma le na faavaeina le Martech Zone. Ua fesoasoani Douglas i le tele o amataga manuia o MarTech, ua fesoasoani i le filiga tatau o le sili atu i le $ 5 piliona i le mauaina o le Martech ma tupe teufaafaigaluega, ma o loʻo faʻaauau pea ona fesoasoani i kamupani i le faʻatinoina ma le otometi a latou faʻatauga ma maketi. Douglas ose suiga fa'atekinolosi fa'avaomalo fa'avaomalo ma MarTech fa'apitoa ma failauga. O Douglas foi o se tusitala lolomi o le Dummie's guide ma se tusi taʻitaʻi pisinisi.

Faatatau Mataupu Faavae o

Toe i le pito i luga
lata

Ua maua le Adblock

Martech Zone e mafai ona tu'uina atu ia te oe lenei 'anotusi e aunoa ma se tau aua matou te fa'atupeina la matou 'upega tafa'ilagi e ala i tupe maua fa'asalalauga, so'oga fa'atasi, ma lagolago. Matou te fa'afetai pe a e aveese lau fa'asalalauga fa'asalalau a'o e va'ai i la matou saite.