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

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

If you open up a content management system to build web pages, it’s a pretty simple process. Modern web browsers support HTML, CSS, and JavaScript to strict web standards. And they’re just a handful of browsers that designers need to worry about. There are exceptions, of course… and some simple workarounds or functions specific to those browsers.

Because of the overall standards, it’s straightforward to develop page builders in content management systems. Browsers comply with HTML5, CSS, and JavaScript… and developers can build incredibly robust solutions to create web pages that are responsive to devices and consistent across browsers. Two decades ago, virtually every web designer used desktop software to develop web pages. Now, it’s pretty uncommon for a web designer to develop a web page – more often than not, they’re developing templates and using editors in content systems to fill in the content. Website editors are fantastic.

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

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

If your company wants a beautiful HTML email designed, the process is exponentially more complex than building out a web page for several reasons:

  • Стандарттар жок – There is NO strict adherence to web standards by email clients that display HTML email. Virtually every email client and every version of every email client acts differently. Some will honor CSS, external fonts, and modern HTML. Others honor some inline styling, only display a collection of fonts, and ignore everything but table-driven structures. It’s quite ridiculous that no one is working on this issue. As a result, designing templates that render across clients and devices consistently has become big business and can be quite expensive.
  • Электрондук почта кардарларынын коопсуздугу – Recently, Apple Mail updated to block all images in HTML emails by default that are not embedded in the email. You either give permission to load them an email at a time or have to enable the settings to disable this setting. Along with email client security settings, there are also corporate settings.
  • IT коопсуздук – Сиздин IT-командаңыз электрондук катта кандай объекттерди көрсөтүүгө боло тургандыгы боюнча катуу эрежелер топтомун жайгаштырышы мүмкүн. Эгер сүрөттөрүңүз, мисалы, корпоративдик брандмауэрде ак тизмеге кирбеген белгилүү бир доменден келсе, сүрөттөр электрондук почтаңызда көрүнбөйт. Кээде биз электрондук почталарды иштеп чыгууга жана бардык сүрөттөрдү корпорациянын серверине жайгаштырууга туура келди, ошондуктан алардын кызматкерлери сүрөттөрдү көрө алышат.
  • Электрондук почта кызматын көрсөтүүчүлөр – Андан да жаманы, электрондук почта куруучулары электрондук почта кызмат көрсөтүүчүлөрүнө (ESPs) actually introduce problems rather than constrain them. While they promote their editor is What You See Is What You Get (WYSIWYG), the opposite is often true with email design. You’ll preview the email in their platform, and the recipient will see all the design problems. Companies often unknowingly opt for a feature-rich editor instead of a locked-down one, thinking one has more features. The opposite is true… if you want emails that render consistently across all email clients, the simpler, the better, because less can go wrong.
  • Email Client Rendering – Hundreds of email clients render HTML differently across desktops, apps, mobile devices, and webmail clients. While your nifty text editor on your email service provider may have a setting to put a heading in your email, the padding, margins, line height, and font size may differ for every email client. As a result, you have to dumb down the HTML and code every single element differently (see the example below) – and often write in exceptions that are email client-specific – to get an email to render consistently. There’s no simple block types, you have to do table-driven layouts that are the equivalent of building for the web thirty years ago. It’s why any new layout requires both development and cross-email client and device testing. What you see in your inbox may be totally different what I see in my inbox. That’s why rendering tools like 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 ортосундагы чоң айырмачылыктар:

Email HTML

We must build a series of tables incorporating all the inline styling necessary to place the button properly and ensure it looks good across email clients. An accompanying style tag will also be at the top of this email to incorporate the classes.

<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 – Understanding the email clients your subscribers utilize and ensuring that your HTML email is fully tested across mobile and desktop is critical before deploying any template. We can design an email literally from a Photoshop layout… but slicing and dicing it into a table-driven, cross-email client is essential to deploying email designs that are optimal and consistent.
  2. Ички тестирлөө – Сиздин шаблон иштелип чыккан жана сыноодон өткөндөн кийин, аны карап чыгуу жана бекитүү үчүн уюмдун ичиндеги үрөндөрдүн тизмесине жөнөтүү керек. Сиз адегенде электрондук почтаны ичкериде көрсөтүү менен байланышкан брандмауэр же коопсуздук көйгөйлөрү жок экенине ынануу үчүн өтө чектелген адамдардын топтомунан баштагыңыз келиши мүмкүн. Эгер бул жаңы электрондук почта кызмат көрсөтүүчүсүнө мисал түзүп жатса, анда сиз электрондук почтаңызды келген кутуга алуу менен байланышкан чыпкалоо же бөгөттөө маселелерин да таба аласыз.
  3. Template Versioning – Шаблонуңуздун жаңы версиясын иштебей туруп, өзүңүздүн макеттериңизди же дизайныңызды өзгөртпөңүз. Көптөгөн ишканалар ар бир кампания үчүн бир жолку дизайнды жакшы көрүшөт… бирок бул үчүн ар бир электрондук почтанын ар бир кампания үчүн иштелип чыгышы, иштелип чыгышы жана жайгаштырылышы талап кылынат. Бул ички электрондук маркетинг процессине көп убакытты кошот. Жана, сиз электрондук почтаңыздагы элементтер кайсы элементтерге караганда жакшы иштеп жатканын түшүнбөй калуу коркунучу бар. Ырааттуулук процессти жеңилдетүүнүн бир жолу эмес, бул сиздин жазылуучуларыңыздын жүрүм-туруму үчүн да маанилүү.
  4. Электрондук почта кызматын камсыздоочу өзгөчө учурлар – Иш жүзүндө ар бир электрондук почта кызматын камсыздоочу алардын электрондук почта куруучусу киргизген маселелердин тегерегинде иштөө үчүн каражатка ээ. Биз көбүнчө аккаунтка чийки CSS кошо алабыз - же ал тургай, ар бир электрондук почтага камтылууга тийиш болгон мазмун блогуна ээ болушубуз мүмкүн - компания орнотулган электрондук почта редакторун колдонуп, электрондук почтаңыздын дизайнын бузуп албашы үчүн. Албетте, бул кадамдардын аткарылышын камсыз кылуу үчүн кээ бир окутууну жана процессти көзөмөлдөөнү талап кылышы мүмкүн. Же - сиз жөн гана кардарлар жана түзмөктөрдө иштей турганы далилденген чечимде электрондук почтанын дизайнын иштеп чыгууну кааласаңыз болот, анан аны кайра электрондук почта тейлөөчүңүзгө чаптаңыз.

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

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

Stripo жөн гана электрондук почта куруучу эмес, аларда оңой эле импорттоого боло турган 900дөн ашык шаблондор китепканасы бар. Электрондук почтаны иштеп чыккандан кийин, сиз 60+ ESPге жана электрондук почта кардарларына, анын ичинде электрондук кат жөнөтө аласыз Intuit Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, көрүнүш, жана Gmail. Best of all Stripo templates come with the email rendering tests included so you can ensure they’ve been tested and work consistently across over 40 email clients.

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

Douglas Karr

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

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

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

Adblock аныкталды

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