Зачастую люди не сильно утруждаются при создании дизайна электронных газет. Да и сама работа здесь не требует каких-то специфических усилий, как например, при создании веб-страницы или шаблона для CMS. Вы можете создать одностраничный дизайн электронной email-газеты, и скопировать стили, которые в будущем будут служить вам основной для большинства ситуаций.Сегодня мы хотим представить вас демонстрационную газету от Template Monster, и рассказать вам об использованных при разработке техниках. Код, по большей части, сосредоточен на корректном отображении в различных email-клиентах вроде Outlook, GMail, Hotmail и Yahoo! Mail. Это означает, что здесь разработка ведется при помощи HTML-таблиц, так как другие методы здесь просто не работают.
С самого начала
Нам нравится начинать email-проекты с шаблона HTML Email Boilerplate. Это дает нам в распоряжение отличные CSS-стили и основную структуру таблиц для создания собственного шаблона. На самом деле, существует столько различных заморочек с браузерами, что на их изучение можно потратить пару недель.Мы попытались разумно подойти к делу, и сохранить только нужные нам CSS-классы. Этот шаблон полон комментариями к коду, которые объясняют, почему нам нужно использовать конкретные свойства и элементы. Если вы не знакомы с email-дизайном, то вам они будут нужны, и пользоваться ими будет удобно. Наше собственное демо будет использовать тот же doctype XHTML Strict, который всегда используется в Google Mail.
TemplateMonster Newsletter - Tutorial Demo
#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" menu link. */
body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; line-height: 100%; }
img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
a img { border: none; }
.image_fix { display: block; } /* Yahoo paragraph fix */
p { margin: 1em 0; margin-bottom: 10px !important; color: #454545; }
a, a:link, a:visited { color: #446db2; text-decoration: none; cursor: pointer !important; }
a:hover, a:active { text-decoration: underline; color: #446db2 !important; }
table td { border-collapse: collapse; display: table-cell; }
table { border-collapse: collapse; table-layout: fixed; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
Не считая строчных CSS-стилей, шапка довольно простая. Нам не нужно включать сюда каких-то мета-тегов, так как все равно большинство из этого кода будет вырезано. Тем не менее, стили важны, и лучше всего они генерируются, если поместить их в шапку. Мы не используем всевозможные сбросы, так как не все email-парсеры учитывают их.Вместо этого мы выставляем определенные стандарты для абзацев, изображений, ссылок и структуры таблиц. Все конкретные изменения должны быть добавлены одной строкой к элементу. Это предотвратит разрыв ваших стилей парсером, и ваши шрифты и изображения будут отображаться правильно.
Переходом к телу документа
Самое надоедливое в разработке табличных страниц заключается в постоянно повторяющемся HTML-коде. Когда вы привыкли помещать контент в простые HTML div-элементы, вам может показаться странным процесс добавления множества таблиц. Но этот способ самый подходящий, когда речь заходит о разработке email-шаблонов.
Этот отрывок кода включает просто заголовок газеты. Вы заметите, что здесь у нас всего 2 таблицы – одна нужна для оболочки шириной в 600px, а вторая включает в себя содержимое шапки. Большинство email-дизайнеров согласятся, что 600px вполне достаточно для экранов большинства ваших пользователей. ПО вроде Microsoft Outlook производит рендер окон даже меньшего размера. Поэтому лучше всего самостоятельно протестировать шаблон на как можно большем количестве различных клиентов.Элементы внутри таблицы используют различные правила размещения контента. Вы увидите здесь многие атрибуты, которые обычно не должны присутствовать в HTML. Такие вещи как cellpadding и valign отвечают за конкретные шаблоны внутри таблиц, которые не требуются в CSS. Чтобы получить более сложные решения – к примеру, включить сюда цвета границ – нам нужно использовать атрибуты строчных стилей. Структура таблицы Так как в вашем HTML-коде используется табличная строка ‘tr’ и внутренние ячейки данных ‘td’, ваша разметка должна быть валидной. Мы предпочитаем оборачивать весь контент в элемент ‘tbody’, как написано в стандартах. По крайней мере, это не искривит отображение шаблона в письме.Теперь для размещения внутренного контента нам нужно будет воспользоваться еще 2 таблицами. Сначала мы определяем внешний контейнер, в котором используется белый фон и немного CSS3-эффекта тени блоков box-shadow (где это возможно). В постовых клиентах без поддержки CSS3 все будет выглядеть так, как будто мы просто не использовали эти параметры.
Здесь вряд ли можно видеть какой-то особый код. Мы используем ту же технологию форматирования ячеек таблицы, и корректно выравниваем разделы. Здесь важно отметить, что в атрибутах каждого изображения следует указывать точные параметры ширины и высоты. Таким образом, ваши email-газеты изначально будут загружаться с правильной расстановкой, даже если на тот момент еще не загрузятся изображения.Без выставленных габаритов, ваши изображения сначала будут загружаться как точки размером 1х1 пиксель. Лучше чтобы они сразу появлялись в правильном размере, но отображались в виде пустых блоков до полной загрузки. Вы можете привязать сюда и альтернативный текст, который будет отображаться вместо изображения, пока то не будет загружено.Кроме некоторых хитрых CSS-хаков, нам кажется, что дизайн email-газеты довольно понятен и прост. Но здесь, как и в любом деле, следует попрактиковаться. Иногда бывает сложно справиться с разностью рендера шаблона в разных клиентах, но мы думаем, что вы справитесь с этим рано или поздно. Если у вас возникнут какие-то проблемы, вы всегда сможете найти ответ в Google! В завершение Процесс разработки собственного дизайна газеты не так уж и прост. Если у вас уже есть большой опыт в дизайне, вам все равно придется посвятить некоторое время изучению техники разработки email-газет. Мы надеемся, что наши примерные коды помогут вам самостоятельно разработать шаблон и заинтересовать им читателей.Учтите, что наши коды можно развивать и модифицировать. Возможно, через некоторое время вам захочется создать несколько новых дизайнов газеты, и тогда у вас будет возможность использовать этот код как основу. Если у вас достаточно терпения и навыков, то вы очень быстро схватите принцип разработки HTML-газет. Исходники в архиве. 375 Просмотров Благодарностей: 0 0 |
||||||||||
