Ако отворите систем за управување со содржина за да изградите веб-страници, тоа е прилично едноставен процес. Современите веб-прелистувачи поддржуваат HTML, CSS и JavaScript до a строги збир на веб стандарди. И, тие се навистина само неколку прелистувачи за кои дизајнерите треба да се грижат. Има исклучоци, се разбира... и некои едноставни решенија или функции специфични за тие прелистувачи.
Поради севкупните стандарди, навистина е лесно да се развијат создавачи на страници во системите за управување со содржина. Прелистувачите се усогласени со HTML5, CSS и JavaScript... и програмерите можат да изградат неверојатно робусни решенија за изградба на веб-страници кои одговараат на уредите и конзистентни низ прелистувачите. Пред две децении, практично секој веб-дизајнер користеше десктоп софтвер за развој на веб-страници. Сега, прилично невообичаено е веб-дизајнер да развие веб-страница - почесто отколку не, тие развиваат шаблони и користат уредници во системите за содржина за да ја пополнат содржината. Уредниците на веб-страниците се фантастични.
Но, уредниците на е-поштата очајно заостануваат. Еве зошто…
Дизајнирањето на HTML е-пошта е многу покомплексно отколку за веб-страница
Ако вашата компанија сака дизајнирана убава HTML е-пошта, процесот е експоненцијално покомплексен од изградбата на веб-страница од повеќе причини:
- Нема стандарди – НЕМА строго придржување кон која било мрежа стандарди од клиенти за е-пошта кои прикажуваат HTML е-пошта. Всушност, виртуелно секој клиент за е-пошта и секоја верзија на секој клиент за е-пошта делува поинаку. Некои ќе ги почитуваат CSS, надворешните фонтови и модерниот HTML. Други почитуваат некои вградени стилови, ќе прикажуваат само збирка фонтови и ќе игнорираат сè освен структурите управувани од табелата. Во овој момент, всушност е доста смешно што никој не работи на ова прашање. Како резултат на тоа, дизајнирањето шаблони што постојано се прикажуваат на клиенти и уреди стана голем бизнис и може да биде прилично скапо.
- Безбедност на клиентот за е-пошта – Само оваа недела, Apple Mail се ажурираше за да ги блокира сите слики во HTML е-пошта стандардно што не се вградени во е-поштата. Или давате дозвола да им вчитате е-пошта во исто време или треба да ги овозможите поставките за да ја оневозможите оваа поставка. Заедно со безбедносните поставки на клиентот за е-пошта, има и корпоративни поставки.
- Безбедност на ИТ – Вашиот ИТ тим може да распореди строги правила за тоа кои предмети всушност може да се прикажат во е-пошта. Ако вашите слики, на пример, доаѓаат од одреден домен кој не е на белата листа во корпоративниот заштитен ѕид, сликите едноставно нема да се појават во вашата е-пошта. Понекогаш моравме да развиваме е-пошта и да ги хостираме сите слики на серверот на корпорацијата за да можат нивните вработени да ги видат сликите.
- Даватели на услуги по е-пошта – Да бидат работите уште полоши, создавачите на е-пошта што давателите на услуги за е-пошта (ESPс) всушност воведуваат проблеми наместо да ги ограничуваат. Додека тие го промовираат нивниот уредник е Она што го гледате е она што го добивате (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 (да, збор!).
- Клиентите на веб-пошта го користат соодветниот мотор на нивниот прелистувач (на пример, 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>Како да избегнете проблеми со дизајнот на е-пошта
Проблемите со дизајнот на е-пошта може да се избегнат со следење на пристоен процес:
- Дизајн на шаблон – Изградете шаблон со различни распореди и блокови на содржина што го опфаќаат секој стил што некогаш би сакале да го создадете во дизајните на вашата е-пошта. Кога имплементираме клиент, секогаш го притискаме да дизајнирајте е-пошта за иднината – не само следната кампања за е-пошта што е испратена. На тој начин, можеме целосно да ги дизајнираме, развиваме, тестираме и имплементираме потребните решенија пред тие некогаш ја испраќаат првата е-пошта.
- Тестирање на шаблоните – Разбирањето на клиентите за е-пошта што ги користат вашите претплатници и обезбедувањето дека вашата HTML е-пошта е целосно тестирана на мобилните и на десктопот е од клучно значење пред да распоредите кој било шаблон. Можеме да дизајнираме е-пошта буквално од распоред на Photoshop... но пресечете и пресечете ги во табела, вкрстен клиент за е-пошта е од суштинско значење за распоредување на дизајни за е-пошта кои се оптимални и конзистентни.
- Внатрешно тестирање – Штом вашиот шаблон ќе биде дизајниран и тестиран, треба да се испрати до внатрешната листа на серии во организацијата за да се прегледа и одобри. Можеби ќе сакате да започнете со многу ограничена подгрупа на поединци за прво да се осигурате дека нема заштитниот ѕид или безбедносни проблеми поврзани со внатрешно прикажување на е-поштата. Ако ова создава пример за нов давател на услуги за е-пошта, може дури да најдете некои проблеми со филтрирање или блокирање поврзани дури и со испраќање на вашата е-пошта до сандачето.
- Верзија на шаблон – Не менувајте ги вашите распореди или дизајни без да работите на нова верзија на вашиот шаблон што може да се дизајнира, правилно да се тестира и да се примени. Многу бизниси сакаат еднократни дизајни за секоја кампања... но тоа бара секоја е-пошта да биде дизајнирана, развиена и распоредена за секоја кампања. Ова додава еден тон време на внатрешниот процес на маркетинг преку е-пошта. И, ризикувате да не разберете кои елементи во вашата е-пошта функционираат добро отколку кои елементи не се. Доследноста не е само начин да се олесни процесот, таа е важна и за однесувањето на вашите претплатници.
- Исклучоци на давателот на услуги за е-пошта – Практично секој давател на услуги за е-пошта има начин да работи околу проблемите што ги воведува нивниот градител на е-пошта. Честопати можеме да додадеме необработен CSS на сметката - или дури и да имаме блок на содржина што треба да биде вклучена во секоја е-пошта - со цел компанијата да го користи вградениот уредувач на е-пошта и да не го наруши дизајнот на вашата е-пошта. Се разбира, тоа може да бара одредена обука и контрола на процесот за да се применат тие чекори за да се осигура дека се усогласени. Или - можеби само сакате да го развиете дизајнот на вашата е-пошта во решение за кое е докажано дека функционира на клиенти и уреди, а потоа повторно залепете го во вашиот давател на услуги за е-пошта.
Платформи за дизајн на е-пошта
Бидејќи платформите за услуги за е-пошта завршија лоша работа во создавањето и одржувањето на градители кои постојано се прикажуваат меѓу клиентите и преку уредите, голем број одлични платформи се појавија на пазарот. Она што го користевме опширно е Стрипо.
Stripo не е само градител на е-пошта, тие исто така имаат библиотека од над 900 шаблони кои лесно може да се увезат. Откако ќе ја дизајнирате е-поштата, можете да испраќате е-пошта до 60+ ESP-и, вклучувајќи и клиенти за е-пошта MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook и Gmail. Најдобро од сè, шаблоните на Stripo доаѓаат со вклучени тестови за рендерирање на е-пошта за да можете да се уверите дека се тестирани и дека работат постојано на преку 40 клиенти за е-пошта.
Пријавете се во демото на уредникот на Stripo
Обелоденување: Јас се поврзувам со мојот консултантска фирма за маркетинг кој дизајнира и распоредува е-пошта меѓу клиентите за водечки брендови во практично секој давател на услуги за е-пошта. Јас сум, исто така, подружница на Стрипо и ја користам мојата врска во оваа статија.
