Превращение файла Photoshop в живую веб-страницу является обычной задачей для веб-дизайнеров. У всех нас есть свои собственные процессы для извлечения визуальных элементов, захвата цветов и создания макетов в прекрасном, совместимом со стандартами HTML и CSS.
Электронная почта HTML — это другая и более мрачная история. Современные веб-стандарты распространяются только на некоторые из самых популярных почтовых клиентов. Если вы планируете отправлять электронную почту списку подтвержденных пользователей Apple Mail, возможно, подойдет любой макет, который работает в Webkit, но в противном случае необходим другой подход.
В этом руководстве мы рассмотрим процесс создания макета PSD у дизайнера и превращения его в надежное HTML-письмо, которое хорошо отображается в самых популярных на сегодняшний день почтовых клиентах. Предупреждение: будут таблицы .
Встретить клиента
Вы, наверное, видели разрушительные фотографии наводнения, которое недавно обрушилось на огромную территорию Квинсленда, Австралия. Когда началась огромная операция по восстановлению, волонтерство Квинсленда обратилось к нам с просьбой помочь по электронной почте огромному количеству людей, которые подняли руки, чтобы помочь.
Мы предложили помочь с самой отправкой, а также путем создания простого HTML-шаблона электронной почты, который организация могла бы использовать для своих почтовых кампаний. Волонтер Квинсленда уже разработал дизайн и предоставил нам файл Photoshop.
Вот оригинальный макет в виде изображения:
Наша работа заключалась в том, чтобы взять этот PSD и превратить его в шаблон, который хорошо работал в рамках ограничений и несовместимостей мира почтовых клиентов. Задание было взято Стивеном Джессоном, одним из наших замечательных сотрудников службы поддержки, который в свое время создал множество дизайнов электронной почты.
Планирование базовой структуры
К сожалению, реальность дизайна электронной почты заключается в том, что макеты на основе таблиц по-прежнему являются лучшим вариантом в большинстве случаев. Почтовые клиенты, такие как Outlook 2007/2010, не поддерживают float, поэтому позиционирование CSS ненадежно.
Вместо этого мы будем полагаться на HTML-таблицы старой школы, чтобы создать структуру, которая будет объединяться почти везде. На этом этапе нам нужно принять философское решение: стремиться к макету электронной почты, максимально приближенному к оригинальному дизайну, или к разметке, максимально современной и чистой.
Хотя оба подхода действительны — в зависимости от вашей конечной цели — как правило, чем меньше разметка, тем лучше, потому что смысл электронной почты — это содержание. HTML — это просто способ представления этого контента.
Иногда важно подобрать дизайн настолько близко, насколько это возможно, и полезно знать приемы и приемы, которые помогают нам достичь этого. Итак, в этом уроке мы рассмотрим эти грязные маленькие секреты дизайна электронной почты.
Вот наша основная структура таблиц верхнего уровня:
Эта таблица будет содержать весь дизайн, и она будет центрирована внутри <body> ; используя параметр align=center . Это самый надежный способ центрировать стол, и он работает практически везде.
Тело нашей электронной почты использует margin=0 и padding=0 для сброса всего, и мы установим размер шрифта и семейство шрифтов для тега body и ячеек таблицы <td> чтобы убедиться, что они применяются.
Установка фиксированной ширины пикселя на внешней таблице делает все намного проще, а 600 пикселей примерно такой же ширины, как если бы вы хотели пойти по электронной почте. Если вы согласны с тем, что ваш макет может немного измениться в разных почтовых клиентах, вы можете установить процентную ширину, но это усложнит поддержание постоянной ширины столбцов.
Установите явные поля и отступы для ваших абзацев
Заполнение и поля — проклятие существования дизайнера электронной почты, потому что они так непоследовательно поддерживаются основными почтовыми клиентами. В частности, Yahoo! Mail удаляет все пробелы из <p> по умолчанию, поэтому вы должны определить его самостоятельно, чтобы предотвратить слипание ваших абзацев, как пригородных пассажиров в японском метро .
Возвращаясь к PSD, мы можем измерить ширину отдельных столбцов и расстояние между элементами содержимого. В то время как современный веб-дизайн будет использовать div и поля для создания этого макета, мы будем использовать комбинацию таблиц и ячеек таблицы.
Столы все время вниз
У нашего оригинального дизайна есть несколько хороших желобов колонны, которые мы хотим соответствовать. К сожалению, Lotus и Outlook доставляют нам особые проблемы, когда мы пытаемся создать единообразное пространство вокруг контента.
Вместо того, чтобы оставлять каждому клиенту свою собственную интерпретацию отступов и полей, мы измерим размеры и желоба столбцов и вложим таблицу внутри каждого столбца.
В этом случае левый и правый желоба имеют одинаковый размер, поэтому вычисление становится следующим:
Общая ширина столбца Npx — (левый желоб 20px + правый желоб 20px) = ширина вложенной таблицы
Под вложенными таблицами я говорю о целой таблице, содержащейся в элементе <td> . Итак, внутри левого столбца мы Npx бы вложенную таблицу Npx и добавили к ней атрибут align=center . Теперь у нас есть контейнер для нашего контента, который находится в середине столбца, а центрирование создает желоба с обеих сторон.
Эта техника вложения будет использоваться и в правом столбце, и в нижнем колонтитуле. В любое время, когда вы хотите поддерживать постоянный интервал вокруг блока или элемента, вы можете устранить множество возможных вариаций, используя вложенные таблицы.
«Пустые» ячейки таблицы также могут использоваться для интервалов. Например, посмотрите на интервал вокруг строки текста в верхней части нашего дизайна здесь:
В конечном итоге вы получите гораздо больше HTML-кода, чем вы привыкли, но если случай требует пуленепробиваемого макета, таблицы ваши друзья.
Иногда вы можете избежать использования механизма рендеринга для интервалов, добавив необходимое пространство на вашем изображении. Включение пространства вокруг логотипа и фотографий в файл изображения означает, что вы можете положиться на него и установить ячейку таблицы в соответствии с известными размерами.
Если ваш производственный процесс не позволяет вам легко добавлять пространство к изображению, рассмотрите вместо этого CSS или HTML-границу. Они работают практически везде.
Последние штрихи
Имея прочную структуру таблиц, мы можем безопасно добавлять контент, не разбивая макет в почтовом клиенте. Вот скриншот окончательного макета в Dreamweaver, так что вы можете легко увидеть таблицы.
Вы заметите, что даже элементы нижнего колонтитула содержатся в отдельных ячейках. Во многих случаях это может быть чрезмерным, поскольку простой абзац может отображаться достаточно хорошо. В этом случае, однако, мы сделали все возможное, чтобы показать, что требуется для максимальной согласованности в пространстве и высоте элемента.
Пули списка могут вести себя странно в почтовых клиентах, поэтому используйте вместо них встроенные изображения. Опять же, интервал между изображением маркера и элементом встроен в само изображение, и нет необходимости пытаться сопоставить их.
В разделительных линиях используются изображения определенного размера, но они также задают цвет фона на случай, если изображения заблокированы .
На этом этапе основная часть кодирования выполнена. У нас есть HTML-файл, который объединит столько основных почтовых клиентов, на которые мы можем надеяться. Чтобы подтвердить это, вы можете добавить некоторое содержимое и запустить файл через службу тестирования электронной почты, например Litmus, или службу, предлагаемую вашим поставщиком услуг электронной почты.
Вот как выглядит наш шаблон в заведомо требовательном клиенте Lotus Notes 8.
Работа сделана! Если вы передадите свою работу редакторам контента на этом этапе, обязательно проверьте еще раз, прежде чем отправлять электронное письмо, если они добавили форматирование, которое может вызвать проблемы. Процесс, который мы прошли, смягчает большинство из этих проблем, но они все же могут возникнуть.
Лучшие 10 советов для пуленепробиваемых электронных писем в формате HTML
- Используйте таблицы с фиксированной шириной пикселей для сплошной структуры.
- При необходимости используйте параметр
align=centerчтобыalign=centerосновную таблицу. - Определите свой стек шрифтов в теле и в ячейках таблицы.
- Используйте встроенный CSS, чтобы избежать его удаления.
- Не забудьте установить
border:0;на изображениях тегов. - Установите поля и отступы явно в ваших параграфах.
- Включить интервал внутри ваших изображений, где вы можете.
- Граница в цвете фона также может действовать как поле, но рендерится более последовательно.
- Используйте вложенные таблицы для одинакового расстояния в другом месте.
- Подумайте о том, что происходит, если ваши изображения не загружаются, или если ячейка отображается с неправильной высотой или шириной, и укажите вариант резервного копирования.
Дополнительные ресурсы для создания электронной почты
На сайте Campaign Monitor у нас есть общие рекомендации по дизайну и графики поддержки CSS , или вы можете прочитать мою книгу SitePoint для получения дополнительной информации о дизайне электронной почты в формате HTML.
Если вы графический дизайнер, и все это звучит немного больно, я могу порекомендовать Брайана Тиеса как эксперта в этой области. Он фокусник в превращении графического дизайна в надежные HTML-письма, а также помощь на форумах по дизайну электронной почты .
В следующий раз, когда вам нужно перейти от PSD к электронной почте в формате HTML, и вы не хотите останавливаться в Hair Pulling и Silent Despair City, я надеюсь, что это руководство поможет вам.