Как создать шаблон электронной почты с помощью HTML и CSS?

Как дизайнеры, так и разработчики, однажды ваш клиент попросит вас предоставить шаблон электронной почты для своего рода информационного бюллетеня. Я должен сказать, что шаблоны электронной почты не так уж интересны просто потому, что существует большой пробел в поддержке HTML и CSS. Вы могли бы подумать, что в сегодняшнюю эпоху это не так, поскольку мы продвигаемся вперед с HTML5 и CSS3. Тем не менее, мне грустно констатировать, что когда дело доходит до рендеринга электронных писем, это далеко не так.

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

Дизайн

 Рекомендуется для вас: Как ускорить процесс проектирования с помощью современных фреймворков CSS?

Структура

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

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

Стиль

Хорошо, теперь мы добавим немного CSS в содержимое документа. В этом нет ничего особенного, просто сброс и определение цвета и стиля ссылки. Я был бы очень осторожен с тем, какой CSS вы вставляете сюда, так как он часто игнорируется почтовыми клиентами.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

Контент

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

Есть кое-что, о чем мне нужно, чтобы вы были чрезвычайно осведомлены: изображения отлично подходят для электронных писем, если они a: небольшого размера и b: имеют тег alt, который хорошо их описывает. Я уверен, вы знаете, что для того, чтобы изображения отображались в электронном письме, получатель этого электронного письма должен разрешить их появление. Если они этого не сделают, ничто не подскажет им, чего им следует ожидать. Это также проблема доступности, если вы не предоставляете описание для слепых пользователей. Однако это другая история. Итак, урок таков: всегда используйте маленькое изображение с тегом alt!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

Встроенный стиль

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

 Вам также может понравиться: 7 полезных советов, как сделать строку темы письма более кликабельной.

Тело

Во-первых, давайте установим цвет фона всей страницы электронной почты, а также размер и цвет шрифта по умолчанию.

 <body bgcolor="#f7d973" ></body>

Стол

Следующее, что нужно сделать, это отцентрировать содержимое электронного письма и предоставить ему собственный цвет фона, чтобы он выделялся.

Первая строка — заголовок

В ячейке первого ряда происходит много вещей. Обратите внимание, что встроенный стиль находится на <td>, а не на <tr>. Здесь мы делаем новый цвет фона, соответствующий цвету логотипа. Кроме того, есть некоторые отступы и выравнивание. Теперь я меняю цвет текста на белый, потому что альтернативный текст по умолчанию будет черным. Вы не сможете увидеть его на этом фоне, поэтому я удостоверюсь, что вы сможете это сделать, изменив цвет текста. Это может показаться вам бесполезным, но, как я уже сказал, это очень важно для людей, у которых изображения не разрешены по умолчанию.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Второй ряд

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

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Третий ряд

Для обеих ячеек здесь мы устанавливаем ширину и отступы. Они абсолютно одинаковые, так что клетки делятся поровну пополам. Кроме этого больше ничего нет, так как ячейки заполнены изображением и текстом о нем.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Четвертый ряд

Это, безусловно, самый стилизованный раздел этого HTML-шаблона электронной почты. Как видно из приведенного ниже кода, происходит много всего. Во-первых, вся строка получает новый цвет фона и цвет текста, чтобы текст был виден — точно так же, как в заголовке. И первая, и вторая ячейки, и их содержимое претерпевают одинаковые изменения стиля. Во-первых, сама ячейка получает новый фон и цвет текста. Затем ссылка в заголовке становится желтой. Наконец, последний абзац подчеркивается, а для разделения добавляется поле. Как я уже сказал, вторая ячейка и ее содержимое получают точно такую ​​же стилизацию.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 И, наконец, нижний колонтитул. Здесь очень мало что происходит; просто немного интервала через заполнение, и все!






<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Заключительные слова

Это руководство немного длинное, но я надеюсь, что теперь вы понимаете, что нужно для создания HTML-шаблона электронной почты с нуля. Это не сложная концепция, но она может быть утомительной. Теперь ваша очередь выйти и начать создавать потрясающие, высококачественные электронные письма! Вы можете комбинировать несколько методов создания шаблона электронной почты, чтобы сделать его более уникальным.
Эта статья написана Ханной Батлер. Она работает веб-разработчиком и дизайнером. Кроме того, она любит делиться своим опытом в виде статей. На этот случай у нее есть собственный раздел на сайте WriteMyPaper4Me.co. В будущем она собирается начать вести блог, чтобы описывать другим свои методы работы.