9 хитрощів для розробки ідеального бюлетеня HTML

Інформаційний бюлетень електронної пошти є ідеальним способом підтримувати зв'язок з клієнтами або послідовниками. Часто ваша компанія або веб-сайт матимуть численні оновлення продукту, або, можливо, майбутні події, які ви хочете поділитися. Завжди можна публікувати нову інформацію у своєму блозі або потоках у соціальних мережах, але ваша аудиторія може дістатися до вас лише настільки далеко. У цьому випадку електронна пошта, звичайно, не мертва технологія, просто невикористаний потенціал.

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

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

Цілі розсилки

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

Важкі користувачі Інтернету, ймовірно, перевірятимуть свою електронну пошту більше, ніж двічі на день. Навіть ті, хто постійно зайнятий, знайдуть час, щоб пройти через свої повідомлення хоча б раз на день. Це ідеальний час захопити увагу навіть без необхідності відвідування вашого сайту. Навіть якщо ніхто не натискає ваші посилання, інформація все ще отримали, що чудово підходить для створення торгової марки.

Розгляньте деякі з тем, які потрібно запропонувати у своєму дизайні. Ви включаєте посилання для реєстрації для своєї служби; можливо, посилання на блог або нещодавно опубліковані статті на вашому сайті? Макет вашого інформаційного бюлетеня буде відображати, як ви хочете, щоб ваші читачі відповіли, але в кінцевому підсумку ви шукаєте, щоб підірвати інтерес і пройти навколо деяких цікавих шматочків інформації для мас.

1. Використовуйте таблиці у ваших макетах

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

Ви також можете здивуватися, чому div і інші елементи блоку не є такою гарною ідеєю. Більшість клієнтів електронної пошти побудований, щоб позбавити будь-який сторонній CSS зміст. Це означає, що ви не зможете використовувати багато чого іншого, окрім вбудований CSS (і навіть повна підтримка це дрібна). Клієнти, такі як Microsoft Outlook 2007 і Gmail від Google, мають дуже погану підтримку плаваючих елементів і прямого позиціонування.

Найкращим рішенням було б гніздо декількох таблиць всередині один одного. Залишки та поля не встановлюються в певному масштабі між багатьма клієнтами електронної пошти. Це є причиною дотримуватися використання width = "value" на всіх елементах комірки таблиці. Вони завжди відображатимуть однакову ширину, незалежно від того, який клієнт електронної пошти використовують ваші читачі, так що це багато безпечніше і більш послідовним встановлювати відступи та поля за допомогою порожніх комірок таблиці.

2. Позиціонування з фіксованою шириною

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

Однак для багатьох цей метод занадто слабкий. Конструктивні бюлетені в більшості випадків вимагає фіксованої ширини, особливо якщо ви використовуєте банери та зображення, встановлені для певного розміру. Рекомендую працювати 500px - максимальна ширина документа 600px. Горизонтальний розмір екрану iPhone та деяких моделей BlackBerry обмежений 320px, тому навіть при 500px ваш шаблон електронної пошти буде зменшено, щоб відповідати правильно.

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

3. Піксельні одиниці

Якщо ви не будете використовувати елементи рідини в інформаційному бюлетені, ймовірно, вам потрібно буде розмірити кілька речей. Спробуйте зберегти його пікселів (px) замість іншого типу одиниці. Відсотки можуть легко переплутатися з багатьма клієнтами веб-пошти та вікнами програмного забезпечення. З меншою кількістю елементів сторінки, макетування флюїдів може виходити неушкодженим, хоча і з кількома помилками.

Але пікселі завжди вірні. Працюючи в межах максимальної ширини 600px, ви можете вмістити багато вмісту всередині. Експозиція легша, якщо розділити макети на дві або три стовпці, і завжди писати розміри в пікселях. Єдиним винятком може бути розмірів шрифту де ems може підтримувати ваших читачів краще, але em Розмір розмірів буде відрізнятися таким же чином відсотки будуть - так для простоти, дотримуйтеся піксельних вирівнювань.

4. Можливості з CSS

Це може здатися, що дизайн електронної пошти має на меті знищити використання стилів CSS. Хоча існує багато непідтримуваних функцій, CSS все ще залишається цілком прийнятним у багатьох випадках. Монітор кампанії має гарну таблицю властивостей CSS, перерахованих клієнтом електронної пошти. Все буде підтримувати основи, як сімейство шрифтів і стиль шрифту, щоб пропустити , якщо хочете.

Будьте обережні щодо стилів шрифтів, щоб не пересунути межі занадто далеко. Якщо ви відчуваєте себе незручно з вбудованими стилями, завжди можна використовувати тег HTML-шрифту, навіть якщо він застарілий. Якщо ви дизайнер CSS, вам не потрібно виходити з системи, але будь-яке коротке кодування CSS може призвести до помилкових конструкцій. Як приклад шрифт: 12px / 14px Arial, без засічок; Скорочення може допомогти заощадити багато місця, але не повністю прийнято для розробки електронної пошти, навіть якщо вона використовується з вбудованими стилями.

Навіть ваш колірний вибір повинні бути виписані з руки. Шістнадцяткові кольори, такі як #ccc або # e3f повинні бути написані повністю #cccccc або # ee33ff, відповідно. Якщо ви не можете створити те, що вам потрібно без CSS, я б порекомендував цей шлях, але не зовсім ухиляєтеся від CSS в конструкціях електронної пошти, тому що, всупереч поширеній думці, він підтримується в більшості випадків.

5. Якісні посилання Кращі практики

Ви обов'язково захочете включити деякі посилання у свій інформаційний бюлетень. Це можуть бути вихідні посилання на інші сторінки в Інтернеті або, можливо, посилання, що ведуть до найбільш популярних сторінок вашого веб-сайту. Крім того, більшість колонтитулів буде містити посилання для скасування підписки, щоб ваші читачі могли відмовитися від процесу електронної пошти, але як ви маєте справу з усіма цими посиланнями у вашому дизайні?

Ну, треба відзначити, по-перше, що клієнти електронної пошти дуже привабливі у своїх проектах. Багато хто буде вибирати, щоб переписати стилі посилання, навіть з вбудованим CSS. Чистий трюк - це включають як вбудований колір, так і додатковий тег прогону в елементі прив'язки. Якщо колір і стиль ваших посилань важливі для загального дизайну, ви захочете взяти додаткові запобіжні заходи. Нижче наведено невеликий приклад коду:

деякий текст посилання

Ефекти наведення не підтримується в Outlook 2007/2010, Gmail, iOS або Android. Ви все одно можете включити a: hover стиль для всіх підтримуючих клієнтів: Outlook 2000/2003, Hotmail, Apple Mail і Yahoo! пошта, але особисто я не бачу великої вигоди в частковому користувальницькому досвіді, оскільки якірні селектори не підтримуються тільки пропонуючи 2-3 кольору ланки використовувати у всьому вашому дизайні.

В якості презумпції користувачі також очікують, що ваші посилання будуть відкриті в новій вкладці або вікні. В ідеалі target = "_ blank" атрибут повинен бути достатнім для всіх браузерів, щоб розпізнати цю функціональність, а включення цього атрибута до ваших зв'язків прив'язки не повинно негативно впливати на програмне забезпечення електронної пошти, наприклад Lotus Notes, або Outlook.

6. Випробування у всіх основних клієнтів

Нещодавнє дослідження найпопулярніших клієнтів електронної пошти (проведене Campaign Monitor) показує десять найпопулярніших клієнтів електронної пошти за минулий рік. Це може здатися трохи втомливим, але дизайнерами повинні звикати перевіряти свої інформаційні бюлетені на всіх основних клієнтах електронної пошти, принаймні на деяких з найбільш поширених клієнтів, таких як Gmail, Hotmail або Yahoo! Пошта.

Це не стосується виключно веб-пошти, а також робочого програмного забезпечення як на Mac OS X, так і на Windows. Також за їх схемою Пошта iOS і Android обидві вершини увійшли до десятки лідерів за останні кілька років. Насправді iPhone, IPod Touch, і IPad Mail займає # 2 найпопулярніших прямо під Outlook! На жаль, немає способу перевірити їх, не володіючи одним з пристроїв - так що вам доведеться вирішувати інші варіанти.

Одна помилка з мобільною підтримкою приходить у багатьох моделях iPhone і Android. Мобільний рендеринг електронної пошти буде часто змінити розмір тексту в шаблоні. Це може не вплинути на ваш дизайн, але це може дратувати деяких читачів. Використання CSS -webkit-text-size-adjust: none;, волі забезпечити рівний розмір тексту за умовчанням на всіх движках аналізу без необхідності його перевірки.

Якщо ви знаєте друзів або колег, які використовують альтернативне програмне забезпечення, ви можете це зробити зверніться за їхньою допомогою для тестування бюлетеня. Ви також можете надішліть їм копію електронного листа перевірити на своєму пристрої або запозичити пристрій активно очищати коди. На щастя, Outlook пропонує версію інсталяції Mac, тому вам не потрібно відстежувати користувачів Windows для цих оптимізацій, але коли справа доходить до Lotus Notes або Windows Mail, вам не пощастило.

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

7. Завжди пропонуйте веб-перегляди

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

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

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

8. Додавання вмісту зображення

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

Як тільки ви отримаєте експорт графіки, є кілька порад щодо створення зображень спеціально для електронної пошти. Ви завжди захочете встановити атрибути "ширина" і "висота" на вашому img теги. Без цих специфікацій в порядку, деякі клієнти спотворюють вміст зображення. An alt тег також буде корисним, тому відвідувачі зможуть дізнатися, що містить вміст зображення, перш ніж він буде завантажений.

Як згадувалося раніше, розміщення зображень у вашій електронній пошті може бути складним. Уникайте використання поплавців будь-яку ціну! Зображення align = "left" атрибут буде працювати набагато краще, або альтернативно відобразити точні клітинки таблиці щоб розмістити зображення у верхній, лівій чи правій частині інформаційного бюлетеня. Ви не зможете отримати ідеальне зіставлення з багатьма клієнтами (особливо мобільними клієнтами), але оптимізуйте зображення і розміри файлів малі для досягнення найкращих результатів.

Що стосується зберігання зображень, рекомендується, щоб ви зберігати всі файли на власному веб-сервері. Це кращий варіант замість використання іншого хоста зображень або завантаження файлів до служби онлайн-розсилок. Додатково вам слід відокремити вміст інформаційних бюлетенів від інших зображень у структурі папок так / img / email або / img / email / 2011.

9. Уникайте папки спаму!

Це важко почути, але не всі клієнти електронної пошти є дружніми до інформаційних бюлетенів. Щодня надсилаються мільярди повідомлень електронної пошти, більшість з яких містять спам або шкідливий вміст..

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

Також спробуйте тримати вміст коротким і на тему. Вам не потрібно включати повний вміст для всіх ваших статей або сторінок. Спробуйте додати речення чи два з альтернативним посиланням на ваш сайт замість довгого списку. The Більш короткий вигляд вашої електронної пошти, тим більше ймовірність, що він пройде перевірку спаму.

Галерея дизайну бюлетеня

Яка забава може стати статтею електронної пошти без деяких фантастичних прикладів? Є тонн розсилок електронної пошти конструкцій і шаблонів, щоб перевірити в Google. Галерея HTML електронної пошти є дуже популярним джерелом натхнення.

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

Отримуйте задоволення, розробляючи свої ідеальні інформаційні бюлетені!

Сповіщення для бізнесу