Верстка адаптивних листів. Пам'ятка маркетолога | Бізнес Майстерня

Верстка адаптивних листів. Пам'ятка маркетолога

Верстка адаптивних листів. Пам'ятка маркетолога

дизайн

Бізнес Майстерня розповідає, в якій ситуації варто віддати верстку листів на аутсорс, а коли можна скласти адаптивний лист самому в блоковому редакторі.

Уявімо ситуацію: Сергій - маркетолог-початківець. Він працює в невеликому інтернет-магазині, одна з його задач - запустити розсилку по клієнтській базі. Стратегія, план, сценарії і тексти для листів готові.

Що робити з дизайном і адаптивною версткою? Бюджет на межі, тому у Сергія серйозний вибір: заощадити і зробити все самому, в редакторі сервісу розсилки. Або найняти фрілансера.

Порада: Сергію потрібно визначитися, які повідомлення йому потрібні та прочитати статтю про деякі поштові сервіси, та основні рекомендації з організації розсилок. Якщо він не женеться за креативністю, то впорається з дизайном і версткою сам. Розповідаємо, як зробити це правильно, без допомоги сторонніх фахівців. Результат буде відрізнятися, але в ситуації, коли бюджет обмежений і треба зробити більш-менш якісно - це вихід.



Вибираємо вбудований редактор або послуги верстальника

У великих сервісів розсилки є вбудований блоковий редактор. У ньому збирають прості адаптивні листи і це входить у вартість передплати. Оформити складний креативниий лист в редакторі не вийде - тут доцільніше скористатись послугами дизайнера і верстальника. Для початку розберемося, який лист віднести до категорії складних, а який - до простих.

Можливості вбудованих редакторів відрізняються від сервісу до сервісу. У будь-якому з популярних редакторів ви можете додати блоки з текстом, картинки, кнопки, іконки соціальних мереж і кнопки «Поділитися». Це стандартний набір стандартного редактора.

Далі йдуть «фішки». Десь можна задати точний розмір для окремих блоків, а десь - не можна. В одному редакторі можна збирати тільки в один стовпчик листи, в іншому обмежень за кількістю колонок немає. У деяких редакторах ви навіть можете налаштувати, які блоки показувати на десктопній версії, а які - тільки на мобільних пристроях.

перевірка

Дизайнер і верстальник пропонують індивідуальні рішення, редактор - типові. Враховуйте, що, збираючи лист в редакторі, ви в будь-якому випадку обмежені, наприклад, набором шрифтів і їх розмірами.

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

Редактор адаптує лист за своїм алгоритмом, переробити алгоритм не можна.
верстальник

Якщо ви пропрацювали структуру, написали, перевірили текст і підібрали картинки, то на створення листа піде від тридцяти хвилин до двох годин. Нагадаємо, що ви не платите за верстку, робота з редактором включена у вартість акаунту.

Команда фахівців на фрілансі зробить лист за два-три дні. Послуги дизайнера та верстальника можуть коштувати від 1 000 до 3 000 гривень. Якщо замовляєте в агентстві - в рази дорожче. Пам'ятаєте історію з вступу? Для Сергія вибір очевидний: він буде збирати лист сам, в його ситуації це дешевше і швидше.

Простий адаптивний лист краще зібрати у вбудованому редакторі. Якщо хочете нестандартних рішень - віддавайте на аутсорс.

Як зібрати лист у вбудованому редакторі

Тим, хто збирає лист в редакторі, знати код не обов'язково. Єдине, що потрібно - продумати структуру листа, підібрати картинки і написати текст. Ніякої «ручної» верстки - ви зберете лист з блоків, як в конструкторі посадкових сторінок.

Крок 1. Схема або прототип листа

Почніть з чернетки, накресліть на папері схему майбутнього листа: де буде логотип, де заголовок, де картинка, де кнопка і т. Д. Якщо є час, зберіть повноцінний прототип в Balsamiq або NinjaMock. Такий прототип не соромно показати директору і передати в роботу дизайнера.

Крок 2. Верстка листа в редакторі

Додаєте потрібну кількість колонок, виходячи з уже готової схеми або прототипу

колонки

Для початку протестуйте розсилку з листом в один стовпчик. Якщо все в порядку, пробуйте складніші структури. Жоден сервіс не гарантує 100% адаптивності у всіх браузерах і на всіх пристроях.

Перетягуєте потрібні елементи в тіло листа

елементи

Зазвичай у вбудованих редакторах діє принцип Drag-and-drop. Якщо у вашому не так, подивіться статті з Бази знань - принципи роботи в редакторі описані там.

Налаштуйте вміст елементів: відступи, інтервали, вирівнювання і накреслення

текст

Тут же вписуєте потрібний текст, додаєте фотографію або ілюстрацію, з посиланнями або без. Сподіваємось, що не потрібно пояснювати, чим важливий такий етап створення листа, як перевірка тексту на помилки, достовірність, унікальність і таке решта. Не забувайте, що ви можете додати анімовану картинку, більшість редакторів підтримує формат GIF.

Тільки не переборщіть з розміром файлу. Поштові клієнти не люблять «важкі» листи і можуть приховати їх вміст під кнопку «Показати повністю» - так, наприклад, робить Gmail. Підбирайте файли так, щоб готовий лист важив не більше 600 Кб, це оптимальний розмір.

Додаєте кнопки цільової дії, кнопки «Поділитися» і іконки соціальних мереж

контент

Не забудьте налаштувати кнопки і додати до них посилання для переходу.

Крок 3. Перевірка адаптивності у вбудованому редакторі

Коли лист готовий, перевірте, як він відображається на різних пристроях.

перевірка

У 90% випадків все буде в порядку, блоки «перебудуються» автоматично. Якщо верстка все-таки «злітає» або результат вас не влаштовує - перевірте значення відступів в блоках, вони повинні бути однаковими. Якщо один блок відступає на 10 пунктів, а інший на 30, в мобільній версії вони можуть перебудуватися некоректно. Якщо обидва блоки відступають на 10 пунктів, швидше за все, все буде в порядку.

Крок 4. Перевірка адаптивності на сторонніх сервісах

Перевірте результат через Litmus або Email on Acid. Ці сервіси покажуть, як лист відобразиться на різних пристроях, в різних браузерах і різних поштових клієнтах.

У деяких редакторах перевірка через Litmus інтегрована за замовчуванням. Якщо у вашому редакторі такої можливості немає, відправляйте тестову копію листа на спеціальний e-mail, який дадуть після реєстрації в Litmus.

Послуга платна, місячна підписка в Litmus починається від 79$, в Email on Acid - від 45$. Якщо ви відправляєте по одному листу раз на місяць, виходить занадто дорого. У крайньому випадку, спробуйте Browser Shots, він старий і незручний, зате безкоштовний. Пам'ятайте, що подібні сервіси не дають 100% гарантії. Навіть якщо в літмусі все добре, це не привід одразу ж запускати розсилку. Надішліть листа на особисту пошту і відкрийте його там.

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

Як оцінити результат роботи - своєї або верстальника

Якщо збираєте лист самі, перевірте адаптивність всередині редактора і подивіться лист з особистої пошти - цього достатньо. Хочете перевірити адаптивність на багатьох пристроях, браузерах і поштових клієнтах відразу - тоді купуйте аккаунт в Litmus або Email on Acid, дивіться результат там.

Тим, хто віддавав верстку на аутсорс, купувати аккаунт не обов'язково, попросіть скріншоти з Litmus у верстальника. Якщо він професіонал, то перевіряє листи на подібних сервісах, відправити скріншот для нього не проблема.

При перевірці придивіться до поштових клієнтів, в основному, косяки спливають тут. Обов'язково перевірте, як відкривається лист в Outlook, Gmail.

Не варто витрачати час на виправлення макета, якщо він некоректно відображається на третьому айфоні, в сьомій версії Internet Explorer або в поштовому клієнті The Bat. Так, завжди знайдуться ті, хто користується третім айфоном, але їх меншість. Чи варто переробляти макет заради 1-2% від загальної бази? Залежить від кількості і «якості» бази.

Сподіваємося, ви її сегментували за цим і цим порядком і про своїх підписників знаєте все. Якщо 1-2% - це 10 000 осіб, то напрягтись варто. Якщо ви працюєте в b2b і ці 1-2% - керівники компаній, власники бізнесу і інші віп-клієнти, доведеться адаптувати листи під них.

Простежте за тим, щоб лист адекватно відображався в Outlook, Gmail, Ukr.net - цього достатньо.

Пам'ятка маркетолога

  • Визначтеся з форматом листа, яким він буде: стандартним і простим або складним і креативним. Листи зі складною структурою віддавайте дизайнеру і верстальнику. Прості листи збирайте в редакторі сервісу розсилки, вони адаптуються за замовчуванням.
  • Перевіряйте результат у вбудованому редакторі і, якщо дозволяє бюджет, на сторонніх сервісах. Беручи лист у верстальника, просіть скріншоти, які підтверджують, що лист відображається коректно - в популярних поштових клієнтах і популярних браузерах.
  • Не забудьте переглянути лист через особисту пошту, хоча б в основних поштових клієнтах і з актуальних моделей смартфонів на iOS і Android.
Фото: flickr.com
Обробка: Vinci
назад
далі