3115
Дизайн писем и их кодинг это очень ответственное дело с разными почтовыми клиентами, которые рендерят каждое письмо по-своему. Создание подходящего дизайна и кодинг с правильным кодом это довольно сложное занятие для веб-разработчиков и не каждый из них возьмётся за эту сложную работу. Добавление промежутков в HTML письма, которые рендерятся по-разному в каждом почтовом клиенте это довольно трудная задача, так как нет стандартного и уточненного метода как это делать. То, что работает для одного почтового клиента, устройства, браузера или размера экрана может не работать на другом.
Email разработчики всегда пытаются находить решения и применять свои уловки во время кодинга писем. И добавление промежутков не исключение.
Давайте посмотрим на пять способов добавления промежутков в HTML письма, которые используют email разработчики в своей работе.
Применение атрибута Cellpadding
Этот атрибут может использоваться для создания промежутка между рамкой ячейки и контентом в ячейке. Он определяет промежуток в пикселях и используется в HTML таблицах. Эта функция распространена очень широко среди всех почтовых клиентов.
В HTML она применяется следующим образом. Cellpadding=”значение в пикселях”
Так как это HTML атрибут и не CSS код, то он не может быть переопределён как CSS в случае применения медиа запросов. Этот атрибут можно использовать в случаях, когда нет нужды в изменении значения cellpadding для разных устройств или почтовых клиентов.
Padding в <style>
Padding очень широко используется в веб-разработке. Преимущество использования этого атрибута в разработке писем заключается в возможности переопределения его значения в шапке письма. Используя этот метод, медиа запросом вы можете поменять внутренний отступ в 60 пикселей для десктопов на 20 пикселей для мобильных устройств.
В HTML вы можете применить его так – style=”padding:20px”
Этот способ может использоваться, когда вам требуется динамический промежуток в ваших письмах. В любом случае, этот метод рассматривается как самый простой и эффективный.
Пустые <td>
Пустые <td> ячейки могут использоваться для добавления промежутков по всему контенту. Обычно это используется для увеличения высот между ячейками таблицы. Этот способ применяется очень редко, так как не всегда работает и вам придется прописывать всю структуру таблицы в коде. Более того, такой код не будет работать если вам понадобится закодить оптимизированные письма. Вам нужно будет сделать новые классы для контроля высоты и ширины этих ячеек.
Margin в <style>
Маргины как атрибут широко используются в веб-разработке, но не предпочтительны в разработке писем. В то время как атрибут padding добавляет отступ в границах элемента, атрибут margin добавляет отступ за пределами границ элемента.
Margin может использоваться как style=”margin:20px;”
Разрывы строк
Используя <br> тэга это самый простой способ добавления промежутка внутри контента письма при кодинге оного. Такой подход может применяться только для создания промежутков внутри текста или текстами письма и, следовательно, он не очень популярен. Также он может разделять блоки элементов.
<br> тэг можно использовать до и после контента.
Почтовые клиенты рендерят разрывы строк по-разному и, следовательно, очень сложно сделать pixel-perfect промежуток в письме с тегами <br>.
Разработчики писем применяют эту технику в зависимости от типа письма, разрабатываемого ими. Советуем вам рассмотреть возможность поставить эксперимент с этим тегом и определить, что будет работать лучше всего для вашей почтовой кампании. И обязательно не забудьте протестировать получившееся письмо на различных почтовых клиентах и размерах экранов.
