Как сверстать email письмо?

Question

[Илья Морунов]

Добрый вечер!
Возникла необходимость сверстать email письмо. Заказчик просит подключение нестандартного шрифта и градиента. В посте на хабре про верстку email писем вычитал, что это делать нежелательно, но заказчик хочет попробовать, что получится :).
Вопрос заключается в следующем:
Прописывать шрифты и классы в head>style? Сам шрифт подключается online.
Заранее благодарю за любой ответ.

Answer 1

[Кирилл]

"Нежелательно" это неверно. Хотите подключайте, хотите нет. Просто в большинстве почтовиков ваш кастомный шрифт не будет работать, вот и всё. Градиент можно сделать картинкой, на пример.
templates.mailchimp.com/resources/email-client-css... - вот по поддержке css свойств. Там же можете скачать их шаблоны и посмотреть как они устроены.
Для верстки рекомендую воспользоваться вот этим фреймворком: foundation.zurb.com/emails.html

Comments

[Илья Морунов]

а куда лучше правила прописывать "style" в head или в body?

[Илья Морунов]

Забыл про градиент уточнить, он в шрифте :)
Сделаю пробный вариант, если будет печальный результат с отображением, сделаю картинками заголовки.

Answer 2

[Артур Кох]

О градиенте можно забыть.

Шрифт подключайте через link тег. Вариант через import режется на уровне отправки во многих сервисах. Попутно прописывайте conditional comments для аутлука с указанием дефолтного шрифта, так как подключаемый шрифт выдаст times в аутлуке. Работать будет не везде, но тесты покажут общую картину.

Рекомендованный выше zurb не рекомендую. Это монстр, которым без глубокого понимания верстки писем работать не стоит.

Comments

[Илья Морунов]

А как Вы посоветуете прописать css отдельно к каждому тегу <тег style=""> или всё же классами в head
?

[Артур Кох]

Как угодно. Во втором случае просто надо будет прогнать инлайнером. Например здесь inliner.cm

[wakh]

gmail же не умеет style или уже умеет?

[Артур Кох]

wakh: умеет

[wakh]

разобрался, просто я понятие "инлайнер" узнал после написания комента.