Email Marketing & AutomationFivarotana finday sy tablette

16 mailaka HTML sariaka amin'ny finday ny fomba fanao tsara indrindra izay mampitombo ny fametrahana sy ny firotsahana anaty boaty

Amin'ny 2023, azo inoana fa hihoatra ny desktop ho fitaovana voalohany hanokafana mailaka ny finday. Raha ny marina, HubSpot dia nahita izany 46 isan-jato amin'ny mailaka rehetra misokatra izao dia miseho amin'ny finday. Raha tsy mamolavola mailaka ho an'ny finday ianao, dia mamela fifamatorana sy vola be eo ambony latabatra.

  1. Fanamarinana mailaka: Manome toky ny voamarina ny mailaka mankany amin'ny sehatra fandefasana ary IP Ny adiresy dia tena ilaina amin'ny fidirana ao amin'ny boaty fidirana ary tsy alefa any amin'ny lahatahiry junk na spam. Tena ilaina ihany koa, mazava ho azy, ny hanomezanao fomba hialana amin'ny mailaka amin'ny alàlan'ny sehatra iray misy rohy tsy misoratra anarana.
  2. Famolavolana mamaly: The HTML mailaka tokony ho natao ho mamaly, izay midika fa afaka manitsy ny haben'ny efijery amin'ny fitaovana ijerena azy. Izany dia miantoka fa ny mailaka dia mijery tsara amin'ny desktop sy ny fitaovana finday.
  3. Lohahevitra mazava sy fohy: Zava-dehibe ho an'ny mpampiasa finday ny andalana mazava sy fohy satria ny teny vitsivitsy voalohany amin'ny andalana foto-kevitra ihany no mety ho hitan'izy ireo ao amin'ny tontonana mailaka. Tokony ho fohy sy mazava tsara ny votoatin'ny mailaka. Ny halavan'ny toetra tsara indrindra amin'ny andalana lohahevitra mailaka dia mety miovaova arakaraka ny anton-javatra maromaro, toy ny votoatin'ny mailaka, ny mpihaino ary ny mpanjifa mailaka ampiasaina. Na izany aza, ny ankamaroan'ny manam-pahaizana dia manoro hevitra ny hitazona ny andalana lohahevitra mailaka fohy sy amin'ny teboka, matetika eo anelanelan'ny 41-50 litera na teny 6-8. Amin'ny fitaovana finday, mety ho tapaka ny andalana lohahevitra mihoatra ny 50, ary amin'ny toe-javatra sasany, dia ireo teny vitsivitsy voalohany amin'ny andalana foto-kevitra ihany no mety hiseho. Mety ho sarotra ho an'ny mpandray ny fahazoana ny hafatra fototra amin'ny mailaka izany ary mety hampihena ny mety ho fisokafan'ny mailaka.
  4. Lohateny mialoha: Ny lohatenin'ny mailaka dia famintinana fohy momba ny votoatin'ny mailaka izay miseho eo akaikin'ny andalana na eo ambanin'ny loha-hevitra ao amin'ny boaty fidirana mpanjifa mailaka. Singa manan-danja iray izay mety hisy fiantraikany amin'ny tahan'ny fisokafan'ny mailakao izy io rehefa namboarina. Ny ankamaroan'ny mpanjifa dia mampiditra HTML sy CSS mba hahazoana antoka fa voapetraka tsara ny lahatsoratra mialoha.
<!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. Fandrindrana tsanganana tokana: Mora kokoa ny mamaky amin'ny fitaovana finday ireo mailaka izay novolavolaina miaraka amin'ny tsanganana tokana. Ny votoatiny dia tokony halamina amin'ny filaharana lojika ary aseho amin'ny endrika tsotra sy mora vakina. Raha manana tsanganana maromaro ianao, ny fampiasana CSS dia afaka mandamina tsara ireo tsanganana ao anaty tsanganana tokana.

Ity misy HTML endrika mailaka izany dia tsanganana 2 eo amin'ny desktop ary mirodana ho tsanganana tokana amin'ny efijery finday:

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

Ity misy HTML endrika mailaka izany dia tsanganana 3 eo amin'ny desktop ary mirodana ho tsanganana tokana amin'ny efijery finday:

<!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. Maivana sy maizina: Most Ny mpanjifa mailaka dia manohana ny maody maivana sy maizina CSS prefers-color-scheme mba handraisana ny safidin'ny mpampiasa. Aza hadino ny mampiasa karazana sary izay manana fiaviana mangarahara. Ity misy ohatra 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. endritsoratra lehibe sy azo vakiana: Ny haben'ny endri-tsoratra sy ny fomba dia tokony hofidina mba hahatonga ny lahatsoratra ho mora vakina amin'ny efijery kely. Mampiasà haben'ny endritsoratra 14pt fara-fahakeliny ary ialao ny fampiasana endri-tsoratra sarotra vakiana amin'ny efijery kely. Ny endri-tsoratra fampiasa mahazatra dia manana tombotsoa lehibe amin'ny famoahana tsy tapaka amin'ny mpanjifa mailaka samihafa, ka ny fampiasana Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, ary Trebuchet MS dia endri-tsoratra azo antoka. Raha mampiasa endri-tsoratra mahazatra ianao, dia ataovy izay hahitanao endritsoratra mihemotra hita ao amin'ny CSS-nao:
<!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. Fampiasana sary tsara indrindra: Ny sary dia afaka mampiadana ny fotoana fandefasana ary mety tsy hiseho tsara amin'ny fitaovana finday rehetra. Ampiasao kely ny sary, ary ataovy azo antoka fa mitovy habe sy Compressed ho an'ny fijerena finday. Ataovy azo antoka fa fenoy ny lahatsoratra alt ho an'ny sarinao raha toa ka sakanan'ny mpanjifa mailaka izy ireo. Ny sary rehetra dia tokony hotehirizina sy holazaina amin'ny tranokala azo antoka (SSL). Ity misy ohatra kaody momba ny sary mihetsika ao anaty mailaka 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. Hazavao ny antso ho amin'ny hetsika (CTA): Ny CTA mazava sy misongadina dia manan-danja amin'ny mailaka rehetra, fa zava-dehibe indrindra amin'ny mailaka mora ampiasaina. Ataovy azo antoka fa mora hita ny CTA ary lehibe izy io ka azo kitihina amin'ny fitaovana finday. Raha mampiditra bokotra ianao dia azonao antoka fa nosoratanao amin'ny CSS miaraka amin'ny marika inline izy ireo:
<!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. Votoaty fohy sy fohy: Ataovy fohy ny votoatin'ny mailaka sy amin'ny teboka. Ny fetran'ny toetran'ny mailaka HTML dia mety miovaova arakaraka ny mpanjifa mailaka ampiasaina. Na izany aza, ny ankamaroan'ny mpanjifa mailaka dia mametraka fetra ambony indrindra ho an'ny mailaka, matetika eo anelanelan'ny 1024-2048 kilobytes (KB), izay ahitana ny kaody HTML sy ny sary na ny attaché rehetra. Mampiasà lohatenikely, teboka bala, ary teknika fandrafetana hafa mba hahatonga ny votoaty ho mora scanina eo am-pamakiana sy famakiana amin'ny efijery kely.
  2. Elements interactive: fampidirana singa interactive izay misarika ny sain'ny mpanjifanao dia hampiakatra ny fifaneraserana, ny fahatakarana ary ny tahan'ny fiovam-po avy amin'ny mailakao. GIF sarimiaina, fameram-potoana, horonan-tsary, ary singa hafa dia tohanan'ny ankamaroan'ny mpanjifa mailaka amin'ny finday.
  3. Personalization: Ny fanaovana manokana ny fiarahabana sy ny votoaty ho an'ny mpanjifa manokana dia mety hitarika ny firotsahana, aoka ho azo antoka fa azonao tsara! oh. Zava-dehibe ny fananana fiverenana raha tsy misy angon-drakitra ao amin'ny saha voalohany.
  4. Votoaty mavitrika: Ny fizarana sy ny fanamboarana ny atiny dia afaka mampihena ny tahan'ny tsy misoratra anarana ary mitazona ny mpanjifanao ho tafiditra.
  5. Fampidirana fanentanana: Ny ankamaroan'ny mpanome tolotra mailaka maoderina dia manana fahafahana mampiditra ho azy UTM campaign querystrings ho an'ny rohy tsirairay mba hahafahanao mijery ny mailaka ho toy ny fantsona amin'ny analytics.
  6. Foibe Preference: Ny marketing amin'ny mailaka dia zava-dehibe loatra ho an'ny fomba fidirana amin'ny alàlan'ny mailaka fotsiny. Ny fampidirana foibem-preference izay ahafahan'ny mpanjifanao manova ny impiry mahazo mailaka sy ny votoaty manan-danja amin'izy ireo dia fomba iray mahafinaritra hitazonana programa mailaka matanjaka miaraka amin'ireo mpanjifa mirotsaka!
  7. Test, Test, Test: Ataovy azo antoka ny hizaha toetra ny mailakao amin'ny fitaovana maro na mampiasa fampiharana iray jereo mialoha ny mailakao amin'ny mpanjifa mailaka mba hahazoana antoka fa toa tsara sy miasa araka ny tokony ho izy amin'ny haben'ny efijery samihafa sy ny rafitra miasa alohan'ny handefasanao azy. Litmus dia mitatitra fa ny tontolo misokatra malalaka finday 3 malaza indrindra dia mbola mitovy: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ampidiro ihany koa ny fiovaovan'ny fitsapana amin'ny andalana sy ny atiny mba hanatsarana ny tahan'ny fisokafanao sy ny click-through. Maro amin'ireo sehatra mailaka izao no mampiditra fitsapana mandeha ho azy izay hanandrana ny lisitra, hamantatra ny fiovan'ny fandresena, ary handefa ny mailaka tsara indrindra amin'ireo mpanjifa sisa.

Raha sahirana ny orinasanao amin'ny famolavolana, fitsapana ary fampiharana mailaka mamaly amin'ny finday izay mitondra fifaneraserana, aza misalasala mifandray amin'ny orinasako. DK New Media manana traikefa amin'ny fampiharana saika ny mpanome tolotra mailaka rehetra (ESP).

Douglas Karr

Douglas Karr dia CMO ny OpenINSIGHTS ary ny mpanorina ny Martech Zone. Nanampy tamin'ny fanombohana MarTech am-polony maro i Douglas, nanampy tamin'ny fahazotoana mitentina 5 miliara dolara amin'ny fividianana sy fampiasam-bola Martech, ary manohy manampy ireo orinasa amin'ny fampiharana sy ny automatique ny paikady momba ny varotra sy ny varotra. Douglas dia fanovàna nomerika eken'ny sehatra iraisam-pirenena ary manampahaizana sy mpandahateny MarTech. Douglas dia mpanoratra navoakan'ny torolàlana Dummie ary boky fitarihana orinasa.

Related Articles

Miverina amin'ny bokotra ambony
akaiky

Adblock hita

Martech Zone dia afaka manome anao ity votoaty ity tsy misy vidiny satria ataonay vola ny tranokalanay amin'ny alàlan'ny fidiram-bolan'ny doka, ny rohy mifandray, ary ny fanohanana. Mankasitraka izahay raha esorinao ny fanakanana dokao rehefa mijery ny tranokalanay ianao.