Як створити html-лист: покрокова інструкція

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

особливості створення

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

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

З цією метою можна застосовувати, наприклад, «чуйний дизайн», легко адаптується до розміру екрана.

Яким повинен бути шаблон листи

При верстці документа, призначеного для відправки кореспондентам, слід дотримуватись таких вимог:

• Його слід зробити досить вузьким, т. Е. За розмірами воно повинне не перевищувати діапазон 500-600 пікселів, що забезпечить коректне відображення тексту та іншої інформації на пристроях будь-якого типу.
• Потрібно використовувати досить великий шрифт для всієї текстової інформації, так як на iOS-пристроях HTML-лист буде незручно читати, якщо розмір шрифту менше 13 пікселів.
• Елементи, за якими можна зробити клік, повинні бути досить великими і ізольованими від найближчих посилань. В такому випадку адресат зможе легко їх активувати з першої ж спроби.

Відео: Як просто створити HTML лист для розсилки - Микита Бєлоусов

підготовка

Перш ніж розробити HTML-лист, слід створити на одному з дисків нову папку і назвати її, наприклад, «Розсилання». Крім того, необхідно завантажити та встановити програму Dreamweaver CS3. Цей продукт від Adobe є одним з досить простих інструментів конструювання веб-сайтів і добре підходить для розробки розсильних листи в форматі HTML.

Створення і збереження документа

Перед тим як написати текстову частину листа, потрібно:

• відкрити досить популярну програму-конструктор HTML-листів Dreamweaver CS3 (DW);
• створити документ, вибравши в якості типу «Перехідний HTML 4.01»;
• зберегти файл з розширенням «.html»;
• в верхньому меню знайти команду редагування;
• прибирати галочку з чек-боксу «Використовувати CSS замість тегів HTML».

Покрокова інструкція

Тепер, розглянемо, як створити HTML-лист. Для цього:

• Послідовно відкривають в меню вкладки «Вставити» і «Таблиця» і виставляють потрібні параметри таблиці. Наприклад, рядки - 2, стовпці - 1, ширина - 700, заголовок - зверху. Межі можна виставляти, а можна обійтися без них, вказавши 0.
• Формують заголовок листа. Так як HTML-лист призначений для більшого числа одержувачів, тому використовують оператор [first_name], підставляють потрібне ім`я одержувача.
• У нижньому вікні «Властивості» виставляють потрібні параметри для шрифту, розміру і кольору тексту заголовка і колір фону.
• «Виходять» з області заголовка. У нижній частині екрана виставляють параметри для курсора «По центру» і «По середині».
• Вставляємо готовий текст листа або «пишемо» його прямо в програмі DW, вибравши потрібний тип і розмір шрифту, а також розташування тексту на сторінці.

Створення гіпертекстових посилань

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

Як вставити картинки

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

Для того щоб оформити такий симпатичний фінал:

• вставляють в нижній частині листа, всередину основної таблиці ще одну з 3 стовпчиками і параметром для кордону 0 пікселів;
• виставляють курсор в тому місці таблиці, де хочуть бачити картинку;
• відзначають в нижньому вікні «Посередині» і «По верхньому краю» для кожної секції;
• вибирають в верхньому меню вкладку «Вставка»;
• робимо клік по напису «Зображення» і в меню вставляємо скопійований нами адреса;
• натискаємо «Ok» 2 рази.

Перегляд

Тепер, коли ви знаєте, як зробити HTML-лист, слід переконатися, що адресат його побачить в коректному вигляді. Для цього перед відправкою потрібно переглянути ваш твір в браузері Dreamweaver CS3. Для цього потрібно натиснути на іконку із земною кулею в середньому верхньому меню. Якщо замість букв на екрані з`явилася абракадабра, то слід виставити в налаштуваннях вашого браузера автокодіровку.

Відео: Як зробити Html лист, що б все html листи приходили на пошту

Кодування

З розділу «Проект» і переходять в кодову частину - «Код». У вікні, виділяють і копіюють все, що укладено між тегами і . Зберігаємо файл. Далі вставляємо HTML-код.

Відправка HTML-листи

Для того щоб зробити розсилку відкривають "Смартреспондер" (SR). потім:

• вибирають або створюємо новий лист, заповнивши рядки «Ім`я» і «Адреса відправника».
• заповнюють рядок «Тема листа»;
• відзначають в верхньому лівому меню HTML-код;
• вставляють код, скопійований в програмі DW-код у велике поле «Джерело»;
• перевіряють правильність відображення за допомогою інструменту «Попередній»;
• видаляють текстову версію листи;
• тестують його на спам, за допомогою однойменної кнопки, розташованої поруч з кнопкою «Надіслати».

Кілька популярних шаблонів

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

Відео: Як відправляти HTML лист

• Cerberus. Цей набір так званих чуйних шаблонів дозволяє створювати листи, нормально відображаються як в мобільному додатку Gmail, так і в Outlook. Він дозволяє використовувати блоки HTML-коду або окремо, або об`єднуючи їх.
• Ink - Це заготовка листів, розсилки яких практично універсальні і сумісні з будь-якими пристроями і клієнтами.
• Really simple HTML email template. Шаблон дозволяє створювати розсильні листи дуже просто і швидко. Правда, у них буде вкрай простий дизайн у вигляді одного стовпчика, в якому укладено заклик до дії.

Як вставити HTML в лист

Розглянемо тепер дещо іншу задачу. Щоб вставити код HTML в електронний лист, наприклад, gmail використовуючи, як у наведеному нижче прикладі браузер Google Chrome, слід:

• натиснути на кнопку «F12» або вибрати відповідну послідовність команд в меню;
• у вікні, з кодом поточної сторінки клієнта gmail знайти те місце, куди має бути вставлено HTML-лист, зробити правий клік і вибрати «Edit as HTML».
• вставити скопійований HTML код;
• натиснути комбінацію двох клавіш «Ctrl» і «Enter».

Для тієї ж мети можна скачати просту в использовния програму Mozilla thunderbird. З її допомогою можна створити лист, а потім спочатку вибрати пункт «Вставити», а потім «HTML», і вставити туди код своєї розсилки.

Інструменти

Вордпрессовскій плагін e-Newsletter дозволяє професійно управляти розсилками і абонентами. Причому і те, і інше робиться прямо через панель адміністратора WordPress. Ця обставина забезпечує повний контроль і абсолютно безкоштовно, що не може не радувати.

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

Відео: html лист - як відправити за допомогою mozilla thunderbird

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