Роман Рыбальченко Встреча в рамках Клуба Интернет-Маркетологов: http://facebook.com/clubim

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

2. Роман Рыбальченко
Эксперт в интернет-маркетинге (более 5 лет опыта).
— Директор по маркетингу интернет-магазина Intimo
— Корпоративный тренер SEO-Studio
— Преподаватель интернет-маркетинга в 2-х школах.
Консультант
— Автор проекта Roma.net.ua
2

3. ППП
3

4. ✉ Дизайн форм
4

5. Pop-up плагины
5

6. 6

7. Форма опроса
7

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

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

10. Требования к письмам
• 600 px ширины
10

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

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

13. Требования к письмам
• Ссылка на веб-версию письма. В начале общих
рассылок должна быть ссылка “Не отображаются
изображения? Нажмите здесь!”
• Короткая форма меню + логотип.
• Адрес, телефоны, контакты.
• Вы получили это письмо потому что... Внизу письма
напоминаем пользователям какого @#$%^ они получили
письмо?
• Ссылка на отписку от рассылки. Может быть
расположена наверху письма. Может быть расположена
внизу.
13

14. 14

15. 15

16. 16

17. 17

18. 18

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

20. SUBSCRIBER
EXPERIENCE
FROM
NAME Consider
the
en5re
subscriber
experience
–
from
first
impression
to
final
click.
SUBJECT
LINE
Each
individual
phase
influences
the
decision
to
open
and
engage
with
your
email.
PREVIEW
PANE
Your
email
design
is
experienced
in
stages
–
ABOVE
THE
FOLD not
as
a
sta5c
page.
COMPLETE
EMAIL
CLICK

21. FROM
NAME
It
all
begins
with
the
From
Name
–
73%
of
subscribers
click
“Report
Spam”
or
“Report
Junk”
based
on
this
field.
IS
YOUR
FROM
NAME
EASILY
RECOGNIZABLE?
*Email
Sender
and
Provider
Coali5on

22. SUBJECT
LINE
69%
of
subscribers
click
“Report
Spam”
or
“Report
Junk”
based
on
this
line.*
IS
YOUR
SUBJECT
LINE
RELEVANT
AND
INTERESTING?
*Email
Sender
and
Provider
Coali5on

23. SUBJECT
LINE
69%
of
subscribers
click
“Report
Spam”
or
“Report
Junk”
based
on
this
line.*
IS
YOUR
SUBJECT
LINE
RELEVANT
AND
INTERESTING?

24. PREVIEW
PANE:
IMAGES
OFF
Images
are
disabled
by
default
more
than
50%
of
the
Xme.
Is
your
key
message
visible,
relevant
and
enXcing
in
this
space?
WHAT
IS
YOUR
EMAIL
SAYING
WITH
IMAGES
OFF?

25. 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
PREVIEW
PANE
DIMENSIONS:
300px
by
300px

26. ABOVE
THE
FOLD
Does
your
content
above
the
fold
provide
moXvaXon
to
respond?
Are
you
persuading
subscribers
to
scroll?
DON’T
CRAM
EVERYTHING
ABOVE
THE
FOLD…
INTRODUCE
CONTENT
ABOVE
THE
FOLD

27. COMPLETE
EMAIL
• Seconds
–
not
minutes
–
to
view
an
enXre
email
• Only
11%*
of
those
who
open
will
scroll
below
the
fold!
EVEN
IN
THIS
VIEW
THE
ENTIRE
EMAIL
IS
NOT
ONSCREEN
AT
ONCE
*The
Nielsen
Norman
Group

28. CLICK
THROUGH
Subscriber
experience
doesn’t
end
with
the
inbox
• 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.

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

30. CONTENT
HIERARCHY
Wireframe Preview
Pane
Above
the
Fold
Create
a
content
hierarchy,
arranging
each
content
element
(text
and/or
image)
and
associated
call
to
acXon
with
appropriate
weight.

31. VISUAL
HIERARCHY
Headlines
u5lizing
size
and
color
hierarchy
Secondary
calls-­‐to-­‐ac5on
“Quick
Bites”
or
summaries
Primary
call-­‐to-­‐ac5on
Maximize
response
by
creaXng
a
visual
hierarchy,
using
design
techniques
to
guide
the
subscriber's
eye
through
your
email
based
on
the
content
hierarchy.

32. ENGAGEMENT
TECHNIQUES
Preheader
Teaser
Text
Forward
to
a
Colleague
In
This
Issue
Read
More
Link
Subscriber
Q&A
Lifestyle
Imagery
Use
of
Background
Color
Link
to
External
Video
Recovery
Module
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.

33. RENDERING
RESULTS
Op5mized
Design Non-­‐op5mized
Design
Main
call-­‐to-­‐ac5on
in
prime
placement
HTML
text
in
web
safe
fonts
If
an
email
is
created
primarily
with
images,
it
will
not
display
Designed
with
image-­‐ effec5vely
when
blocking
and
preview
images
are
blocked.
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.

34. TESTED
QUALITY
Top
10
email
clients: Top
10
email
clients:
General
(B2B
&
B2C
combined) Florida
Power
&
Light
(B2C)
Yahoo!
Mail 29%
Outlook 43%
Hotmail 17% Outlook 21%
Yahoo!
Mail 13% Windows
Live
Hotmail 14%
Gmail 5% Apple
iPhone 7%
Apple
Mail 4% Apple
Mail 6%
iPhone 4% AOL
Mail 5%
Thunderbird 2.4% Comcast 3%
Windows
Live
Mail
(Desktop) 2% Windows
Live
Mail
(Desktop) 1%
AOL
Mail 1.2% Earthlink <1%
Lotus
Notes 0.4% Other
(<1%
each) ~13%
*Fingerprint
from
Litmus,
February
2010 *ExactTarget
via
Fingerprint
from
Litmus,
Feb.
2010
Only
comprehensive
tesXng
will
validate
successful
rendering
of
design
and
ensure
funcXonal
performance
prior
to
sending
to
the
subscriber
inbox.

35. 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

36. 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

37. Вдохновиться:
emailhub.ru
mail-archive.appspot.com
37

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

39. Открытая встреча №2
«Email-маркетинг»
11.04.2012, Киев. Клуб Интернет-Маркетологов
хеш-тег в Твиттере — #clubim
www.facebook.com/clubim