Advertisement
  1. Web Design
  2. Email Design
Webdesign

Побудуйте шаблон HTML Email з нуля

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Nick Nathan (you can also view the original English article)

Final product image
What You'll Be Creating

Найкращий спосіб зрозуміти будь-який процес - це здійснити це самостійно, з самого початку.  Сьогодні ми будемо робити саме це за допомогою дизайну електронної пошти, створивши HTML-шаблон електронної пошти з нуля.

Відкинути все зайве

Почнемо з того, що варто згадати, де я витягнув деякі ресурси.

Тепер, як ми вже обговорили в попередньому навчальному посібнику , вам потрібно буде почати свій електронний документ HTML за допомогою типу doc XHTML:

За допомогою цього сортування ми можемо почати будувати решту структури.

Створення тіла та головної таблиці

По-перше, ми додамо загальну структуру нашого електронного листа, починаючи з тегу <body>. Ми будемо встановлювати поля та відступи на тілі тега на нуль, щоб уникнути будь-якого непередбаченого простору.

Також ми додамо таблицю шириною 100%. Це діє як справжній тег для нашого електронного листа, оскільки стиль тегу тіла не повністю підтримується.   Якщо ви хочете додати колір тла до "тіла" своєї електронної пошти, вам слід застосувати його до цього великого таблиці.

Встановіть ваші клітинки та клітини, розташовуючи їх до нуля, щоб уникнути будь-яких непередбачених просторів у таблиці.

Примітка. Ми збираємося виходити <border="1"> на всі наші столи, щоб ми могли побачити скелет нашого макета, коли ми йдемо. Ми вилучимо їх наприкінці простою "Знайти та замініть". Ми вилучимо їх наприкінці простою "Знайти та замініть".

1

Якщо атрибут існує в HTML, використовуйте його замість CSS

Тепер розмістіть в центрі таблицю розміром 600 пікселів всередині контейнерного столу. Шістсот пікселів є максимальною шириною для ваших листів для комфортного відображення в більшості робочих столів та веб-пошти на більшості роздільних здатностей екрана.

 Встановіть цю ширину за допомогою HTML замість CSS, використовуючи атрибут width. Встановіть цю ширину за допомогою HTML замість CSS, використовуючи атрибут width.

Ми замінимо наш маленький "Привіт!" привітання з цим столом:

Ми також додали властивість вбудованого стилю, яка встановлює border-collapse властивість collapse.  Якщо ми цього не зробимо, нові версії Outlook додадуть невеликий пробіл між нашим столом та нашою кордоном.

2

Створення структури та заголовка

У нашому проекті ми бачимо, що електронна пошта ділиться на три логічні розділи, тому ми створимо рядок для кожного.

Давайте дубльований одиничний рядок, який ми вже зробили, так що у нас в цілому три. Я змінив текст всередині них, щоб ми могли легко ідентифікувати кожен рядок.

3

Тепер ми будемо кольорувати їх відповідно до дизайну. Як bgcolorі допустимий атрибут HTML, ми будемо використовувати це для встановлення фонового кольору замість CSS.  Завжди пам'ятайте, що використовуйте повні шість символів шістнадцяткового коду, оскільки стовпчик із трьома символами не завжди працює.

4

Гаразд, далі, ми зосередимось на Ряді 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;"до комірки, помістіть &nbsp  всередину і надайте їй явний висоту або ширину. Ось приклад:

Також зверніть увагу на те, що можна використовувати повзунки на тегах TD, але не на теги P або DIV. Вони ведуть себе набагато непередбачувано.

Отже, ми будемо використовувати деякий вбудований CSS, щоб додати пробіли в комірку.  Потім ми будемо вставляти наше зображення, додавши альт-текст і додавши style="display:block;" який є загальним виправленням, яке зупиняє деякі клієнти електронної пошти, доповнюючи прогалини під зображеннями. Ми орієнтуємо зображення, додавши align="center" до нашого тегу td.  Ми також додамо тег alt, який важливий для того, коли спочатку завантажується наша електронна пошта, яка в більшості випадків буде з відключеними зображеннями.

Примітка. Якщо вміст вашого заголовка дійсно важливий для вашого повідомлення, не використовуйте заголовок, який використовує лише зображення. Пам'ятайте, що зображення для більшості клієнтів за умовчанням заблоковано за замовчуванням.  Отже, якщо вирішальний аспект вашої електронної пошти, не включайте його як зображення. Однак у цьому прикладі мій заголовок досить зайвий.

6

Створення зони вмісту

По-перше, ми додамо деяку пропускну здатність до середнього елемента, так що в таблиці всередині є певний простір навколо нього, відповідно до нашого дизайну.

7

Тепер ми додамо таблицю з трьома рядками для нашого головного вмісту - одне для заголовка, одне для вступного тексту, а одне для рядка з двома стовпцями. Ми встановимо ширину цієї таблиці на 100%, а не використовувати значення пікселя, тому що це допоможе нам у подальшому русі доріжки, якщо ми хочемо, щоб наша електронна почта відповідала.   Якщо у вас завжди є ширина пікселя на все, ви можете досягти багатьох значень, щоб перевизначити їх за допомогою медіа запитів. Якщо ваша вкладена ширина таблиці базується на відсотках, тоді, коли ви налаштовуєте ширину батьківського елемента, все відповідно адаптується.

8

Тепер ми додамо до нашого вмісту та додамо деякий пробіл до середнього елемента.

9

Тепер ми збираємось додати наші два стовпці вмісту до рядка 3.  Оскільки ми хочемо, щоб "запас" був між цими двома клітинками, але маржа не підтримується, ми створимо таблицю з трьома стовпцями з порожньою коміркою між дві зовнішні колони.

Наскільки я люблю дотримуватися відсотків, коли вміст має певний розмір, може бути складно перетворити його у відсотках (у цьому прикладі стовпчики складають 48,1%, що може стати заплутаним). З цієї причини, оскільки наші два зображення мають ширину розміром 260 пікселів, ми створимо стовпці, які також мають ширину 260 пікселів, із серединою поля розміром 20 пікселів.  (Це буде загальний розмір 540 пікселів, тобто ширина 600px нашого столу, за винятком об'ємного розміру 30 пікселів з будь-якої сторони.) Обов'язково зменшіть розмір шрифту та висоту рядка та додайте непересічний пробіл у марку &nbsp.

Ми також встановити valign для "top" обох елементів , так що вони будуть вертикально вирівнювати до вершини, навіть якщо один стовпець має більше тексту , ніж інший.  Вертикальне вирівнювання по замовчуванню є "middle".

10

Тепер давайте додамо наші зображення та вміст до цих стовпців.  Оскільки ми потребуємо декількох рядків, ми будемо гніздити ще один таблицю, оскільки ми не можемо використовувати будь-які теги colspan або rowspan.  Ми також додамо деякі проміжки між зображеннями та копіюємо у кожному стовпці.

Тут ми встановили ширину зображення за допомогою HTML у 100% ширини стовпця. Це, знову ж таки, полягає в тому, що якщо ми зробимо це повідомлення електронною поштою чутливими, нам потрібно буде лише використовувати мультимедійні запити, щоб змінити ширину батьківського елемента.  Нам доведеться перевизначити висоту в пікселях, оскільки використання style="height: auto" зараз не буде працювати у всьому (кашль, Outlook) .  Таким чином, ми встановимо його за допомогою пікселів.  Це означає, що ми повинні встановити  height: auto!important ці зображення, використовуючи мультимедійні запити, щоб перевизначити значення пікселя, але ми могли б зробити це за допомогою одного класу. Оскільки ми встановлюємо ширину у відсотках, нам не доведеться перевизначити це. Чим менше речей перевизначити, тим краще. Чим менше, тим краще.

13

Нижній колонтитул

Тепер ми додамо нашу позицію до рядка нижнього колонтитула.

14

Всередині цієї комірки ми будемо гніздити інший стіл, щоб отримати наші два стовпці.

15

Ми створимо ще один маленький стіл для наших значків соціальних мереж.  Ми встановимо його батьківську комірку align="right".  Переконайтеся, що ви встановили border="0" на цих посиланнях зображення (щоб уникнути синьої лінії кордону зв'язку), і не забувайте display:block.

17

Тепер ми додамо наш текст і додамо ширину в наші клітинки, щоб бути в безпеці, навіть якщо між ними є багато пробілів. Ми встановимо цю клітинку на 75%, а іншу - на 25%.

І там ми маємо це!  Наша макет завершена.

Перевірка

Давайте запустимо це через W3C Validator, щоб переконатися, що нічого поганого або зламане. Якщо ви дотримувалися точно, це буде сказати, що він пройшов.

email-build-valid

Далі ми збираємося провести тест через Лакмус, щоб переконатися, що структура нашого електронного листа прекрасно працює. Ось короткий опис мого тесту:

email-build-litmus
Подивіться в Інтернеті

Стиль нашого тексту

Наш перший рядок - заголовок. Ми будемо використовувати тег, щоб створити <b> сміливий текст, оскільки, як ми вже знаємо, якщо він існує в HTML, ми використовуємо це замість CSS.

Ми також додамо цей вбудований стиль до всіх інших комірок тексту:

Далі ми повинні стилізувати текст нижнього колонтитула, і ми також очистимо нашу посилання для скасування підписки. Ми накладемо стиль на наше скасування підписки на текст, використовуючи як CSS, так і <font> тег HTML  Це подвоєння є найкращим способом гарантувати, що ваші посилання ніколи не з'являться в стандартній синій.

20

На цьому все! Все входить. Час вимкнути кордони і побачити, як виглядає красиво. Пройдіть і замінюйте кожен випадок border="1" з border="0".

21

На цьому місці вона виглядає трохи сумно, плаваючи в просторі, тому підемо до нашого першого 600-кратного широкого столу і додамо:

Тепер він не схожий на те, що воно більше плаває. У кінцевому контакті я збираюся додати 30-піксельний пробіл до нижньої частини першої комірки, щоб запобігти раптовій зупиненню нашої електронної пошти в деяких веб-поштових клієнтах (наприклад, Apple Mail) та 10-кратному поповненні вгорі , так що наш синій заголовок має трохи приміщення для дихання.

23

І це все! Ви всі готові до остаточного тесту.

email-build-litmus-finished
Перегляньте в Інтернеті.

Це обгортка!

Перш ніж назвати це днем, якщо ви використали будь-які коментарі, позбавтеся їх. Деякі клієнти електронної пошти можуть задихатися від коментарів, тому мудріше не мати ніякого непотрібного коду у ваших файлах.

Зараз добре провести час, щоб зробити заключний тест, а потім ваш HTML-лист готовий до відправки!

Щоб взяти те, що ви навчилися, на наступний рівень, ознайомтеся з наступними підручниками:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.