Email Marketing at AutomationMobile at Tablet Marketing

16 Mobile Friendly HTML Email Pinakamahuhusay na Kasanayan na Nagma-maximize sa Inbox Placement at Pakikipag-ugnayan

Sa 2023, malamang na malampasan ng mobile ang desktop bilang pangunahing device para sa pagbubukas ng email. Sa katunayan, natagpuan iyon ng HubSpot 46 porsiyento sa lahat ng nagbubukas ng email ay nangyayari na ngayon sa mobile. Kung hindi ka nagdidisenyo ng mga email para sa mobile, mag-iiwan ka ng maraming pakikipag-ugnayan at pera sa mesa.

  1. Email Authentication: Tinitiyak ang iyong na-authenticate ang mga email sa nagpapadalang domain at IP mahalaga ang address sa pagpunta sa inbox at hindi iruruta sa junk o spam folder. Mahalaga rin, siyempre, na magbigay ka ng paraan ng pag-opt out sa email gamit ang isang platform na may kasamang link sa pag-unsubscribe.
  2. Nakikiramay na Disenyo: Ang HTML email dapat idinisenyo upang maging tumutugon, na nangangahulugan na maaari itong mag-adjust sa laki ng screen ng device kung saan ito tinitingnan. Tinitiyak nito na maganda ang hitsura ng email sa parehong desktop at mobile device.
  3. Malinaw at maigsi na linya ng paksa: Ang isang malinaw at maigsi na linya ng paksa ay mahalaga para sa mga gumagamit ng mobile dahil maaari lang nilang makita ang mga unang salita ng linya ng paksa sa kanilang pane ng preview ng email. Dapat itong maikli at tumpak na sumasalamin sa nilalaman ng email. Ang pinakamainam na haba ng character ng isang linya ng paksa ng email ay maaaring mag-iba depende sa ilang salik, gaya ng nilalaman ng email, audience, at email client na ginagamit. Gayunpaman, inirerekomenda ng karamihan sa mga eksperto na panatilihing maikli at tapat ang mga linya ng paksa ng email, karaniwang nasa pagitan ng 41-50 character o 6-8 na salita. Sa mga mobile device, ang mga linya ng paksa na mas mahaba sa 50 character ay maaaring maputol, at sa ilang mga kaso, maaari lamang ipakita ang unang ilang salita ng linya ng paksa. Maaari nitong gawing mahirap para sa tatanggap na maunawaan ang pangunahing mensahe ng email at maaaring mabawasan ang posibilidad na mabuksan ang email.
  4. Preheader: Ang email preheader ay isang maikling buod ng nilalaman ng isang email na lumalabas sa tabi o ibaba ng linya ng paksa sa inbox ng email client. Ito ay isang mahalagang elemento na maaaring makaapekto sa bukas na rate ng iyong mga email kapag na-optimize. Karamihan sa mga kliyente ay nagsasama ng HTML at CSS upang matiyak na ang teksto ng preheader ay maayos na naka-set up.
<!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. Layout ng single-column: Ang mga email na idinisenyo gamit ang isang solong hanay na layout ay mas madaling basahin sa mga mobile device. Ang nilalaman ay dapat na nakaayos sa isang lohikal na pagkakasunud-sunod at ipinakita sa isang simple, madaling basahin na format. Kung marami kang column, ang paggamit ng CSS ay maaaring maayos na ayusin ang mga column sa isang solong column na layout.

Narito ang isang HTML na layout ng email iyon ay 2 column sa desktop at nag-collapse sa isang column sa mga mobile screen:

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

Narito ang isang HTML na layout ng email iyon ay 3 column sa desktop at nag-collapse sa isang column sa mga mobile screen:

<!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. Light at Dark Mode: tulay sinusuportahan ng mga email client ang light at dark mode CSS prefers-color-scheme upang mapaunlakan ang mga kagustuhan ng gumagamit. Tiyaking gumamit ng mga uri ng larawan kung saan mayroon kang transparent na background. Narito ang isang halimbawa ng code.
<!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. Malaki, nababasang mga font: Ang laki at istilo ng font ay dapat piliin upang gawing madaling basahin ang teksto sa isang maliit na screen. Gumamit ng hindi bababa sa 14pt na laki ng font at iwasang gumamit ng mga font na mahirap basahin sa maliliit na screen. Ang mga karaniwang ginagamit na font ay may mataas na posibilidad na patuloy na mag-render sa iba't ibang email client, kaya ang paggamit ng Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, at Trebuchet MS ay karaniwang mga ligtas na font. Kung gagamit ka ng custom na font, tiyaking may fallback na font na natukoy sa iyong 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. Pinakamainam na paggamit ng mga larawan: Maaaring pabagalin ng mga larawan ang mga oras ng pag-load at maaaring hindi maipakita nang maayos sa lahat ng mga mobile device. Gumamit ng mga larawan nang matipid, at tiyaking may sukat ang mga ito at compressed para sa mobile na pagtingin. Siguraduhing punan ang alt text para sa iyong mga larawan kung sakaling harangan sila ng email client. Ang lahat ng mga larawan ay dapat na naka-imbak at tinutukoy mula sa isang secure na website (SSL). Narito ang halimbawang code ng mga tumutugon na larawan sa isang HTML na email.
<!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. I-clear ang call-to-action (CTA): Ang isang malinaw at kitang-kitang CTA ay mahalaga sa anumang email, ngunit ito ay lalong mahalaga sa isang pang-mobile na email. Siguraduhin na ang CTA ay madaling mahanap at na ito ay sapat na malaki upang i-click sa isang mobile device. Kung magsasama ka ng mga button, masisiguro mong naisulat mo ang mga ito sa CSS na may mga inline na tag ng istilo:
<!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. Maikli at maigsi na nilalaman: Panatilihing maikli at sa punto ang nilalaman ng email. Ang limitasyon sa karakter para sa isang HTML na email ay maaaring mag-iba depende sa email client na ginagamit. Gayunpaman, karamihan sa mga email client ay nagpapataw ng maximum na limitasyon sa laki para sa mga email, karaniwang nasa pagitan ng 1024-2048 kilobytes (KB), na kinabibilangan ng parehong HTML code at anumang mga larawan o attachment. Gumamit ng mga subheading, bullet point, at iba pang mga diskarte sa pag-format upang gawing madaling ma-scan ang nilalaman habang nag-i-scroll at nagbabasa sa isang maliit na screen.
  2. Mga interactive na elemento: incorporating interactive na elemento na nakakakuha ng atensyon ng iyong subscriber ay magpapalaki ng pakikipag-ugnayan, pag-unawa, at mga rate ng conversion mula sa iyong email. Mga animated na GIF, ang mga countdown timer, video, at iba pang elemento ay sinusuportahan ng karamihan ng mga email client ng smartphone.
  3. Pag-personalize: Ang pag-personalize ng pagbati at content para sa isang partikular na subscriber ay maaaring makabuluhang humimok ng pakikipag-ugnayan, siguraduhin lang na nakuha mo ito nang tama! Hal. Ang pagkakaroon ng mga fallback kung walang data sa field ng first name ay mahalaga.
  4. Dynamic na Nilalaman: Maaaring bawasan ng pagse-segment at pagpapasadya ng nilalaman ang iyong mga rate ng pag-unsubscribe at panatilihing nakatuon ang iyong mga subscriber.
  5. Pagsasama ng Kampanya: Karamihan sa mga modernong email service provider ay may kakayahang awtomatikong magdagdag Mga querystring ng UTM campaign para sa bawat link upang matingnan mo ang email bilang isang channel sa analytics.
  6. Preference Center: Ang marketing sa email ay masyadong mahalaga para sa isang pag-opt-in o pag-opt out na diskarte sa mga email. Ang pagsasama ng isang sentro ng kagustuhan kung saan maaaring baguhin ng iyong mga subscriber kung gaano kadalas sila nakakatanggap ng mga email at kung anong nilalaman ang mahalaga sa kanila ay isang kamangha-manghang paraan upang mapanatili ang isang malakas na programa ng email sa mga nakatuong subscriber!
  7. Pagsubok, Pagsubok, Pagsubok: Tiyaking subukan ang iyong email sa maraming device o gumamit ng isang application upang i-preview ang iyong mga email sa mga email client upang matiyak na maganda ang hitsura nito at gumagana nang maayos sa iba't ibang laki ng screen at operating system BAGO ka magpadala. Litmus ay nag-ulat na ang nangungunang 3 pinakasikat na mobile open environment ay patuloy na pareho: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Gayundin, isama ang mga variation ng pagsubok ng iyong mga linya ng paksa at nilalaman upang mapabuti ang iyong bukas at mga click-through na rate. Maraming email platform ang nagsasama na ngayon ng automated na pagsubok na magsa-sample ng listahan, matukoy ang isang panalong variation, at magpapadala ng pinakamahusay na email sa mga natitirang subscriber.

Kung nahihirapan ang iyong kumpanya sa pagdidisenyo, pagsubok, at pagpapatupad ng mga email na tumutugon sa mobile na humihimok ng pakikipag-ugnayan, huwag mag-atubiling makipag-ugnayan sa aking kumpanya. DK New Media ay may karanasan sa pagpapatupad ng halos bawat email service provider (ESP).

Douglas Karr

Douglas Karr ay CMO ng OpenINSIGHTS at ang nagtatag ng Martech Zone. Nakatulong si Douglas sa dose-dosenang matagumpay na mga startup ng MarTech, tumulong sa angkop na pagsusumikap ng higit sa $5 bil sa mga pagkuha at pamumuhunan ng Martech, at patuloy na tinutulungan ang mga kumpanya sa pagpapatupad at pag-automate ng kanilang mga diskarte sa pagbebenta at marketing. Si Douglas ay isang kinikilalang internasyonal na digital na pagbabago at eksperto at tagapagsalita ng MarTech. Si Douglas ay isa ring nai-publish na may-akda ng isang Dummie's guide at isang business leadership book.

Kaugnay na Artikulo

Bumalik sa tuktok na pindutan
Pagsasara

Natukoy ang Adblock

Martech Zone ay kayang ibigay sa iyo ang nilalamang ito nang walang bayad dahil pinagkakakitaan namin ang aming site sa pamamagitan ng kita ng ad, mga link na kaakibat, at mga sponsorship. Ikinalulugod namin kung aalisin mo ang iyong ad blocker habang tinitingnan mo ang aming site.