Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Корректное отображение письма
Обычная вёрстка:
• веб-интерфейсы почтовых
провайдеров (Mail.ru, Yandex, Gmail,
Rambler, Yah...
Вёрстка писем сильно отличается от вёрстки интернет-страниц.
Не допускается использовать:
• JavaScript
• Flash
• формы
Опрос прямо в письме
Табличная вёрстка
preheader
header
content
footer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta...
Цвет (color)
Текст, текст, текст, текст
Интерлиньяж (line-height)
Текст, текст, текст, текст
Текст, текст, текст, текст
Те...
line-height указан line-height не указан
Размер шрифта (font-size в px или pt)
Текст, текст, текст, текст
Гарнитура (font-family)
Courier, Georgia, Times, Times Ne...
<div style=“line-height:18px;">
<span style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;">
При...
Только в&nbsp;этом году!
«Висячие» предлоги
Чтобы исключить «висячие» союзы и предлоги, используйте символ
неразрывного пр...
Указывайте атрибут target со значением _blank у ссылок
<a href=“#” target=“_blank” style="font-family: Tahoma, Arial, sans...
Избегайте использования:
• padding
• margin
Для вертикальных отступов
используйте структуру:
<div style=“height: 10px; lin...
<img src="img/img01.jpg" width="300" height="50" alt="Акция" border="0"
style="display: block;" />
Следует указывать атриб...
style="display:block;"
не прописан
style="display:block;"
прописан
<td style= "line-height:10px;" />
<img src="img/border_t.png" width="300" height="10" alt="" border="0"
style="display: bl...
border=“0"
не прописан
Ширина изображения
указана в процентах,
при этом фактический
размер изображения
больше, чем
отображаемый
Alt не имеет стилизации;
alt значительно больше, чем может поместиться в
размер изображения
Без загрузки изображенийС загрузкой изображений
Outlook 2007, 2010, 2013 не поддерживает background-image
OtherOutlook 2007, 2010, 2013
Используйте сервис
https://tools.emailmatrix.ru,
чтобы обойти это ограничение
<!--[if !mso]><!-->
<div class="preheader" style="font-size:0px;font-color:#ffffff;opacity:0;">
4 варианта майских праздни...
Обычная вёрстка
Обычная вёрстка
Адаптивная вёрстка
• корректное отображение на
любых устройствах
• повышение лояльности
подписчика
• больший CTR
• ограничения в дизайне
<!--[if gte mso 9]>
<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr><td width=“50%”>
<![endif]-->
Текст...
<body style="margin:0px;padding:0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="cent...
<!--[if (gte mso 9)|(IE)]>
<table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
Блок1
<!--[...
<div style="display: inline-block;vertical-align:top;width:200px;">
<table width="200" border="0" cellspacing="0" cellpadd...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="left"><!–- block1
--><div style="display: i...
…
https://litmus.com https://www.emailonacid.com
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Верстка писем. Часть 2
Nächste SlideShare
Wird geladen in …5
×

Верстка писем. Часть 2

679 Aufrufe

Veröffentlicht am

Верстка писем. Часть 2

Veröffentlicht in: Business
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Верстка писем. Часть 2

  1. 1. Корректное отображение письма Обычная вёрстка: • веб-интерфейсы почтовых провайдеров (Mail.ru, Yandex, Gmail, Rambler, Yahoo, Outlook.com) • десктопные почтовые клиенты (Outlook 2003-2013, Thunderbird, Mac Mail) Адаптивная вёрстка: + мобильные почтовые клиенты (Android, iOS)
  2. 2. Вёрстка писем сильно отличается от вёрстки интернет-страниц. Не допускается использовать: • JavaScript • Flash • формы
  3. 3. Опрос прямо в письме
  4. 4. Табличная вёрстка
  5. 5. preheader header content footer
  6. 6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title> - </title> </head> <body style="padding:0px;margin:0px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" bgcolor="#ffffff"> <table border="0" cellspacing="0" cellpadding="0" width="600"> <tr><td> <!--preheader --> </td></tr> <tr><td align="center"> <!--header --> </td></tr> <tr><td align="center"> <!--content --> </td></tr> <tr><td align="center"> <!--footer --> </td></tr> </table> </td></tr> </table> </body> </html>
  7. 7. Цвет (color) Текст, текст, текст, текст Интерлиньяж (line-height) Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст
  8. 8. line-height указан line-height не указан
  9. 9. Размер шрифта (font-size в px или pt) Текст, текст, текст, текст Гарнитура (font-family) Courier, Georgia, Times, Times New Roman Arial, Verdana, Tahoma, Trebuchet MS
  10. 10. <div style=“line-height:18px;"> <span style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;"> Пример текста </span> </div> Пример текста Специальные символы: ¶ = &para; Σ = &Sigma; ♥ = &hearts; — = &mdash;
  11. 11. Только в&nbsp;этом году! «Висячие» предлоги Чтобы исключить «висячие» союзы и предлоги, используйте символ неразрывного пробела &nbsp; Никатинамидаденин&shy;динуклеотидфосфат «Мягкий» перенос В некоторых случаях необходимо предусмотреть перенос длинных слов, для этого можно использовать спецсимвол &shy;
  12. 12. Указывайте атрибут target со значением _blank у ссылок <a href=“#” target=“_blank” style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;text-decoration:none;"> Пример текста </a> Старайтесь избегать использования URL в качестве текста ссылки <a href=“http://google.com” target=“_blank” style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;text-decoration:none;"> http://google.com </a>
  13. 13. Избегайте использования: • padding • margin Для вертикальных отступов используйте структуру: <div style=“height: 10px; line-height:10px; font-size:8px;”>&nbsp;</div>
  14. 14. <img src="img/img01.jpg" width="300" height="50" alt="Акция" border="0" style="display: block;" /> Следует указывать атрибуты • width (ширина изображения) • height (высота изображения) • alt (альтернативный текст) • style="display:block;"
  15. 15. style="display:block;" не прописан style="display:block;" прописан
  16. 16. <td style= "line-height:10px;" /> <img src="img/border_t.png" width="300" height="10" alt="" border="0" style="display: block;" /> </td> line-height прописан line-height не прописан
  17. 17. border=“0" не прописан
  18. 18. Ширина изображения указана в процентах, при этом фактический размер изображения больше, чем отображаемый
  19. 19. Alt не имеет стилизации; alt значительно больше, чем может поместиться в размер изображения
  20. 20. Без загрузки изображенийС загрузкой изображений
  21. 21. Outlook 2007, 2010, 2013 не поддерживает background-image OtherOutlook 2007, 2010, 2013
  22. 22. Используйте сервис https://tools.emailmatrix.ru, чтобы обойти это ограничение
  23. 23. <!--[if !mso]><!--> <div class="preheader" style="font-size:0px;font-color:#ffffff;opacity:0;"> 4 варианта майских праздников от Localway. Сидеть дома в майские праздники — грех. </div> <!--<![endif]-->
  24. 24. Обычная вёрстка
  25. 25. Обычная вёрстка
  26. 26. Адаптивная вёрстка
  27. 27. • корректное отображение на любых устройствах • повышение лояльности подписчика • больший CTR • ограничения в дизайне
  28. 28. <!--[if gte mso 9]> <table width="400" border="1" cellspacing="0" cellpadding="0"> <tr><td width=“50%”> <![endif]--> Текст1 <!--[if gte mso 9]> </td><td width=“50%”> <![endif]--> Текст2 <!--[if gte mso 9]> </td></tr> </table> <![endif]--> Outlook other Текст1 Текст2Текст1 Тест2
  29. 29. <body style="margin:0px;padding:0px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" bgcolor="#ffffff"> <!--[if (gte mso 9)|(IE)]> <table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td> <![endif]--> <div style="max-width:600px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table600" style="max-width: 600px;min-width:300px;"> <tr><td align="center" > Тело письма </td></tr></table> </div> <!--[if (gte mso 9)|(IE)]> </td></tr> </table> <![endif]--> </td></tr> </table> </body>
  30. 30. <!--[if (gte mso 9)|(IE)]> <table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td> <![endif]--> Блок1 <!--[if (gte mso 9)|(IE)]></td><td><![endif]--> Блок2 <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]-->
  31. 31. <div style="display: inline-block;vertical-align:top;width:200px;"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="left"> <tr><td align="left" valign="middle"> Блок </td></tr> </table> </div>
  32. 32. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="left"><!–- block1 --><div style="display: inline-block;vertical-align: top;width:200px;"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="left"> <tr><td align="left" valign="middle"> Блок 1 </td></tr> </table> </div><!–- block1 END --><!--[if (gte mso 9)|(IE)]> </td><td> <![endif]--><!–- block2 --><div style="display: inline-block;vertical-align:top;width:200px;"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="left"> <tr><td align="left" valign="middle"> Блок 2 </td></tr> </table> </div><!–- block2 END --></td></tr> </table>
  33. 33.
  34. 34. https://litmus.com https://www.emailonacid.com

×