Ответ
Делаем e-mail сообщение "как конфетка" Опции темы
Старый 28.03.2013, 01:07
  #1
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Делаем e-mail сообщение "как конфетка"
Даю правую руку на отсечение что у 90% здесь присутствующих существует система оповещения пользователей о новых поступлениях, система регистрации на сайте (форуме), или емейл-рассылк. И 99,9% используют для этих целей обычное текстовое письмо которое не привлекает внимание и игнорируется потенциальным посетителем (читаем посетитель, понимаем покупатель (дрон) и т.д.)

За свою практику мне пришлось неоднократно сталкиваться с дизайном писем, и надо сказать что я вывел для себя несколько правил которыми хочу поделится с вами.

Свои замечания хочу рзбить на следующие пункты

1 - Уважайте своих читателей. Не тратьте их время и внимание.
2 - Будьте вежливыми.
3 - Сосредоточьтесь на актуальность.
4 - Строим запоминающийся дизайн и призывом к действию.
5 - Делаем возможность отписаться.
6 - Кодим как будто находимся в 90-х (в буквальном смысле) с использованием встроенного CSS.
7 - Текст в письме.
8 - Картинки могут быть отключены.
9 - Не нарушает рамок закона.
10 - Проверьте все ДО отправки - потом буде ПОЗДНО

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





2. Будьте вежливы

Ниже приведен прекрасный пример как НЕ надо составлять e-mail послания.





Когда от сообщения за версту несет синтетическим автоматизмом, то 90% их просто проходит мимо не задевая целевой аудитории. Любой послание должно создавать впечатление целенаправленности, чтоб создать у читателя ощущение востребованности. Это подтвердилось в 2006 году после проведения опроса Return Path. Суть была в следующем - большинство пользователей подтвердили что после обращения к им по имени, они открывали и читали письмо не приравнивая его к СПАМу.

3. Информация в письме должна быть АКТУАЛЬНОЙ!.

Большинство писем сейчас приходят с указанием всяких скидок, акция, предложениями ненужных услуг и сервисов. Конечно, такие письма сразу попадают в папку СПАМ а причина - НЕАКТУАЛЬНОСТЬ. Это конечно исключается когда письмо пришло с форума на который юзер подписан или письмо с данными на активацию аккаунта и т.п, в данном месте я хочу уточнить на то что информация должна быть именно АКТУАЛЬНОЙ. Пример - человек регистрирует у вас премиум аккаунт, или подписывается на рассылку по теме N, в такном случае актуальным будет указание про скидку при покупке премиума на больший срок, или скидка при подписке на подраздел N-n или близко тематические раздел N1

4. От теории к практике - пример ниже очень отчетливо характеризует это правило.





Т.е.строим письмо в том же дизайне что и сайт, плюс размещаем призыв к действию. Как видите пользователь читая это письмо имеет ДВА призыва к действию в центре и в футере. т.е. расчет следующий - читающий интересует сразу и жмет большую среднюю кнопку или дочитывает до конца и жмет кнопку в футере. этот пункт лучше делать в паре с кем-то т.е.сделали диз - дали посмотреть 3-5 знакомым с вопросом "какие ассоциации вызывает дизайн и хочет ли нажать на кнопки". Если "ДА" - значит вы своего добились, если нет, думаем дальше.

5. Каким бы не было заманчивым и интересным ваше предложение - дайте получателю возможность ОТПИСАТСЯ от рассылки. Так как оно может утратить актуальность, быть отправленным по ошибке и т.д. причем не прячьте ссылку на отписку, потому что нажав ее , пользователь не занесет письмо в СПАМ список, а значит когда-то может опять получать ваши рассылки. Пример удачного варианта описывания ниже.





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

6. Несколько строк о технике дизайна. Надо заметить что за последнее время функционал стилей и методика дизайна ОЧЕНЬ поменялись. И в то время когда на фронте браузеров наметилось какое-то перемирие и компромисс - на фронте почтовых браузеров битва ведется из джунглей - тайно и подленько. Более детально я расскажу после, а в двух словах - налаживание стилей должно быть линейным - т.е. стиль сразу в своем елементе. Для удобства могу посоветовать приложение

http://inlinestyler.torchboxapps.com/





7. Текст в письме
Хоть мы и живем в 21 веке, многие почтовые клиенты еще не умеют работать с картинками и html письмами (поверьте и такое бывает). И хоть их количество уже исчисляется единицами, не стоит пренебрегать этой информацией. Поэтому в письме кроме картинок должен быть еще и текст. причем в такой форме, чтоб прочитав их в текстовом файле, пользователь понял о чем идет речь

8. Картинки. Беря во внимание предыдущий пункт, хочу заявить что даже если клиент умеет читать картинки (тот же gmail on-line), по умолчанию они ОТКЛЮЧЕНЫ. Т.е. чтоб увидеть всю красоту, получатель должен нажать на кнопку ВКЛЮЧИТЬ ИЗОБРАЖЕНИЯ. Согласитесь чтоб нажать ее, письмо должно заинтересовать читателя. И тут для примера (картинка конечно маленькая но смысл понятен) письмо с сайта Call of Duty с картинками и без.





Ответьте сами - вы бы включили картинки для варианта справа? 99% что НЕТ.

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

9. В ногу с законом
Это коротенький пункт в котором я хочу напомнить что в некоторых странах существует наказание за СПАМ, поэтому думайте отправлять письмо человеку из этой страны или нет. Даже скорее не так - стоит ли НАСИЛЬНО отправлять письмо получателю из этой страны (например США)

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

Советы по практике:





А. Включите ваш бренд в имени отправителя.

В. идентифицируйте себя в адресе

C. Обращайтесь к получателю по имени

D. Заголовок должен быть замечаемым





А. Должна быть он-лайн версия письма

B. Снипеты
Некоторые клиенты делают снипеты из письма - т.е. 100-150 символов из письма.

Поэтому постарайтесь в эти 100 символов вынести САМЫЙ важный текст

С. Точка Джонсона

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

• Поместите тут строку текста, которая описывает содержание или цель, которая мотивирует получателей.

• Старайтесь, чтобы заголовок был менее 150 пикселей по высоте чтобы избежать случайного нажатия


Советы по компоновке:

Идеальная ширина письма - от 500 до 650 пикселей.
Вертикальная планировка лучше горизонтальной.
Текст и картинки в одинаковых пропорциях
Для компоновки используйте табличную верстку
НИКАКИХ Flash иЛи JavaScript

Больше информации - в инфографике





Практика

Структурирование

НЕ правильно

    <div id="header">  
        <h4>Header 1</h4>  
    </div>  
    <div id="content">  
        Lorem ipsum dolor sit amet.  
    </div>f  
    <div id="footer">  
        Sign off and footer  
    </div>
Правильно

    <table>  
        <tr>  
            <td>Header 1</td>  
        </tr>  
        <tr>  
            <td>Lorem ipsum dolor sit amet.</td>  
        </tr>  
        <tr>  
            <td>Sign off and footer</td>  
        </tr>  
    </table>

Растягиваем ширину на 100% - это идеальный вариант


    <table width="100%">  
        <tr>  
            <td>  
                <table width="600" align="center">  
                    <tr>  
                        <td>Lorem ipsum dolor sit amet.</td>  
                    </tr>  
                </table>  
            </td>  
        </tr>  
    </table>  
Оформление ссылок

<a href="#" style="color:#000000; text-decoration:none;">Link</a>
Граница не работает (border)

Не будет работать

    <td width="600" style="border-right:1px solid #000000; border-left:1px solid #000000;">Lorem ipsum</td>
Работает

    <td width="1"></td>  
    <td width="598">Lorem ipsum dolor sit amet.</td>  
    <td width="1"></td>
Картинки в блоке

 <img src="image.jpg" style="display:block;">
Чтоб нормально отображалось в Hotmail Gmail

Пустая картинка в дизайне

Иногда даст искажение дизайна

    <td width="300">Lorem ipsum dolor sit amet</td>  
       <td width="10"></td>  
       <td width="300">Lorem ipsum dolor sit amet</td>
Работает как швейцарские часы

  <td width="300">Lorem ipsum dolor sit amet</td>  
       <td width="10"><img src="images/spacer.gif" width="10" height="1" /></td>  
       <td width="300">Lorem ipsum dolor sit amet</td>
Удачных рассылок, товарищи
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 29.03.2013, 18:24
  #2
290nps
 
Аватар для 290nps
Регистрация: 15.06.2012
Сообщений: 475

Информативно, написано на доступном языке. Есть над чем работать. Спасибо, плюсую.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 29.03.2013, 22:26
  #3
P1otr
 
Регистрация: 12.09.2012
Сообщений: 1,550

Присоединяюсь как раз хотел заняться рассылкой да вот не знал как грамотно оформить. +
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Актуальный список ФО: те, кто платят и "кидалы" VasyaS Файлообмен 102 02.09.2015 19:46
Сборник "SEO Монстр 2012" - узнай все тайны Alsu Статьи 20 10.10.2012 17:14
Создание "карманного" ФО за восемь шагов. creativius Хостинг 21 18.08.2012 03:01
WORDPRESS Пропала кнопка "Опубликовать" в соцсети traderved Вопросы 0 25.06.2012 13:32

Метки
e-mail, дизайн, мануал, рассылка


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 20:09. Часовой пояс GMT +3.