Верстка рассылок является одним из самых главных камней преткновения при взаимодействии верстальщика с дизайнером. Из-за того что у почтовых клиентов до сих пор (на 2017 год) нет единого мнения на то как воспринимать html-рассылки, верстальщики очень сильно ограничены в своих действиях. И хотя все же в унификации данного вопроса есть определенный прогресс, мы до сих пор по уровню технологии верстки по большей части откинуты в середину 00х. И широкое распространение мобильных устройств только усложняет задачу. Верстальщику приходится учитывать как старые десктопные клиенты вроде Outlook, The Bat и Thunderbird, так и новые мобильные почтовые приложения. При этом все, конечно же, должно выглядеть максимально приближенно к макету и сверстано очень старыми и неудобными способами.
Табличная верстка
Раньше, до того как css-таблицы стилей стали чем-то обыденным, сайты верстались таблицами. Это было крайне неудобно, так как ячейки таблицы нельзя никак передвинуть. Сайты напоминали скорее некие мозаики из блоков, в некоторые из которых клались картинки, а в некоторые текст.
Посмотрите на картинку выше. Это обыкновенная блочная верстка с помощью css-стилей. У нас есть body, у которого на фоне стоит темная картинка. Так же есть светлый контейнер для контента, из которого красиво вылезает красный логотип. Справа заголовок, а ниже текст. Это всего навсего 5 элементов. А теперь посмотрите на тот же «макет сайта», но только уже нарезанный для табличной верстки:
Это табличная верстка. Теперь элементов значительно больше. Смысл в том, что у нас есть бесконечное количество вложенных друг в друга таблиц. У таблиц есть ряды и ячейки в этих рядах. В каждую ячейку может быть вложена еще таблица. В конкретном примере у нас есть большая родительская таблица на 2 ряда. В первом ряду 3 ячейки фиксированной ширины. Мы задаем конкретную ширину в пикселях, чтобы вся наша мозаика в итоге сложилась без швов и сдвигов. В одной из ячеек лежит картинка с верхней частью логотипа, в остальных картинки с частями фона. Далее идет второй ряд, в нем 3 ячейки. В центральной ячейке заложена еще одна таблица. В этой таблице уже 3 ряда. В первом ряду содержатся пустые ячейки, которые играют роль отступов, нижняя часть логотипа и текст заголовка, выровненный по правому краю. Средний ряд так же является пустым и играет роль отступа. В нижнем ряду 3 ячейки. 2 боковые играют роль отступов, а в центральной содержится сам текст.
Итого: 13 ячеек! Значительно сложнее и куда менее удобно, не так ли?
К сожалению, только этот способ верстки гарантирует нам, что письмо будет отображаться более-менее одинаково во всех почтовых клиентах. Естественно такая верстка накладывает очень много специфических ограничений и диктует свои правила как верстальщику так и дизайнеру.
Ограничения:
1. Никаких картинок на фоне.
Почтовые клиенты их просто не отображают. Поэтому если у вас в макете идет текст поверх картинки, то это срочно нужно исправлять. Либо верстальщику придется делать из этого всего одну картинку. «Но какая разница? Пусть делает все картинками! В чем проблема?» — спросите вы. Разница в том, что у многих клиентов отключены картинки в письмах. И в этом случае они не увидят ни картинки, ни текста, ничего не поймут и незамедлительно отправят ваше письмо в спам. Поэтому максимально избегайте наложение текста на не однотонный фон.
Эта ситуация постепенно меняется к лучшему и уже есть некоторые ухищрения, с помощью которых можно подложить картинку на фон, но слишком надеяться на это все равно не стоит.
Так же вы можете уличить меня в небольшом лукавстве: «Ведь можно же ставить текст внутрь атрибута alt в самой картинке и тогда он будет отображаться в любом случае на ее месте!» Да можно и даже нужно, однако это на самом деле очень плохое решение. Посмотрите как-нибудь как выглядит рассылка с отключенными картинками и вы поймете о чем я. Да, всегда нужно прописывать текст в alt на всякий случай, но нельзя считать это лекарством от данной проблемы. Это лишь небольшой костыль, который дает небольшой шанс, что пользователь не нажмет кнопку «спам» сразу же после того как увидит месиво из непонятного текста на месте, где должны были быть красивые картинки.
2. Никаких нестандартных шрифтов.
Точно так же, почтовые клиенты их просто не подгружают. На всякий случай напомню список стандартных шрифтов, которые можно использовать везде со спокойной душой:
- Arial
- Verdana
- Times New Roman
- Georgia
- Courier New
- Garamond
- Tahoma
- Verdana
Если вы используете где-то нестандартный шрифт (не из этого списка), то верстальщик скорее всего сделает этот текст картинкой и некоторые пользователи могут его не увидеть.
3. Никаких вылезающих сбоку элементов.
Это не блочная верстка, всегда помните об этом. Если вы нарисовали макет, где один элемент немного вылез сбоку из общего контейнера, то верстальщику придется делать отдельную боковую ячейку и пихать часть от него туда. Из-за этого таблица будет уже отцентрирована неправильно.
4. Вообще избегайте наложения элементов.
Это скорее пожелание, которое сэкономит много времени и нервов верстальщику, а так же ваши деньги, отданные ему за работу. Можно проигнорировать этот пункт, но тогда пеняйте на себя.
Из-за табличной верстки верстальщику придется нарезать ваш макет на множество мелких кусочков, а потом скрупулезно собирать их воедино, попиксельно измеряя каждый из них. Поверьте, он будет этому совсем не рад.
Стоит вам сместить немного заголовок, и вот, он уже оказывается на пересечении между рядами:
Это конечно не критично и верстальщик может сделать что-то вроде этого:
Но это уже сильно усложнило и так не простую изначальную структуру. Старайтесь избегать подобных ситуаций.
Итог:
Возможно я забыл упомянуть такие очевидные вещи, как отсутствие анимации, скриптов и прочих привычных вещей, которыми нас балуют на сайтах, но на самом деле вам просто необходимо всегда держать в голове 2 вещи:
- Помните про таблицы, когда рисуете макет. Всегда прикидывайте где будут ячейки таблицы и не попало ли случайно что-нибудь на их пересечение.
- Рисуйте как можно проще. Пока в технологиях царит бардак, мы вынуждены сильно себя ограничивать. Давайте волю творчеству при отрисовке макетов для сайтов, однако при дизайне рассылок придерживайтесь более простого и строгого стиля.
