Inline-css – що це таке. Розмір попереднього заголовка
У наш час простим електронним листом, який представляє однакову сторінку з текстом, важко когось зацікавити. Сьогодні, за часів величезного потоку спаму, маленькою перемогою можна вважати рішення адресата переглянути ваше повідомлення. Але головним завданням електронного розсилання залишається залучення покупців вашого товару, чому має шанс посприяти лише якісно та грамотно оформлене повідомлення.
Що дає HTML-лист?
Поштові листи – потужна рекламна зброя. Така реклама хороша тим, що не передбачає обов'язкової наявностісамостійного веб-майданчика. Якісний лист, який отримується в результаті комплексної роботи, здатне за короткі термінисуттєво збільшити обсяги продажу товару. Провідні фірми та компанії знають про рентабельність електронних розсилок, тому активно її використовують як важливу частину всієї маркетингової стратегії.
Як замовити верстку електронного листа?
Для верстки потрібний дизайн електронного повідомлення, який також можна замовити у нас. Наданий графічний макет буде точно адаптований під усі поштові сервіси з використанням валідного HTML-коду. У разі відсутності власного веб-сервера ми пропонуємо сервер для зберігання картинок повідомлення.
3 - 7 днів
ЗамовитиЯк робляться такі листи?
Верстка електронних листів будується на тих же принципах, що й верстка сторінок сайту. Тільки є певні особливості у технічному плані та способі подання інформації. Якщо верстка сайту – це боротьба тільки з браузерами, то верстка HTML-листів несе в собі ще один набір «головного болю». Крім суворого використання тільки табличної верстки з використанням «стародавніх» атрибутів (cellspacing, cellpadding і т.д.), кожен поштовий клієнт має завжди однакові способи інтерпретації інформації. Знехтувати якимось поштовим сервісом – втратити покупця, а цього ніхто не хоче.
Вся робота зі створення електронного листа поділяється на чотири етапи:
- Складання рекламного текстута підбір необхідної інформації для email розсилки.
- Графічний оформлення сторінки листа (створення дизайну розсилки).
- Верстка макет електронного повідомлення.
- Перевірка відображення електронного листа у всіх популярних поштових агентах та сервісах.
Максимальний ефект досягається тільки за якісній роботіфахівців з кожної стадії. Верстка вважається найвідповідальнішим моментом, адже робота верстальника – заключний етапстворення електронного листа, який може перекреслити всі плоди рекламного та дизайнерського рішень.
приклад
Адаптивний дизайн у сучасному маркетингу- це обов'язкова умовауспішної e-mail розсилки. Однаково зручне «прочитання» на будь-якому вигляді пристроїв, гнучкий дизайн, який підлаштовується під розмір екрану, оптимальне розташуваннявсіх кнопок та посилань. Щоб зрозуміти, як він виглядає та працює, подивіться приклад нижче.
Поради засновника маркетингового агентства Criminally Prolific Дмитро Драгилев
В закладки
Засновник маркетингової агенції Criminally Prolific Дмитро Драгилев поділився у своєму блозі декількома способами пошуку необхідної email-адреси. У рубриці Growth Hacks - переклад нотатки
Name2Email виконує ці кроки прямо у вікні Gmail Compose, без жодних копіпастів email-адрес і без їх послідовної перевірки. Name2Email сама підставить усі ваші адреси в полі "To", і ви відразу побачите, активні вони чи ні.
Анімований GIF, розміщений нижче, показує, як це працює.
Ще один спосіб знайти потрібна адресачерез Gmail/Google+ полягає в тому, щоб використовувати Rapportive. Ця програма працює подібним чином: введіть гадану адресу, і Rapportive покаже вам на бічній панелі всі пов'язані з ним профілі в соціальних медіа. Єдина причина, через яку я не включив сюди цю програму, - те, що вона почала менше підтримуватися з того часу, як її придбав LinkedIn.
Спосіб 5. Отримайте потрібну email-адресу з розсилки
1. Підпишіться на його розсилку
Наприклад, тут я заповнюю форму передплати на розсилку Раміту на IWillTeachYouToBeRich.com :
2. Натисніть кнопку відповіді на перший лист, який до вас прийде
Більшість розсилок новин вимагають від вас підтвердити передплату. Коли ви отримаєте такий лист, просто натисніть "Відповісти" – і потрібний email у ваших руках.
Ось що я отримав після того, як відповів на лист Раміта:
Ви можете робити цей трюк з будь-якими листами новин.
Спосіб 6. Просто запитайте
Це останній спосіб у моєму списку, але, можливо, він найефективніший: якщо ви дійсно хочете з кимось зв'язатися, спробуйте просто запитати.
Ви хочете отримати публікацію у блозі, але не знаєте, з ким це обговорити? Просто поділіться публікацією у Twitter та запитайте, з ким вам краще зв'язатися.
Ви хочете знайти людину, яка допомогла б вам просувати продукт? Просто напишіть комусь із потрібного вам департаменту на LinkedIn і запитайте, кого вони можуть вам порадити.
Якщо потрібна вам людина працює в великої компаніїВи можете просто зателефонувати туди. Хоча цей спосіб краще зберегти на крайній випадок.
Шість перерахованих вище способів допоможуть вам знайти практично будь-яку email-адресу. Однак існують деякі методи пошуку email-адрес, які я не раджу використовувати – ви тільки втратите час та зіпсуєте собі настрій.
1. Контактні форми на сайтах
Контактні форми здаються найкращим способомз кимось зв'язатися, але навряд чи вам вдасться знайти потрібної людиничерез них (якщо ви не шукаєте окремого блогера або зовсім крихітну компанію).
Ви, звичайно, можете використовувати контактну форму, щоб поцікавитися, з ким вам краще зв'язатися в цій організації (див. шаблони для холодних листів із мого минулого посту). Але не чекайте, що ви отримаєте 100% результат.
2. Дані WHOIS
ICANN – керівний орган для організацій, що займаються реєстрацією доменів – вимагає, щоб усі ці організації публікували доменні імена та контакти їх власників. Це називається "даними WHOIS".
Деякі блоги рекомендують переглядати ці записи, щоб знайти email-адресу власника того чи іншого сайту. Наприклад, набравши IWillTeachYouToBeRich.com на сторінці Who.is, ви отримаєте наступне:
Так, ми знайшли email-адресу, але навряд чи вона є активною. Принаймні, якщо ви хочете зв'язатися з Рамітом, вам не слід використовувати його для першої спроби.
У підході WHOIS є два недоліки:
- Знайдена email-адреса може належати доменному адміністратору або технічному фахівцю, а не тому, хто вам дійсно потрібний.
- Адреса, зареєстрована в WHOIS, може бути особистою email-адресою, і потрібна вам людина навряд чи зрадіє, якщо ви її використовуєте.
Якщо вам доводиться скористатися цим способом, то застосовуйте його тільки для пошуку окремих блогерів і приватних маркетологів. Ви не отримаєте хороших результатів, якщо той, кого ви шукаєте, працює у якійсь організації.
Матеріал із Email МаркетингВікі
Особливості верстки email Верстка email-повідомлень дещо відрізняється від web-верстки. Якщо для веб-верстки сучасних сайтів використовується CSS3, то для верстки email проблематичне використання навіть більш ранніх стандартів CSS. Це пов'язано з тим, що багато користувачів досі використовують старі пристрої та старі версії поштових клієнтів. Водночас кількість нових пристроїв постійно зростає. Отже, щоб листи коректно зображувалися на більшості існуючих пристроїв, доведеться зробити крок назад і більше покладатися на можливості HTML-верстки.
У ідеальному варіантіпри розробці листа дизайнер повинен постійно радитися з верстальником.
Основні параметри
* Розмір
Оптимальна ширина листа – 600-650px. При адаптивній верстці в медіа-запитах або файлах стилів найчастіше прописують максимальну величину екрана в 480px. При цьому розміри контентних блоків та самого листа краще задавати у відсотках та вказувати максимальну ширину. Так лист автоматично стискатиметься на екранах менше 600px. Щоправда, цього прийому буде замало адаптивної верстки з урахуванням особливостей мобільних пристроїв.
* Фон та колір
Для зручності читання та привернення уваги часто використовують світле тло, відмінне від білого. Як позначати кольори. RGB запис кольору сприймається не всіма поштовими клієнтами. Тому краще використовувати шістнадцятковий запис коду кольору і не скорочувати його.
* Розбивка контенту на сегменти
Для листів та email розсилоквикористовують табличну верстку. Незважаючи на те, що багато веб-дизайнерів вважають такий підхід застарілим, для email він оптимальний.
* Розміри елементів
Розміри елементів повинні задаватись в абсолютних значеннях. Розміри осередків таблиці вказуються у відсотках, розміри елементів – у пікселах. При цьому краще вказувати розмір без позначення px. Так можна уникнути проблем відображення в Outlook (наприклад, width="400").
* Доктайп (DOCTYPE)
Будь-який HTML-документ починається з елемента DOCTYPE. Він повідомляє браузеру, як інтерпретувати код. Існує кілька версій мови HTML із різним синтаксисом. Для листів рекомендується використовувати доктайп:
* Шрифти
Список шрифтів, які можна використовувати в email-шаблонах:
Font-family: Arial, Helvetica, sans-serif;
font-family: "Arial Black", Gadget, sans-serif;
font-family: Georgia, serif;
font-family: "MS Sans Serif", Geneva, sans-serif;
font-family: "MS Serif", "New York", sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
* HTML-теги, які можна використовувати в email
![](https://parki48.ru/wp-content/uploads/2019/09/" alt=) |
* CSS-стилі
У верстках email використання стилів CSS обмежене, практично не використовується CSS3. Всі стилі прописуються інлайн (тобто поруч із елементом, до якого вони відносяться). Стилі, прописані всередині тега
CSS-стилі в email-верстці
Стилі CSS дозволяють встановити основні параметри для елементів на сторінці (розміри, вирівнювання, колір тла тощо). Існує 4 способи завдання стилів для HTML-тегів:
* Впроваджений стиль
Стиль задається у тезі
документа. Наприклад:
Тут 1 раз задається стиль для тега
, і всі елементи з тегом буде надано описаний стиль.
* Імпортований стиль
Імпортований стиль також прописується у тезі
документа, але всі його параметри завантажуються з файла. Приклад:
* Стиль із файлу
Цей спосіб завдання стилю схожий на попередній, з тією лише різницею, що стиль не використовується
* Inline-стильСтиль вказується у тілі тега. Наприклад:
контент
У веб-розробці CSS-стилі дозволяють зменшити кількість коду. Для email-листів цей прийом не працює, оскільки більшість поштових програм ігнорує атрибути, задані в
, а також зовнішні css-файли. Саме тому для верстки email слід використовувати inline-стилі. У різних сервісах є різні обмеження підтримки CSS-атрибутів. Детальна таблиця підтримки стилів для найпопулярніших поштових сервісів була створена фахівцями campaignmonitor. Тут її можна переглянути онлайн: … для 10 основних сервісів або завантажити таблицю для 18 сервісів. Багато сервісів для email-маркетингу мають свої інлайнери, які конвертують код в інлайн-верстку автоматично.Використання табличної верстки
Блокова верстка, яка використовується для створення сучасних веб-сайтів, не підходить для електронної пошти. Для верстки email краще використовувати таблиці. Так, швидше за все, шаблон не роз'їдеться у застарілих поштових клієнтах. Спочатку необхідно створити контейнер, тобто. основну таблицю, яка окреслить межу листа. Таблиці усередині цього контейнера виконуватимуть роль осередків. І вже всередині осередків можна буде розмістити власне контент листа. У цьому слід уникати об'єднання осередків (атрибути colspan, rowspan), а форматування контенту в осередках використовувати вкладені таблиці. Найпростіший код основної таблиці листа може виглядати так:
|
|
Якщо спочатку в макеті застосовується більше однієї колонки, то для правильного відображення на мобільних телефонах, ці осередки потрібно буде побудувати один під одним. Для адаптивної верстки код основної таблиці може виглядати так:
|
