Розмір email-шаблону: висота і ширина елементів листа

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

Кілька років тому ширина 600 пікселів була обов’язковим стандартом і не мала альтернатив. На цей час 600 пікселів – найпопулярніша ширина для дизайну електронного листа, але стандарти стали гнучкими.

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

“Гумовий” дизайн

У “гумовому” дизайні використовується підхід, заснований на процентному співвідношенні для розмірів електронного листа через максимальну ширину і висоту різних поштових клієнтів. Елементи електронного листа співвідносяться один з одним таким же чином. Він дозволяє використовувати будь-яку ширину та автоматично налаштовується на ті, які є у клієнта електронного листа. “Гумовий” дизайн – найкраща практика для створення листа з важким контентом.

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

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

Starbucks вважає за краще такий “гумовий” дизайн для поштових розсилок:

Масштабований або мобільний дизайн

Масштабований дизайн електронного листа — це той, який добре працює як для комп’ютерів, так і для мобільних пристроїв. Масштабований дизайн найчастіше називають мобільним. Згідно зі статистикою, в 2018 році майже 77% електронних листів відкривались з використанням мобільних пристроїв. Це не так вже й мало, тому ваші мобільні шаблони для мобільних пристроїв повинні створюватися з урахуванням цієї статистики.

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

Адаптивний дизайн

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

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

Адаптивний дизайн як техніка з’явився в кінці 2001 року в якості веб-концепції. Пізніше він був успішно підхоплений при розробці шаблонів електронного листа. Наприклад, пошта Yahoo почала приймати подібні листи у 2005 році.

Через те що деякі електронні листи не оптимізовані для мобільних екранів, вони мають більш низький коефіцієнт конверсії в середньому на 28%, тому що елементи з інтерактивним доступом стають важкодоступними, і люди частіше помиляються. Ті, хто робить адаптивний дизайн при налаштуванні email-маркетингової кампанії, з більшою ймовірністю матимуть успіх, ніж інші. Вибір очевидний.

Яку ширину має мати електронний лист?

У блозі Litmus є стаття, в якій стверджується, що ширина електронного листа 600 пікселів – це міф, але вони не дають переконливих фактів, що підтверджують це. Деякі компанії використовують менше ширини 600 пікселів для електронних листів, і що? Деякі компанії проводять експерименти і використовують ширину електронного листа 640, 700 або максимум 960 пікселів, але, звичайно ж, вони використовують адаптивні шаблони, тому ширина автоматично налаштовується через поштовий клієнт і пристрій, що використовуються адресатами електронного листа.

Ми згодні з тим, що тепер є більше варіантів, і ширина 600 залишається найбільш оптимальною. Як з’явилася ця ширина? Чому саме 600 пікселів?

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

Таким чином, ширина 600 пікселів більше традиційна, ніж є правилом, і дає вам 100% гарантію, що вона буде відображатися правильно. Непогано, чи не так? Подивіться, який би дивовижний шаблон електронного листа міг бути створений зі звичайною шириною 600 пікселів:

Водночас є багато поштових клієнтів, що не відображають належним чином електронні листи, ширші, ніж 650 пікселів. Клієнт Gmail не відображає колір фону, якщо ви робите його ширшим, ніж 640 пікселів, але ширина самої поштової скриньки має понад 960 пікселів.

В Yahoo Mail ви можете переглянути електронну пошту в максимальній ширині 650 пікселів. Для Outlook 2007 це значення становить 600 пікселів, а Outlook 2013 – ширина 550 пікселів.

Якщо ви вирішили вибрати іншу ширину, а не 600 пікселів, просто перевірте свою електронну пошту перед відправленням через такі служби, як Litmus або Email on Acid, які дадуть вам точні фотографії, як саме буде відображатися електронна пошта у різних поштових клієнтах

Яку висоту має мати електронний лист?

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

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

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

Нижче наведено приклад шаблону електронного листа з широко використовуваною висотою 2550 пікселів:

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

Розміри попереднього перегляду

У багатьох поштових клієнтів, таких як Outlook, Apple Mail, Thunderbird є вікно попереднього перегляду з обмеженим розміром – 600 пікселів в ширину і 300-500 пікселів у висоту. Вони не показують зменшену копію всього електронного листа, але фіксують його верхнє поле з відповідним розміром вікна попереднього перегляду.  

Переконайтеся, що перші 300-500 пікселів мають цінну інформацію, яка змусить користувачів відкривати і читати електронну пошту. Гарне перше враження краще, ніж тисячі лайків.

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

Ось як виглядає панель попереднього перегляду в поштовому клієнті mail.com:

Розмір попереднього заголовка

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

Розміри поля предзаголовка варіюються від 50 до 65 пікселів по висоті. Ширина зазвичай становить 600-640 пікселів через розміри шаблону.

Ось як виглядає стандартний заголовок в редакторі Stripo. Ви можете змінити повідомлення предзаголовка, але звертайте увагу, якщо воно не перевищує 75-140 символів:

Ось ще кілька прикладів предзаголовка:

Розмір заголовка

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

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

Ось кілька прикладів хорошого дизайну заголовка електронного листа:

Розмір банера

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

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

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

Найбільш поширені розміри 600 x 300 пікселів і 600 x 400 пікселів для банерів. Багато email-дизайнерів експериментують з розмірами банерів, хоча ширина обмежена стандартним розміром шаблону електронного листа 600 пікселів, довжина може бути різною і варіюватися від розмірів фонового зображення.

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

Ось кілька прикладів креативних і інформативних банерів:

Ось, наприклад, анімований:

Розмір кнопки

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

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

Іноді важко навіть знайти кнопку, тому що вона дуже маленька і безлика. І коли справа доходить до натискання, ніхто цього не робить. Розмір 46 x 46 пікселів є мінімальним для великого пальця. Це ж правило працює і для розміру значків соціальних мереж.

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

• 175 x 35 пікселів;
• 120 x 90 пікселів;
• 120 x 60 пікселів;
• 88 x 31 пікселів.

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

Розмір кнопки за замовчуванням в редакторі електронних листів Stripo становить 235 x 55 пікселів, але ви можете легко змінити розмір і колір, якщо це потрібно.

Ось як Grammarly використовує кнопки у своїх розсилках:

Ось приклад, коли трохи погралися контрастом:

Ось ще один широко використовуваний приклад кнопки для банера:

Ось анімована кнопка:

Розмір картинки

Згідно з тим, що ширина становитиме 600 пікселів — 640 пікселів для всього шаблону електронного листа, ширина зображення не є винятком. Тому висота є пропорційною налаштуванням на зазначену ширину, найбільш часто використовуваний розмір зображення становить формат 640 x 480 пікселів. Є тонни зображень з таким розміром в Pinterest, або ви можете знайти досить зображень з цими розмірами, використовуючи пошук Google або будь-яку іншу пошукову систему.  

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

Уявіть, що ви хочете додати зображення розміром 3264 x 2448 пікселів до свого електронного листа. Його вага становитиме приблизно 2,5 МБ, що дорівнює 12-секундному часу завантаження для звичайного інтернет-з’єднання. Це занадто довго, щоб чекати одержувачам електронного листа, тому що інші його елементи теж мають свою вагу. Можливо, половина користувачів не буде чекати, тому ви можете втратити клієнтів. Зменшіть зображення, щоб не зруйнувати призначений для користувача інтерфейс і послідовність процесу перевірки електронного листа.

Ви можете створити окрему версію електронного листа для мобільних пристроїв з шириною 320 пікселів і використовувати зображення JPEG замість PNG, тому що вони мають менший розмір, ніж зображення з роздільною здатністю і розміром PNG. Хоча якість зображення буде гірше.

Ще одна хороша ідея — не додавати стільки зображень в мобільний шаблон, як для комп’ютерної версії. Це спростить прокрутку, яка може здатися нескінченною в багатьох випадках для користувачів мобільних пристроїв. У цій ситуації швидкість завантаження також збільшиться.

Розмір блоку контенту

Максимальна довжина текстового контенту без переривання зображення повинна складати приблизно 500-600 пікселів. Цього достатньо, щоб виділити будь-яку тему з 5-7 пропозиціями. Найбільш підходящим для читання є текстовий рядок, що містить не більше 75 символів, що є середнім значенням для ширини шаблону 600 пікселів.

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

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

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

Ось приклад, де він був зроблений відмінно:

Кількість блоків контенту

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

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

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

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

Розмір нижнього колонтитула

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

Я віддаю перевагу лаконічним кінцевим рядкам, які містять інформацію, що повинна бути там з 100% вірогідністю. Класичний нижній колонтитул повинен містити контактну інформацію, опцію скасування підписки і значки обміну соціальними медіа. Ось і все, тому стандартне вимірювання нижнього колонтитула 600 x 200 пікселів більш ніж достатнє, щоб зібрати всю цю інформацію.

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

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

Ось незвичайний нижній колонтитул електронного листа з симпатичним дизайном значків соціальних мереж:

Я вважаю, що Bored Panda зробив найкращий нижній колонтитул, який містить всю необхідну інформацію:

Ось приклад розширеного нижнього колонтитула:

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

Загальний розмір листа

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

• Межа розміру для Gmail становить 102 kb.
• Для Yahoo! Mail ліміт становить 100 kb.

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

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

Підбиваючи підсумки

Ми проаналізували ширину і висоту шаблону електронного листа в цілому і кожен окремий елемент. Ширина 600 пікселів не тільки безпечна і надійна при використанні зі 100% правильною презентацією через всі пристрої і поштові клієнти, але також є найбільш знайомою для користувачів.

Висота залежить від довжини вмісту, але не повинна перевищувати 200 пікселів в кращому випадку. Чим більше зображень ви приймаєте, тим більш важливо використовувати компресор зображення. Іноді потрібно, щоб email в HTML-форматі теж був оптимізований.

Немає точних правил, які будуть визначати розміри елементів електронного листа, щоб ви могли експериментувати з формами і розмірами, але не робіть шаблон занадто незвичайним і дивним для користувачів. Просто проявіть свою творчість в зображеннях, які ви використовуєте, і тексті, який ви пишете. Бажаємо вам успіхів у процесі створення електронного листа! До речі, ви можете почати створювати свій власний унікальний email-шаблон прямо зараз, використовуючи редактор електронних листів Stripo.