1

Дизайн и требования к письмам

Роман Рыбальченко

2

Эксперт в интернет-маркетинге (более 5 лет опыта).

— Директор по маркетингу интернет-магазина Intimo

— Корпоративный тренер SEO-Studio

— Преподаватель интернет-маркетинга в 2-х школах. Консультант

— Автор проекта Roma.net.ua

ППП3

✉ Дизайн форм

4

5

Pop-up плагины

6

7

Форма опроса

8

Стимуляция к подписке

✉ Требования к письмам

9

10

Требования к письмам

• 600 px ширины

11

Требования к письмам

• В первый экран помещаться изображение или активная акцентированная кнопка / ссылка.

12

Требования к письмам

• Preview текст письма. Текст, который должен быть первым в коде. Мелким шрифтом, может “сливаться” с фоном

13

Требования к письмам• Ссылка на веб-версию письма. В начале общих рассылок должна быть ссылка “Не отображаются изображения? Нажмите здесь!”

• Короткая форма меню + логотип.

• Адрес, телефоны, контакты.

• Вы получили это письмо потому что... Внизу письма напоминаем пользователям какого @#$%^ они получили письмо?

• Ссылка на отписку от рассылки. Может быть расположена наверху письма. Может быть расположена внизу.

14

15

16

17

18

Письмо-приглашение

19

SUBSCRIBER  EXPERIENCE

Consider  the  en5re  subscriber  experience  –    from  first  impression  to  final  click.

Each  individual  phase  influences  the  decision  to  open  and  engage  with  your  email.

Your  email  design  is  experienced  in  stages  –  not  as  a  sta5c  page.

FROM  NAME

SUBJECT  LINE

PREVIEW  PANE

ABOVE  THE  FOLD

COMPLETE  EMAIL

CLICK  

*Email  Sender  and  Provider  Coali5on

It  all  begins  with  the  From  Name  –  73%  of  subscribers  click  “Report  Spam”  or  “Report  Junk”  based  on  this  field.  

FROM  NAME

IS  YOUR  FROM  NAME  EASILY  

RECOGNIZABLE?

SUBJECT  LINE

*Email  Sender  and  Provider  Coali5on

69%  of  subscribers  click  “Report  Spam”  or  “Report  Junk”  based  on  this  line.*

IS  YOUR  SUBJECT  LINE  RELEVANT  

AND  INTERESTING?

IS  YOUR  SUBJECT  LINE  RELEVANT  

AND  INTERESTING?

SUBJECT  LINE

69%  of  subscribers  click  “Report  Spam”  or  “Report  Junk”  based  on  this  line.*

Images  are  disabled  by  default  more  than  50%  of  the  Xme.  Is  your  key  message  visible,  relevant  and  enXcing  in  this  space?  

PREVIEW  PANE:  IMAGES  OFF

WHAT  IS  YOUR  EMAIL  SAYING

 WITH  IMAGES  OFF?

PREVIEW  PANE:  IMAGES  ON

What’s  your  open  rate?  Only  subscribers  that  turn  images  on  trigger  an  open.Are  you  giving  them  a  reason  to  keep  reading?  

AVERAGE  PREVIEWPANE  DIMENSIONS:300px  by  300px

ABOVE  THE  FOLD

Does  your  content  above  the  fold  provide  moXvaXon  to  respond?    Are  you  persuading  subscribers  to  scroll?

DON’T  CRAMEVERYTHING

ABOVE  THE  FOLD…INTRODUCE  CONTENTABOVE  THE  FOLD

*The  Nielsen  Norman  Group

COMPLETE  EMAIL

•Seconds  –  not  minutes  –  to  view  an  enXre  email

•Only  11%*  of  those  who  open  will  scroll  below  the  fold!

EVEN  IN  THIS  VIEWTHE  ENTIRE  EMAIL  IS  NOT  

ONSCREEN  AT  ONCE

Subscriber  experience  doesn’t  end  with  the  inbox

CLICK  THROUGH

•Don’t  ignore  the  transiXon  to  your  website,  landing  page,  or  other  markeXng  collateral.  

• Ensure  the  products  in  your  email  are  available  on  your  site  -­‐  be`er  yet,  map  the  individual  products  from  the  email  to  a  product  page.

Visual  recogniXon  of  the  brand  across  all  media  channels  creates  a  seamless  brand  experience,  creaXng  trust  to  engage  and  transact.

Email

Website

BRAND  SYNERGY

Create  a  content  hierarchy,  arranging  each  content  element  (text  and/or  image)  and  associated  call  to  acXon  with  appropriate  weight.

Wireframe Preview  Pane  

Above  the  Fold

CONTENT  HIERARCHY

Maximize  response  by  creaXng  a  visual  hierarchy,  using  design  techniques  to  guide  the  subscriber's  eye  through  your  email  based  on  the  content  hierarchy.

Primary  call-­‐to-­‐ac5on

Secondary  calls-­‐to-­‐ac5on

VISUAL  HIERARCHY

Headlines  u5lizing  size  and  color  hierarchy

“Quick  Bites”  or  summaries

Use  design  techniques  to  engage  the  subscriber  through  a  mix  of  emoXve  and  raXonal  imagery  and  content.  Smart  use  of  images,  borders,  bu`ons,  links,  charts,  colored  backgrounds,  etc.  should  

be  applied  and  tested.

Preheader  Teaser  Text    

In  This  Issue

Lifestyle  Imagery

Link  to  External  Video

Forward  to  a  Colleague

Subscriber  Q&A

Recovery  Module

Read  More  Link

Use  of  Background  Color

ENGAGEMENT  TECHNIQUES

Op5mized  Design Non-­‐op5mized  Design

If  an  email  is  created  primarily  with  images,it  will  not  display  effec5vely  when  images  are  blocked.

HTML  text  in  web  safe  fonts  

Main  call-­‐to-­‐ac5on  in  prime  placement  

Designed  with  image-­‐blocking  and  preview  pane  viewing  in  mind.

Ensure  your  design  efforts  are  viewed  as  intended  once  they  hit  the  inbox.  Emails  that  are  created  with  the  subscriber  experience  in  mind  will  have  a  greater  chance  

of    success.

RENDERING  RESULTS

Top  10  email  clients:General  (B2B  &  B2C  combined)Outlook 43%

Hotmail 17%

Yahoo!  Mail 13%

Gmail 5%

Apple  Mail 4%

iPhone 4%

Thunderbird 2.4%

Windows  Live  Mail  (Desktop) 2%

AOL  Mail 1.2%

Lotus  Notes 0.4%

Only  comprehensive  tesXng  will  validate  successful  rendering  of  design  and  ensure  funcXonal  performance  prior  to  sending  to  the  subscriber  inbox.

*Fingerprint  from  Litmus,  February  2010

Top  10  email  clients:Florida  Power  &  Light  (B2C)Yahoo!  Mail 29%

Outlook 21%

Windows  Live  Hotmail 14%

Apple  iPhone 7%

Apple  Mail 6%

AOL  Mail 5%

Comcast 3%

Windows  Live  Mail  (Desktop) 1%

Earthlink <1%

Other  (<1%  each) ~13%

TESTED  QUALITY

*ExactTarget  via  Fingerprint  from  Litmus,  Feb.  2010

NEWSLETTER  DESIGN  CONSIDERATIONS

• Include  a  Table  of  Contents  or  In  This  Issue  SecXon

• Include  a  3-­‐4  sentence  teaser  for  arXcles  with  a  “Read  More”  link  instead  of  including  the  full  arXcle

• Introduce  your  main  call-­‐to-­‐acXon  within  the  preview  pane  and  other  important  content  above  the  fold

• Develop  a  visual  hierarchy  for  headings,  subheading,  and  body  copy  for  easy  scan-­‐ability

• Use  images  selecXvely  to  eye  track  to  engagement  areas

THE  MOBILE  INBOX

• Smartphone  users  use  mobile  email  primarily  for  triage

• There  are  no  standards  in  place  for  displaying  emails  on  smartphones

• Most  mobile  devices  display  a  “stripped  down”  version  of  the  HTML  porXon  of  an  email,  NOT  the  plain-­‐text  version

• OpXmizing  your  emails  with  HTML  text  in  web-­‐safe  fonts  will  benefit  smartphone  users  as  well

• Consider  including  a  link  in  your  email  to  view  a  mobile  friendly  version  of  your  email

Вдохновиться:emailhub.ru

mail-archive.appspot.com

37

Задавайте вопросы.R@Roma.net.ua

38

Открытая встреча №2 «Email-маркетинг»

11.04.2012, Киев. Клуб Интернет-Маркетологов хеш-тег в Твиттере — #clubim

www.facebook.com/clubim