Верстка Email с помощью HTML

Продвижение бизнеса или услуг требует постоянного контакта с клиентами, которое может проходить в различных форматах – холодные и горячие звонки, раздача листовок, баннеры и другие виды рекламы. Но одним из самых эффективных способов рассказать о себе и своей компании – это email-рассылка.

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

Возможно, вы уже знакомы с процессом верстки или умеете создавать письма для email-рассылки самостоятельно, но внезапно столкнулись с некоторыми проблемами. Или же вы только начали изучать этот вопрос и хотите знать некоторые полезные приемы. В любом случае, мы поможем вам разобраться в этом как можно лучше!

«Пошло, поехало»

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

К тому же, проблемы могут быть связаны не только с самим устройством, но и с почтовым клиентом, установленном на компьютере или смартфоне. Самые популярные из них – это Outlook, Gmail, Yahoo, iOS, Android, Mozilla Thunderbird и многие др.

Но как избежать основных проблем при отображении писем? Существует несколько важных правил, которые срабатывают практически в любой ситуации, и если постоянно держать их в голове, то можно делать уникальные, яркие и запоминающиеся email-рассылки различной специфики.

Вот, что нужно запомнить:

1. Предпочтение необходимо отдать верстке с помощью таблицы.
2. Прописывать стили нужно либо в самом коде (инлайн), либо в отдельном файле, либо в «головной» части страницы head вместе с остальными медиа.
3. Сокращение свойств в стилях не особо приветствуется, поэтому прописывайте их в развернутом виде.
4. Откажитесь от фанатичного внедрения CSS3 в коде, иначе в дальнейшем могут появиться серьезные проблемы с отображением.
5. Если хотите, чтобы письмо помещалось на экране по ширине абсолютно на любом устройстве, то не превышайте размер в 600-700px.
6. «Играть» лучше со стандартными шрифтами, ведь далеко не все устройства и клиенты могут похвастаться полной «всеядностью».

Табличная верстка

Для того, чтобы контентная часть письма не «поплыла», необходимо заключить её в 2 таблицы таким образом:

В первой части у нас задается 100-процентная ширина экрана с заданным фоном, затем минимальные данные ширины, шрифт в 1px, что предотвращает появление нежелательных отступов.

Во второй таблице мы задали ширину контентной части в 700px, обозначили фон и также, как в первой таблице, поставили минимальные данные ширины. Для cellpadding, cellspacing и border были введены нулевые значения.

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

Адаптивная верстка

Сегодня существует масса способов создания адаптивных email-писем, но мы разберем один из самых действенных. Как же он работает?

В то время, как ширина экрана увеличивается или уменьшается, письмо будет самостоятельно растягиваться или сужаться под новые параметры. Удобно, не правда ли? Если сделать всё правильно, то элементы в письме не будут перетасовываться, как колода карт, а просто начнут смещаться вниз.

Для того, чтобы этот способ работал, нужно использовать тег center со стилями. В том случае, если количество блоков в нашем письме 2 и более, то они должны заключаться в span со стилями, сохраняя таким образом свою структуру. Но здесь существует важное исключение из правил: на версии Microsoft Outlook для настольных ПК необходимо создавать верстку, где вместо center и span будут вставляться другие таблицы.

«Правильные» теги

Как и со шрифтами, некоторые сервисы и устройства дольно капризно относятся к используемым тегам. Так, во всех случает нельзя применять тег button, который при верстке сайтов позволяет создавать кнопки. В email-рассылке такие элементы лучше всего реализовывать при помощи возможностей CSS. Также, стоит отказаться от header и footer, т.к они не воспринимаются на сервисе Mail.ru и Outlook.

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

Внедряем CSS

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

Как добавить CSS в нашу рассылку? Есть 3 варианта.

1. Заключить тег style внутри head или body. Наверно, это один из самых простых и популярных способов, который прекрасно работает как в письмах, так и на страницах сайтов. Но главные его минут – это перегруженность кода, в результате чего становится сложно найти нужный элемент и отредактировать его. В общем, если хотите облегчить себе дальнейшую работу, второй и третий способы специально для вас.

   

2. «Прячем» стили CSS в отдельном файле и даем на него ссылку в HTML-документе с помощью тега link. Простой способ, стили подгружаются довольно быстро, основной код остается «прозрачным», понятным.

   

3. Размещаем стили в нашем письме инлайн, т.е. встраиваем его в структуре HTML-документа в качестве атрибута. Да, это неудобно. Да, для простоты придется воспользоваться дополнительной программой или сервисом, внедряющей стили в код. Но неоспоримым преимуществом такого способа является то, что такие стили будут читаться на любом устройстве или приложении.

   

Цвет и фон

Цветовое оформление в рассылке задается с помощью 16-теричных числовых значений в формате HEX, например, #FFFFFF (белый цвет). Сокращение до #FFF не рекомендуется, иначе далеко не все устройства и клиенты смогут распознать это значение, поэтому от него лучше отказаться. По той же причине следует избегать внедрение цветов в формате RGB.

Задавать фон в рассылке следует при помощи атрибутов background=»» и bgcolor=»», используемых в теге table. Применив их внутри других тегов, они не будут распознаваться Gmail, если открыть его в браузере Safari. Также, при работе с фоном, нужно исключить использование некоторых свойств CSS, а именно background-image, background-visibility и background-size.

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

Если хотите освоить все тонкости верстки email-рассылки, то запишитесь на наши курсы HTML и CSS, где мы совмещаем теоретические и практические занятия, создаем готовые проекты и делимся опытом.

Для более глубокого обучения программированию с нуля у нас есть специализированные курсы, на которых талантливые разработчики делятся такими уникальными приемами, которые не найти в книгах или видеоуроках.

Приходите к нам за новыми знаниями!