Разбиране на предизвикателствата (и разочарованията) на HTML дизайна на имейли

Ако отворите система за управление на съдържанието за създаване на уеб страници, това е доста прост процес. Съвременните уеб браузъри поддържат HTML, CSS и JavaScript към a стриктен набор от уеб стандарти. И те наистина са само шепа браузъри, за които дизайнерите трябва да се тревожат. Има изключения, разбира се... и някои прости решения или функции, специфични за тези браузъри.

Поради общите стандарти е наистина лесно да се разработят създатели на страници в системи за управление на съдържанието. Браузърите са в съответствие с HTML5, CSS и JavaScript... и разработчиците могат да създават невероятно стабилни решения за създаване на уеб страници, които отговарят на устройствата и са последователни в различните браузъри. Преди две десетилетия почти всеки уеб дизайнер използваше настолен софтуер за разработване на уеб страници. Сега е доста необичайно уеб дизайнерът да разработва уеб страница – по-често те разработват шаблони и използват редактори в системи за съдържание, за да попълнят съдържанието. Редакторите на уебсайтове са фантастични.

Но редакторите на имейли са тъжно изостанали. Ето защо…

Проектирането на HTML имейли е много по-сложно, отколкото за уебсайт

Ако вашата компания иска проектиран красив HTML имейл, процесът е експоненциално по-сложен от изграждането на уеб страница поради редица причини:

• Без стандарти – НЯМА стриктно придържане към която и да е мрежа стандарти от имейл клиенти, които показват HTML имейл. Всъщност виртуално всеки имейл клиент и всяка версия на всеки имейл клиент действа по различен начин. Някои ще зачитат CSS, външни шрифтове и модерен HTML. Други уважават някои вградени стилове, ще показват само колекция от шрифтове и игнорират всичко, освен структурите, управлявани от таблица. Всъщност е доста нелепо в този момент, че никой не работи по този въпрос. В резултат на това проектирането на шаблони, които постоянно се изобразяват между клиенти и устройства, се превърна в голям бизнес и може да бъде доста скъпо.
• Сигурност на имейл клиента – Само тази седмица Apple Mail се актуализира, за да блокира всички изображения в HTML имейли по подразбиране, които не са вградени в имейла. Вие или давате разрешение да им зареждат имейл по имейл, или трябва да активирате настройките, за да деактивирате тази настройка. Наред с настройките за сигурност на имейл клиента има и корпоративни настройки.
• ИТ сигурност – Вашият ИТ екип може да внедри строги набори от правила за това какви обекти действително могат да бъдат изобразени в имейл. Ако вашите изображения, например, идват от конкретен домейн, който не е в белия списък в корпоративната защитна стена, изображенията просто няма да се показват в имейла ви. Понякога се налагаше да разработваме имейли и да хостваме всички изображения на сървъра на корпорацията, така че техните собствени служители да могат да виждат изображенията.
• Доставчици на имейл услуги – За да влошат нещата, създателите на имейли, които доставчиците на имейл услуги (ESPs) всъщност въвежда проблеми, вместо да ги ограничава. Докато те популяризират техния редактор е Какво виждате е това, което получавате (WYSIWYG), обратното често е вярно с дизайна на имейл. Ще прегледате имейла в тяхната платформа, след което получателят на имейл вижда всякакви проблеми с дизайна. Компаниите често несъзнателно избират редактор с богати функции вместо заключен редактор, мислейки, че единият има повече функции от другия. Обратното е вярно... ако искате имейли, които се изобразяват последователно във всички имейл клиенти, колкото по-прости, толкова по-добре, защото по-малко може да се обърка.
• Изобразяване на имейл клиент – Има стотици имейл клиенти, всеки от които изобразява HTML по различен начин за настолни компютри, приложения, мобилни и уеб пощенски клиенти. Докато вашият изящен текстов редактор на вашия доставчик на имейл услуги може да има настройка за поставяне на заглавие в имейла ви... запълването, полетата, височината на реда и размера на шрифта може да се различават за всеки отделен имейл клиент. В резултат на това трябва да заглушите HTML и да кодирате всеки един елемент по различен начин (вижте примера по-долу) – и често да пишете в изключения, които са специфични за имейл клиента – за да получите имейл за последователно изобразяване. Няма прости типове блокове, трябва да правите управлявани от таблици оформления, които са еквивалентни на изграждане за мрежата преди тридесет години. Ето защо всяко ново оформление изисква както разработка, така и кръстосано тестване на имейл клиент и устройство. Това, което виждате във входящата си кутия, може да е напълно различно от това, което виждам във входящата си кутия. Ето защо инструменти за изобразяване като Имейл за киселина or Лакмус са задължителни, за да гарантирате, че вашите нови дизайни работят във всички имейл клиенти. Ето кратък списък с популярни имейл клиенти и техните машини за изобразяване:
  • Използване на Apple Mail, Outlook за Mac, Android Mail и iOS Mail WebKit.
  • Използване на Outlook 2000, 2002 и 2003 Internet Explorer.
  • Използване на Outlook 2007, 2010 и 2013 Microsoft Word (да, Word!).
  • Клиентите за уеб поща използват съответния двигател на своя браузър (например Safari използва WebKit, а Chrome използва Blink).

Пример за HTML за уеб срещу. електронна поща

Ако искате пример, който илюстрира сложността на проектирането в имейл спрямо интернет, ето перфектен пример от статията на Mailbakery 19 големи разлики между имейл и уеб 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>

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

Как да избегнем проблеми с дизайна на имейли

Проблемите с дизайна на имейла могат да бъдат избегнати, като следвате приличен процес:

1. Дизайн на шаблони – Създайте шаблон с различни оформления и блокове със съдържание, които обхващат всеки стил, който някога бихте искали да създадете във вашите имейл дизайни. Когато внедряваме клиент, ние винаги го подтикваме към него проектирайте имейл за бъдещето – не само следващата имейл кампания, която е изпратена. По този начин можем напълно да проектираме, разработим, тестваме и приложим необходимите заобиколни решения преди те някога изпращат този първи имейл.
2. Тестване на шаблони – Разбирането на имейл клиентите, които вашите абонати използват, и гарантирането, че вашият HTML имейл е напълно тестван за мобилни устройства и настолни компютри, е от решаващо значение преди внедряването на какъвто и да е шаблон. Можем да проектираме имейл буквално от оформление на Photoshop... но нарязването и нарязването му в управляван от таблица клиент за кръстосани имейли е от съществено значение за внедряването на дизайни на имейли, които са оптимални и последователни.
3. Вътрешно тестване – След като вашият шаблон е проектиран и тестван, той трябва да бъде изпратен до вътрешен начален списък в организацията за преглед и одобрение. Може дори да искате да започнете с много ограничена подгрупа от хора, за да се уверите първо, че няма защитна стена или проблеми със сигурността, свързани с вътрешното изобразяване на имейла. Ако това изгражда екземпляр на нов доставчик на имейл услуги, може дори да откриете някои проблеми с филтрирането или блокирането, свързани дори с получаването на имейла ви във входящата кутия.
4. Версиониране на шаблони – Не променяйте своите оформления или дизайни, без да работите върху нова версия на вашия шаблон, която може да бъде проектирана, правилно тествана и разгърната. Много фирми обичат еднократни дизайни за всяка кампания... но това изисква всеки имейл да бъде проектиран, разработен и внедрен за всяка кампания. Това добавя много време към вътрешния имейл маркетингов процес. И рискувате да не разберете кои елементи в имейла ви се представят добре спрямо кои елементи не са. Последователността не е само начин да улесните процеса, тя е важна и за поведението на вашите абонати.
5. Изключения на доставчика на имейл услуги – На практика всеки доставчик на имейл услуги има средства за заобикаляне на проблемите, които техният конструктор на имейли въвежда. Често можем да добавим необработен CSS към акаунт – или дори да имаме блок за съдържание, който трябва да бъде включен във всеки имейл – за да може компанията да използва вградения редактор на имейли и да не наруши дизайна на вашия имейл. Разбира се, това може да изисква известно обучение и контрол на процеса, за да се разгърнат тези стъпки, за да се гарантира, че са спазени. Или – може буквално просто да искате да развиете своя имейл дизайн в решение, което е доказано, че работи на клиенти и устройства, след което да го поставите обратно във вашия доставчик на имейл услуги.

Платформи за дизайн на имейли

Тъй като платформите за имейл услуги не са свършили лоша работа при изграждането и поддържането на последователно предоставяни конструктори за кръстосани клиенти и устройства, редица страхотни платформи излязоха на пазара. Един, който използвахме широко е Stripo.

Stripo is not just an email builder, they also have a library of over 900 templates that can be easily imported. Once you design the email, you can the email to 60+ ESPs, and email clients, including MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook, and 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 Editor

Разкриване: давам връзка към моя маркетингова консултантска фирма който проектира и внедрява имейли за кръстосани клиенти за водещи марки в почти всеки доставчик на имейл услуги. Аз също съм филиал на Stripo и използвам моя линк в тази статия.