Электрондук почта маркетинги жана автоматташтырууМаркетинг жана сатуу боюнча видеолор

HTML Email Дизайнынын Кыйынчылыктарын (Жана Кыйынчылыктарын) Түшүнүү

Эгер сиз веб-баракчаларды түзүү үчүн мазмунду башкаруу системасын ачсаңыз, бул абдан жөнөкөй процесс. Заманбап веб-браузерлерди колдойт HTML, CSS, жана JavaScript катуу желе стандарттарына. Жана алар дизайнерлер тынчсызданышы керек болгон бир нече браузерлер. Албетте, өзгөчөлүктөр бар… жана ошол браузерлерге мүнөздүү кээ бир жөнөкөй убактылуу чечимдер же функциялар.

Жалпы стандарттардан улам, мазмунду башкаруу тутумдарында барак куруучуларды иштеп чыгуу оңой. Браузерлер HTML5, CSS жана JavaScript менен шайкеш келет… жана иштеп чыгуучулар түзмөктөргө жооп берүүчү жана бардык браузерлерде ырааттуу болгон веб-баракчаларды түзүү үчүн укмуштуудай бекем чечимдерди түзө алышат. Жыйырма жыл мурун, дээрлик ар бир веб-дизайнер веб-баракчаларды иштеп чыгуу үчүн рабочий программаларды колдончу. Азыр веб-дизайнердин веб-баракчасын иштеп чыгуусу сейрек учурайт – көбүнчө алар шаблондорду иштеп чыгышат жана мазмунду толтуруу үчүн мазмун системаларында редакторлорду колдонушат. Вебсайттын редакторлору фантастикалык.

Бирок электрондук почта редакторлору абдан артта калды. Мына эмне үчүн…

HTML электрондук почталарын долбоорлоо веб-сайтка караганда алда канча татаал

Эгерде сиздин компанияңыз кооз HTML электрондук почтасынын иштелип чыкканын кааласа, процесс бир нече себептерден улам веб-баракчаны курууга караганда экспоненциалдуу түрдө татаалыраак болот:

  • Стандарттар жок – HTML электрондук почтасын көрсөткөн электрондук почта кардарлары тарабынан веб-стандарттарга катуу кармануу ЖОК. Иш жүзүндө ар бир электрондук почта кардары жана ар бир электрондук почта кардарынын ар бир версиясы башкача иш-аракет кылат. Кээ бирлери CSS, тышкы шрифттерди жана заманбап HTMLди сыйлашат. Башкалары кээ бир саптык стилди сыйлашат, шрифттердин жыйнагын гана көрсөтүшөт жана таблицага негизделген түзүмдөрдү гана көрмөксөнгө салышат. Бул маселе боюнча эч ким иштебей жатканы абдан күлкүлүү. Натыйжада, кардарларга жана түзмөктөргө ырааттуу түрдө көрсөтүүчү шаблондорду долбоорлоо чоң бизнеске айланып, бир топ кымбат болушу мүмкүн.
  • Электрондук почта кардарларынын коопсуздугу – Жакында, Apple Mail демейки боюнча HTML каттарында электрондук почтага кыстарылбаган бардык сүрөттөрдү бөгөттөө үчүн жаңыртылган. Сиз аларга бир эле учурда электрондук почтаны жүктөөгө уруксат бересиз же бул жөндөөнү өчүрүү үчүн орнотууларды иштетишиңиз керек. Электрондук почта кардарынын коопсуздук жөндөөлөрү менен бирге корпоративдик жөндөөлөр да бар.
  • IT коопсуздук – Сиздин IT-командаңыз электрондук катта кандай объекттерди көрсөтүүгө боло тургандыгы боюнча катуу эрежелер топтомун жайгаштырышы мүмкүн. Эгер сүрөттөрүңүз, мисалы, корпоративдик брандмауэрде ак тизмеге кирбеген белгилүү бир доменден келсе, сүрөттөр электрондук почтаңызда көрүнбөйт. Кээде биз электрондук почталарды иштеп чыгууга жана бардык сүрөттөрдү корпорациянын серверине жайгаштырууга туура келди, ошондуктан алардын кызматкерлери сүрөттөрдү көрө алышат.
  • Электрондук почта кызматын көрсөтүүчүлөр – Андан да жаманы, электрондук почта куруучулары электрондук почта кызмат көрсөтүүчүлөрүнө (ESPс) көйгөйлөрдү чектөөнүн ордуна иш жүзүндө киргизүү. Алар редакторлорун "Сен көргөн нерсе - сен аласың" (WYSIWYG) деп атаса да, электрондук почтанын дизайнында тескерисинче болот. Сиз алардын платформасында электрондук почтаны алдын ала көрөсүз жана алуучу бардык дизайн көйгөйлөрүн көрөт. Компаниялар көбүнчө билбестен кулпуланган редактордун ордуна өзгөчөлүктөргө бай редакторду тандашат, анткени биринде көбүрөөк функциялар бар деп ойлошот. Тескерисинче… эгер сиз электрондук почтанын бардык кардарларында ырааттуу түрдө көрсөтүлүшүн кааласаңыз, ошончолук жөнөкөй, ошончолук жакшы, анткени азыраак ката кетиши мүмкүн.
  • Email Client Rendering – Жүздөгөн электрондук почта кардарлары HTML'ди рабочий компьютерлерде, колдонмолордо, мобилдик түзмөктөрдө жана веб-почта кардарларында ар кандай көрсөтөт. Электрондук почтаңыздын провайдериңиздеги укмуштуудай текст редакторуңузда электрондук почтаңызга аталыш коюу жөндөөсү болушу мүмкүн, бирок толтуруу, четтер, сызык бийиктиги жана шрифт өлчөмү ар бир электрондук почта кардары үчүн ар кандай болушу мүмкүн. Натыйжада, сиз HTMLди өчүрүп, ар бир элементти ар кандай коддошуңуз керек (төмөндөгү мисалды караңыз) жана көбүнчө электрондук почта кардары үчүн өзгөчө учурларды жазыңыз - электрондук катты ырааттуу көрсөтүү үчүн. Жөнөкөй блоктордун түрлөрү жок, сиз 30 жыл мурунку веб-сайтты курууга барабар болгон үстөлгө негизделген макеттерди жасашыңыз керек. Ошондуктан ар кандай жаңы макет иштеп чыгууну да, кросс-почта кардарын жана түзмөктү сыноону да талап кылат. Сиздин каттар кутусунда көргөнүңүз менин кат кутумда көргөн нерсемден таптакыр башкача болушу мүмкүн. Мына ошондуктан рендеринг куралдары сыяктуу Email On Acid or лакмус кагазы Сиздин жаңы дизайныңыз бардык электрондук почта кардарларында иштешин камсыз кылуу үчүн зарыл. Бул жерде популярдуу электрондук почта кардарларынын жана алардын рендеринг механизмдеринин кыскача тизмеси:
    • Apple Mail, Mac үчүн Outlook, Android Mail жана iOS Mail колдонушат WebKit.
    • Outlook 2000, 2002 жана 2003 колдонуу Internet Explorer.
    • Outlook 2007, 2010 жана 2013 колдонуу Microsoft Word (ооба, Word!).
    • Веб почта кардарлары браузеринин тиешелүү кыймылдаткычын колдонушат (мисалы, Safari WebKitти, ал эми Chrome Blinkти колдонот).

Web Vs үчүн HTML мисалы. Email

Эгерде сиз электрондук почта менен интернетте дизайндын татаалдыгын көрсөткөн мисалды кааласаңыз, бул жерде Mailbakeryдин макаласынан эң сонун мисал 19 Email жана Web HTML ортосундагы чоң айырмачылыктар:

HTML электрондук почтасы

Биз баскычты туура жайгаштыруу жана анын электрондук почта кардарларында жакшы көрүнүшүн камсыз кылуу үчүн зарыл болгон бардык линия стилин камтыган бир катар таблицаларды түзүшүбүз керек. Стиль теги класстарды кошуу үчүн бул электрондук почтанын башында да болот.

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

Web HTML

Баскыч катары пайда болгон анкер тегинин корпусун, тегиздөөсүн, түсүн жана өлчөмүн аныктоо үчүн класстары бар тышкы стилдер жадыбалын колдоно алабыз.

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

Электрондук почтанын дизайн маселелеринен кантип качса болот

Электрондук почтанын дизайн маселелерин татыктуу процессти аткаруу менен качууга болот:

  1. Template Testing – Жазылуучуларыңыз колдонгон электрондук почта кардарларын түшүнүү жана сиздин HTML электрондук почтаңыздын мобилдик жана иш тактасында толугу менен сыналганын камсыз кылуу ар кандай шаблонду жайылтуудан мурун абдан маанилүү. Биз электрондук почтаны түзмө-түз Photoshop макетинен түзө алабыз… бирок аны кесүү жана кесүү жана аны таблицага негизделген, кайчылаш электрондук почта кардары оптималдуу жана ырааттуу электрондук почта дизайнын жайылтуу үчүн абдан маанилүү.
  2. Ички тестирлөө – Сиздин шаблон иштелип чыккан жана сыноодон өткөндөн кийин, аны карап чыгуу жана бекитүү үчүн уюмдун ичиндеги үрөндөрдүн тизмесине жөнөтүү керек. Сиз адегенде электрондук почтаны ичкериде көрсөтүү менен байланышкан брандмауэр же коопсуздук көйгөйлөрү жок экенине ынануу үчүн өтө чектелген адамдардын топтомунан баштагыңыз келиши мүмкүн. Эгер бул жаңы электрондук почта кызмат көрсөтүүчүсүнө мисал түзүп жатса, анда сиз электрондук почтаңызды келген кутуга алуу менен байланышкан чыпкалоо же бөгөттөө маселелерин да таба аласыз.
  3. Template Versioning – Шаблонуңуздун жаңы версиясын иштебей туруп, өзүңүздүн макеттериңизди же дизайныңызды өзгөртпөңүз. Көптөгөн ишканалар ар бир кампания үчүн бир жолку дизайнды жакшы көрүшөт… бирок бул үчүн ар бир электрондук почтанын ар бир кампания үчүн иштелип чыгышы, иштелип чыгышы жана жайгаштырылышы талап кылынат. Бул ички электрондук маркетинг процессине көп убакытты кошот. Жана, сиз электрондук почтаңыздагы элементтер кайсы элементтерге караганда жакшы иштеп жатканын түшүнбөй калуу коркунучу бар. Ырааттуулук процессти жеңилдетүүнүн бир жолу эмес, бул сиздин жазылуучуларыңыздын жүрүм-туруму үчүн да маанилүү.
  4. Электрондук почта кызматын камсыздоочу өзгөчө учурлар – Иш жүзүндө ар бир электрондук почта кызматын камсыздоочу алардын электрондук почта куруучусу киргизген маселелердин тегерегинде иштөө үчүн каражатка ээ. Биз көбүнчө аккаунтка чийки CSS кошо алабыз - же ал тургай, ар бир электрондук почтага камтылууга тийиш болгон мазмун блогуна ээ болушубуз мүмкүн - компания орнотулган электрондук почта редакторун колдонуп, электрондук почтаңыздын дизайнын бузуп албашы үчүн. Албетте, бул кадамдардын аткарылышын камсыз кылуу үчүн кээ бир окутууну жана процессти көзөмөлдөөнү талап кылышы мүмкүн. Же - сиз жөн гана кардарлар жана түзмөктөрдө иштей турганы далилденген чечимде электрондук почтанын дизайнын иштеп чыгууну кааласаңыз болот, анан аны кайра электрондук почта тейлөөчүңүзгө чаптаңыз.

Электрондук почта дизайн платформалары

Электрондук почта сервисинин платформалары кардарлар аралык жана түзмөктөр аралык ырааттуу түрдө көрсөткөн куруучуларды курууда жана тейлөөдө начар жумуш жасагандыктан, бир катар мыкты платформалар рынокко чыкты. Биз кеңири колдонгондордун бири Stripo.

Stripo жөн гана электрондук почта куруучу эмес, аларда оңой эле импорттоого боло турган 900дөн ашык шаблондор китепканасы бар. Электрондук почтаны иштеп чыккандан кийин, сиз 60+ ESPге жана электрондук почта кардарларына, анын ичинде электрондук кат жөнөтө аласыз Intuit Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, көрүнүш, жана Gmail. Баарынан жакшы Stripo үлгүлөрү электрондук почтаны көрсөтүү тесттери менен келет, андыктан алардын сыналганын жана 40тан ашык электрондук почта кардарларында ырааттуу иштешин камсыздай аласыз.

Stripo редакторунун демосуна кириңиз

Douglas Karr

Douglas Karr CMO болуп саналат OpenINSIGHTS жана негиздөөчүсү Martech Zone. Дуглас ондогон ийгиликтүү MarTech стартаптарына жардам берди, Martech сатып алууларына жана инвестицияларына 5 миллиард доллардан ашык каражатты текшерүүгө жардам берди жана компанияларга сатуу жана маркетинг стратегияларын ишке ашырууда жана автоматташтырууда жардам берүүнү улантууда. Дуглас эл аралык деңгээлде таанылган санариптик трансформация жана MarTech эксперти жана спикери. Дуглас ошондой эле Dummie's guide жана бизнес лидерлик китебинин басылып чыккан автору.

Тектеш макалалар

Артка жогорку баскычы
жакын

Adblock аныкталды

Martech Zone Бул мазмунду сизге эч кандай акы төлөбөй бере алат, анткени биз сайтыбызды жарнамадан түшкөн киреше, өнөктөштүк шилтемелер жана демөөрчүлүк аркылуу акча табабыз. Биздин сайтты көрүп жатканыңызда жарнама блокаторуңузду алып салсаңыз, биз ыраазыбыз.