Это самый объемный пост, который мы когда-либо публиковали, потому что недостаточно всего двух предложений или даже двух абзацев, чтобы пролить свет на всю тему. Стандартный размер шаблона электронного письма для ширины составляет 600 пикселей для компьютеров, а также 320 пикселей для вертикального и 480 пикселей для горизонтального просмотра на мобильных устройствах. Высота не ограничена и зависит от длины содержимого. Это все!
Несколько лет назад ширина 600 пикселей была обязательным стандартом и не имела альтернатив. На данный момент 600 пикселей — самая популярная ширина для дизайна электронного письма, но стандарты стали гибкими.
Прежде чем думать о размерах шаблона, вы должны определить, какой тип дизайна электронного письма использовать.
«Резиновый» дизайн
В «резиновом» дизайне используется подход, основанный на процентном соотношении для размеров электронного письма из-за максимальной ширины и высоты различных почтовых клиентов. Элементы электронного письма соотносятся друг с другом таким же образом. Он позволяет использовать любую ширину и автоматически настраивается на те, которые есть у клиента электронного письма. «Резиновый» дизайн — лучшая практика для создания письма с тяжелым контентом.
Определите максимальную ширину, которую вы разрешите, поскольку электронное письмо будет настроено на полную доступную ширину, и это может быть слишком большим для удобного просмотра. Именно эта методика позволяет максимально точно представлять сообщения электронной почты 960px надлежащим образом с помощью разных клиентов и устройств.
Фактически, вы можете использовать эту технику для разработки электронного письма шириной 600 пикселей, просто установите максимальную ширину, так как 600 пикселей для всей ширины используют 100% или правильное значение с использованием процентов. Во всяком случае, он отлично работает, и вы не должны упускать шанс использовать его и протестировать.
Starbucks предпочитает такой дизайн напитков для почтовых рассылок:
Масштабируемый или мобильный дизайн
Масштабируемый дизайн электронного письма — это тот, который хорошо работает как для компьютеров, так и для мобильных устройств. Масштабируемый дизайн чаще всего называют мобильным. Согласно статистике, в 2018 году около 77% электронных писем открываются с использованием мобильных устройств. Это не так уж мало, поэтому ваши мобильные шаблоны для мобильных устройств должны создаваться c учетом этой статистики.
Масштабируемая конструкция не использует медиа-запросы или проценты, как в случае с дизайном напитков. Масштабируемая конструкция более читабельна и удобна в обращении. Если вы используете простой макет одного столбца и применяете довольно большие шрифты и достаточно большие интерактивные элементы, а также пробелы между текстовыми строками, у вас уже есть масштабируемый дизайн.
Адаптивный дизайн
На создание адаптивного шаблона электронного письма всегда уходит больше времени, но результат стоит усилий. Концепция гибкого дизайна электронного письма основывается на использовании медиа-запросов и сетки флюидных ячеек, которые позволяют настроить размер электронного письма на все размеры экрана, которые могут быть использованы.
Медиа-запросы определяют размер экрана и используют объем правил, объявленных для этих измерений, поэтому вы можете изменить размер шрифта, цвет, иерархию контента или даже макеты, показать дополнительный текст или скрыть часть контента. Например, 3-х столбчатый шаблон для компьютеров могут быть легко уменьшены до 1 столбчатый шаблон для мобильных устройств.
Адаптивный дизайн как техника появился в конце 2001 года в качестве веб-концепции, позже он был успешно подхвачен при разработке шаблонов электронного письма. Например, почта Yahoo начала принимать подобные письма в 2005 году.
Из-за того, что некоторые электронные письма не оптимизированы для мобильных экранов, они имеют более низкий коэффициент конверсии в среднем на 28%, потому что элементы с интерактивным доступом становятся труднодоступными, и люди чаще ошибаются. Те, кто делает адаптивный дизайн при настройке маркетинговой кампании по электронной почте, с большей вероятностью преуспеют, чем другие. Выбор очевиден.
Какую ширину должно иметь электронное письмо?
В блоге Litmus есть статья, в которой утверждается, что ширина электронного письма 600px — это миф, но они не дают убедительных фактов, подтверждающих это. Некоторые компании используют меньше ширины 600 пикселей для электронных писем, и что? Некоторые компании проводят эксперименты и используют ширину электронного письма 640px, 700px или максимум 960, но, конечно же, они используют адаптивные шаблоны, поэтому ширина автоматически настраивается из-за почтового клиента и устройства, использующего адресатов электронного письма.
Мы согласны с тем, что теперь есть больше вариантов и ширина 600 остается наиболее оптимальной. Как появилась эта ширина? Почему это 600px?
Долгое время разрешение экрана было далеко не идеальным. Количество устройств было намного меньше чем сейчас. Это было время, когда появилась ширина 600 пикселей. С тех пор многое изменилось, но ширина 600 пикселей была почти неявным стандартом, который стал основой дизайна электронного письма и ее презентации без длительных обсуждений или каких-либо сомнений.
Таким образом, ширина 600 пикселей больше традиционная, чем правило, и дает вам 100%, что она будет отображаться правильно. Неплохо, не так ли? Посмотрите, какой бы удивительный шаблон электронного письма мог быть создан с обычной шириной 600 пикселей:
В то же время, существует множество почтовых клиентов, которые не отображают должным образом электронные письма, более широкие, чем 650 пикселей. Клиент Gmail не отображает цвет фона, если вы делаете его более широким, чем 640px, но ширина самого почтового ящика имеет более 960 пикселей.
В Yahoo Mail вы можете просмотреть электронную почту в максимальной ширине 650 пикселей. Для Outlook 2007 это значение составляет 600 пикселей, а Outlook 2013 — ширина 550 пикселей.
Если вы решили выбрать другую ширину, чем 600 пикселей, просто проверьте свою электронную почту перед отправкой через такие службы, как Litmus или Email on Acid, которые дадут вам точные изображения, как будет отображаться электронная почта в разных почтовых клиентах.
Какую высоту должно иметь электронное письмо?
Конечно, высота электронного письма не ограничена. Вы можете использовать столько места, сколько вам нужно, чтобы показать весь контент, который у вас есть, но помните, что чем длиннее сообщение, тем меньше шансов, что письмо прочтут до конца.
Общая высота веб-страницы составляет 960 пикселей, чего обычно недостаточно, чтобы ввести информацию для электронного письма и спастись прокруткой не удастся. Наиболее часто используемая длина для электронного письма варьируется от 1500px до 2000px. Обычно этого достаточно для контента и легко прокручивается пользователями.
Интересен тот факт, что те электронные письма, которые относятся к темам туризма, являются самыми длинными по сравнению с электронными сообщениями из других отраслей. Письма на тему электронной коммерции тоже достаточно длинные, несмотря на то, что список рекомендованных товаров достаточно компактен, маркетологи всегда публикуют слишком много продуктов в одном электронном письме.
Ниже приведен пример шаблона электронного письма с широко используемой высотой 2550:
Как вы можете видеть, 4 различных блока контента легко объединяются в простые для прокрутки размеры.
Размеры предварительного просмотра
У многих почтовых клиентов, таких как Outlook, Apple Mail, Thunderbird есть окно предварительного просмотра с ограниченным размером — 600 пикселей в ширину и 300-500 пикселей в высоту. Они не показывают уменьшенную копию всей электронного письма, но фиксируют верхнее поле электронного письма с соответствующим размером окна предварительного просмотра.
Убедитесь, что первые 300px-500px имеют ценную информацию, которая заставит пользователей открывать и читать электронную почту. Хорошее первое впечатление лучше, чем тысячи лайков.
Такое количество почтовых клиентов не составляет даже половины вашей базы данных электронного письма, поэтому это не является причиной разрушения дизайна шаблона электронного письма и перехода к началу всех элементов вызова для действия всего текста. Обычно заголовок и баннер, или половина последнего, попадают в раздел предварительного просмотра.
Вот как выглядит панель предварительного просмотра в почтовом клиенте mail.com:
Размер предварительного заголовка
Предзаголовок — это строка предварительного просмотра, где появляется только короткое вводное сообщение и возможность просмотра электронного письма в браузере или в виде веб-версии, если есть проблемы с просмотром электронного письма. В соответствии с тем, что это поле более техническое, чем контекстуальное, вы не должны делать его большим или размещать там какие-либо дополнительные элементы.
Размеры поля предзаголовка варьируются от 50 пикселей до 65 пикселей по высоте. Ширина обычно составляет 600-640 пикселей из-за размеров шаблона.
Вот как выглядит стандартный заголовок в редакторе Stripo. Вы можете изменить сообщение предзаголовка, но следите, чтобы оно не превышало 75-140 символов:
Вот еще несколько примеров предзаголовка:
Размер заголовка
Самая распространенная высота заголовка, который не содержит меню или массивного логотипа, составляет 70 пикселей. Для тех, у кого есть панель меню, заголовок может быть высотой 150px-200px. Высота заголовка, которая увеличивается на 300 пикселей, не подходит для обзора.
Существуют сотни и тысячи стилей, которые используются для дизайна заголовков электронного письма, но выбирают тот, который удобен для пользователя и одновременно поддерживает мобильное расширение. Кроме этого, выберите стиль и цветовую схему, которая способна подчеркнуть фирменную идентичность и не разбивать на части пользовательский интерфейс.
Вот несколько примеров хорошего дизайна заголовка электронного письма:
Размер баннера
Баннер — это место, где вы можете реализовать свое творчество, и вы не должны быть связаны размерами. Чем меньше контента вы вкладываете в него, тем лучше результат. Чем более ясный призыв к действию вы разместите там, тем больше конверсий вы получите.
Вам не следует экономить пространство между текстовыми строками, и вы можете экспериментировать с размерами шрифтов, но лучше использовать короткие и броские предложения. Самые популярные баннеры имеют изображение на фоне и расположены сразу после заголовка или даже как его расширение.
Некоторые баннеры анимированы. Если вы выбрали анимацию как стильный трюк своей маркетинговой кампании по электронной почте, убедитесь, что она достаточно оптимизирована по размеру. Чем больше вес ваших писем, тем больше времени ваши пользователи ожидают его загрузки.
Наиболее распространены размеры 600px x 300px и 600px x 400px для баннеров. Многие дизайнеры электронного письма экспериментируют с размерами баннеров, хотя ширина ограничена стандартным размером шаблона электронного письма 600px, длина может быть различной и варьироваться от размеров фонового изображения.
Любой баннер не может идти без кнопок, которые широко используются, чтобы привлечь внимание пользователей.
Вот несколько примеров креативных и информативных баннеров:
Вот, например, анимированный:
Размер кнопки
Нет правил, связанных с стандартами размерности электронного письма. Общим требованием является то, что кнопка должна выделяться в отличие от всех других элементов электронного письма, но в то же время органично соответствует дизайну электронного письма.
Более важно позаботиться о своей мобильной аудитории и сделать кнопки такими большими, чтобы можно было нажимать кнопку большим пальцем и не нажимать на все элементы.
Иногда трудно даже найти кнопку, потому что она очень маленькая и безликая, и когда дело доходит до нажатия, никто этого не делает. Размер 46px x 46px является минимальным для большого пальца. Это же правило работает и для размера значков в социальных сетях.
Хотя для кнопок нет стандартов, лучше использовать те же размеры, которые используются в веб-дизайне, потому что пользователи с большей вероятностью задумывают те вещи, которые являются общими для них. Наиболее распространенные размеры кнопок:
- 175px x 35px
- 120px x 90px
- 120px x 60px
- 88px x 31px
Лучше выбрать один из них, но это не обязательное правило. Возьмите в качестве предпосылки вашу концепцию дизайна электронного письма и перейдите к ее улучшению. Более важным является правильное размещение кнопки в теле письма. Сделайте a / b тестирование с различными вариантами, чтобы достичь наилучшего коэффициента конверсии.
Размер кнопки по умолчанию в редакторе электронного письма Stripo составляет 235px x 55px, но вы можете легко изменить размер и цвет, если вам нужно.
Вот как Grammarly использует кнопки в своих рассылках:
Вот пример, когда немного поигрались контрастом:
Вот еще один широко используемый пример кнопки для баннера:
Вот анимированная кнопка:
Размер картинки
Согласно тому, что ширина будет составлять 600 пикселей — 640 пикселей для всего шаблона электронного письма, ширина изображения не является исключением. Поэтому высота является пропорциональной настройкой на указанную ширину, наиболее часто используемый размер изображения составляет формат 640 пикселей x 480 пикселей. Есть тонны изображений с таким размером в Pinterest или вы можете найти достаточно изображений с этими размерами, используя поиск Google или любую другую поисковую систему, которую вы хотели бы.
Если вы используете изображение с другими размерами, нет никаких гарантий, что они будут отображаться правильно и иметь оптимальный вес. Например, вы можете подумать, что, если вы используете адаптивный шаблон независимо от того, какие изображения вы загружаете в электронное письмо, они будут автоматически скорректированы до нужных размеров, но вы не будете упоминать о том, что качество изображения не будет изменено, поэтому общий размер будет достаточно большим, чтобы повлиять на скорость загрузки.
Представьте, что вы хотите добавить 3264px x 2448px изображение к своей электронной почте. Его вес будет составлять примерно 2,5 МБ, что равно 12-секундному времени загрузки для обычного интернет-соединения. Это слишком долго, чтобы ждать получателей электронного письма, потому что остальные элементы электронного письма имеют свой вес тоже. Возможно, половина пользователей не будет ждать, так что вы упустите и клиентов тоже. Уменьшите изображения, чтобы не сломать удобство использования и, как результат, процесс просмотра электронного письма.
Вы можете создать отдельную версию электронного письма для мобильных устройств с шириной 320 пикселей и использовать изображения JPEG вместо PNG, потому что они имеют меньший размер, чем изображения с разрешением и размером PNG. Хотя качество изображения будет хуже.
Еще одна хорошая идея — не включать столько изображений в мобильный шаблон, как у вас для десктопной версии. Это упростит прокрутку, которая может показаться бесконечной во многих случаях для мобильных пользователей. В этом случае скорость загрузки также увеличится.
Размер блока контента
Максимальная длина текстового контента без прерывания изображения должна быть длиной около 500px-600px. Этого достаточно, чтобы выделить любую тему с 5-7 предложениями. Наиболее подходящим для чтения является текстовая строка, содержащая не более 75 символов, которая является средней для ширины шаблона 600 пикселей.
Фактически, электронная почта не является местом, где можно прочитать статью с длинными рассказами или исследовать новую тему. Это место, где вы можете осознать, что у вас есть только одна тема, поэтому, чтобы написать каждое предложение, спросите себя, действительно ли оно информативно и необходимо. Так вы можете значительно сократить текст.
Текст не сильно влияет на размер, поэтому в соответствии с оптимизацией размера электронного письма вы можете использовать столько текста, сколько вам нужно, не влияя на общий вес электронного письма. Чем более длинный контент вы используете, тем меньше шансов, что он будет прочитан пользователями.
Если у вас много изображений и гораздо меньше текста для них, есть возможность разместить изображения и их описание в шахматном порядке даже в шаблоне одного столбца. Этот трюк позволит сэкономить много места и избежать ненужной прокрутки.
Вот пример, где он был сделан отлично:
Количество блоков контента
Нет необходимости составлять блок контента, потому что каждый из вашей отрасли использовал его. Если у вас недостаточно информации для размещения, не делайте попыток создать длинное письмо с различными блоками. Если у вас есть только одно намерение быть выделяться (что наверняка должно быть), нет необходимости дублировать информацию или говорить одни и те же вещи, но, другими словами, в одном письме.
Лучше сказать, меньше, чем больше. Лучше использовать фотографии, но не перегружайте электронную почту фотографиями, которые не содержат никакой полезной информации и не имеют никакого отношения к теме письма.
Не пытайтесь заполнить в одном электронном письме все продукты, которые есть на вашем веб-сайте, в качестве новых предложений или предложений о продаже. Лучше всего опубликовать лучшие предложения и предоставить ссылку на веб-сайт в главном меню и в нижнем колонтитуле. Существует правило показывать не более 6-9 рекомендуемых товаров в одном электронном письме, как это было сделано здесь:
Лучше сделать ваши блоки контента длиной не более 900 пикселей. Этого достаточно, чтобы сделать 3 различных информационных блока. Каждый раз, когда вы добавляете новый блок, спросите себя, подходит ли эта информация и обязательна ли она.
Размер нижнего колонтитула
Фактически, некоторые компании делают нижние колонтитулы с меню, поэтому они больше, чем классические варианты этого элемента. Некоторые компании предоставляют полный адрес с почтовым индексом и так далее, так что их нижние колонтитулы достаточно большие.
Я предпочитаю лаконичные нижние колонтитулы, которые содержат информацию, которая должна быть там со 100% вероятностью. Классический нижний колонтитул должен содержать контактную информацию, опцию отмены подписки и значки обмена социальными медиа. Вот и все, поэтому стандартное измерение нижнего колонтитула 600px x 200px более чем достаточно, чтобы собрать всю эту информацию.
Некоторые маркетологи электронного письма, чтобы поддерживать правило по раздаче текста и графики в пропорции 40-60%, включают политику конфиденциальности или любую другую дополнительную информацию сразу после нижнего колонтитула. Это не лучшая идея. Лучше добавить еще один текстовый блок, который будет расширяться или дополнять тему электронного письма, чем добавлять большую часть контента с нечитаемым шрифтом точно в том месте, где пользователь ожидает, что письмо будет завершено.
Еще одна поразительная точка дизайна нижнего колонтитула электронного письма — как разместить длинный адрес компании в такой небольшой области, как нижний колонтитул. Прежде всего, не думайте, что кто-то отправит вам настоящее письмо или посетит вашу компанию после получения электронного письма. На мой взгляд, лучший выбор — дать ссылку на страницу «О нас», где эта информация будет выделена в полном классе.
Вот необычный нижний колонтитул электронного письма с симпатичным дизайном значков социальных сетей:
Я думаю, что Bored Panda сделал лучший нижний колонтитул, который содержит всю необходимую информацию:
Вот пример расширенного нижнего колонтитула:
Подробнее о дизайне нижнего колонтитула можно узнать в статье из нашего блога. Не стесняйтесь поделиться им со своими друзьями и коллегами, если вам это понравится!
Общий размер письма
Если ваше письмо много весит, у вас нет гарантий, что он будет отображаться в полном размере, особенно в таких почтовых клиентах, как Gmail и Yahoo! Mail. Как Gmail, так и Yahoo Mail уменьшают размер электронного письма, если он увеличивает эти значения:
- Предел размера для Gmail составляет 102 kb
- Для Yahoo! Mail лимит составляет 100 kb
Все остальные почтовые клиенты не уменьшают отправленное сообщение. Часто ограничение 100 кб слишком мало и недостаточно для создания шаблона электронного письма, который показывает все настройки продукта или темы.
Размер электронного письма часто зависит от используемого вами редактора электронного письма. Как правило, есть дополнительный код, который будет автоматически добавляться при создании шаблона электронного письма. Вы можете удалить этот код вручную и значительно уменьшить размер электронного письма или просто выбрать редактор, который этого сделает. Stripo — один из них, проверьте это, создавая любой шаблон, который вам нужен.
Подводя итоги
Мы проанализировали ширину и высоту шаблона электронного письма в целом и каждый отдельный элемент. Ширина 600px не только безопасна и надежна при использовании со 100% правильной презентацией через все устройства и почтовые клиенты, но также является наиболее знакомой для пользователей.
Высота зависит от длины содержимого, но не должна превышать 200 пикселей в лучшем случае. Чем больше изображений вы принимаете, тем более важно использовать компрессор изображения. Иногда нужно, чтобы имейл в HTML формате тоже был оптимизирован.
Нет точных правил, которые будут определять размеры элементов электронного письма, чтобы вы могли экспериментировать с формами и размерами, но не делайте шаблон слишком необычным и странным для пользователей. Просто воплотите свое творчество в изображениях, которые вы используете, и текст, который вы пишете. Желаем вам удачи в процессе создания электронного письма! Кстати, вы можете начать создавать свой собственный уникальный шаблон электронного письма прямо сейчас, используя редактор электронного письма Stripo.
