E-pasta mārketings un automatizācijaMārketinga un pārdošanas video

Izpratne par HTML e-pasta dizaina izaicinājumiem (un neapmierinātību).

Ja atverat satura pārvaldības sistēmu, lai izveidotu tīmekļa lapas, tas ir diezgan vienkāršs process. Mūsdienu tīmekļa pārlūkprogrammas atbalsta HTML, CSS, un JavaScript atbilstoši stingriem tīmekļa standartiem. Un tās ir tikai dažas pārlūkprogrammas, par kurām dizaineriem ir jāuztraucas. Protams, ir izņēmumi… un daži vienkārši risinājumi vai funkcijas, kas raksturīgas šīm pārlūkprogrammām.

Vispārējo standartu dēļ satura pārvaldības sistēmās ir vienkārši izstrādāt lapu veidotājus. Pārlūkprogrammas atbilst HTML5, CSS un JavaScript, un izstrādātāji var izveidot neticami stabilus risinājumus, lai izveidotu tīmekļa lapas, kas reaģē uz ierīcēm un ir konsekventas visās pārlūkprogrammās. Pirms divām desmitgadēm gandrīz katrs tīmekļa dizaineris izmantoja darbvirsmas programmatūru, lai izstrādātu tīmekļa lapas. Tagad ir diezgan neparasti, ka tīmekļa dizaineris izstrādā tīmekļa lapu — visbiežāk viņi izstrādā veidnes un satura aizpildīšanai izmanto satura sistēmu redaktorus. Vietņu redaktori ir fantastiski.

Taču e-pasta redaktori nožēlojami atpaliek. Lūk, kāpēc…

HTML e-pastu izstrāde ir daudz sarežģītāka nekā vietnei

Ja jūsu uzņēmums vēlas izveidot skaistu HTML e-pastu, process ir eksponenciāli sarežģītāks nekā tīmekļa lapas izveide vairāku iemeslu dēļ.

  • Nav standartu - E-pasta klienti, kas parāda HTML e-pastu, NAV stingras tīmekļa standartu ievērošanas. Gandrīz katrs e-pasta klients un katra e-pasta klienta versija darbojas atšķirīgi. Daži ievēros CSS, ārējos fontus un moderno HTML. Citi ievēro dažus iekļautos stilus, parāda tikai fontu kolekciju un ignorē visu, izņemot tabulas balstītas struktūras. Diezgan smieklīgi, ka pie šī jautājuma neviens nestrādā. Rezultātā tādu veidņu izstrāde, kuras tiek konsekventi renderētas visos klientiem un ierīcēm, ir kļuvusi par lielu biznesu un var būt diezgan dārga.
  • E-pasta klienta drošība - Nesen Apple Mail tika atjaunināts, lai pēc noklusējuma bloķētu visus attēlus HTML e-pastos, kas nav iegulti e-pastā. Jūs vai nu dodat atļauju ielādēt viņiem e-pasta ziņojumu vienlaikus, vai arī ir jāiespējo iestatījumi, lai atspējotu šo iestatījumu. Līdzās e-pasta klienta drošības iestatījumiem ir arī korporatīvie iestatījumi.
  • IT drošība - Jūsu IT komanda var izvietot stingrus noteikumus par to, kādus objektus faktiski var renderēt e-pastā. Ja jūsu attēli, piemēram, nāk no konkrēta domēna, kas nav iekļauts korporatīvā ugunsmūra baltajā sarakstā, attēli vienkārši netiks rādīti jūsu e-pastā. Dažkārt mums ir nācies izstrādāt e-pastus un visus attēlus mitināt korporācijas serverī, lai viņu darbinieki varētu redzēt attēlus.
  • E-pasta pakalpojumu sniedzēji – Lai situāciju pasliktinātu, e-pasta veidotāji, kas e-pasta pakalpojumu sniedzēji (ESPs) faktiski rada problēmas, nevis tās ierobežo. Lai gan viņi reklamē savu redaktoru ir What You See Is What You Get (WYSIWYG), ar e-pasta noformējumu bieži notiek pretējais. Jūs priekšskatīsit e-pastu viņu platformā, un adresāts redzēs visas dizaina problēmas. Uzņēmumi bieži vien neapzināti izvēlas ar funkcijām bagātu redaktoru, nevis bloķētu redaktoru, domājot, ka tam ir vairāk funkciju. Patiesība ir pretēja… ja vēlaties, lai e-pasta ziņojumi tiktu konsekventi renderēti visos e-pasta klientos, jo vienkāršāk, jo labāk, jo mazāk var noiet greizi.
  • E-pasta klienta renderēšana - Simtiem e-pasta klientu HTML atveido atšķirīgi galddatoros, lietotnēs, mobilajās ierīcēs un tīmekļa pasta klientos. Lai gan jūsu e-pasta pakalpojumu sniedzēja lieliskajā teksta redaktorā var būt iestatījums, lai e-pastā ievietotu virsrakstu, polsterējums, piemales, rindiņas augstums un fonta lielums katram e-pasta klientam var atšķirties. Rezultātā jums ir jāmin HTML un jākodē katrs elements atšķirīgi (skatiet piemēru tālāk) — un bieži vien ir jāieraksta izņēmumi, kas ir raksturīgi e-pasta klientam — lai e-pasts tiktu konsekventi renderēts. Nav vienkāršu bloku veidu, jums ir jāizveido tabulu vadīti izkārtojumi, kas ir līdzvērtīgi izveidei tīmeklī pirms trīsdesmit gadiem. Tāpēc jebkuram jaunam izkārtojumam ir nepieciešama gan izstrāde, gan starpe-pasta klientu un ierīču testēšana. Tas, ko redzat savā iesūtnē, var būt pilnīgi atšķirīgs no tā, ko redzu savā iesūtnē. Tāpēc renderēšanas rīki, piemēram, E-pasts par skābi or Lakmuss ir obligāti, lai nodrošinātu, ka jūsu jaunie dizaini darbojas visos e-pasta klientos. Šeit ir īss saraksts ar populāriem e-pasta klientiem un to renderēšanas programmām:
    • Apple Mail, Outlook for Mac, Android Mail un iOS Mail izmantošana WebKit.
    • Outlook 2000, 2002 un 2003 izmantošana Internet Explorer.
    • Outlook 2007, 2010 un 2013 izmantošana Microsoft Word (jā, Word!).
    • Tīmekļa pasta klienti izmanto savas pārlūkprogrammas attiecīgo programmu (piemēram, Safari izmanto WebKit un Chrome izmanto Blink).

HTML piemērs Web Vs. E-pasts

Ja vēlaties piemēru, kas ilustrē dizaina sarežģītību e-pastā salīdzinājumā ar tīmekli, šeit ir lielisks piemērs no Mailbakery raksta 19 lielas atšķirības starp e-pastu un tīmekļa HTML:

E-pasts HTML

Mums ir jāizveido virkne tabulu, kas ietver visu iekļauto stilu, kas nepieciešams, lai pareizi novietotu pogu un nodrošinātu, ka tā izskatās labi e-pasta klientos. Šī e-pasta ziņojuma augšdaļā būs arī pievienotā stila atzīme, lai iekļautu nodarbības.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Tīmekļa HTML

Mēs varam izmantot ārēju stila lapu ar klasēm, lai definētu enkura atzīmes, kas parādās kā poga, reģistru, līdzinājumu, krāsu un izmēru.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Kā izvairīties no e-pasta dizaina problēmām

E-pasta noformēšanas problēmas var novērst, veicot pienācīgu procesu:

  1. Veidņu pārbaude - Pirms jebkuras veidnes izvietošanas ir svarīgi izprast e-pasta klientus, ko izmanto jūsu abonenti, un nodrošināt, lai jūsu HTML e-pasts tiktu pilnībā pārbaudīts mobilajās ierīcēs un galddatoros. Mēs varam izveidot e-pastu burtiski no Photoshop izkārtojuma, taču, lai izvietotu optimālus un konsekventus e-pasta noformējumus, ir svarīgi to sagriezt un sagriezt tabulu vadītā, starpe-pasta klientā.
  2. Iekšējā pārbaude – Kad jūsu veidne ir izstrādāta un pārbaudīta, tā jānosūta uz organizācijas iekšējo sākotnējo sarakstu, lai to pārskatītu un apstiprinātu. Varat pat sākt ar ļoti ierobežotu personu apakškopu, lai vispirms pārliecinātos, ka ar e-pasta iekšējo renderēšanu nav saistītas ugunsmūra vai drošības problēmas. Ja tas veido instanci pie jauna e-pasta pakalpojumu sniedzēja, jūs pat varat atrast dažas filtrēšanas vai bloķēšanas problēmas, kas saistītas pat ar jūsu e-pasta nokļūšanu iesūtnē.
  3. Veidnes versiju noteikšana – Nemainiet savus izkārtojumus vai dizainus, nestrādājot pie jaunas veidnes versijas, kuru var izstrādāt, pareizi pārbaudīt un izvietot. Daudziem uzņēmumiem patīk vienreizējs dizains katrai kampaņai, taču tas prasa, lai katrs e-pasts ir jāizstrādā, jāizstrādā un jāievieto katrai kampaņai. Tas pievieno daudz laika iekšējam e-pasta mārketinga procesam. Un jūs riskējat nesaprast, kuri elementi jūsu e-pastā darbojas labāk nekā tie, kuri ne. Konsekvence nav tikai veids, kā atvieglot procesu, tā ir svarīga arī jūsu abonentu uzvedībai.
  4. E-pasta pakalpojumu sniedzēju izņēmumi - Gandrīz katram e-pasta pakalpojumu sniedzējam ir līdzekļi, kā novērst problēmas, ko ievieš viņu e-pasta veidotājs. Mēs bieži varam kontam pievienot neapstrādātu CSS — vai pat izveidot satura bloku, kas ir jāiekļauj katrā e-pastā, lai uzņēmums varētu izmantot iebūvēto e-pasta redaktoru un neļautu tam sabojāt jūsu e-pasta dizainu. Protams, lai veiktu šīs darbības, lai nodrošinātu to ievērošanu, var būt nepieciešama apmācība un procesa kontrole. Vai arī — varat burtiski vienkārši vēlēties izstrādāt savu e-pasta dizainu risinājumā, kas ir pierādīts, ka tas darbojas dažādos klientiem un ierīcēm, un pēc tam ielīmējiet to atpakaļ savā e-pasta pakalpojumu sniedzējā.

E-pasta dizaina platformas

Tā kā e-pasta pakalpojumu platformas ir paveikušas vāju darbu, veidojot un uzturot konsekventi dažādus klientu un vairāku ierīču veidotājus, tirgū ir nonākušas vairākas lieliskas platformas. Viens, ko mēs esam plaši izmantojuši, ir Stripo.

Stripo nav tikai e-pasta veidotājs, viņiem ir arī bibliotēka ar vairāk nekā 900 veidnēm, kuras var viegli importēt. Kad esat izstrādājis e-pastu, varat nosūtīt e-pastu uz 60+ ESP un e-pasta klientiem, tostarp Intuit Mailchimp, Hubspot, Kampaņas Monitor, AWeber, eSputnik, perspektīva, un Gmail. Labākās Stripo veidnēs ir iekļauti e-pasta renderēšanas testi, lai jūs varētu pārliecināties, ka tās ir pārbaudītas un konsekventi darbojas vairāk nekā 40 e-pasta klientos.

Piesakieties Stripo redaktora demonstrācijā

Douglas Karr

Douglas Karr ir TKO no OpenINSIGHTS un dibinātājs Martech Zone. Duglass ir palīdzējis desmitiem veiksmīgu MarTech jaunuzņēmumu, ir palīdzējis veikt vairāk nekā 5 miljardu dolāru Martech iegādes un ieguldījumu uzticamības pārbaudi, kā arī turpina palīdzēt uzņēmumiem ieviest un automatizēt to pārdošanas un mārketinga stratēģijas. Douglas ir starptautiski atzīts digitālās transformācijas un MarTech eksperts un runātājs. Duglass ir arī publicēts Dummie rokasgrāmatas un biznesa vadības grāmatas autors.

Saistītie raksti

Atpakaļ uz augšu pogu
aizvērt

Reklāmu bloķēšana konstatēta

Martech Zone var nodrošināt jums šo saturu bez maksas, jo mēs gūstam peļņu no savas vietnes, izmantojot ieņēmumus no reklāmām, saistīto uzņēmumu saites un sponsorēšanu. Būsim pateicīgi, ja, apskatot mūsu vietni, noņemtu savu reklāmu bloķētāju.