17.05.13, 11:18
0 комментарий
  Уроки

Создаем и оформляем собственную HTML-газету/рассылку

Зачастую люди не сильно утруждаются при создании дизайна электронных газет. Да и сама работа здесь не требует каких-то специфических усилий, как например, при создании веб-страницы или шаблона для CMS. Вы можете создать одностраничный дизайн электронной email-газеты, и скопировать стили, которые в будущем будут служить вам основной для большинства ситуаций.

Сегодня мы хотим представить вас демонстрационную газету от Template Monster, и рассказать вам об использованных при разработке техниках. Код, по большей части, сосредоточен на корректном отображении в различных email-клиентах вроде Outlook, GMail, Hotmail и Yahoo! Mail. Это означает, что здесь разработка ведется при помощи HTML-таблиц, так как другие методы здесь просто не работают.

С самого начала

Нам нравится начинать email-проекты с шаблона HTML Email Boilerplate. Это дает нам в распоряжение отличные CSS-стили и основную структуру таблиц для создания собственного шаблона. На самом деле, существует столько различных заморочек с браузерами, что на их изучение можно потратить пару недель.

Мы попытались разумно подойти к делу, и сохранить только нужные нам CSS-классы. Этот шаблон полон комментариями к коду, которые объясняют, почему нам нужно использовать конкретные свойства и элементы. Если вы не знакомы с email-дизайном, то вам они будут нужны, и пользоваться ими будет удобно. Наше собственное демо будет использовать тот же doctype XHTML Strict, который всегда используется в Google Mail.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>TemplateMonster Newsletter - Tutorial Demo</title>
<style type="text/css">
#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; }
</style>
</head>


Не считая строчных CSS-стилей, шапка довольно простая. Нам не нужно включать сюда каких-то мета-тегов, так как все равно большинство из этого кода будет вырезано. Тем не менее, стили важны, и лучше всего они генерируются, если поместить их в шапку. Мы не используем всевозможные сбросы, так как не все email-парсеры учитывают их.

Вместо этого мы выставляем определенные стандарты для абзацев, изображений, ссылок и структуры таблиц. Все конкретные изменения должны быть добавлены одной строкой к элементу. Это предотвратит разрыв ваших стилей парсером, и ваши шрифты и изображения будут отображаться правильно.

Переходом к телу документа

Самое надоедливое в разработке табличных страниц заключается в постоянно повторяющемся HTML-коде. Когда вы привыкли помещать контент в простые HTML div-элементы, вам может показаться странным процесс добавления множества таблиц. Но этот способ самый подходящий, когда речь заходит о разработке email-шаблонов.

<body bgcolor="#d2e2e8" style="-webkit-font-smoothing:antialiased;margin:0;padding:0;">
<!-- wrapper table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
    <td valign="top"><!-- heading -->
        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="table-layout:fixed;font-family:Arial,Tahoma,sans-serif;font-weight:normal;font-size:11px;line-height:22px;">
            <tbody>
                <!-- top links & text -->
                <tr style="display:inline-table;margin-top:20px;margin-bottom:7px;">
                    <td width="250"><span style="color:#898989;text-shadow:1px 1px 0 #fff;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"><strong>March 2013</strong> Issue</span></td>
                    <td width="350" valign="top" align="right" style="width:350px;"><p>E-mail looking strange? <a href="index.html" target="_blank">View it in your web browser</a>.</p></td>
                </tr>
                <!-- logo image -->
                <tr>
                    <td width="100%" valign="top" style="text-align:center;"><span><a href="http://www.templatemonster.com/" target="_blank"><img src="images/logo.png" alt="Template Monster Newsletter #1" title="TM Newsletter #01" width="350" height="94" /></a></span></td>
                </tr>
            </tbody>
        </table>
        <!-- /end heading -->


Этот отрывок кода включает просто заголовок газеты. Вы заметите, что здесь у нас всего 2 таблицы – одна нужна для оболочки шириной в 600px, а вторая включает в себя содержимое шапки. Большинство email-дизайнеров согласятся, что 600px вполне достаточно для экранов большинства ваших пользователей. ПО вроде Microsoft Outlook производит рендер окон даже меньшего размера. Поэтому лучше всего самостоятельно протестировать шаблон на как можно большем количестве различных клиентов.

Элементы внутри таблицы используют различные правила размещения контента. Вы увидите здесь многие атрибуты, которые обычно не должны присутствовать в HTML. Такие вещи как cellpadding и valign отвечают за конкретные шаблоны внутри таблиц, которые не требуются в CSS. Чтобы получить более сложные решения – к примеру, включить сюда цвета границ – нам нужно использовать атрибуты строчных стилей.

Структура таблицы

Так как в вашем HTML-коде используется табличная строка 'tr' и внутренние ячейки данных 'td', ваша разметка должна быть валидной. Мы предпочитаем оборачивать весь контент в элемент 'tbody', как написано в стандартах. По крайней мере, это не искривит отображение шаблона в письме.

Теперь для размещения внутренного контента нам нужно будет воспользоваться еще 2 таблицами. Сначала мы определяем внешний контейнер, в котором используется белый фон и немного CSS3-эффекта тени блоков box-shadow (где это возможно). В постовых клиентах без поддержки CSS3 все будет выглядеть так, как будто мы просто не использовали эти параметры.

<!-- body container -->

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="table-layout:fixed;background-color:#fff;-webkit-box-shadow:1px 2px 3px -1px #222;-moz-box-shadow:1px 2px 3px -1px #222;box-shadow:1px 2px 3px -1px #222;">
<tbody>
    <tr>
        <td width="100%" style="width:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"><!-- body content -->
            <table width="560" cellpadding="0" cellspacing="0" border="0" align="left" style="display:block;padding:20px">
            <tbody>
                <!-- templatemonster blog section -->
                <tr style="display:block;padding-bottom:10px;border-bottom:1px solid #dcdcdc;">
                    <td width="260" valign="top"><h2 style="color:#343c48;font-size:22px;line-height:26px;margin-bottom:5px;">Enjoy the latest posts from our blog!</h2>
                        <p style="color:#898989;font-size:16px;line-height:24px;">Template Monster has been publishing a lot of great tutorials recently. You can learn web design, CSS3 development, Wordpress, jQuery, and so much more! Visit the blog homepage and check out what we are publishing.</p></td>
                    <td align="right" width="300"><a href="http://blog.templatemonster.com/" target="_blank"><img src="images/template-monster-blog.png" alt="Template Monster Blog" title="Template Monster Blog" width="275" height="190" style="border:7px solid #d1e0f5;" /></a></td>
                </tr>


Мы выставляем внешнему контейнеру полную ширину равную 600 пикселям, но ограничиваем внутренние таблицы контента до 560 пикселей, чтобы оставить 40 пикселей для отступов. Внутренняя таблица будет содержать весь нужный контент страницы внутри табличных ячеек, и каждый отдел будет разделен при помощи нижних границ. Внешние элементы используют строчные стили для поддержания внутреннего контента (объявляем такие параметры как font-family прямо за контейнером таблицы).

Это очень простой и распространенный способ инкапсуляции данных. Все ячейки таблицы вложены в третью таблицу, которая находится в общей оболочке и в оболочке ядра шириной в 600 пикселей, расположенной по центру. После тела документа следует завершительная, подвальная область. Она будет содержаться внутри собственной табличной структуры, которую вы можете видеть ниже.

Оформляем колофон

Многие дизайнеры обычно оставляют ссылки на ресурсы в колофоне страницы. Это может быть боковая панель, подвальная область, либо даже отдельная страница на вашем сайте. Это не так распространено в шаблонах email-газет, но нам кажется, что в нашем примере смотрится вполне привлекательно.

<!-- footer colophon -->

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="display:block;margin: 0 auto;padding-top:30px;padding-bottom:95px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
    <tbody>
        <tr>
            <td width="400" valign="top" style="width:400px;"><span style="display:block;margin-bottom:3px;color:#5b666f;font-size:12px;line-height:18px;">This newsletter was built with the help of <a href="http://htmlemailboilerplate.com/" target="_blank">HTML Email Boilerplate</a>.</span> <span style="display:block;margin-bottom:3px;color:#5b666f;font-size:12px;line-height:18px;">Plus some cool icons from <a href="http://www.designdeck.co.uk/a/1239" target="_blank">Design Deck</a>.</span></td>
            <td width="200" valign="top" align="right"><a href="http://www.facebook.com/TemplateMonster" target="_blank" style=""><img src="images/footer-facebook-icon.png" alt="FBook" title="Facebook" width="30" height="30" /></a> <a href="https://twitter.com/templatemonster" target="_blank"><img src="images/footer-twitter-icon.png" alt="Twitter" title="@templatemonster" width="30" height="30" /></a> <a href="http://www.templatemonster.com/all-rss.php" target="_blank"><img src="images/footer-rss-icon.png" alt="RSS Feeds" title="RSS Feeds" width="29" height="29" /></a></td>
        </tr>
        <tr>
            <td width="100%" colspan="2" valign="top" style="padding-top:8px;"><span style="display:block;margin-bottom:3px;color:#5b666f;font-size:12px;line-height:18px;">All screenshots and official logos/trademarks are copyright Jetimpex, Inc © 2003-2013.</span> <span style="display:block;margin-bottom:3px;color:#5b666f;font-size:12px;line-height:18px;"> <a href="http://www.templatemonster.com/privacy-policy.php" target="_blank" style="font-weight:bold;">Privacy Policy</a> | <a href="http://www.templatemonster.com/" target="_blank" style="font-weight:bold;">Unsubscribe</a> | <a href="index.html" target="_blank" style="font-weight:bold;">View in Browser</a> </span></td>
        </tr>
    </tbody>
</table>
<!-- /end footer colophon -->
</td>
</tr>
</table>
<!-- /end wrapper table -->


Здесь вряд ли можно видеть какой-то особый код. Мы используем ту же технологию форматирования ячеек таблицы, и корректно выравниваем разделы. Здесь важно отметить, что в атрибутах каждого изображения следует указывать точные параметры ширины и высоты. Таким образом, ваши email-газеты изначально будут загружаться с правильной расстановкой, даже если на тот момент еще не загрузятся изображения.

Без выставленных габаритов, ваши изображения сначала будут загружаться как точки размером 1х1 пиксель. Лучше чтобы они сразу появлялись в правильном размере, но отображались в виде пустых блоков до полной загрузки. Вы можете привязать сюда и альтернативный текст, который будет отображаться вместо изображения, пока то не будет загружено.

Кроме некоторых хитрых CSS-хаков, нам кажется, что дизайн email-газеты довольно понятен и прост. Но здесь, как и в любом деле, следует попрактиковаться. Иногда бывает сложно справиться с разностью рендера шаблона в разных клиентах, но мы думаем, что вы справитесь с этим рано или поздно. Если у вас возникнут какие-то проблемы, вы всегда сможете найти ответ в Google!

В завершение

Процесс разработки собственного дизайна газеты не так уж и прост. Если у вас уже есть большой опыт в дизайне, вам все равно придется посвятить некоторое время изучению техники разработки email-газет. Мы надеемся, что наши примерные коды помогут вам самостоятельно разработать шаблон и заинтересовать им читателей.

Учтите, что наши коды можно развивать и модифицировать. Возможно, через некоторое время вам захочется создать несколько новых дизайнов газеты, и тогда у вас будет возможность использовать этот код как основу. Если у вас достаточно терпения и навыков, то вы очень быстро схватите принцип разработки HTML-газет.

Исходники в архиве.

СКАЧАТЬ

Забрать
с облака

Напишите своё мнение