Ukrainian (українська мова) translation by Nick Nathan (you can also view the original English article)
Найкращий спосіб зрозуміти будь-який процес - це здійснити це самостійно, з самого початку. Сьогодні ми будемо робити саме це за допомогою дизайну електронної пошти, створивши HTML-шаблон електронної пошти з нуля.
Відкинути все зайве
Почнемо з того, що варто згадати, де я витягнув деякі ресурси.
- Чудові 2D іконки від Pierre Borodin на Dribbble
- Використані шрифти - Oil Can, Source Sans Pro та Mission Script.
- Значки соціальних медіа знаходяться в іконках Metrize
Тепер, як ми вже обговорили в попередньому навчальному посібнику , вам потрібно буде почати свій електронний документ HTML за допомогою типу doc XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Demystifying Email Design</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> </html>
За допомогою цього сортування ми можемо почати будувати решту структури.
Створення тіла та головної таблиці
По-перше, ми додамо загальну структуру нашого електронного листа, починаючи з тегу <body>. Ми будемо встановлювати поля та відступи на тілі тега на нуль, щоб уникнути будь-якого непередбаченого простору.
Також ми додамо таблицю шириною 100%. Це діє як справжній тег для нашого електронного листа, оскільки стиль тегу тіла не повністю підтримується. Якщо ви хочете додати колір тла до "тіла" своєї електронної пошти, вам слід застосувати його до цього великого таблиці.
Встановіть ваші клітинки та клітини, розташовуючи їх до нуля, щоб уникнути будь-яких непередбачених просторів у таблиці.
Примітка. Ми збираємося виходити <border="1"> на всі наші столи, щоб ми могли побачити скелет нашого макета, коли ми йдемо. Ми вилучимо їх наприкінці простою "Знайти та замініть". Ми вилучимо їх наприкінці простою "Знайти та замініть".
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</body> 
Якщо атрибут існує в HTML, використовуйте його замість CSS
Тепер розмістіть в центрі таблицю розміром 600 пікселів всередині контейнерного столу. Шістсот пікселів є максимальною шириною для ваших листів для комфортного відображення в більшості робочих столів та веб-пошти на більшості роздільних здатностей екрана.
Встановіть цю ширину за допомогою HTML замість CSS, використовуючи атрибут width. Встановіть цю ширину за допомогою HTML замість CSS, використовуючи атрибут width.
Ми замінимо наш маленький "Привіт!" привітання з цим столом:
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Hello! </td> </tr> </table>
Ми також додали властивість вбудованого стилю, яка встановлює border-collapse властивість collapse. Якщо ми цього не зробимо, нові версії Outlook додадуть невеликий пробіл між нашим столом та нашою кордоном.
Створення структури та заголовка
У нашому проекті ми бачимо, що електронна пошта ділиться на три логічні розділи, тому ми створимо рядок для кожного.
Давайте дубльований одиничний рядок, який ми вже зробили, так що у нас в цілому три. Я змінив текст всередині них, щоб ми могли легко ідентифікувати кожен рядок.
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table>
Тепер ми будемо кольорувати їх відповідно до дизайну. Як bgcolorі допустимий атрибут HTML, ми будемо використовувати це для встановлення фонового кольору замість CSS. Завжди пам'ятайте, що використовуйте повні шість символів шістнадцяткового коду, оскільки стовпчик із трьома символами не завжди працює.
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> <tr> <td bgcolor="#70bbd9"> Row 1 </td> </tr> <tr> <td bgcolor="#ffffff"> Row 2 </td> </tr> <tr> <td bgcolor="#ee4c50"> Row 3 </td> </tr> </table>
Гаразд, далі, ми зосередимось на Ряді 1. Ми хочемо налаштувати заповнення на комірку, а потім вставити наше зображення.
Використання Padding
Використовуючи заповнення в електронній пошті, ви завжди повинні вказувати кожне значення (верхнє, право, нижнє і ліворуч), інакше ви можете отримати непередбачувані результати. Я вважаю, що ви все ще можете використовувати стенографію, тобто padding: 10px 10px 8px 5px;, але якщо у вас виникли проблеми, ви, можливо, захочете записати його довго формою, тобто padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.
Якщо у вас є навіть більші труднощі з підкладкою (наприклад, якщо ваша платформа відправлення вилучає ваш CSS), не використовуйте її взагалі. Просто використовуйте порожні клітини, щоб створити простір. Немає необхідності використовувати GIF-дистанції spacer, просто переконайтеся, що ви додали style="line-height: 0; font-size: 0;"до комірки, помістіть   всередину і надайте їй явний висоту або ширину. Ось приклад:
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>
Також зверніть увагу на те, що можна використовувати повзунки на тегах TD, але не на теги P або DIV. Вони ведуть себе набагато непередбачувано.
Отже, ми будемо використовувати деякий вбудований CSS, щоб додати пробіли в комірку. Потім ми будемо вставляти наше зображення, додавши альт-текст і додавши style="display:block;" який є загальним виправленням, яке зупиняє деякі клієнти електронної пошти, доповнюючи прогалини під зображеннями. Ми орієнтуємо зображення, додавши align="center" до нашого тегу td. Ми також додамо тег alt, який важливий для того, коли спочатку завантажується наша електронна пошта, яка в більшості випадків буде з відключеними зображеннями.
Примітка. Якщо вміст вашого заголовка дійсно важливий для вашого повідомлення, не використовуйте заголовок, який використовує лише зображення. Пам'ятайте, що зображення для більшості клієнтів за умовчанням заблоковано за замовчуванням. Отже, якщо вирішальний аспект вашої електронної пошти, не включайте його як зображення. Однак у цьому прикладі мій заголовок досить зайвий.
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> </td>
Створення зони вмісту
По-перше, ми додамо деяку пропускну здатність до середнього елемента, так що в таблиці всередині є певний простір навколо нього, відповідно до нашого дизайну.
Тепер ми додамо таблицю з трьома рядками для нашого головного вмісту - одне для заголовка, одне для вступного тексту, а одне для рядка з двома стовпцями. Ми встановимо ширину цієї таблиці на 100%, а не використовувати значення пікселя, тому що це допоможе нам у подальшому русі доріжки, якщо ми хочемо, щоб наша електронна почта відповідала. Якщо у вас завжди є ширина пікселя на все, ви можете досягти багатьох значень, щоб перевизначити їх за допомогою медіа запитів. Якщо ваша вкладена ширина таблиці базується на відсотках, тоді, коли ви налаштовуєте ширину батьківського елемента, все відповідно адаптується.
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
<tr>
<td>
Row 3
</td>
</tr>
</table>
</td> 
Тепер ми додамо до нашого вмісту та додамо деякий пробіл до середнього елемента.
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td style="padding: 20px 0 30px 0;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> <tr> <td> Row 3 </td> </tr> </table>
Тепер ми збираємось додати наші два стовпці вмісту до рядка 3. Оскільки ми хочемо, щоб "запас" був між цими двома клітинками, але маржа не підтримується, ми створимо таблицю з трьома стовпцями з порожньою коміркою між дві зовнішні колони.
Наскільки я люблю дотримуватися відсотків, коли вміст має певний розмір, може бути складно перетворити його у відсотках (у цьому прикладі стовпчики складають 48,1%, що може стати заплутаним). З цієї причини, оскільки наші два зображення мають ширину розміром 260 пікселів, ми створимо стовпці, які також мають ширину 260 пікселів, із серединою поля розміром 20 пікселів. (Це буде загальний розмір 540 пікселів, тобто ширина 600px нашого столу, за винятком об'ємного розміру 30 пікселів з будь-якої сторони.) Обов'язково зменшіть розмір шрифту та висоту рядка та додайте непересічний пробіл у марку  .
Ми також встановити valign для "top" обох елементів , так що вони будуть вертикально вирівнювати до вершини, навіть якщо один стовпець має більше тексту , ніж інший. Вертикальне вирівнювання по замовчуванню є "middle".
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="260" valign="top"> Column 1 </td> <td style="font-size: 0; line-height: 0;" width="20"> </td> <td width="260" valign="top"> Column 2 </td> </tr> </table>
Тепер давайте додамо наші зображення та вміст до цих стовпців. Оскільки ми потребуємо декількох рядків, ми будемо гніздити ще один таблицю, оскільки ми не можемо використовувати будь-які теги colspan або rowspan. Ми також додамо деякі проміжки між зображеннями та копіюємо у кожному стовпці.
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
<td style="font-size: 0; line-height: 0;" width="20">
</td>
<td width="260" valign="top">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table> Тут ми встановили ширину зображення за допомогою HTML у 100% ширини стовпця. Це, знову ж таки, полягає в тому, що якщо ми зробимо це повідомлення електронною поштою чутливими, нам потрібно буде лише використовувати мультимедійні запити, щоб змінити ширину батьківського елемента. Нам доведеться перевизначити висоту в пікселях, оскільки використання style="height: auto" зараз не буде працювати у всьому (кашль, Outlook) . Таким чином, ми встановимо його за допомогою пікселів. Це означає, що ми повинні встановити height: auto!important ці зображення, використовуючи мультимедійні запити, щоб перевизначити значення пікселя, але ми могли б зробити це за допомогою одного класу. Оскільки ми встановлюємо ширину у відсотках, нам не доведеться перевизначити це. Чим менше речей перевизначити, тим краще. Чим менше, тим краще.
Нижній колонтитул
Тепер ми додамо нашу позицію до рядка нижнього колонтитула.
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> Row 3 </td>
Всередині цієї комірки ми будемо гніздити інший стіл, щоб отримати наші два стовпці.
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Column 1 </td> <td> Column 2 </td> </tr> </table>
Ми створимо ще один маленький стіл для наших значків соціальних мереж. Ми встановимо його батьківську комірку align="right". Переконайтеся, що ви встановили border="0" на цих посиланнях зображення (щоб уникнути синьої лінії кордону зв'язку), і не забувайте display:block.
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://www.twitter.com/">
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="http://www.twitter.com/">
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td> 
Тепер ми додамо наш текст і додамо ширину в наші клітинки, щоб бути в безпеці, навіть якщо між ними є багато пробілів. Ми встановимо цю клітинку на 75%, а іншу - на 25%.
<td width="75%"> ® Someone, somewhere 2013<br/> Unsubscribe to this newsletter instantly </td>
І там ми маємо це! Наша макет завершена.
Перевірка
Давайте запустимо це через W3C Validator, щоб переконатися, що нічого поганого або зламане. Якщо ви дотримувалися точно, це буде сказати, що він пройшов.
Далі ми збираємося провести тест через Лакмус, щоб переконатися, що структура нашого електронного листа прекрасно працює. Ось короткий опис мого тесту:
Стиль нашого тексту
Наш перший рядок - заголовок. Ми будемо використовувати тег, щоб створити <b> сміливий текст, оскільки, як ми вже знаємо, якщо він існує в HTML, ми використовуємо це замість CSS.
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> <b>Lorem ipsum dolor sit amet!</b> </td>
Ми також додамо цей вбудований стиль до всіх інших комірок тексту:
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"
Далі ми повинні стилізувати текст нижнього колонтитула, і ми також очистимо нашу посилання для скасування підписки. Ми накладемо стиль на наше скасування підписки на текст, використовуючи як CSS, так і <font> тег HTML Це подвоєння є найкращим способом гарантувати, що ваші посилання ніколи не з'являться в стандартній синій.
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> ® Someone, somewhere 2013<br/> <a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly </td>
На цьому все! Все входить. Час вимкнути кордони і побачити, як виглядає красиво. Пройдіть і замінюйте кожен випадок border="1" з border="0".
На цьому місці вона виглядає трохи сумно, плаваючи в просторі, тому підемо до нашого першого 600-кратного широкого столу і додамо:
style="border: 1px solid #cccccc;"
Тепер він не схожий на те, що воно більше плаває. У кінцевому контакті я збираюся додати 30-піксельний пробіл до нижньої частини першої комірки, щоб запобігти раптовій зупиненню нашої електронної пошти в деяких веб-поштових клієнтах (наприклад, Apple Mail) та 10-кратному поповненні вгорі , так що наш синій заголовок має трохи приміщення для дихання.
<td style="padding: 20px 0 30px 0;">
І це все! Ви всі готові до остаточного тесту.
Це обгортка!
Перш ніж назвати це днем, якщо ви використали будь-які коментарі, позбавтеся їх. Деякі клієнти електронної пошти можуть задихатися від коментарів, тому мудріше не мати ніякого непотрібного коду у ваших файлах.
Зараз добре провести час, щоб зробити заключний тест, а потім ваш HTML-лист готовий до відправки!
Щоб взяти те, що ви навчилися, на наступний рівень, ознайомтеся з наступними підручниками:
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
