Email Marketing & AutomationMobile na Mbadamba ụrọ

16 Mobile Enyi na Enyi HTML omume kacha mma nke na-ebuli ntinye igbe mbata na ntinye aka

N'afọ 2023, ọ ga-abụ na ekwentị mkpanaaka ga-akarị desktọpụ dị ka ngwaọrụ izizi maka imepe email. N'ezie, HubSpot hụrụ nke ahụ 46 percent nke imeghe email niile na-eme ugbu a na mkpanaka. Ọ bụrụ na ị naghị emepụta ozi-e maka mkpanaka, ị na-ahapụ ọtụtụ ntinye aka na ego na tebụl.

  1. Nyocha email: Na-emesi gị obi ezitere ozi ịntanetị na ngalaba izipu na IP adreesị dị oké mkpa iji banye na igbe mbata ma ghara ibuga ya na nchekwa junk ma ọ bụ spam. Ọ dịkwa mkpa, n'ezie, na ị na-enye ụzọ isi pụọ na ozi-e site na iji ikpo okwu na-agụnye njikọ ịdebanye aha.
  2. Nkwenye na-anabata: The HTML email kwesịrị ịbụ emebere ka ọ na-anabata, nke pụtara na ọ nwere ike gbanwee na nha ihuenyo nke ngwaọrụ a na-ekiri ya. Nke a na-eme ka o doo anya na email ahụ dị mma na desktọpụ na ngwaọrụ mkpanaka.
  3. Ahịrị isiokwu doro anya na nkenke: Ahịrị isiokwu doro anya na nkenke dị mkpa maka ndị ọrụ mkpanaka n'ihi na ha nwere ike ịhụ naanị okwu ole na ole mbụ nke ahịrị isiokwu na pane nlele email ha. O kwesịrị ịdị nkenke ma gosipụta nke ọma ọdịnaya nke ozi-e. Ogologo agwa kacha mma nke ahịrị isiokwu email nwere ike ịdịgasị iche dabere n'ọtụtụ ihe, dị ka ọdịnaya email, ndị na-ege ntị, na onye ahịa email ejiri. Agbanyeghị, ọtụtụ ndị ọkachamara na-atụ aro idobe ahịrị isiokwu email dị mkpụmkpụ ruo n'ókè, nke na-adịkarị n'etiti mkpụrụedemede 41-50 ma ọ bụ okwu 6-8. Na ngwaọrụ mkpanaka, ahịrị isiokwu dị ogologo karịa mkpụrụedemede 50 nwere ike ibipụ, na oge ụfọdụ, enwere ike igosipụta naanị okwu ole na ole mbụ nke ahịrị isiokwu ahụ. Nke a nwere ike ime ka o siere onye nnata ike ike ịghọta isi ozi nke ozi-e ma nwee ike ibelata ohere nke imeghe email ahụ.
  4. Isi mmalite: Onye isi okwu email bụ nchịkọta dị mkpirikpi nke ọdịnaya nke ozi-e na-egosi n'akụkụ ma ọ bụ n'okpuru ahịrị isiokwu n'ime igbe mbata nke onye ahịa email. Ọ bụ ihe dị mkpa nwere ike imetụta ọnụ ọgụgụ mepere emepe nke ozi-e gị mgbe emebere ya. Ọtụtụ ndị ahịa na-etinye HTML na CSS iji hụ na edobere ederede mbido isi nke ọma.
<!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. Nhazi otu kọlụm: Ozi ịntanetị emebere nwere nhazi otu kọlụm dị mfe ịgụ na ngwaọrụ mkpanaka. Ekwesịrị ịhazi ọdịnaya ahụ n'usoro ezi uche dị na ya wee gosipụta ya n'ụdị dị mfe ma dị mfe ọgụgụ. Ọ bụrụ na ị nwere ọtụtụ kọlụm, itinye CSS nwere ike jiri amara hazie kọlụm ndị ahụ na nhazi otu kọlụm.

Lee ihe Nhazi email HTML nke ahụ bụ ogidi abụọ dị na desktọpụ wee daa n'otu kọlụm na ihuenyo mkpanaka:

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

Lee ihe Nhazi email HTML nke ahụ bụ ogidi abụọ dị na desktọpụ wee daa n'otu kọlụm na ihuenyo mkpanaka:

<!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. Ọnọdụ ọkụ na ọchịchịrị: kasị ndị ahịa email na-akwado ọnọdụ ọkụ na ọchịchịrị CSS prefers-color-scheme iji nabata mmasị onye ọrụ. Jide n'aka na ị na-eji ụdị onyonyo ebe ị nwere nzụlite doro anya. Nke a bụ ihe atụ koodu.
<!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. Ụdị mkpụrụedemede buru ibu, nwere ike agụgharị: Ekwesịrị ịhọrọ nha na ụdị mkpụrụedemede iji mee ka ederede dị mfe ịgụ na obere ihuenyo. Jiri opekata mpe 14pt nha ma zere iji mkpụrụedemede siri ike ịgụ na obere ihuenyo. Fonts ndị a na-ejikarị eme ihe nwere nnukwu ohere nke ịsụgharị mgbe niile n'ofe ndị ahịa email dị iche iche, yabụ iji Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, na Trebuchet MS bụ mkpụrụedemede nchekwa. Ọ bụrụ na ị na-eji mkpụrụedemede ahaziri ahazi, jide n'aka na ị ga-achọpụta mkpụrụedemede ọdịda na CSS gị:
<!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. Ojiji onyonyo kacha mma: Onyonyo nwere ike belata oge ibu ma ghara igosipụta nke ọma na ngwaọrụ mkpanaka niile. Jiri ihe onyonyo mee ntakịrị, wee hụ na ha nwere nha na tinye ya maka ikiri mkpanaka. Jide n'aka na ị dejupụta alt ederede maka onyonyo gị ma ọ bụrụ na onye ahịa email na-egbochi ha. Ekwesịrị ịchekwa foto niile ma zoo aka na webụsaịtị echekwara (SSL). Nke a bụ koodu atụ nke onyonyo na-anabata na email 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. Kpochapụ oku ime ihe (CTA): CTA doro anya na ama ama dị mkpa na email ọ bụla, mana ọ dị mkpa karịsịa na email enyi na enyi. Jide n'aka na CTA dị mfe ịchọta yana na ọ buru ibu ka a pịa ya na ngwaọrụ mkpanaka. Ọ bụrụ na ịtinye bọtịnụ, ị nwere ike hụ na edere ya na CSS yana mkpado ụdị 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. Ọdịnaya dị nkenke na nkenke: Debe ọdịnaya nke email ahụ nkenke na ruo n'ókè. Oke agwa maka email HTML nwere ike ịdị iche dabere na onye ahịa email ejiri. Agbanyeghị, ọtụtụ ndị ahịa email na-amanye oke oke maka ozi-e, na-adịkarị n'etiti 1024-2048 kilobytes (KB), nke gụnyere ma koodu HTML yana onyonyo ma ọ bụ mgbakwunye ọ bụla. Jiri obere isiokwu, mgbo pointing, na usoro nhazi usoro ndị ọzọ iji mee ka ọdịnaya dị mfe nyocha mgbe ị na-atụgharị ma na-agụ na obere ihuenyo.
  2. Ihe ndị na-emekọrịta ihe: incorporating ihe mmekọrịta nke dọtara uche nke onye debanyere aha gị ga-akwalite njikọ aka, nghọta, na ọnụego ntughari site na email gị. Animated gifs, Ngụta ngụ oge, vidiyo, na ihe ndị ọzọ na-akwado ọtụtụ ndị ahịa email ekwentị.
  3. Nhazi Ịmezi ekele na ọdịnaya maka otu onye debanyere aha nwere ike ime ka njikọ aka dị ukwuu, jide n'aka na ị nwetara ya nke ọma! Dịka ọmụmaatụ. Inwe ndaghachi azụ ma ọ bụrụ na enweghị data na ngalaba aha mbụ dị mkpa.
  4. Ọdịnaya Dị Mgbanwe: Nkewa na nhazi nke ọdịnaya nwere ike ibelata ọnụego ịdebanye aha gị ma mee ka ndị debanyere aha gị nọrọ.
  5. Mgbakwunye mkpọsa: Ọtụtụ ndị na-eweta ọrụ email nke oge a nwere ike itinye aka na-akpaghị aka UTM mkpọsa ajụjụ maka njikọ ọ bụla ka ị nwee ike ịlele email dịka ọwa na nyocha.
  6. Ebe Mmasị: Ịre ahịa email dị oke mkpa maka naanị nbanye ma ọ bụ pụọ na ụzọ ozi-e. Ịgbakwunye ebe mmasị ebe ndị debanyere aha gị nwere ike ịgbanwe ugboro ole ha na-enweta ozi-e yana ọdịnaya dị ha mkpa bụ ụzọ dị egwu iji dobe mmemme email siri ike na ndị debanyere aha na-arụ ọrụ!
  7. Nwale, nwale, nwale: Gbaa mbọ hụ na ịnwale email gị n'ọtụtụ ngwaọrụ ma ọ bụ jiri ngwa mee ya lelee ozi-e gị n'ofe ndị ahịa email iji hụ na ọ dị mma ma na-arụ ọrụ nke ọma na nha ihuenyo dị iche iche na sistemụ arụ ọrụ tupu izipu. Litmus na-akọ na n'elu 3 kasị ewu ewu mobile oghe gburugburu na-anọgide na-abụ otu: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ọzọkwa, tinye ụdị ule dị iche iche nke ahịrị isiokwu gị na ọdịnaya iji melite ọnụego mepere emepe na pịa-site. Ọtụtụ nyiwe ozi-e na-etinyezi nnwale akpaghị aka nke ga-elele ndepụta ahụ, chọpụta mgbanwe na-emeri, wee ziga ozi-e kacha mma nye ndị debanyere aha fọdụrụnụ.

Ọ bụrụ na ụlọ ọrụ gị na-agbasi mbọ ike na imepụta, nwale, na mmejuputa ozi-e na-anabata ekwentị nke na-eme njikọ aka, egbula oge ịkpọtụrụ ụlọ ọrụ m. DK New Media nwere ahụmịhe na mmejuputa ihe fọrọ nke nta ka ọ bụrụ ndị na-eweta ọrụ email ọ bụla (ESP).

Douglas Karr

Douglas Karr bụ CMO Mepee ihe ọmụma na onye nchoputa nke Martech Zone. Douglas enyerela ọtụtụ mmalite MarTech aka nke ọma, nyere aka n'ịrụsi ọrụ ike nke ihe karịrị ijeri $ 5 na nnweta na ntinye ego nke Martech, ma na-aga n'ihu na-enyere ụlọ ọrụ aka n'imejuputa na imezi usoro ahịa na ahịa ha. Douglas bụ mgbanwe dijitalụ ama ama na mba ụwa na ọkachamara MarTech na ọkà okwu. Douglas bụkwa onye odee bipụtara nke ndu Dummie na akwụkwọ ndu azụmaahịa.

njikọ Articles

Gaa na bọtịnụ n'elu
nso

Achọpụtara ihe mgbochi

Martech Zone nwere ike ịnye gị ọdịnaya a n'efu n'ihi na anyị na-enweta saịtị anyị site na ego mgbasa ozi, njikọ ndị mmekọ, na nkwado. Ọ ga-amasị anyị ma ị ga-ewepụ ihe mgbochi mgbasa ozi gị ka ị na-elele saịtị anyị.