HTML и CSS: концепции кодирования электронной почты

Погружение в мир кодирования может показаться пугающим, если вы никогда не делали этого раньше. Кодирование электронной почты, в частности, имеет свой собственный набор правил. Если вы новичок в кодировании, вот несколько моментов, которые следует учитывать, прежде чем погрузиться прямо в HTML и CSS для электронной почты.

Нужно ли кодировать мою электронную почту?

Если у вас нет опыта кодирования, кодирование электронной почты с нуля может оказаться для вас непрактичным решением, да и не обязательно. VerticalResponse предоставляет широкий выбор шаблонов для мобильных устройств и предлагает простой в использовании редактор, чтобы вы могли настроить наши готовые шаблоны под свой собственный контент.

Если у вас есть опыт и некоторый уровень комфорта при использовании или изучении HTML, то кодирование собственного шаблона электронной почты может быть отличным вариантом. Как и при написании кода для веб-страницы, вам по-прежнему необходимо учитывать поведение браузера и устройства. Кроме того, обратите внимание на уникальные настройки стилей по умолчанию десятков почтовых клиентов, таких как Gmail, Yahoo, Outlook и других. Если вы привыкли кодировать веб-страницу в HTML и применять внешнюю таблицу стилей CSS, вам нужно привыкнуть к внутренней и встроенной работе с CSS, чтобы ваши стили не были перезаписаны этими значениями по умолчанию для почтового клиента.

Словарь, чтобы знать

Если вы новичок в программировании, вот что вам нужно знать о HTML и CSS:

HTML — это язык, который вы будете использовать для структурирования и описания вашего контента. HTML означает язык гипертекстовой разметки. Когда вы пишете код в HTML, вы размечаете свой контент с помощью тегов, которые сообщают веб-браузеру, как отображать такую ​​информацию, как изображения и слова на веб-странице.

CSS — это язык, который влияет на представление вашего контента. Используя CSS, вы можете назначать стили элементам HTML. CSS означает каскадную таблицу стилей. Слово «каскад» важно, потому что объявления стилей или правила будут соблюдаться в порядке их появления. Если вы делаете два объявления для одного и того же элемента, последний будет учитываться, потому что он перезаписывает то, что идет перед ним.

Вот способы связать ваш CSS с вашим HTML:

Внешний CSS: использование внешней таблицы стилей (файл, обычно называемый style.css), ссылка на который содержится в вашем HTML-файле. Это отлично подходит для веб-сайтов, потому что если у вас есть 100 общих элементов, которые охватывают более 100 страниц, вы можете изменить их все сразу с помощью одного объявления CSS.

Внутренний CSS, также известный как Embedded CSS: включая код CSS в теги <style> в верхней части HTML-файла. При кодировании электронного письма это может быть полезно для назначения общих стилей, которые применяются к общим элементам. Однако этот метод не всегда поддерживается по электронной почте.

Встроенный CSS: прикрепление кода CSS к одному элементу HTML прямо в коде HTML. При кодировании электронной почты этот метод гарантирует, что определенные стили не будут перезаписаны настройками браузера и почтового клиента по умолчанию.

Если вы привыкли настраивать свой CSS снаружи или внутри, вы можете создать его таким образом, а затем использовать встроенный инструмент, такой как этот, от PutsMail, чтобы преобразовать ваши стили во встроенный CSS.

Отношения между HTML и CSS

Чтобы получить лучшее представление о том, как связаны HTML и CSS и как отделение CSS от HTML может освободить представление вашего HTML, перейдите на фантастический и знаменитый веб-сайт CSS Zen Garden, где вы можете просмотреть ту же HTML-разметку с совершенно другим CSS. , закодированный известными дизайнерами.

Приближаемся к кодированию электронной почты

При кодировании электронного письма с нуля делайте его максимально простым. Используйте простой текстовый редактор, такой как TextWrangler, Notepad или Sublime, и держитесь подальше от визуальных редакторов, таких как Dreamweaver, потому что они могут добавить ненужные элементы в ваш код.

Для макета попробуйте использовать подход, ориентированный на мобильные устройства. Это означает проектирование для маленьких экранов и продвижение вверх. В связи с тем, что количество просмотров на мобильных устройствах постоянно растет, важно, чтобы ваша электронная почта хорошо выглядела на телефонах и планшетах. нет причин создавать сложный дизайн, который хорошо смотрится только на рабочем столе. Если ваше сообщение и дизайн будут достаточно простыми для самых маленьких устройств, их также будет легче кодировать, они будут доступны для пользователей всех устройств и привлекут внимание вашего читателя к основному призыву к действию.

После того, как ваш макет и кодирование будут завершены, обязательно используйте такой инструмент, как Litmus или редактор Inbox Preview от VerticalResponse для HTML-редактора, чтобы просмотреть, как ваша электронная почта выглядит в различных браузерах и почтовых клиентах, чтобы вы могли устранить любые проблемы, прежде чем нажать «Отправить».

С чего начать обучение

Существует множество онлайн-руководств, где вы можете на практике подробно изучить, как кодировать электронную почту. Хороший способ погрузиться в кодирование электронной почты — найти простой шаблон, который вам нравится, и потратить некоторое время на изучение кода. Сначала ознакомьтесь с основными тегами, такими как <body>, <head> и <div>, а затем обратите внимание, как теги иногда дополнительно определяются в идентификаторы или классы, такие как <div class="half-column">. Обратите внимание, что имена в качественном HTML-шаблоне будут четкими и логичными, чтобы было легче сказать, что происходит, когда это появляется в CSS.

Если вы готовы к пошаговому уроку, поищите последние руководства (за последний год). Подход к кодированию постоянно пересматривается. К примеру, за последние пару лет популярен удобный для мобильных устройств метод — это гибкий/гибридный подход. Это гибкое/гибридное руководство от Envato Tuts+ отлично подходит для тех, кто уже имеет некоторое представление о HTML. Для начинающих Lynda.com предлагает множество курсов кодирования для электронной почты. Хороший курс проведет вас через упражнение по кодированию и предоставит загружаемый пример файла проекта, который вы можете использовать в качестве справочного материала.

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

ПОПРОБУЙТЕ ВЕРТИКАЛЬНЫЙ ОТВЕТ СЕГОДНЯ

(Это бесплатно!)

Примечание редактора: эта запись в блоге была первоначально опубликована в марте 2016 года и была переработана и обновлена ​​для обеспечения точности и актуальности.