Верстка email листів і робота з зображеннями в email-маркетингу

Відправимо матеріал вам на EMail:


    Время чтения: 8 мин.

    шаблон электронного письма

    При створенні Email розсилки необхідно піклуватися не тільки про текстову інформацію, але і про дизайн листа. При цьому важливими компонентами є:

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

    На останньому пункті слід зупинитися докладніше.

    Чому так важливо правильно використовувати картинки?

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

    • при використанні картинок CTR листів зростає на 47%;
    • оцінка привабливості матеріалу збільшується на 65%;
    • використання логотипу та фірмових кольорів в оформленні підвищує впізнаваність бренду;
    • люди більш охоче клікають по картинках.

    В результаті правильне використання зображень допомагає сформулювати головну ідею і збільшує ефективність листів. Оптимальним є співвідношення 40% картинок на 60% тексту. Тому важливо розуміти, як красиво оформити лист, використовуючи зображення.

    Перш за все, потрібно звернути увагу на тип подачі тексту. Найчастіше використовується таблична верстка email листів. Вона максимально проста і, на відміну від блокової, дозволяє виводити інформацію у вигляді, задуманому при створенні. Але потрібно враховувати, що вже сьогодні на мобільних телефонах листи переглядають більше половини користувачів (77% на момент написання в 2018 році).

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

    Як зробити верстку адаптивної?

    • Щоб повідомлення відображалося без спотворень, ширину макета рекомендується робити не більше 600 пікселів, але не менше 500.
    • Краще поставити також кордон повідомлення. Психологи вважають, що лист без зазначених меж підсвідомо сприймається «незавершеним». Для цього досить виконати заливку листа певним кольором.
    • Реальний розмір зображення повинен відповідати виведеному без стиснення. Масштабування погіршує якість зображення на 40-60%.
    • Файл не повинен бути великим – мобільний інтернет може «не впоратися».

    Який формат зображень використовувати?

    Сьогодні найбільш популярними при верстці листів є формати картинок JPEG, GIF, PNG і SVG. Однозначних переваг не має жоден, і при виборі варто орієнтуватися на виконувані завдання. Перерахуємо їх особливості.

    • JPEG. Переваги: ​​відмінно передає кольори в фотографії. Недоліки: немає анімації, сильно спотворюється при зменшенні, розмір файлу зростає зі збільшенням зображення; незручний для логотипів.
    • GIF. Переваги: ​​передає анімовані зображення; стискається, не втрачаючи якості; добре передає текст; дає можливість створювати прозорі ділянки. Недоліки: палітра обмежена (256 кольорів); великий розмір файлу; погано відображає фотографії.
    • PNG. Переваги: ​​стискається без втрати якості; ідеальний для логотипів; передає тексти; може передавати прозорість. Недоліки: дуже «важкий» файл; відсутність анімації; не всі браузери його підтримують.
    • SVG. Переваги: ​​легко і без втрат масштабується, має невеликий розмір файлу. Недоліки: не всі поштові клієнти підтримують цей формат.

    Шрифти для картинки

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

    • розмір – не менше ніж 14 пікселів;
    • колір – контрастний, що виділяється на тлі;
    • тип – без зарубок – Tahoma, Verdana або Arial.

    Оптимальний розмір картинки

    Розмір при верстці html листів повинен підбиратися, виходячи з таких міркувань:

    • розмір банера (анімованого чи ні) повинен вписуватися по ширині в шаблон і складати 600х300 або 600х400рх;
    • в якості максимального розміру найчастіше встановлюється 640х480рх;
    • щоб кнопки були зручні для натискання, їх розмір не повинен бути менше 40-50рх;
    • навколо кнопок або клікабельних зображень необхідно зробити відступ;
    • потрібно враховувати розмір файлу, щоб не збільшувати час завантаження і не випробовувати терпіння клієнтів.

    Верстка листи: як використовувати картинку – зображенням або фоном?

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

    Також варто встановити додатково колір фону. Деякі поштові клієнти і браузери не допускають установки картинки в якості підкладки.

    Оскільки не всі платформи підтримують властивість background, зокрема це стосується Outlook, Вам слід бути обережними при використанні фонових зображень. Додавайте відповідне значення bgcolor – так будь-який текст буде відображатися для користувачів без фонових зображень і \ або з відключеними зображеннями.

    Хоча картинки (особливо анімовані) і збільшують привабливість і CTR листи, не перестарайтеся з їх кількістю на шкоду інформативності.

    Заповнення атрибутів тега <img>

    Не забувайте при установці картинки заповнити додаткові атрибути – особливо параметр ALT, в тому числі, в логотипі. Якщо фото не відображається, на екрані з’явиться порожня ділянка і альтернативний опис. Причини:

    • повільно вантажиться (погане з’єднання);
    • користувач може відключити завантаження зображень для зниження трафіку;
    • ряд поштових клієнтів виводять зображення лише з перевірених джерел;
    • при відключенні зображення користувач отримає уявлення про те, куди веде посилання;
    • якщо картинка в заголовку, в превью відобразитися текст ALT до відкриття листа.

    При цьому варто врахувати, що альтернативний текст не повинен бути довгим (близько 30 символів). Деякі браузери «ріжуть» або просто не відображають довгі повідомлення.

    Особливості вписування зображення в клітинку таблиці

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

    • для маленьких картинок (менш 19рх) необхідно прямо вказувати висоту і ширину всередині <td> (атрибути height, width, і line-height);
    • не слід використовувати в назвах зображень слова типу «promo» або «banner», щоб не потрапити під дію блокувальників реклами;
    • між закриває символом тега <img> і закриттям осередку </ td> не повинно бути пробілів, інакше браузер неправильно обробить закриття осередку.

    Чи потрібно встановлювати карти зображень?

    Вбудовування посилань в зображення – корисний прийом, адже користувачі люблять клікати по картинках. Але слід дотримуватися ряду правил:

    • навколо картинки потрібно зробити відступ;
    • необхідно заборонити установку параметра border на засланні, інакше може з’являтися синя (бордова після відвідин) рамка навколо картинки;
    • коли посилання вбудовується в велике зображення, його треба порізати в Photoshop так, щоб клікабелна область була окремим файлом зображення, який в коді буде укладено в якірне посилання. Перед тим, як вибрати цей варіант, радимо обговорити з вашими клієнтами переваги лінкування всього зображення – так ви отримаєте набагато більшу клікабельну область.

    Проблеми при розсилках на Gmail і Hotmail

    У цих популярних поштових клієнтів часто виявляються різні ефекти при відображенні розсилок. Іноді їх стилі відрізняються в різних браузерах – Safari, Chrome або Firefox.

    У них зображення передаються блоковими елементами, тому необхідно додати не тільки в CSS, але і в тег <img> параметр style = display: block. Якщо картинка вбудовується в текст (це може бути значок після заслання в тексті), необхідно вказувати style = display: inline.

    Фонові зображення, атрибути alt і зображення в Gmail і в Hotmail – аспекти, яким слід приділити особливу увагу при верстці електронних листів.

    • При додаванні зображення, у нього обов’язково повинен бути прописаний атрибут border = 0, а якщо зображення обгорнуте посиланням, то для тега посилання повинно бути прописано властивість border: none (якщо не зробити останнього, то в деяких клієнтів навколо картинки може відображатися синя рамка).
    • Формат gif найкраще підходить для штрихованої графіки і простих графічних елементів.
    • Формат jpeg найкраще підходить для насичених, багатошарових і фотографічних елементів. Якість зображень, що експортуються в форматі jpeg, як правило, має становити 60% від початкової якості. У деяких випадках вам доведеться збільшити якість до 75% для усунення перешкод зображення.
    • Формат png найкраще підходить для зображень з високою прозорістю.

    Для вбудовування зображень в текст (наприклад, зображення стрілки після текстового посилання), ви повинні включити style = display: inline; instead of display: block; <a href=https://site.com>

    Тут буде посилання зі стрілкою в кінці <img scr = arrow.gif width = 12 height = 12 style = display: inline; border: 0;> </a>

    Огляд Stripo – платформи для створення HTML-листів без навичок верстки

    Короткі висновки

    Підіб’ємо деякі підсумки по вставці картинок в листи:

    1. Картинки покращують зовнішній вигляд і результативність розсилок при правильному використанні.
    2. Верстка повинна бути адаптивною, щоб сторінка відображалася на екрані мобільного пристрою (без додаткового стиснення).
    3. Формат використовуваних картинок повинен відповідати поставленим завданням (переважно .PNG або .JPEG).
    4. Шрифт підписів на зображенні повинен бути великим, чітким і контрастним.
    5. Картинка повинна мати розмір, відповідний шаблоном (до 600рх шириною).
    6. При використанні картинки в якості фону потрібно враховувати видимість на ній тексту, а також забезпечити альтернативне колірне заповнення.
    7. Обов’язково слід вказати альтернативний текст (невеликого розміру) в тезі ALT.
    8. При вписування картинки в клітинку таблиці необхідно дотримуватися ряду правил.
    9. При установці на картинку посилання потрібно передбачити правила лінковки і прибрати окантовку при наведенні.
    10. Потрібно враховувати особливості стильового оформлення в Gmail і Hotmail.

    При дотриманні цих рекомендацій ваші розсилки стануть більш ефективними і прибутковими!

    Ще добірка корисних посилань:

    Поширені запитання

    Верстка листів що це?

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

    Як здійснити email розсилку?

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

    Як зробити гарний лист для розсилки?

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

    Як красиво оформити підпис у пошті?

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

    Як прикрасити лист?

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

    4.6/5 - (7 голосів)
    Немає коментарів »