Оформление на HTML имейли - съвети за начинаещи
По-голямата част от тези, които се занимават с имейл маркетинг, включително начинаещи, един или друг начин трябва да отида в кухнята на HTML оформление.
Често използваме готови HTML-модели на, но въпреки предполагаемото неговата универсалност, винаги трябва да бъде в състояние правилно да поставите и персонализирате снимки, да ги вмъкнете в рамки, да промените заглавието стилове, фон, шрифт и размер. И тъй като това са основни познания по CSS (стил атрибути), ние започваме да бръкнат по-дълбоко и да започнем да разбираме от това, което наистина е HTML оформление.
Дори ако не сте професионалист, а не уеб разработчик и уеб-дизайнер и използване на модели на други хора, все още трябва да бъдат адаптирани към вашите нужди, и това означава - да се рови във вече създадения код.
Не всички HTML-модели на който ще намерите на пространствата на Интернет ще вземе предвид всички характеристики и универсално и се появяват във всички пощенски кутии и имейл клиент. Събрахме за вас някои препоръки за оформление на HTML съобщенията, които трябва да се има предвид и, ако е необходимо, добавете. Бъдете готови да експериментирате!
Но да започнем с това, по-кратко отклонение.
И сега всички тези фактори се размножават съществуващия брой доставчици на електронна поща, електронна поща, устройства и приложения. В общи линии, сте разбрали, HTML оформление - нещо друго забавно.
Днес се вгледаме в оформлението на HTML писма до компютър. Той има въпреки това все още преобладава. Адаптивни оформление имейли за мобилни устройства - отделен въпрос, изисква отделен пост.
Да започнем с най-важното.
Оформление на HTML писма насърчават да предприемат въз основа на една маса. Ако уеб развитието на този метод е остаряла, а след това пишете, че е оптимално, защото на този много разнообразие от устройства, електронна поща и имейл-доставчици, всеки - със своите чипове и настройки.
Нещо подобно, между другото, беше с браузъри преди 10 години, когато те водеше жестока борба за пазарен дял и не искат да си сътрудничат помежду си. Ние трябваше да се копае в петите си за една и съща площадка изглеждаше добре и Interent-Explorer и Opera. Благодарение на проекта за уеб стандарти и на съвместните усилия на програмисти успяха да създадат и прилагат универсалните стандарти. Ще имате ли имейл писма до същата съдба?
На място - това е таблична структура:
Блок структура, популярен в уеб оформление използване Разделение маркер.
шаблон размер
писмо широчина не трябва да надвишава 680px. Понякога е подходящо да се използва 700 пкс, но не повече. И тук не е само в модерна естетика.
Доказано е в многобройни експерименти, които за бързо и повърхностно четене (а именно и четат / гледат четене на поща), оптималният размер на хоризонтална линия - около 65-75 символа. Ако ние считаме, пространства, препинателни знаци разстояние и стандартен 14px шрифт, то това е 600-680 пиксела.
Полета и Padding
Създаване на електронна поща, в която границата и подложка да се появяват едни и същи във всички кутии и имейл клиент е почти невъзможно. Не само имейл доставчиците, но също и имейл клиенти са нарязани или добавени към тези или други свойства.
Едно от основните правила на маса оформление - е добавянето на имоти, които обезсилват допълнително подложка и границите, добавете толкова много клиенти за електронна поща и доставчици на уеб поща (Gmail, Yandex, Outlook и др.)
Тези свойства (граница, cellpadding, cellspacing, полетата), за да се добавят под всяка таблица маркер.
След това добавете
Вариант 1: Оставете двете подплънката и марж на
За хоризонтално вдлъбнатина използва загнездена маса по-малка от ширината база на блока. Е. Оказва таблетката в таблетка. Вертикална вдлъбнатина използва празна единица / контейнер с предварително определена височина линия. Например:
Вариант 2: За да се откаже маркера
В този случай, за да вмъкнете текстови блокове директно под ТД на маркер. по-рано като са се регистрирали всеки таг TD ВСИЧКИ свойства на шрифта за отстъп. За разбивка на параграфи използва BR маркер. Например:
Като допълнителна вертикална вдлъбнатина между блоковете могат да бъдат използвани празни блокове / контейнери с предварително определена височина линия. Например:
Вторият вариант би означавало много код.
И цвят на фона
Обикновено, HTML-шаблон поема бял фон за основните буквите (текстови блокове) и по-тъмен контраст - за основата на контейнера на HTML шаблон. Обикновено, този вид на сиво, но днес те никога не са били ограничени. За пример - тя може да бъде бордо, тъмно кафяво, лазурно, или дори черно.
Важно е да се помни - винаги използвайте пълна, шестцифрена шестнадесетичен цвят-код, например # 2a7fb8 или # b6b6b6, а не да го съкрати. Например, за да обяснят на цвят бял #ffffff като вместо съкращение #fff. В противен случай, много клиенти за електронна поща, просто не признават.
Също така, сега може да се използва като фоново изображение или модел, т. Е. Повтарящо мотив.
По-долу е примерен код за образец на фон.
Добави тази част, след като тялото на отваряне маркер. преди таблицата първи начален маркер:
И това парче - на затварящ таг / тялото:
Не забравяйте да посочите цвят на фона на застраховката. Има доставчици на електронна поща и имейл-клиенти, които непременно ще блокират фонови изображения, а след това, в замяна на това ще трябва да се покаже името посочено цвета на фона.
Текстови връзки и CSS
С CSS стилове и много започват в проучване на HTML оформление. Когато става дума за проектиране на текста в рамките на шаблона, възникват проблеми, тъй като CSS стилове има много клопки.
Първото правило, което си струва да се помни, по време на оформлението на писма - винаги използвайте инлайн CSS.
Inline-CSS - какво е това
Работата е там, че оформлението на HTML-буквите, които използваме структура табличен, а твърде много клиенти за електронна поща и доставчици на имейл игнорирани / нарязани всички стилове в между маркерите на главата и / главата. както и стилове, посочено в глава клетка.
Ето защо, всички стилове на текст се прилагат не само в полето за заглавие, но се дублира етикет педя. във всяка нова линия или р TD във всяка нова клетка. например:
Важно е да се помни, че цвят, шрифт и размер - шрифт семейство: Helvetica, Arial, безсерифен; шрифта: 14px; цвят: # 757575; Онлайн-височина: 145 процент; - Винаги използвайте инлайн (вградено). В противен случай, клиенти за електронна поща, ще бъдат добавени към тези свойства, собствените си ценности.
Не е необходимо да се напише свойства на шрифтовете данни в съкратен вид, тъй като някои пощальони и имейл-клиенти, съкратена версия на това ще се работи, но например в Outlook-е - вече не съществува. Тя ще бъде правилно да се посочи всеки имот поотделно, като например:
- шрифт семейство: Helvetica, Arial, безсерифен; шрифт в стил: курсив, размер на шрифта: 14px; цвят: # 757575;
И така, няма да има дясно: шрифт: Arial курсив 14px # 757575;
Височина на редове - линия височина - тя може да бъде определен като един пиксел, и като процент. Например линия височина: 145 процент; или линия височина: 24px; Когато височината е посочена в пиксели, стойността трябва да бъде поне 8 пкс по-голям от размера на шрифта. Например, ако размера на шрифта 14px; височина линия - най-малко 22px.
Заслужава да се отбележи, че дори и Outlook.com игнорира височина на линията, ако е писано в участъка маркер. Ето защо, за да се уверите, че тя се е намирал на ТД на маркер.
-WebKit-размер на текста коригира: няма - този имот се използва за решаване на размера на шрифта на устройствата iPhone IOS 6-7 / Ipad. В тези устройства, минимум по подразбиране размер на 13 пкс шрифта. Ето защо, ако сте някъде намерени 13 пкс шрифта по-малък, да промените този имот.
Шрифтове, има изобилие от налични за HTML писма - е много по-малък. Кирилица, уви - още по-малко. Но има определен плюс. Вместо да избирате един от сто опции, които никой не знае какво ще се отрази, че вече има стандартен набор от шрифтове, която присъства на всички устройства и devaysakh и гледа всичко еднакво добре. Ето списъка на безопасно:
- шрифт семейство: Arial, Helvetica, безсерифен;
- шрифт семейство: "Arial Черно", Helvetica, безсерифен;
- шрифт семейство: "MS Sans Serif", Женева, безсерифен;
- шрифт семейство: Tahoma, Женева, безсерифен;
- шрифт семейство: "Trebuchet MS", Helvetica, безсерифен;
- шрифт семейство: Verdana, Женева, безсерифен;
Serif (серифен):
- шрифт семейство: Грузия, сериф;
- шрифт семейство: "Times New Roman", Times, сериф;
Font име, състояща се от две или повече думи трябва да се приема в обикновени кавички, например "Trebuchet MS", обозначаващ този начин една стойност / име. В противен случай, някои програми за поща или пощенски услуги ще бъдат автоматично разделени всички стойности, разделени със запетая, а името на шрифта ще изглежда така - Trebuchet, MS, Helvetica, безсерифен; Това ще бъде отчетено като грешка, и вместо "Trebuchet MS" се показва по подразбиране шрифт Times New Roman.
връзки стил също е желателно да се дублира етикет педя. Най-малко за цвят, шрифт и размер.
Ако искате да, като кликнете върху линка, страницата ще се отвори в нов прозорец, добавете целта атрибут = «_ празно».
Ако искате да, когато мишката върху линк, има текст-подсказка (текст-навъртам), добавете заглавие атрибут = «текста."
Трябва също така да се има предвид, че клиентите по пощата и електронна поща (не всички, разбира се) имат навика да се наблегне на яркосини, всички позовавания в текста. Ето защо, ако искате текстът не се подчертае, (например в заглавната част) - показва стойността на текстови декорация: няма;
За електронна поща:
изображение
Блокиране на изображенията - често срещан проблем. Много пощенски и имейл клиенти блокират изображения по подразбиране, като по този начин лишава HTML-шаблон е един от най-важните от своите предимства - снимки.
Абонат може да разреши пощата / клиент, за да се покаже автоматично снимките си и не могат да решат, предпочитайки, от време на време, за да изтеглите или да не се изтеглят изображения ръчно. В този случай, отваряне на писмото, вместо изображения абонатът ще видите празно място. Разбира се, това празно пространство може по някакъв начин да маркирате или добавка по смисъла на. За тази цел има ALT атрибути, заглавие, както и други свойства.
Атрибутът н показва текста възлага на изображението. По този начин, ако снимката е заключена, абонатът ще може да видите подписа си. В този подпис може да бъде свойства като шрифт, цвят на шрифта, размер, стил.
показват заглавието атрибутите изскачащ текст-връх и могат да бъдат различни от Alt-текст.
В образа също може да бъде персонализиран фон - фон-цвят (така същата като на общия фон на шаблона или отделен от него), заоблени ръбове - граничен радиус (за съжаление може да бъде прочетен от някои пощенски услуги, както и собствеността на клиента - Yahoo, Outlook) и проста конструкция.
За рамка - граница - винаги е необходимо да се използва пълният, а не съкратена версия на този стил. Например, правото да се посочи:
- гранично-ширина: 1px; граница в стил: твърда; гранично-цвят: # 999999;
И това ще бъде погрешно: граница: 1px твърдо # 999;
езика: блок; - изображение имот, който му позволява да се покаже отделна единица, или, в някои клиенти могат да плуват и да преминете към друг номер или ъгъл. Също така, той не позволява имейл клиент Outlook добавите изображение нежелан отстъп.
Също така, винаги е необходимо да определите ширината и височината на изображението, точни и реални размери, за да се избегне неправилно позициониране и изображение в рамките на шаблона. Например, ако вашият образ - размер 820h600px, че не е необходимо да мащабирате и размер като запис - 410h300px защото Outlook ще покаже е действителния размер на изображението, а не по-малката версия. Такова изображение лесно да се счупят на целия ви шаблон.
В резултат на това код на изображението може да изглежда така:
Както можете да видите, че има нещо, за да калайджия.
В крайна сметка, обаче, не е доказано тези съвети, всичко е готово в рамките на HTML-шаблони имоти ще трябва да бъдат тествани и няколко пъти, преди да се вземе решение за най-добрият вариант. Поставете шаблона за всички тези параметри може да отнеме известно време, и вие трябва да бъдете готови. Тест!
По отношение Дмитрий Arsenyev!