1. Покажи мені як виглядають листи з твого сайту і я скажу наскільки ти крутий
2. типи листів
3. Як зробити листи сайту красивими
4. Створення верстки поштового шаблону
5. За допомогою спеціальної бібліотеки
6. Додаткова підготовка поштового шаблону
7. Як використовувати шаблон поштової розсилки в сайті на 1С-Бітрікс
8. Красиві повідомлення з сайту
9. Красива розсилка по базі передплатників
10. А що далі?

Чому ми займаємося темою красивих розсилок?

Ми не просто "веб-розробники на Бітрікс". Наша ключова компетенція - вміння інтегрувати різні веб-системи і програмні продукти між собою.

ИнтерВолга - компетентний веб-інтегратор . Ми можемо вирішити всі завдання інтеграції власними силами. Ми приносимо користь бізнесу клієнта за рахунок осмисленого застосування веб-технологій.
Яскравий приклад "інтеграційної" завдання - красиві стилізовані листи, які вирішують бізнес-завдання незалежно від того, як саме читає листи ваш клієнт і на якому пристрої.
Ми вирішили це завдання для себе і можемо допомогти вам.
Отже, в попередніх статтях про Email-розсилки мій колега Олександр Давидов розповів про те, навіщо розсилки потрібні і як їх зробити "на швидку руку".

Я перехоплю у нього естафету і розповім що можна зробити крутіше і якої крові це буде коштувати.
Описані Олександром способи Email-розсилок ( через модуль "Розсилання" , через MailChimp ), Як я вже говорив, працюють, але не позбавлені недоліків. Наприклад, до модуля розсилок 1С-Бітрікс ви не зможете автоматично застосовувати гарне оформлення. А MailChimp безкоштовний тільки якщо у вас менше ніж 2000 передплатників (потім починає коштувати чималих грошей).

Крім того, в MailChimp доводиться постійно вручну додавати нові адреси (наприклад тих, хто заповнив форму зворотного зв'язку або оформив замовлення на сайті). Для вирішення конкретно цієї проблеми ми навіть зробили свій модуль для Marketplace, але досвід показав що він користується низькою популярністю і тому ми вирішили не витрачати сили на його підтримку і продажу.

Покажи мені як виглядають листи з твого сайту і я скажу наскільки ти крутий

Листи вони як люди: бувають фотомоделі, а бувають сірі мишки. Упевнений, ви теж це помічали. Ось так в моєму особистому поштовому ящику виглядають перші:

А ось так другі:

Звідки беруться такі "сірі" листи? Я впевнений що серйозна причина тільки одна: зробити по-справжньому красиві листи складно. Причому складно з 2-х позицій: творчої і технічної.

типи листів

Всі листи, що надсилаються електронною поштою (в тому числі відправляються сайтом) можна поділити наступним чином:

• В текстовому форматі
  Це найпростіший тип - звичайні листи не містять ніякого форматування. Тільки текст і нічого більше. Саме в цьому форматі сайти на 1С-Бітрікс за замовчуванням розсилають користувачам повідомлення (про реєстрацію, зміні пароля і т.д.)
  

• У HTML-форматі

• З мінімальним використанням HTML
  Ці листи використовують найпростіші способи форматування: колір і розмір тексту, картинки. Для цього використовуються html-теги - ті ж самі що і в візуальному редакторі на сайті. Саме такі (і тільки такі, на момент написання статті) листи вміють розсилати модулі "Розсилання" і "Email-маркетинг" в 1С-Бітрікс.
  

• спеціально зверстані
  Це найскладніший з типів листів - для нього необхідна спеціально підготовлена ​​верстка. Саме про цей тип листів моя стаття.

Як зробити листи сайту красивими

Красиві листи виходять якщо для них підготовлена ​​спеціальна верстка. На відміну від листів з мінімальним використанням HTML, в даному типі проектується модульна сітка (структура листи). Виділяються спеціальні місця під логотип, назву сайту, контент. Підбираються кольору і розміри.

Зробити таку верстку можна одним з 2-х способів:

• Використовувати професійний сервіс-конструктор.

• Зверстати самостійно. З нуля або використовуючи спеціально "заточену" під це бібліотеку.

Створення верстки поштового шаблону

За допомогою конструктора

Для цього способу рекомендую використовувати сервіс MailChimp. Його корисною особливістю є безкоштовний і дуже зручний редактор шаблонів листів. Він працює за принципом Drag & Drop. Ви просто накидаєте блоки, редагуєте текст і картинки.

Найголовніше - не потрібно вивчати HTML, а значить не потрібно залучати верстальника / програміста.

Після того як ви сконструювали свій шаблон листи - збережіть його.

Далі перейдіть в список шаблонів і отримаєте HTML-код.

Цей код і є наша мета.

За допомогою спеціальної бібліотеки

Цей епіграф я вибрав не просто так. Ручна верстка поштових шаблонів це непростий процес. Він вимагає знання багатьох нюансів (вже не браузерів, а поштових програм). Щоб створити таку верстку потрібно кваліфікований верстальник.

Можна провести паралель з версткою сайту. На що витрачається багато часу? Звичайно ж на підтримку різних браузерів (найчастіше старих).

При верстці шаблонів поштових розсилок величезна час буде витрачено на те ж саме. Тільки тепер замість IE, Firefox, Chrome і Opera у нас є купа Email-клієнтів: Gmail, Яндекс.Почта, Apple Mail і Outlook всіх версій. Змушений констатувати, що останні відстають в розвитку років на десять.

Цей спосіб слід вибирати якщо:

• можливостей конструктора не вистачило (якийсь блок потрібно посунути, а він не рухається);

• необхідно зробити не один шаблон листи, а багато: для службових повідомлень з сайту, для розсилок різного типу і з різними оформленням контенту.

Рекомендуємо створювати верстку не з чистого аркуша, а використовуючи одну з бібліотек:

Це свого роду набір заготовок і правил. Використовуючи їх, ви (а точніше ваш верстальник) заощадите десятки годин.

Додаткова підготовка поштового шаблону

До цього моменту ми маємо HTML-верстку. Але вона ще не готова до відправки.

Справа в тому, що всі стилі оформлення які ви вносили (через редактор MailChimp-а або при самостійній верстці) збережені в тезі <style> всередині шаблону. Поштові клієнти при отриманні листи і відображенні його користувачеві видалять такі стилі. Зроблено це з міркувань безпеки або з інших причин - не ясно.

Факт залишається - всі стилі перш ніж можна буде будуть видалені. А Microsoft Outlook ще й своїх стилів додасть. В результаті ваш лист буде виглядати потворно. Ось приклад зверстаної розсилки:

А ось так вона відобразиться в Outlook якщо відправити її без додаткової обробки:

Вирішення цієї проблеми існує і називається воно "Інлайнер" (inliner). Це інструмент який спеціальним чином перетворює ваш HTML-шаблон. Для кожного елемента вашого шаблону він обчислює перелік стилів, які до нього (елементу) повинні бути застосовані, і записує їх в атрибут style відповідного HTML-тега. Такі стилі вже не вирізаються і не перебиваються поштовиками.

Скористатися можна наприклад ось цими Інлайнер:

В результаті ви отримуєте HTML-код, який можна відправляти через сайт. Цей код повинен відображатися у всіх поштовиків однаково. Само собою, це потрібно перевіряти.

Як використовувати шаблон поштової розсилки в сайті на 1С-Бітрікс

Можливі наступні сценарії:

Красиві повідомлення з сайту

Якщо на вашому сайті користувачі реєструються, заповнюють форми зворотного зв'язку або оформляють замовлення - сайт частенько відправляє їм листи. "Дорослі" (в сенсі "склалися") компанії зазвичай хочуть, щоб навіть такі повідомлення були красивими і дотримувалися брендбуку.

Реалізувати цей сценарій можна використовуючи новий функціонал 1С-Бітрікс - "Теми оформлення". Теми оформлення дозволяють додавати "шапки" і "підвали" до шаблонів вихідних листів.

Отриманий раніше поштовий шаблон потрібно розділити на 3 частини: шапку, контентную частина і підвал. Шапку і підвал потрібно зберегти в тему оформлення.

Контентну частину потрібно помістити в шаблон поштового повідомлення. І ось тут виникає складність: "проінлайненний" шаблон листи настільки громіздкий, що застосування цієї верстки навіть до одного повідомленням вимагає багато часу (від десятків хвилин до декількох годин) і нервів.

простий шаблон

перетворюється в дуже громіздкий і трудноподдержіваемий.

На скріншоті нижче вмістилося тільки відображення рядка з скріншоту вище.

А уявіть скільки роботи буде потрібно якщо ви захочете змінити колір кнопок, наприклад.

Є вихід і з цієї проблеми, про нього я розповім в наступній статті.

Красива розсилка по базі передплатників

Будемо чесні з собою: модуль "Розсилання" в 1С-Бітрікс мертвий. У ньому реалізований дуже обмежений набір дій, а серйозних оновлень не було багато років і більше не буде. Модуль "Email-маркетинг" вже зараз вміє набагато більше, хоча теми оформлення (шапки і підвали) не підтримує. Незважаючи на це, я пропоную використовувати саме другий.

Все відносно просто, якщо ваша розсилка разова і ви не збираєтеся її редагувати. При створенні розсилки потрібно вибрати "Порожній шаблон" і вставити туди отриманий раніше (після Інлайнер) шаблон поштової розсилки. На цьому все, якщо розсилка у вас одинична.

Якщо ж ваш шаблон це тільки шаблон, а зміст ви хочете редагувати - виникає проблема. "В лоб" вона вирішується тільки великою кількістю ручної праці (на підготовку сніпетів). Однак ми придумали і розумне рішення.

А що далі?

Якщо ви дочитали до цього моменту - вітаю вас з проясненням. Тепер ви знаєте як непросто зробити красиву розсилку і які проблеми очікують на цьому шляху. Коли ми (ИнтерВолга) починали робити такі розсилки / шаблони для наших клієнтів ми набили багато шишок на кожній з описаних проблем.

В результаті ми вирішили автоматизувати частину цього процесу і зібрати рішення для описаних проблем в одному місці. Це місце називається модуль "Поштові інструменти" для 1С-Бітрікс . Його ядром є той самий Інлайнер.

На цьому інтригуючому моменті я хочу завершити статтю. Читайте продовження:

Оцініть статтю: