<
  • Главная
Статьи

Шаблон красивого html-листи для Email-розсилок на 1С-Бітрікс. Верстка поштових шаблонів

  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, а значить не потрібно залучати верстальника / програміста

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

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

Далі перейдіть в список шаблонів і отримаєте 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С-Бітрікс . Його ядром є той самий Інлайнер.

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


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

Чому ми займаємося темою красивих розсилок?
На що витрачається багато часу?
А що далі?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью