Верстка писем, набор сниппетов



    Автор изображения MVBen

    До русских заказчиков наконец таки дошло, что мобильный веб набрал достаточные обороты для того, чтобы тратиться на его поддержку, в том числе и в рассылках. Ко мне все чаще обращаются с тем, чтобы сверстать письмо, которое бы адекватно смотрелось не только в зоопарке всевозможных почтовых клиентов и вебморд, но и на планшетах и смартфонах.

    В ходе работ у меня накопилось немного готовых решений, которые я сам ныне держу у себя под рукой и крайне часто использую, чем и с вами хочу поделиться.

    Обертка


    html
    <table id="wrapper" align="center" width="600" cellpadding="20" cellspacing="0" style="border-collapse: collapse;">
    <tr>
    <td>
    text
    </td>
    </tr>
    </table>
    

    css
    @media only screen and (max-width:600px) {
    	#wrapper {
    		width:100% !important;
    	}
    }
    

    Получаем обертку письма в 600px, которая будет растягиваться на 100% ширину на экранах < 600px в ширину.

    Картинка, обтекаемая текстом


    Суть проста. Создаем табличку с ячейкой картинки и ячейкой отступа, которая будет отбивать текст от картинки. На мобильных платформах прячем отбивку, а табличку с картинкой растягиваем на всю ширину контейнера-обертки.

    Одно небольшое замечание. Gmail приложение на Android не понимает media_queries, и работает на небольшой магии. Оно самостоятельно вытянет обертку письма по ширине экрана, и таблицу с шириной, заданной в процентах тоже. Единственным косяком будет то, что мы не можем спрятать отбивку. Но это не так ужасно.

    html
    <table align="left" class="picture" width="40%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; float:left;">
    		<tr>
    			<td valign="top">
    			<img style="width:100%;" src="picture.jpg" style="display:block;">
    			</td>
    			<td class="float_fix" width="20"><img src="blank.gif" style="display:block;" width="20" height="20"></td>
    		</tr>
    </table>
    

    css
    @media only screen and (max-width:320px) {
    	.picture {
    		width:100% !important;
    		float:none !important;
    		display:block !important;
    	}	
    	.float_fix {
    		display:none !important;
    	}
    }
    

    Если вы обладаете более элегантным решением, прошу в камменты.

    Картинка на всю ширину блока


    Тут все просто. Устанавливаем изображению 100% ширину и придаем блочность, и добавляем перенос строки перед и после картинки.

    <br>
    <img src="picture.jpg" style="display:block; width:100%;">
    <br>
    


    Отцентрированная картинка


    Не используем блочность, ибо в некоторых почтовиках она ломает выравнивание. Прописываем media queries для растягивания картинки на меньших экранах.

    html
    <div align="center">
    <img class="picture" src="picture.jpg" width="400">
    </div>
    

    css
    @media only screen and (max-width:400px) {
    	.picture {
    		width:100% !important;
    	}
    }
    


    Плитка


    Задача: разместить шесть блоков с товарами(например), чтоб они падали друг под друга на небольших экранах и растягивались в зависимости от размера экрана.

    Исходный элемент плитки, который мы размножим на шесть элементов:
    <table class="tile" align="left" width="33%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    	<tr>
    		<td>
    			<table width="100%" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
    				<tr>
    					<td>
    						<a href="#" border="0" target="_blank" style="text-decoration:none;">
    							<img style="width:100%;" src="picture.jpg" border="0">
    						</a>
    					</td>
    				</tr>
    				<tr>
    					<td style="line-height:20px;">
    						<span style="font-family:georgia; font-size:14px; color:#333333;">
    							<a href="#" target="_blank" style="color:#000000 !important;">Ссылка</a>
    							Текст
    						</span>
    					</td> 
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>
    

    И CSS для него:
    @media only screen and (max-width:480px) {
    	.tile {
    		width:50% !important;
    	}
    }
    
    @media only screen and (max-width:320px) {
    	.tile {
    		width:100% !important;
    	}
    }
    

    В итоге получаем по три элемента по умолчанию, по два элемента в строке на < 480px по ширине экрана. И столбик элементов при разрешении в < 320px;

    Напоследок


    Обязательно привожу табличку из замечательного топика блога компании badoo для того, чтобы понимать, какие media queries необходимо прописывать под конкретные устройства. Ну и настоятельно рекомендую ознакомиться с материалом по ссылке для более детального изучения.

    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 16
    • НЛО прилетело и опубликовало эту надпись здесь
      • –5
        Я не вижу куч корпоративного уг в рассылках соцсетей, аймобилки, гудридс и множества отличных сервисов.
        А про уринотерапию. От чего же не ссать, если деньги это приносит отличные?
        • 0
          Скажу больше. Знаю не одну компанию, которая успешно торгует, используя plain/text письма. А у других на html письмах конверсия больше. И что же теперь? Им отказаться от прибыли?
          • 0
            Согласен с оратором выше. Хорошо когда нормально оформили текстовое письмо, может добавили несколько изображений. Ну а внизу написано «Спасибо, Уважаемый»
            • +3
              Можно сколько угодно хвалить текстовые письма, ровно как и рукописные. С другой стороны если стараешься сделать интересную рассылку не для гиков — прийдется постараться сделать ее красивой. Посмотрите на письма рассылки от vimeo, twitter, facebook, linkedin, amazon — все они сверстаны и с картинками и точно не в Plain Text.
              • +2
                По работе мне часто приходилось иметь дело с почтовыми рассылками, и могу сказать точно — это очень важная часть работы с клиентами. Иногда достаточно одного письма, которое определит — станет ли получатель благодарным клиентом, или возненавидит вашу рассылку, да и всю компанию, лютой ненавистью. Поэтому у меня тоже сложился небольшой список рекоммендаций, большинство из которых не секрет для тех, кто имел дело с рассылками.

                — Табличная вёрстка — это вынужденная мера. Дело в том, что и сегодня, многие почтовые клиенты (включая веб интерфейсы), «режут» многие CSS фичи. Человек, получающий от вас письма с «разорванной вёрсткой, скорее всего, занесёт вас в игнор.
                — Встраивать CSS в HTML — опять же, многие из почтовых клиентов, „режут“ внешние стили и тем более, скрипты.
                — Никаких Javascript'ов не должно быть и в помине.
                — Большинство клиентов (например, тот же веб-клиент gmail) по умолчанию „режут“ внешние изображения (хотя их можно включить), но нельзя поддаваться соблазну прикреплять картинки аттачментом — во-первых, это ненужный траффик и сильно замедляет отправку писем, а во-вторых, выглядит достаточно подозрительно.
                — Inline-стили, как бы они не выглядели противно, тоже приходится использовать.
                — Сообщения, содержажие большое разнообразие шрифтов и цветов — за это надо отрубать руки по самые плечи.

                Письма, в первую очередь, не должны вызывать раздражение у получателя. Всегда должна быть возможность отписаться от рассылки одним кликом — без необходимости вспоминать логин и пароль на сайте для входа в личный кабинет. Когда-то у нас возникла проблема: слишком большое количество жалоб на спам (хотя сообщения спамом и не являлись, т.к все пользователи регистрировались добровольно) — тогда мы добавили ссылку на отписку не только в конце письма, но и в начале, и выделили всю строку красным цветом. Количество жалоб на спам сразу значительно уменьшилось.

                Да, рассылки в plain text, имхо, это так же плохо, как и рассылки в стиле рекламы виагры с кучей шрифтов и цветов — в большинстве случаев, их никто не будет читать.
                • +1
                  wearymax, а не могли бы вы рассказать подробней, как получили такую аналитику, как пришли пришли к таким выводам? Это действительно интересно, потому что у меня другие результаты и хотелось бы сравнить подходы
                • 0
                  Надеюсь будут полезны рекомендации от Subscribe.ru. Обещают, что если следовать им, то 100% везде будет нормально.
                  • +4
                    Инфа устарела годика на три так точно(даже копирайт на 11 году заканчивается). Там используются хаки для старых багов mail.ru, которых уже и в помине не существует. Ни слова об адаптивной верстке.
                  • +1
                    Хотелось бы увидеть не только код, но и preview этой верстки.
                  • +1
                    Верстать рассылки — адок еще тот.
                    Только повышенная конверсия может все оправдать. Если действительно повышенная.

                    • –1
                      Скажем так — адок это для типичных верстальщиков сайтов, которые пытаются верстать письмо, не сильно вникая в подробности. На деле все куда проще.
                  • 0
                    Возможно, будут полезны эти материалы — emailology и пустой шаблон от boilerplate.

                    Мне вот интересно, а тестируете свой markup вы как? Сервис какой или ручками?
                    • –1
                      Западные решения хороши для западного рынка. На нас они не рассчитаны. Отмечу бойлерплейт — прекрасная вещь.

                      Тестирование — литмус + ручки

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.