Дизайн e-mail для мобильных устройств

Вы регулярно рассылаете письма настоящим и будущим заказчикам? Тогда стоит учитывать тот факт, что не менее трети из них просматривают почту на смартфонах и мобильных телефонах. И доля таких клиентов продолжает расти.
Между тем письмо, выглядящее прилично, даже красиво оформленным на десктопных приложениях, могут смотреться просто ужасно. Или просто нечитаемыми. Очевидно, что такими потерями пренебрегать нельзя. Как же сделать письма читаемыми на мобильных устройствах?

1. Не используйте шаблоны шириной более 600 пикселей;

2. Не используйте многоколоночные шаблоны. На узком экране для них просто недостаточно места. Либо текст будет слишком мелким, либо часть макета останется за экраном;

3. iPhone увеличивает шрифт до 13 пикселей. В макете не стоит использовать шрифты меньшего размера. Автоматически увеличенный шрифт может всю ее перекосить;

4. Сократите объем письма. Самое главное поместите на самом верху. Проматывать пальцем сложнее, чем мышкой, многие не станут;

5. Скрывайте кнопки Like и другие неуместные элементы. Используйте для этого display:none.

6. Есть хорошее правило для подготовки писем для e-mail рассылки. Оно предписывает по возможности описывать все стили в документе HTML, и не использовать отдельный стилевой файл CSS.

Например ,мобильные стили в HTML-коде письма может выглядеть так:

<style type="text/css">
@media only screen and (max-device-width: 480px)
{
           /* сюда пишутся стили для мобильных платформ */
}
/* сюда пишется CSS для десктопа */
</style>


Удачи вам! Несколько советов по адаптивной верстке писем для мобильных устройств дала Веб-студия "АКРИТ". Разработка и продвижение сайтов на CMS «1С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.


Назад в раздел