Лучший способ понять любой процесс состоит в том, чтобы выполнять это самостоятельно, с нуля.
Примечание редактора: это учебное пособие было первоначально написано Николь в июне 2013 года. С тех пор, как то он стал ориентиром для лидеров отрасли во всем мире и использовался миллионами новичков в качестве отправной точки для их приключений в электронной почте. Это актуально и сегодня, когда оно было впервые опубликовано.
Содержание статьи
Популярные шаблоны электронной почты на элементах Envato
Если вы ищете готовое профессиональное решение, возьмите один из наших лучших шаблонов электронной почты. У нас есть сотни откликов на Envato Elements, с легкостью настроить функции, чтобы вы начали.
Не то, что вы ищете? Нет проблем, этот учебник научит вас, как создавать свои собственные.
Kick Things Off
Начнем с того, что стоит упомянуть, откуда я взял некоторые ресурсы.
Теперь, как мы обсуждали в предыдущем учебном пособии, вам нужно будет начать свой документ электронной почты HTML с помощью документа XHTML:
Демистификация дизайна электронной почты
С этим отсортированным мы можем начать строить остальную часть структуры.
Создание тела и основного стола
Во-первых, мы добавим общую структуру для нашей электронной почты, начиная с тега
. Мы установим маржу и прописку на теге тела равным нулю, чтобы избежать непредвиденного пространства.
Мы также добавим таблицу шириной 100%. Это действует как истинный тег тела для нашей электронной почты, потому что стиль тега тела не поддерживается полностью. Если вы хотите добавить цвет фона в «тело» вашего письма, вам нужно будет применить его к этой большой таблице.
Установите для вашего cellpadding и cellspacing значение «0», чтобы избежать непредвиденного места в таблице.
Примечание: Мы собираемся оставить border = "1"
на всех наших таблицах, чтобы мы могли видеть скелет нашего макета, когда мы идем. Мы удалим их в конце с помощью простого Find & Replace.
Здравствуйте! |
" Если атрибут существует в HTML, используйте его вместо CSS "
Теперь разместите в таблице контейнера центрированный стол шириной 600 пикселей . 600 пикселей — это максимальная максимальная ширина для ваших электронных сообщений, которые удобно отображают на большинстве настольных и веб-клиентов на большинстве разрешений экрана.
Установите эту ширину, используя HTML вместо CSS, используя атрибут width. Золотое правило в разработке электронной почты HTML: если атрибут существует в HTML, используйте это вместо CSS.
Мы заменим наше приветствие «Привет!» Этой таблицей:
Здравствуйте! |
Мы также добавили свойство встроенного стиля, которое устанавливает свойство border-collapse
в свернуть
. Если мы этого не сделаем, более новые версии Outlook добавят небольшое пространство между нашей таблицей и нашей границей.
Создание Структура и заголовок
В нашем дизайне мы видим, что электронное сообщение делится на три логических раздела, поэтому мы создадим строку для каждого.
Давайте дублируем одну строку, которую мы уже сделали, чтобы у нас было всего три. Я изменил текст внутри них, чтобы мы могли легко идентифицировать каждую строку.
Строка 1 |
Строка 2 |
Строка 3 |
Now we ' цвет их в соответствии с дизайном. Поскольку bgcolor
является допустимым атрибутом HTML, мы будем использовать это, чтобы установить цвет фона вместо CSS. Не забывайте использовать полные шесть символов шестнадцатеричного кода, поскольку три символа сокращений не всегда будут работать.
Строка 1 |
Строка 2 |
Строка 3 |
Ok, далее мы собираемся сосредоточьтесь на строке 1. Мы хотим настроить прописку на ячейке, а затем вставить изображение.
Использование Padding
При использовании прокладки в электронной почте вы всегда должны указывать каждое значение (сверху, справа, внизу и влево), иначе вы можете получить непредсказуемые результаты. Я нахожу, что вы все еще можете использовать стенографию, т. Е. padding: 10px 10px 8px 5px;
но если у вас возникнут проблемы, вы можете записать ее длинную форму, то есть padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;
.
Если у вас еще большие проблемы с заполнением (например, если ваша платформа отправки удаляет ваш CSS), не используйте ее вообще. Просто используйте пустые ячейки для создания пространства. Нет необходимости использовать разделительные GIF-файлы, просто убедитесь, что вы добавили style = "line-height: 0; font-size: 0;"
в ячейку, поместите & nbsp;
внутри и дать ему явную высоту или ширину. Вот пример:
& NBSP;
Также обратите внимание, что безопасно использовать прописку на тегах TD, но не на P-тегах или DIV. Они ведут себя гораздо более непредсказуемо.
Итак, мы будем использовать встроенный CSS, чтобы добавить дополнение к ячейке. Затем мы добавим наш образ, добавив текст alt и добавив style = "display: block;"
который является общим исправлением, которое останавливает некоторые почтовые клиенты, добавляя пробелы под вашими изображениями. Мы сосредоточим изображение, добавив align = "center"
к нашему тегу td. Мы также добавим тег alt, который важен для того, когда первоначально загружается наша электронная почта, которая в большинстве случаев будет отключена.
Примечание: Если содержимое вашего заголовка действительно важно для вашего сообщения, не используйте заголовок только для изображения. Помните, что изображения блокируются по умолчанию для большинства клиентов, поэтому, если есть важный аспект вашей электронной почты, никогда не включайте его в качестве изображения. В этом примере, однако, мой заголовок довольно лишний.
Создание области содержимого
Прежде всего, мы добавим некоторую прокладку в среднюю ячейку, чтобы внутри стола было какое-то пространство вокруг нее, согласно нашему дизайну.
Now we'll добавьте таблицу с тремя строками для нашего основного содержимого — одно для заголовка, одно для вводного текста и одно для строки с двумя столбцами. Мы установим ширину этой таблицы на 100% вместо того, чтобы использовать значение пикселя, потому что это поможет нам продвинуться дальше по треку, если мы хотим, чтобы наша электронная почта реагировала. Если у вас всегда есть ширина пикселей во всем, вы можете получить множество значений для переопределения с помощью медиа-запросов. Если ваши вложенные ширины таблицы основаны на процентах, то при настройке ширины родительского элемента все будет соответствующим образом адаптировано.
Строка 1 Строка 2 Строка 3 Now we ' добавьте в наш контент и добавьте некоторые дополнения в среднюю ячейку.
Lorem ipsum dolor сидеть amet! Lorem ipsum dolor sit amet, consectetur adipiscing elit. В tempus adipiscing felis сидеть amet blandit ipsum volutpat sed. Морти-портторитор, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat. Строка 3 Теперь мы собираемся добавить наши два столбца контента в строку 3. Поскольку мы хотим «маржировать» между этими двумя ячейками, но маржа не поддерживается, мы создадим таблицу из трех столбцов с пустой ячейки между двумя внешними колонками.
Насколько мне нравится придерживаться процентов, когда у вас есть контент определенного размера, может быть сложно преобразовать его в процент (в этом примере столбцы будут 48,1%, что может запутать). По этой причине, поскольку наши два изображения имеют ширину 260 пикселей, мы создадим столбцы с шириной 260 пикселей, а также среднюю ячейку поля 20 пикселей. (Это будет 540px, что составляет 600px ширину нашего стола за вычетом 30px с обеих сторон.) Убедитесь, что нулевой размер шрифта и высота линии и добавьте неразрывный пробел
& nbsp;
в ячейке поля.Мы также установим
valign
наверх
для обеих ячеек, чтобы они по вертикали выровнялись в верхней части, даже если один столбец имеет больше текста, чем другой. По умолчанию вертикальное выравниваниесреднее
.
Столбец 1 & NBSP; Столбец 2 Now давайте добавим нашу изображений и содержимого для этих столбцов. Поскольку нам нужно несколько строк, мы найдем еще одну таблицу, потому что мы не сможем использовать теги
colspan
илиrowspan
. Мы также добавим промежуток между изображением и копией в каждом столбце.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. В tempus adipiscing felis сидеть amet blandit ipsum volutpat sed. Морти-портторитор, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat. & NBSP;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. В tempus adipiscing felis сидеть amet blandit ipsum volutpat sed. Морти-портторитор, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat. Здесь мы установили ширину изображений, используя HTML, на 100% ширины столбца. Это опять же так, что если мы будем реагировать на это электронное письмо, нам нужно будет использовать медиа-запросы, чтобы изменить ширину родительского элемента. Нам придется переопределить высоту в пикселях, потому что использование
style = "height: auto"
теперь не будет работать во всем (кашель, Outlook) . Поэтому мы будем устанавливать его с помощью пикселей. Это означает, что мы должны установить высоту: auto! Important
на этих изображениях, используя медиа-запросы, чтобы переопределить значение пикселя, но мы могли бы сделать это с помощью одного класса. Когда мы задаем ширину в процентах, нам не нужно будет переопределять это значение. Чем меньше вещей переопределить, тем лучше.
Теперь мы добавим наше дополнение к нижнему колонтитулу.
Строка 3 Внутри этой ячейки мы 'll гнездят другую таблицу для того чтобы получить наши 2 колонки.
Столбец 1 Столбец 2 We создадим еще один маленький стол для наших значков социальных сетей. Мы установим родительскую ячейку в
align = "right"
. Убедитесь, что вы установилиborder = "0"
на эти ссылки изображений (чтобы избежать синей границы линии) и не забудьте: block
.