1. Ширина
2. Висота
3. вага
4. Предзаголовок
6. банер
7. Основна частина
8. футер
9. висновок

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

Зараз в надлишку різних прикладів, шаблонів, кожен з яких краше іншого. Чим далі розвивається пошук ідей, тим більше виникає труднощів, несподіванок, ускладнень, з яких нелегко знайти вихід і, нарешті, просто створити лист. Отже, з чого почати?

Універсальної шириною вважається діапазон 550-600 пікселів, але зараз ми можемо спостерігати навіть 900. Чому це так важливо і звідки беруться стандарти?

Більше 10-ти років тому Microsoft Outlook був ключовим поштовим сервісом і стандартні екрани моніторів були з низьким дозволом. Маркетологи повинні були підлаштовуватися під ці обмеження. Звідси і пішло правило 600 пікселів і його широке застосування в усьому світі.

Через таку статистики ми можемо спостерігати революцію в емейл-маркетингу - революцію в дизайні . Більше і більше листів виглядають як веб-сайти. Найефективніші емейл-кампанії в світі сповнені великих, яскравих і "на всю ширину" зображень. Як маркетологи це роблять?

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

Хочете безкоштовний шаблон?

Яка ширина підходить саме для ваших емейл-кампаній? Багато маркетологи порушували це питання тільки для того, щоб отримати заплутані відповіді, які здаються пережитками минулого. Давайте розберемо докладно і пройдемося по всіх можливих варіантів.

Ширина

Для прийняття рішення важливо враховувати різні поштові сервіси, пристрої, розмір дисплеїв, тип шаблону.

Поштові сервіси не використовують повноекранний режим показу листів. Місце займають меню, реклама, навігація, які створюють свої обмеження. Тому, якщо ви хочете, щоб емейл добре відображався в поштовій програмі, ви можете зробити його 550-640 пікселів. Якщо ж вам хочеться піти далі і створити лист ширше - робіть, але пам'ятайте, що багато поштові програми можуть не відобразити фон або додати горизонтальний скрол для перегляду всього вмісту. Просто перевірте свій лист перед відправкою через такі служби, як Litmus або Email on Acid , Які дадуть вам точне уявлення, як воно буде виглядати в різних поштових клієнтів.

важливо:

• У листі товщиною не менше 640 пікселів, Gmail покаже підкладку тільки, якщо розтягнути браузер ширше 1200 пікселів

• В Yahoo Mail ви можете переглянути електронну пошту в максимальній ширині 650 пікселів

• Outlook 2007 максимальне значення 600 пікселів

• Outlook 2013 - 550 пікселів

На мобільних пристроях встановлені обмеження в 320 пікселів для вертикального і 480 пікселів для горизонтального переглядів.

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

Щоб вибрати ці розміри потрібно виходити з таких даних:

• За допомогою яких поштовиків відкривають листи ваші передплатники?

• Ваш емейл адаптивен для кожної програми або ж він надто широкий і з'являється горизонтальний скролл сторінки?

Найчастіше компанії, які проводять експерименти з шириною електронного листа в 640, 700 або 960 пікселів, використовують адаптивні шаблони, тому ширина автоматично налаштовується під поштовий сервіс і пристрій одержувача.

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

Наприклад, у Nike оформлення листа однаково для всіх пристроїв:

А Victoria's Secret створюють універсальну структуру шириною 520 пікселів:

Ми не рекомендуємо застосовувати цей спосіб. Те, що коректно відображається на смартфоні або планшеті, в деськтопной версії може здатися дивним і незрозумілим. Наприклад, у Victoria's Secret часто листи рвуться через експерименти з шириною. Використовуйте можливість адаптивності, щоб бути придатними для всіх девайсів.

Висота

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

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

Але Gmail обріже занадто довге і важке вміст листа. А в кінці, як ми знаємо, знаходиться посилання відписатися, яку користувач може не побачити і, найімовірніше, відправить вас в спам.

вага

Якщо ваш лист багато важить, немає ніяких гарантій, що воно буде коректно відображатися в поштових клієнтах Gmail і Yahoo! Mail. Як Gmail, так і Yahoo Mail зменшують розмір електронного листа, якщо він збільшує ці значення:

Всі інші поштові клієнти не зменшують відправлене повідомлення. Часто обмеження 100 кб занадто мало і недостатньо для створення шаблону електронного листа. Розмір часто залежить від використовуваного вами редактора. Як правило, є додатковий код, який буде автоматично додаватися при створенні шаблону листа. Ви можете видалити цей код вручну і значно зменшити розмір емейла або просто вибрати редактор листів, який цього зробить.

Предзаголовок

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

У самому листі це поле більш технічне, ви не повинні робити його більшим чи розміщувати там будь-які додаткові елементи. Висота повинна складати 50-65 пікселів.

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

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

Заголовок

Найпоширеніша висота блоку, який не містить меню або масивного логотипу, становить 70 пікселів. Для тих, у кого є панель меню, заголовок може бути висотою 150-200 пікселів. Висота заголовка, яка 300 і більше пікселів, не підходить для огляду.

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

Наприклад, популярні варіанти використання:

банер

Найбільш часто використовуваний розмір зображення становить 640x480 пікселів. Масу варіантів з таким розміром ви можете знайти в Pinterest, Google або будь-який інший пошуковою системою. Краще брати картинку в хорошій якості і трохи більше, ніж в листі. Так при адаптації, якість не зміниться і загальний вигляд листа не зіпсується.

Багато дизайнерів експериментують з розмірами банерів, адже довжина може бути різною. Ширина обмежена тільки розміром шаблону, який ви вибирали.

Приклад успішного бренду:

Основна частина

У цьому блоці вказується та інформація, заради якої відкривалося лист. Максимальна довжина текстового контенту повинна бути близько 500-600 пікселів. Цього достатньо, щоб виділити будь-яку тему з 5-7 пропозиціями.

Довжина тексту. Загальна рекомендація - 45-75 знаків в одному рядку. Якщо ваш шрифт в мобільній версії такої ж як і в десктопной, то ви можете вкластися приблизно в 45 знаків в рядку, і 75 знаків в разі використання максимальної ширини в шаблоні 600 пікселів.

Електронна пошта не є місцем, де можна прочитати статтю з довгими розповідями або досліджувати нову область знань. Пишіть текст, якщо впевнені, що він буде корисним цільової аудиторії, але дотримуйтеся однієї теми. Лист з різними посиланнями має низькі шанси на високі конверсії.

Ви можете використовувати стільки тексту, скільки вам потрібно, не впливаючи на загальну вагу електронного листа. Але пам'ятайте: чим довше контент ви використовуєте, тим менше шансів, що він буде прочитаний користувачами. Краще опублікуйте інтригуюче короткий опис з можливістю дочитати на вашому сайті, адже мета будь-якого бізнесу - продати, чи не так?

Розміщення товарів. Розміщуйте не більш трьох товарів в одному рядку, щоб одержувачу було легше їх розглянути.

Існує негласне правило показувати не більше 6-9 рекомендованих товарів в одному електронному листі. Не використовуйте занадто багато найменувань, то не будьте агресивними. Нікому не подобаються нав'язливі промо. Скажіть менше, ніж більше. Найкраще опублікувати популярні пропозиції і надати посилання на веб-сайт.

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

Контролюйте вагу картинок. Чим більше вага картинки, тим довше буде завантажуватися. Половина користувачів не буде чекати і ви пропустіть покупців. Спростіть процес перегляду листи, зменшивши зображення в нашому редакторі. Детальніше про роботу з блоком картинки читайте по засланні .

Створюйте блоки контенту довжиною не більше 900 пікселів. Цього достатньо, щоб зробити 3 різних інформаційних блоку. Кожен раз, додаючи новий, запитайте себе, чи підходить ця інформація і чи обов'язкова вона.

Розглянемо розташування товарів у інших компаній:

Заклик до дії. Це не тільки вдалі заголовки і картинки, але ще і кнопки. Вони як би підказують читачеві наступний крок. Головна вимога для кнопки - виділятися, але і відповідати дизайну листи. Ніяких обмежень в розмірах немає. Чим більше ясний заклик до дії ви розмістите, тим більше переходів отримаєте.

футер

Часто компанії роблять футер з меню і повною адресою, тому вони більше, ніж стандартні варіанти цього елемента.

Деякі маркетологи, для дотримання правила "40% картинок і 60% тексту", включають політику конфіденційності або будь-яку іншу додаткову інформацію. Це поширена практика у зарубіжних компаній, але щоб всі користувачі це не читали, а тільки ті, хто дійсно зацікавлений, ця інформація спускається вниз.

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

Ми радимо використовувати лаконічні, які містять саму потрібну інформацію. Класичний футер повинен містити контакти, можливість скасування підписки і значки соціальних мереж. Стандартний розмір - 600x200 пікселів. Цього більш ніж достатньо, щоб зібрати всю перераховану інформацію.

висновок

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

Почати відправляти красиві листи

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

У eSputnik ми пишаємося тим, що наші клієнти можуть очолити цей рух, використовуючи адаптивний редактор листів. Стандартні шаблони eSputnik розраховані на 600 пікселів в деськтопной версії і 320 пікселів мобільного, які можна створити в кілька кліків без знання html, а також контролювати мобільний верстку кожного листа індивідуально.