Recommended
More Related Content
Similar to Верстка писем. Часть 2
Similar to Верстка писем. Часть 2 (20)
More from Alexander Rys
More from Alexander Rys (20)
Верстка писем. Часть 2
- 3. Корректное отображение письма Обычная вёрстка: • веб-интерфейсы почтовых провайдеров (Mail.ru, Yandex, Gmail, Rambler, Yahoo, Outlook.com) • десктопные почтовые клиенты (Outlook 2003-2013, Thunderbird, Mac Mail) Адаптивная вёрстка: + мобильные почтовые клиенты (Android, iOS)
- 4. Вёрстка писем сильно отличается от вёрстки интернет-страниц. Не допускается использовать: • JavaScript • Flash • формы
- 6. Опрос прямо в письме
- 10. <!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>
- 12. Цвет (color) Текст, текст, текст, текст Интерлиньяж (line-height) Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст Текст, текст, текст, текст
- 13. line-height указан line-height не указан
- 14. Размер шрифта (font-size в px или pt) Текст, текст, текст, текст Гарнитура (font-family) Courier, Georgia, Times, Times New Roman Arial, Verdana, Tahoma, Trebuchet MS
- 15. <div style=“line-height:18px;"> <span style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;"> Пример текста </span> </div> Пример текста Специальные символы: ¶ = ¶ Σ = Σ ♥ = ♥ — = —
- 16. Только в этом году! «Висячие» предлоги Чтобы исключить «висячие» союзы и предлоги, используйте символ неразрывного пробела Никатинамидаденин­динуклеотидфосфат «Мягкий» перенос В некоторых случаях необходимо предусмотреть перенос длинных слов, для этого можно использовать спецсимвол ­
- 17. Указывайте атрибут 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>
- 18. Избегайте использования: • padding • margin Для вертикальных отступов используйте структуру: <div style=“height: 10px; line-height:10px; font-size:8px;”> </div>
- 20. <img src="img/img01.jpg" width="300" height="50" alt="Акция" border="0" style="display: block;" /> Следует указывать атрибуты • width (ширина изображения) • height (высота изображения) • alt (альтернативный текст) • style="display:block;"
- 22. <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 не прописан
- 24. Ширина изображения указана в процентах, при этом фактический размер изображения больше, чем отображаемый
- 25. Alt не имеет стилизации; alt значительно больше, чем может поместиться в размер изображения
- 26. Без загрузки изображенийС загрузкой изображений
- 27. Outlook 2007, 2010, 2013 не поддерживает background-image OtherOutlook 2007, 2010, 2013
- 28. Используйте сервис https://tools.emailmatrix.ru, чтобы обойти это ограничение
- 30. <!--[if !mso]><!--> <div class="preheader" style="font-size:0px;font-color:#ffffff;opacity:0;"> 4 варианта майских праздников от Localway. Сидеть дома в майские праздники — грех. </div> <!--<![endif]-->
- 33. Обычная вёрстка
- 34. Обычная вёрстка
- 36. • корректное отображение на любых устройствах • повышение лояльности подписчика • больший CTR • ограничения в дизайне
- 39. <!--[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
- 40. <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>
- 42. <!--[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]-->
- 43. <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>
- 44. <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>
- 50. …