Адаптивные письма? Пожалуйста!

    Доброго дня.

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

    Итак, письмо:



    Футер нас не особо интересует, ибо там все ок.

    Вот, что мы видим на экране телефона в Android Gmail:



    Все поехало. Если же мы откроем письмо в Android Mail, то оно будет нормально отображаться, за исключением того, что появится горизонтальная прокрутка. Т.е. письмо не адаптировано под экран смартфона. Этим я и займусь.

    Изучаем исходный код письма:



    В целом все адекватно, вроде делали умные люди, но не тут то было. Используются padding'и для блочных элементов, форматирование текста задается через font, ссылки на оборачиваются span'ами с заданием цвета. В общем наплевали на Outlook, по большому счету. Так и есть, в аутлуке наблюдается ряд «косяков», но они не смертельны. Дальнейший анализ кода показал отсутствие попыток адаптировать письмо под небольшие экраны.

    Прежде, чем перейти ближе к делу, заострим внимание на еще одном моменте. Список входящих писем:



    Отправитель — Яндекс Деньги. Ок.
    Тема — Вы заплатили со счета
    Далее текст письма — Платеж успешно выполнен. Это Все хорошо. Но зачем дублировать «Яндекс Деньги»? А появилась эта фраза из-за того, что у логотипа проставлен alt=«Яндекс Деньги». Зачем? Не вижу объективных причин. Можно было бы сослаться на подпись для тех, у кого не загружены картинки. Так почему бы не слать логотип вложением? Тогда он будет показан в любом случае.

    Ближе к делу


    Смотрим, как можно адаптировать письмо. Для этого, прежде всего, изучим графику. На деле ее оказалось не мало.











    Звездочки и отстрочку можно было бы просто ужимать до 100% для резиновости адаптивного макета, но тут всплывают два ощутимых минуса:
    1. Нижняя часть скрепки является отдельным элементом
    2. Звездочки и знаки "=" достаточно мелкие и их ужимание приведет к тому, что они будут плохо читаемы.

    Но давайте попробуем ужать то, то есть.

    Вот такой результат я получил после пары экспериментов с процентными величинами:



    Исходный код для любопытных
    <meta charset="utf-8">
    <style>
    	body {
    		margin:0;
    	}
    	@media only screen and (max-width:442px) {
    		.wrapper { width:100% !important; }
    		.image { width:100% !important; }
    	}
    </style>
    <table background="https://money.yandex.ru/i/html-letters/bg_texture.png" style="background:url('https://money.yandex.ru/i/html-letters/bg_texture.png');" width="100%" cellpadding="0"cellspacing="0" style="border-collapse:collapse;">
    	<tr>
    		<td>
    			<table class="wrapper" align="center" width="442" cellpadding="0"cellspacing="0" style="border-collapse:collapse;">
    				<tr>
    					<td>
    						<table cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
    							<tr>
    								<td width="129" height="74" align="right" valign="bottom">
    									<a href="https://money.yandex.ru/?_openstat=mail;inform;outpay;logo;" title="Яндекс.Деньги" target="_blank"><img src="1450828500872069127971" width="109" height="44" style="border:none; display:block;"></a>
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2">
    						<img class="image" src="https://money.yandex.ru/i/html-letters/check_top.png" style="display:block;">
    					</td>
    				</tr>
    				<tr>
    					<td bgcolor="#ffffff" style="width:83.4%">2121212</td>
    					<td style="width:16.6%" align="right">
    						<img src="https://ci6.googleusercontent.com/proxy/dFUGdcNglNxVtEnimrOQ01vQq4EmO9xg-f8-inzwIGK54WOzI8aV93hILcFvYwSGOWuHq9I2rG1sjA7UGWPs9ecvZRhJukTOSgNmlw=s0-d-e1-ft#https://money.yandex.ru/i/html-letters/check_clips.png" width="74" alt="" style="display:block; width:100%;">
    					</td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>


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

    Экспериментирую


    Решил попробовать пока забить на скрепку и реализовать ребристый верх при помощи СSS.


    Это максимум, что у меня получилось.
    Исходный код
    <meta charset="utf-8">
    <style>
    	body {
    		margin:0;
    	}
    	@media only screen and (max-width:442px) {
    		.wrapper { width:100% !important; }
    		.image { width:100% !important; }
    	}
    </style>
    <table background="https://money.yandex.ru/i/html-letters/bg_texture.png" style="background:url('https://money.yandex.ru/i/html-letters/bg_texture.png');" width="100%" cellpadding="0"cellspacing="0" style="border-collapse:collapse;">
    	<tr>
    		<td>
    			<table class="wrapper" align="center" width="442" cellpadding="0"cellspacing="0" style="border-collapse:collapse;">
    				<tr>
    					<td>
    						<table cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
    							<tr>
    								<td width="129" height="74" align="right" valign="bottom">
    									<a href="https://money.yandex.ru/?_openstat=mail;inform;outpay;logo;" title="Яндекс.Деньги" target="_blank"><img src="1450828500872069127971" width="109" height="44" style="border:none; display:block;"></a>
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<table style="border-top:#ffffff 1px dashed" bgcolor="#d9d9d9" align="center" width="422" height="10" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    							<tr>
    								<td bgcolor="#ffffff" style="border-left:#d9d9d9 1px solid; border-right:#d9d9d9 1px solid; border-top:#d9d9d9 1px dashed;">
    									
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>


    Вполне неплохо, но не тянет на исходный вариант. Можно реализовать через фоновое изображение, но в этом случае мы потерям аутлук. Хотя кого это беспокоит? Ах-да, меня! Хорошо, реализуем вариант без скрепки и с CSS «огрызком» бумаги.

    А вот и результат:


    Исходный код
    <meta charset="utf-8">
    <style>
    	body {
    		margin:0;
    	}
    	@media only screen and (max-width:442px) {
    		.wrapper { width:100% !important; }
    		.check { width:100% !important;}
    		.image { width:100% !important; }
    		.tile { width:100% !important; float:none !important; width:185px !important; margin:auto; }
    	}
    </style>
    <table background="https://money.yandex.ru/i/html-letters/bg_texture.png" style="background:url('https://money.yandex.ru/i/html-letters/bg_texture.png');" width="100%" cellpadding="0"cellspacing="0" style="border-collapse:collapse;">
    	<tr>
    		<td>
    			<table class="wrapper" align="center" width="442" cellpadding="0"cellspacing="0" style="border-collapse:collapse;">
    				<tr>
    					<td>
    						<table cellpadding="20" cellspacing="0" style="border-collapse:collapse;">
    							<tr>
    								<td width="119" height="74" align="right" valign="bottom">
    									<a href="https://money.yandex.ru/?_openstat=mail;inform;outpay;logo;" title="Яндекс.Деньги" target="_blank"><img src="1450828500872069127971" width="109" height="44" style="border:none; display:block;"></a>
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    							<tr>
    								<td width="12" height="10"></td>
    								<td>
    									<table style="border-top:#ffffff 1px dashed;" bgcolor="#d9d9d9" align="center" width="100%" height="8" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    										<tr>
    											<td height="10" bgcolor="#ffffff" style="border-left:#d9d9d9 1px solid; border-right:#d9d9d9 1px solid; border-top:#d9d9d9 1px dashed;">
    												<img src="1450828500759510397803" width="10" height="10" alt="" style="display:block;">
    											</td>
    										</tr>
    									</table>
    								</td>
    								<td width="12" height="10"></td>
    							</tr>
    						</table>
    						<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    							<tr>
    								<td width="11" style="border:#d9d9d9 1px solid; border-bottom:none; border-right:none;"><img src="1450828500759510397803" width="10" height="10" alt="" style="display:block;"></td>
    								<td>
    									<table bgcolor="#d9d9d9" class="check" align="center" width="100%" cellpadding="5" cellspacing="0" style="border-bottom:#ffffff 1px dashed; border-left:#d9d9d9 1px solid; border-right:#d9d9d9 1px solid;">
    										<tr>
    											<td bgcolor="#ffffff" style="border-bottom:#d9d9d9 1px dashed;">
    												<div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">*****************************</span></div>
    												<div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">Платеж успешно выполнен</span></div>
    												<div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">=============================</span></div>
    												
    												
    												
    												<table width="100%" cellpadding="15" cellspacing="0" style="border-collapse:collapse;">
    													<tr>
    														<td>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">Назначение платежа</span></div>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b>Магазин PYATEROCHKA 38</b></span></div>
    															<div style="line-height:0;"><img src="1450828500759510397803" style="display:block;" width="10" height="10" alt=""></div>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">Дата и время</span></div>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b>16.02.2014 19:27</b></span></div>
    															<div style="line-height:0;"><img src="1450828500759510397803" style="display:block;" width="10" height="10" alt=""></div>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">Со счета списано</span></div>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b>706 руб.</b></span></div>
    														</td>
    													</tr>
    												</table>
    												
    												
    												<div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">=============================</span></div>
    												<table width="100%" cellpadding="15" cellspacing="0" style="border-collapse:collapse;">
    													<tr>
    														<td>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">Доступно</span></div>
    															<div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b>1 345 руб. 77 коп.</b></span></div>
    														</td>
    													</tr>
    												</table>
    												<div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">*****************************</span></div>
    												<div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">Все детали платежа — в вашей <a href="#" target="_blank" style="color:#0b55d9 !important;"><span style="color:#0b55d9">истории</span></a>.</span></div><br>
    											</td>
    										</tr>
    									</table>
    									<br>
    								</td>
    								<td width="11" style="border:#d9d9d9 1px solid; border-bottom:none; border-left:none;"><img src="1450828500759510397803" width="10" height="10" alt="" style="display:block;"></td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>


    Итоги достигнутого


    Минусы:
    — Ломается визуальная сетка звездочек и знаков "="
    — Отказ от скрепки
    — «Огрызок» бумаги выглядит не так как изначально задумано

    Плюсы:
    — Убрали 8.5 килобайт ненужной графики(но добавили 50 байт от прозрачной gif распорки)
    — Письмо офигенно смотрится на мобильниках
    — В целом дизайн практически не изменился

    Замечания:
    — Поведение мобильного Gmail отличается от результата в других мобильных клиентах в виду того, что Gmail не понимает Media Queries
    — Браузерный Outlook проигнорировал все float'ы. Вариант с table align=«left» должен спасти в этом случае.
    — Древние версии Outlook не захотели рисовать красивый «огрызок», но и не страшно. Этакий graceful degradation.

    P.S.


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

    Данные наработки могут использоваться кем угодно и в каких угодно целях. Особенно если это поспособствует решению проблемы с письмами-уведомлениями у яндекс-денег.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 78

      –29
      Мммм, таблицы

      Скрытый текст
      image
        +1
        Пффф… на главной яндекс денег в исходниках 12 таблиц
          –18
          Треш
            –18
            Товарищи минусующие, вы действительно считаете это нормаой?

            Скрытый текст
            <table onclick="return {'l-head':{name:'l-head'}}" class="l-head l-head_light l-head_light"><tr>
            <td class="l-head__g"><i class="l-head__gap"></i></td>
            <td class="l-head__l"><div class="b-head-logo">
            <map name="logo-map"><area shape="rect" coords="0,0,98,40" href="http://yandex.ru"></map><map name="logo-map"><area shape="rect" coords="0,0,98,40" href="http://yandex.ru"></map><div class="b-head-logo__logo"><span class="b-head-logo__link"><img class="b-head-logo__img" border="0" alt="Яндекс" src="//money.yandex.ru/i/b-head-logo.ru.png" usemap="#logo-map"></span></div>
            <strong class="b-head-name b-head-name_type_logo" onclick="return {'b-head-name':{name:'b-head-name'}}">деньги</strong>
            </div></td>
            <td class="l-head__gl"><i class="l-head__gap"></i></td>
            <td class="l-head__c">
            <!--noindex--><table class="b-head-tabs b-head-tabs_type_communication i-bem" onclick="return {'b-head-tabs':{name:'b-head-tabs','default':''}}"><tr>
            <td class="b-head-tabs__item b-head-tabs__tab b-head-tabs__item b-head-tabs__item_id_www" onclick="return {'b-head-tabs__item':{name:'b-head-tabs__item'}}"><a class="b-link b-head-tabs__link" href="http://www.yandex.ru">Поиск</a></td>
            <td class="b-head-tabs__item b-head-tabs__tab b-head-tabs__item b-head-tabs__item_id_mail" onclick="return {'b-head-tabs__item':{name:'b-head-tabs__item'}}"><a class="b-link b-head-tabs__link" href="http://mail.yandex.ru">Почта</a></td>
            <td class="b-head-tabs__item b-head-tabs__tab b-head-tabs__item b-head-tabs__item_id_calendar" onclick="return {'b-head-tabs__item':{name:'b-head-tabs__item'}}"><a class="b-link b-head-tabs__link" href="http://calendar.yandex.ru">Календарь</a></td>
            <td class="b-head-tabs__item b-head-tabs__item_state_current b-head-tabs__tab b-head-tabs__item b-head-tabs__item_id_money" onclick="return {'b-head-tabs__item':{name:'b-head-tabs__item'}}"><strong><a class="b-link b-head-tabs__link" href="https://money.yandex.ru">Деньги</a></strong></td>
            <td class="b-head-tabs__item b-head-tabs__tab b-head-tabs__item b-head-tabs__item_id_moikrug" onclick="return {'b-head-tabs__item':{name:'b-head-tabs__item'}}"><a class="b-link b-head-tabs__link" href="http://moikrug.ru">Мой Круг</a></td>
            <td class="b-head-tabs__item b-head-tabs__tab b-head-tabs__item b-head-tabs__item_id_fotki" onclick="return {'b-head-tabs__item':{name:'b-head-tabs__item'}}"><a class="b-link b-head-tabs__link" href="http://fotki.yandex.ru">Фотки</a></td>
            <td class="b-head-tabs__more b-head-tabs__tab"><div class="b-dropdowna b-dropdowna_direction_down b-dropdowna_is-bem_yes i-bem i-bem" onclick="return {'b-dropdowna':{name:'b-dropdowna'}}">
            <span class="b-dropdowna__switcher" onclick="return {'b-dropdowna__switcher':{name:'b-dropdowna__switcher'}}"><a class="b-link b-link_pseudo_yes b-link_is-bem_yes i-bem i-bem" onclick="return {'b-link':{name:'b-link'}}" href="http://www.yandex.ru/all"><span class="b-link__inner">ещё</span></a></span><div class="b-popupa b-popupa_theme_ffffff b-dropdowna__popup" onclick="return {'b-popupa':{name:'b-popupa'}}">
            <i class="b-popupa__tail"></i><i class="b-popupa__shadow"></i><table class="b-popupa__wrap" cellpadding="0" cellspacing="0"><tr><td class="b-popupa__wrap-cell"><div class="b-popupa__content"><div class="b-menu b-menu_layout_vert b-dropdowna__menu"><ul class="b-menu__layout-vert">
            <li class="b-menu__layout-vert-cell b-menu__layout-vert-cell_position_first"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_auto" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://auto.yandex.ru">Авто</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_afisha" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://afisha.yandex.ru">Афиша</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_blogs" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://blogs.yandex.ru">Блоги</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_video" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://video.yandex.ru">Видео</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_ege" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="//ege.yandex.ru">ЕГЭ</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_images" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://images.yandex.ru">Картинки</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_maps" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://maps.yandex.ru">Карты</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_yaca" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://yaca.yandex.ru">Каталог</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_market" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://market.yandex.ru">Маркет</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_news" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://news.yandex.ru">Новости</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_weather" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://pogoda.yandex.ru">Погода</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_rabota" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://rabota.yandex.ru">Работа</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_rasp" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://rasp.yandex.ru">Расписания</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_slovari" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://slovari.yandex.ru">Словари</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_sprav" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://sprav.yandex.ru">Справочник</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_taxi" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="https://taxi.yandex.ru">Такси</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_tv" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://tv.yandex.ru">Телепрограмма</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_uslugi" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://uslugi.yandex.ru">Услуги</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_wow" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://my.ya.ru">Я.ру</a></div></li>
            <li class="b-menu__layout-vert-separator"><i class="b-menu__separator"></i></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_mobile" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://mobile.yandex.ru">Мобильный</a></div></li>
            <li class="b-menu__layout-vert-cell"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_soft" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://soft.yandex.ru">Программы</a></div></li>
            <li class="b-menu__layout-vert-cell b-menu__layout-vert-cell_position_last"><div class="b-menu__item b-head-tabs__item b-head-tabs__item b-head-tabs__item_id_all" onclick="return {'b-menu__item':{name:'b-menu__item'}}"><a class="b-link b-head-tabs__link" href="http://www.yandex.ru/all">Все сервисы</a></div></li>
            </ul></div></div></td></tr></table>
            </div>
            </div></td>
            </tr></table>
            <!--/noindex--><div class="b-head-search" onclick="return {'b-head-search':{name:'b-head-search'}}"><div class="b-head-search__wrap b-head-search__arrow">
            <i class="b-head-search__arr"><i class="b-head-search__arr-i"></i></i><form class="b-search" action="https://money.yandex.ru/search.xml" method="get" accept-charset="utf-8">
            <script type="text/javascript">$(function(){ $('.b-head-search .b-search').parent().bind('submit', function(){r(this, 'stred/pid=41/cid=71514');}); });</script><script type="text/javascript">$(function(){ $('.b-head-search .b-search').parent().bind('submit', function(){r(this, 'stred/pid=41/cid=71514');}); });</script><table class="b-search__table">
            <tr>
                      
                    <td class="b-search__input">
            <span class="b-form-input b-form-input_theme_grey b-form-input_size_l i-bem" onclick="return {'b-form-input':{name:'b-form-input'}}">
                          <span class="b-form-input__hint-wrap"><label for="search-input" class="b-form-input__hint">название товара, услуги или магазина</label></span>
                          <span class="b-form-input__box"><input class="b-form-input__input" id="search-input" name="text" maxlength="400" tabindex="1"></span>
                        </span><script type="text/javascript">
            			$(function() {
            				YaMoney.getSuggests({
            					url:"/ymsuggest.xml",
            					input: ".b-head-search  #search-input",
            					counter:"pid=41/cid=71340/path=text",
            					ads_counter:"pid=41/cid=71340/path=link"
            				});
            			});
            		</script><script type="text/javascript">
            			$(function() {
            				YaMoney.getSuggests({
            					url:"/ymsuggest.xml",
            					input: ".b-head-search  #search-input",
            					counter:"pid=41/cid=71340/path=text",
            					ads_counter:"pid=41/cid=71340/path=link"
            				});
            			});
            		</script>
            </td>
            <td class="b-search__button">
                        
                        <span onclick="return {'b-form-button':{name:'b-form-button'}}" class="b-form-button b-form-button_size_l b-form-button_theme_grey-arrow-no-transparent-l b-search__button_light i-bem"><i class="b-form-button__left"></i><span class="b-form-button__content">
                            <span class="b-form-button__text">Найти</span>
                          </span><input type="submit" class="b-form-button__input i-bem" tabindex="2" hidefocus="true" value=""></span>
                      </td>
            </tr>
            <tr><td class="b-search__under" colspan="2">
            <a class="b-search__advanced" tabindex="3" id="advanced" href="//money.yandex.ru/shops.xml?from=isearch">все товары и услуги</a><div class="b-search__sample b-search__sample_type_long i-bem" onclick="return {'b-search__sample':{name:'b-search__sample'}}">
            <i class="b-search__intro">Например,</i> <span class="b-link b-link_pseudo_yes" onmousedown="Lego.ch('money.search.sample',this)"><span class="b-link__inner">xbox live</span></span>
            </div>
            <script type="text/javascript">
            			$('.b-head-search .b-search__sample .b-pseudo-link').click(function() {
            				r(this, 'stred/pid=41/cid=71516');
            			});
            		</script>
            </td></tr>
            </table>
            <input type="hidden" name="search" value="shops"><input type="hidden" name="from" id="isug-id" value="isug" disabled>
            </form>
            </div></div> </td>
            <td class="l-head__gr"><i class="l-head__gap"></i></td>
            <td class="l-head__r">
            <!--noindex--><table class="b-head-userinfo i-bem" onclick="return {'b-head-userinfo':{name:'b-head-userinfo'}}">
            <tr>
            <td class="b-head-userinfo__td"></td>
            <td class="b-head-userinfo__entry">
            <a class="b-link b-link_pseudo_yes" href="https://passport.yandex.ru/passport?mode=auth&msg=money&retpath=https%3A%2F%2Fmoney.yandex.ru%2Findex.xml" onmousedown="Lego.ch('money.login.enter',this)"><span class="b-link__inner">Войти</span></a><form class="b-domik b-domik_type_popup i-bem i-hidden" action="https://passport.yandex.ru/passport?mode=auth&from=money&retpath=https%3A%2F%2Fmoney.yandex.ru%2Findex.xml&msg=money" method="post" onclick="return {'b-domik':{name:'b-domik_type_popup',title:'Деньги',host:'https:\/\/money.yandex.ru\/',register:'',title:'\n          Деньги\n        ',register:'',title:'Деньги',host:'https:\/\/money.yandex.ru\/',register:''}}">
            <input name="login"><input name="passwd" type="password"><input name="twoweeks" type="checkbox" value="no">
            </form>
            </td>
            </tr>
            <tr><td class="b-head-userinfo__td" colspan="2">
            <div class="b-head-userinfo__setup b-head-userinfo__service"><a href="//money.yandex.ru/security/" class="b-head-userinfo__link">Безопасность</a></div>
            <div class="b-head-userinfo__help"><a href="//money.yandex.ru/help.xml" class="b-head-userinfo__link">Помощь</a></div>
            </td></tr>
            <tr><td class="b-head-userinfo__td" colspan="2">
            <div class="b-head-userinfo__setup b-head-userinfo__region">
            <a href="http://tune.yandex.ru/region/?retpath=https%3A%2F%2Fmoney.yandex.ru%2Findex.xml" class="b-head-userinfo__link">Регион</a>: Миккели</div>
            <div class="lang-switcher-container">
                    
                    <div class="b-dropdowna b-lang-switcher b-lang-switcher_is-bem_yes i-bem i-bem" onclick="return {'b-lang-switcher':{name:'b-lang-switcher'},'b-dropdowna':{name:'b-dropdowna'}}">
            <span class="b-dropdowna__switcher b-lang-switcher__lang" onclick="return {'b-dropdowna__switcher':{name:'b-dropdowna__switcher'}}"><span class="b-link b-link_pseudo_yes b-lang-switcher__lang i-bem" onclick="return {'b-link':{name:'b-link'}}"><span class="b-link__inner"><img class="b-icon b-lang-switcher__flag b-country-flag b-country-flag_size-16_ru" src="//yandex.st/lego/_/La6qi18Z8LwgnZdsAr1qy1GwCwo.gif" alt="ru" title=""><span class="b-lang-switcher__lang-name">Ru</span></span></span></span><div class="b-popupa b-popupa_theme_ffffff b-popupa_direction_down-left b-popupa_is-bem_yes i-bem b-dropdowna__popup" onclick="return {'b-popupa':{name:'b-popupa'}}">
            <i class="b-popupa__tail"></i><i class="b-popupa__shadow"></i><table class="b-popupa__wrap" cellpadding="0" cellspacing="0"><tr><td class="b-popupa__wrap-cell"><div class="b-popupa__content b-lang-switcher__popup-content">
                          
                          
                          <div class="b-menu b-menu_layout_vert b-dropdowna__menu b-lang-switcher__menu"><ul class="b-menu__layout-vert">
            <li class="b-menu__layout-vert-cell b-menu__layout-vert-cell_position_first"><div class="b-menu__item"><span class="b-lang-switcher__lang"><img class="b-icon b-lang-switcher__flag b-country-flag b-country-flag_size-16_ru" src="//yandex.st/lego/_/La6qi18Z8LwgnZdsAr1qy1GwCwo.gif" alt="ru" title=""><span class="b-lang-switcher__lang-name">Ru</span></span></div></li>
            <li class="b-menu__layout-vert-cell b-menu__layout-vert-cell_position_last"><div class="b-menu__item"><a class="b-lang-switcher__lang" onclick="r(this, 'stred/pid=41/cid=72152/path=en')" href="//tune.yandex.ru/api/lang/v1.1/save.xml?intl=en&retpath=https%3A%2F%2Fmoney.yandex.ru%2Findex.xml&sk=y8fb63b85fa48665a509f3a82816ea8fc"><img class="b-icon b-lang-switcher__flag b-country-flag b-country-flag_size-16_en" src="//yandex.st/lego/_/La6qi18Z8LwgnZdsAr1qy1GwCwo.gif" alt="en" title=""><span class="b-lang-switcher__lang-name">En</span></a></div></li>
            </ul></div>
                        </div></td></tr></table>
            </div>
            </div>
                  </div>
            </td></tr>
            <tr><td class="b-head-userinfo__td" colspan="2"></td></tr>
            </table>
            <!--/noindex--><script>
              
              $(function() {
              	$('.b-head-userinfo__service .b-head-userinfo__link').on('click', function() {
              		r(this, 'stred/pid=41/cid=70087')
              	});
              	$('.b-head-userinfo__help .b-head-userinfo__link').on('click', function() {
              		r(this, 'stred/pid=41/cid=70088')
              	});
              	$('.b-head-userinfo__exit .b-head-userinfo__link').on('click', function() {
              		r(this, 'stred/pid=41/cid=70091')
              	});
              });
              </script>
            </td>
            <td class="l-head__g"><i class="l-head__gap"></i></td>
            </tr></table>
            <script type="text/javascript">r(this, 'stred/pid=41/cid=71167');</script><table border="0" width="100%" cellspacing="0" cellpadding="0" class="l-page l-page_layout_16-40-44">
            <tr valign="top">
            <td class="l-page__gap"><i></i></td>
            <td class="l-page__left"><div class="b-account_ie-placeholder"></div></td>
            <td class="l-page__center"></td>
            <td class="l-page__right"></td>
            <td class="l-page__gap"><i></i></td>
            </tr>
            <tr valign="top">
            <td class="l-page__gap"><i></i></td>
            <td class="l-page__left p-newAccout_left" rowspan="2">
            <form class="b-domik b-domik_type_onpage i-bem" onclick="return {'b-domik':{name:'b-domik_type_onpage',title:'\n      \n    ',register:''}}" accept-charset="utf-8" action="https://passport.yandex.ru/passport?mode=auth&from=money&retpath=https%3A%2F%2Fmoney.yandex.ru%2Findex.xml&msg=money" method="post">
            <div class="b-domik__wrap-roof">
            <i class="b-domik__roof b-domik__roof_border"></i><i class="b-domik__roof"></i>
            </div>
            <div class="b-domik__form">
            <div class="b-domik__title">
                  Вход
                </div>
            <div class="b-domik__username"><span class="b-form-input b-form-input_theme_grey b-form-input_size_m b-domik__input i-bem" onclick="return {'b-form-input':{name:'b-form-input'}}">
                    
                    
                    <span class="b-form-input__hint-wrap"><label for="id1165620935708" class="b-form-input__hint">
                      логин
                    </label></span>
                    <span class="b-form-input__box"><input class="b-form-input__input" id="id1165620935708" name="login" tabindex="100"></span>
                  </span></div>
            <div class="b-domik__password"><span class="b-form-input b-form-input_theme_grey b-form-input_size_m b-domik__input i-bem" onclick="return {'b-form-input':{name:'b-form-input'}}">
                    
                    
                    <span class="b-form-input__hint-wrap"><label for="id1165659706113" class="b-form-input__hint">
                      пароль
                    </label></span>
                    <span class="b-form-input__box"><input class="b-form-input__input" id="id1165659706113" type="password" name="passwd" tabindex="101"></span>
                  </span></div>
            <div class="b-domik__haunter"><span class="b-form-checkbox b-form-checkbox_size_m b-form-checkbox_theme_grey-m b-domik__checkbox i-bem" onclick="return {'b-form-checkbox':{name:'b-form-checkbox'}}"><span class="b-form-checkbox__inner"><input class="b-form-checkbox__checkbox i-bem" type="checkbox" id="id1165659705049" name="twoweeks" value="yes" tabindex="102"><i class="b-form-checkbox__bg"><img class="b-form-checkbox__tick" title="" src="//yandex.st/lego/_/La6qi18Z8LwgnZdsAr1qy1GwCwo.gif" alt=""></i></span><label for="id1165659705049" class="b-form-checkbox__label">
                    запомнить меня
                  </label></span></div>
            <div class="b-domik__button"><span onclick="return {'b-form-button':{name:'b-form-button'}}" tabindex="103" class="b-form-button b-form-button_size_s b-form-button_theme_grey-s i-bem"><i class="b-form-button__left"></i><span class="b-form-button__content">
                    <span class="b-form-button__text">
                      Войти
                    </span>
                  </span><input type="submit" class="b-form-button__input" hidefocus="true" value=""></span></div>
            <div class="b-domik__social" onclick="return {'b-domik__social':{'size':16}}"></div>
            <div class="b-domik__remember"><a class="b-domik__remind" href="https://passport.yandex.ru/passport?mode=restore" tabindex="105">Напомнить пароль</a></div>
            </div>
            <div class="b-domik__register"><a class="b-domik__link" tabindex="104" href="https://money.yandex.ru/reg/?retpath=https%3A%2F%2Fmoney.yandex.ru%2Findex.xml">
                  Зарегистрироваться
                </a></div>
            <script>$(function() {$('.b-domik_type_bigform .b-domik__register .b-domik__link').on('click', function() {r(this, 'stred/pid=41/cid=2772')});});</script><script>$(function() {$('.b-domik_type_bigform .b-domik__register .b-domik__link').on('click', function() {r(this, 'stred/pid=41/cid=2772')});});</script>
            </form>
            <div class="b-account_ie-placeholder"></div>
            </td>
            <td class="l-page__center"><h1 class="b-wizard__title">Как начать пользоваться Яндекс.Деньгами</h1></td>
            <td class="l-page__right"></td>
            <td class="l-page__gap"><i></i></td>
            </tr>
            <tr valign="top" class="newb-steps-header">
            <td class="l-page__gap"><i></i></td>
            <td class="l-page__center">
            <div class="b-wizard">
            	
            	
            
            	<script type="text/javascript">r(this, 'stred/pid=41/cid=71167');</script><div class="b-wizard__step b-wizard__step_active b-wizard__step1">
            <div class="b-wizard__stepNum">
                            1
                        </div>
            <a class="b-button b-button_newAccount" href="/reg/?from=imainbutton" onclick="
            						r(this, 'stred/pid=41/cid=2768/path=noauth');
            					"><span class="b-button__inner">Откройте кошелек</span></a><div class="b-wizard__stepTitle"><div>
            <div> </div>
            <div>Бесплатно. Быстро. Удобно</div>
            </div></div>
            </div>
            
            	<div class="b-wizard__step b-wizard__step2">
            <div class="b-wizard__stepImg1"></div>
            <div class="b-wizard__stepNum">
                            2
                        </div>
            <p class="b-wizard__stepTitle">Выберите, с чего начать</p>
            <div class="b-wizard__stepCase"><table><tr>
            <td>
            				<a class="b-wizard__stepCaseTitle" href="/prepaid/?from=imainprep" onclick="r(this, 'stred/pid=41/cid=71412/path=noauth')"><img src="/i/cash_inactive.png">
            						 Пополнить счет</a> 
            					<p class="b-wizard__stepCaseText name">можно со счета в любом <a href="/topup/step1.xml?_openstat=dengi;totup;mainnew">банке</a></p>
            				</td>
            <td>
            						<a class="b-wizard__stepCaseTitle" href="/embed/?from=imainembed" onclick="r(this, 'stred/pid=41/cid=71413/path=noauth')"><img src="/i/embed_inactive.png">
            						 Получить Яндекс.Деньги</a>
            					<p class="b-wizard__stepCaseText name">для собственного проекта или на благотворительность</p>
            				<span class="b-wizard__moreLink-container"><a class="b-wizard__moreLink" href="" onclick="r(this, '/path=noauth')"></a></span>
            </td>
            <td class="b-wizard__stepCase-last-item">
            					
            				</td>
            </tr></table></div>
            </div>
            	
            	<div class="b-wizard__step b-wizard__step3">
            <div class="b-wizard__stepNum">
                            3
                        </div>
            <div class="b-wizard__stepTitle">
            			<div class="b-wizard__stepTitle__text">Готово, можно тратить</div>
            			<div class="g-clear_both"></div>
            		</div>
            <div class="b-wizard__stepCase"><table><tr>
            <td>
            <a class="b-wizard__stepCaseTitle" href="/shops.xml?from=imaintr" onclick="r(this, 'stred/pid=41/cid=71414')"><span class="b-wizard__stepCaseImg1"></span>Покупать</a><div class="b-wizard__stepCaseText"><div>игры, билеты, книги и многое другое в интернете. Или <a href="/shop.xml?scid=5007&from=imainyacard">платить в супермаркетах</a>
            </div></div>
            </td>
            <td>
            <a class="b-wizard__stepCaseTitle" href="/direct-payment.xml?from=inewp2p" onclick="r(this, 'stred/pid=41/cid=71415')"><span class="b-wizard__stepCaseImg2"></span>Переводить</a><div class="b-wizard__stepCaseText"><div>и получать деньги от других пользователей</div></div>
            </td>
            <td class="b-wizard__stepCase-last-item">
            <a href="/shop.xml?scid=5013&_openstat=dengi;payout;mainnew" class="b-wizard__stepCaseTitle" onclick="r(this, 'stred/pid=41/cid=71567/path=earthport/path=noauth.')"><span class="b-wizard__stepCaseImg3"><img src="/i/planeta__inactive.png"></span>Снимать со счета</a><div class="b-wizard__stepCaseText"><div>например, переводить на счет в любом банке мира (кроме США)</div></div>
            </td>
            </tr></table></div>
            </div>
            
            	<div class="b-social-services ">
            <a href="http://clubs.ya.ru/money/" target="_blank" onclick="r(this, 'stred/pid=41/cid=71436/path=ya')" class="b-social-services__link b-icon b-icon_24 b-icon_24_yaru"></a><a href="http://twitter.com/yamoneynews" target="_blank" onclick="r(this, 'stred/pid=41/cid=71436/path=tw')" class="b-social-services__link b-icon b-icon_24 b-icon_24_twitter"></a><a href="http://www.facebook.com/money.yandex.ru" target="_blank" onclick="r(this, 'stred/pid=41/cid=71436/path=fb')" class="b-social-services__link b-icon b-icon_24 b-icon_24_facebook"></a><a href="http://vk.com/public16986287" target="_blank" onclick="r(this, 'stred/pid=41/cid=71436/path=vk')" class="b-social-services__link b-icon b-icon_24 b-icon_24_vkontakte"></a><span class="b-social-services__text"> — самые последние новости Яндекс.Денег</span>
            </div>
            </div>
            
            
            
            </td>
            <td class="l-page__right"></td>
            <td class="l-page__gap"><i></i></td>
            </tr>
            </table>
            <br><table width="100%" border="0" cellspacing="0" cellpadding="0" class="footer"><tr valign="top">
            <td width="20%"><div class="links">
            <div class="offer studio-link">Дизайн — <a href="http://www.artlebedev.ru/">Студия Артемия Лебедева</a>
            </div>
            <div class="offer"><a href="https://money.yandex.ru/doc.xml?id=522764" onclick="r(this, 'stred/pid=41/cid=71074')">Пользовательское соглашение</a></div>
            </div></td>
            <td width="30%" class="sitemenu"><div class="links">
            <div class="links"><a href="https://money.yandex.ru/sessions.xml" onclick="r(this, 'stred/pid=41/cid=71518')">Последнее посещение</a></div>
            <div class="links">Позвонить нам +7 (495) 974 3586 или <a href="https://money.yandex.ru/feedback" onclick="r(this, 'stred/pid=41/cid=70101')" style="margin-right:0">написать</a>
            </div>
            </div></td>
            <td width="15%" class="sitemenu"><div class="links">
            <div class="shift">
            <a href="http://mobile.yandex.ru/apps/money/" onclick="r(this, 'stred/pid=41/cid=72307')">Мобильные приложения</a> 
            						</div>
            <div class="shift"><a href="http://tune.yandex.ru/api/my/v1.0/my.xml?block=44&param=0&retpath=https%3A%2F%2Fm.money.yandex.ru&sk=y8fb63b85fa48665a509f3a82816ea8fc" onclick="r(this, 'stred/pid=41/cid=70099')">Мобильная версия</a></div>
            </div></td>
            <td width="15%" class="sitemenu"><div class="links">
            <div class="shift">
            <a href="https://money.yandex.ru/start/" onclick="r(this, 'stred/pid=41/cid=70086')">Магазинам</a> 
            						</div>
            <div class="shift"><a href="http://api.yandex.ru/money/" onclick="r(this, 'stred/pid=41/cid=71443')">Разработчикам</a></div>
            </div></td>
            <td width="20%" class="copyright"><div class="copyright" style="padding-left:0">
            <div>
            <span>© 2002—2014</span> «<a href="http://www.yandex.ru/">Яндекс</a>»
            	</div>© 2007—2014 ООО НКО «Яндекс.Деньги» <div class="links">
            <a href="https://money.yandex.ru/about.xml" onclick="r(this, 'stred/pid=41/cid=70100')">О проекте</a>  <a href="https://money.yandex.ru/eng/about.xml" onclick="r(this, 'stred/pid=41/cid=71066')">About</a>
            </div>
            </div></td>
            </tr></table>
            
              0
              Табличный БЭМ, что не нравится?
                +11
                У вас есть хоть один аргумент против?
                  –8
                  у меня есть:
                  image
                    +3
                    Сразу видно, в 2014 году человек писем не верстал…
                      +1
                      аа, вот почему минусуют. У нас же ветка другая, посмотрите выше:

                      Пффф… на главной яндекс денег в исходниках 12 таблиц


                      А вообще я хотел ниже откомментировать свой шок о том что письма не таблицами разверстаны в посте. Но меня опередили, человек пять.
                        +2
                        Новость дня, на яндекс деньгах 12 таблиц, ахтунг, первая полоса НьюЙоркТаймс. Так вы поинтересейтесь зачем яндексу таблицы, почему они все щее на сайте и так далее. Ну и все-таки скажите почему таблицы на сайтах яндекса — плохо?
                    0
                    На одну единицу полезного текста (тот, который выводится пользователю) овер 9000 единиц html. Нет, это не норма. Боюсь представить, сколько займет верстка большой страницы. Кто-то там удавится за 30kb jquery готов, а тут html больше, чем все библиотеки javascript, вместе взятые.
                    +1
                    Для верстки писем — это стандарт.
                  +16
                  В посте рассказывается про верстку писем. Вы правда всегда верстаете письма дивами?
                    0
                    Бггг. Он просто не пробовал верстать под почтовые клиенты. ;)
                      0
                      Я в таких случаях всегда вспоминаю старенький The Bat, который не отображал фоновые картинки в дивах. А с таблицами было все хорошо. Причину я тогда так и не нашел :)
                        0
                        Ну как бы здесь и здесь описана поддержка HTML и CSS почтовыми клиентами.
                    +1
                    В письмах очень даже норм решение, ибо задача чтобы было везде одинакого хорошо.
                      +3
                      Для писем, использование таблиц неизбежность в виду ограниченостиособенностей html движков почтовых программ. Я думаю многие бы хотели использовать HTML5/CSS3.

                      А вот то, что на сайте Яндекса таблицы не к месту, что то странное. Как минимум полоску
                      Поиск Почта Диск Календарь Деньги Мой Круг Фотки ещё

                      можно было бы спокойно сделать без таблицы (да и по логике вещей это список, а не таблица). Хотя коль в Яндексе появился БЭМ семантику они и не должны любить.
                        +3
                        если в html-письмах не использовать таблицы, то получатели рассылки получат реальный треш в своих почтовых ящиках.
                          +4
                          Просто человек никогда не верстал письма и не ведает, что творит :)
                          +4
                          Так же мучился с уведомлениями от ВТБ24, которые проектировали какие-то жуткие дизайнеры, и на простом мобильнике видна только белая верхушка картинки в шапке, остальное надо прокручивать. Решил более кардинально. Подписал телебанк на отдельный ящик. Написал php скипт, который получал почту, на основе регулярных выражений выбирал важную информацию и отправлял короткий текст на почту, которая поступает на мобильник. Скрипт запускается раз в 5 минут через cron у хостера моего сайта.Это конечно минус, но писал ведь для себя и использовал наличие сервера ухостера как данность… Сократил размер с 70-80 кило до нескольких сотен байт.
                            +1
                            Суров, ничего не скажешь. Некоторые просто не понимают разницы между сайтом и письмом, вот и городят ересь. А хейтеры потом всех и вся в спаме обвиняют. Я за последние несколько лет насмотрелся.
                              –8
                              Пффф… на главной яндекс денег в исходниках 12 таблиц

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

                              На вопрос Akuma
                              В посте рассказывается про верстку писем. Вы правда всегда верстаете письма дивами?

                              Нет, письма я верстаю не дивами, но и не гавнокодом по 10 таблиц, в котором таблицы в таблицах
                                +6
                                Никита, успокойтесь, пока не поздно :)

                                Зачем было отвечать на этот мой комментарий? Он не имеет отношения к таблицам и объекту вашего возмущения.
                                И да, вы выглядите немного глупо, говоря, что яндексоиды говнокодят.

                                пы.сы. Упоминание кармы в суе не способствует ее сохранению. Поверьте мне, как сидевшему с минус 60.
                                  +4
                                  Ваши комментарии были МЕГО информативны и МЕГО аргументированы
                                  Мммм, таблицы

                                  Треш

                                  Товарищи минусующие, вы действительно считаете это нормаой?

                                  Я не считаю приемлемым напихивать по несколько таблиц в таблицы, особенно для такой солидной компаниии, как Яндекс


                                  Поэтому советую в первую очередь вам обратится к упомянотому хаброэтикету и высказывать свое мнение исключительно в купе с аргументами, а не просто обрывками фраз и выкриками «они дебилы, я хороший». Пока что вас оценили лишь на минусы в карму. Попробуйте излагать мысли более понятно и аргументированно.
                              –2
                              я бы у яндекс денег только 2 минуса назвал, но эти минусы только к яндекс деньги пластику относятся…

                              первое это:

                              Мы списываем комиссию — 3% + 15 рублей, но не меньше 100 рублей, если вы:
                              — снимаете деньги с карты в банкомате;


                              второе:

                              Почему с меня взяли комиссию 3% + 15 рублей, если я платил с карты в обычном магазине?
                              Скорее всего, у магазина неправильный MCC…… Если мы получим один из таких кодов (6010, 6011, 6538, 6012, 6051, 6540, 4829), то комиссия спишется автоматически.
                              В этом случае мы советуем обратиться в службу поддержки магазина и рассказать о проблеме с MCC.

                              Остальные «минусы» это и не минусы, так мелкие шероховатости :)…
                                0
                                Первое меня давно не беспокоит. Наличку почти не использую. Со вторым не сталкивался.
                                  0
                                  я то как раз хотел перевести дочь на безнал, она школьница и мне надоело каждый день деньги выдавать на еду + телефон раз в месяц + карманные, вот подумал надо карту завести и раз в месяц тысяч 5 закидывать.
                                  Озаботился поиском пластика, сбер ничего но надо заморачиваться, т.к. паспорта нет и надо выяснять что да как, заказал от яд карту, но 2 мелочи выше описанные делают данную карту непригодной для использования школьником.
                                    0
                                    По идее, телефон можно прямо Яндекс.Деньгами оплачивать. И расплачиваться картой в магазинах онлайн и оффлайн без комиссий. Но если задача — выдавать ребёнку именно наличные, то выпуск карты и правда мало поможет. Большинство банков берут комиссию за снятие денег в чужих банкоматах в любом случае.
                                  0
                                  Второе — недостаток любых пластиковых карточек, которые берут деньги за обналичку в «чужих» банкоматах. Так что правда нужно жаловаться в магазины.
                                  0
                                  Посмотрел исходник в литмусе. Во всех браузерах рассылка дальше шапки не отобразилась.

                                  Выглядело вот так



                                  А вот исправленный вариант.
                                    0
                                    По первой ссылке тестовый вариант в котором есть лишь шапка.
                                    0
                                    Можете приложить код неотредактированного исходника?
                                      0
                                      Я не то, чтобы сильно параноик, но не буду выкладывать весь исходник. Как правило на клиенте в письме хранятся данные, которые не стоит давать в общий доступ.
                                        0
                                        Весь не прошу, без данных, конечно. Их можно заменить на рыбу.
                                      +3
                                      В мобильных версиях я бы вовсе убрал боковые линии и прочие красивости слева и справа. Итак по ширине места мало.
                                        0
                                        А почему нужны именно звёздочки, а не <hr />?
                                          0
                                            0
                                            Кстати вы подали отличную идею как реализовать отбивку знаками "="
                                            HR с верхней и нижней dashed границами.
                                            0
                                            Вполне возможно в яндексе уже прочитали данную статью и приняли меры:
                                            f6.s.qip.ru/14a5VJb1D.png
                                            В связи с проведением плановых технических работ ваш ящик доступен только для отправки писем и просмотра уже полученных. Вы не можете вносить какие-либо изменения, например, перемещать письма в другие папки или менять настройки почтового ящика. Также временно приостановлена доставка новых писем. Как только технические работы завершатся, все пришедшие за это время письма будут доступны, а отправленные вами письма появятся в папке «Отправленные».
                                              +11
                                              Добрый день!
                                              Я пришла сказать, что задача на переработку писем и изменение формата вёрстки стоит, над ней работают, Ваши замечания все прочитали, обсудили и приняли к сведению. В посте вопросов, на которые нужен ответ, кажется, всё-таки нет — но если нужно что-то спросить у руководителя отдела интерфейсов, я ей с радостью передам :) Спасибо за обратную связь!

                                              (Меня зовут Аня, я работаю в Яндекс.Деньгах)
                                                0
                                                Рад, что меня услышали. Жду подвижек в данном направлении.
                                                +1
                                                А я люблю простые текстовые письма без картинок. В них, конечно, рекламу вставить труднее, но если бы службы рассылки технических писем предоставляли выбор формата (text vs html), мир был бы чуточку прекраснее.
                                                  +1
                                                  Они предоставляют. И заботливые компании этим пользуются, дабы не нервировать своего клиента.
                                                  –2
                                                  Господа, а зачем вам Яндекс.деньги, поделитесь.
                                                    0
                                                    Удобно оплачивать услуги некоторых сайтов, на которых карточку светить не очень хочется. Конечно, получается 2 операции, но как-то спокойнее.
                                                      0
                                                      Для операций в интернете вообще полезно создавать вторую карточку, кроме того есть же всякие виртуальные карты. А в некоторых банках уже можно создавать виртуальную карту на одну транзакцию.
                                                        0
                                                        Кстати, о виртуальных картах. Можно завести себе такую и в Яндекс.Деньгах. Анонимный счет, анонимное пополнение через Евросеть (под 0%) и никто про вас ничего не узнает :)

                                                        money.yandex.ru/virtualcard/about.xml
                                                          0
                                                          Она не на одну транзакцию, она на год;) Но менять можно раз в сутки, это да.
                                                            0
                                                            Но лучше не надо ;) Да и какой смысл, если счет анонимный
                                                          0
                                                          Ой, ну это морока. Тем более карточка на 1 транзакцию. Вы, правда, будете создавать виртуальную карту, чтобы перевести рублей 150-300?
                                                            0
                                                            1 карточка на одну транзакцию — это для очень осторожных людей или для совсем сомнительных случаев. В абсолютном большинстве случаев достаточно просто отдельной карточки, на которую скидывать по чуть-чуть денег. Получать деньги на карточку, с которой потом через третий сервис скидывать деньги на ЯД — вот точно морока. Тем более, с чего вы взяли, что у моего адресата 150-300 руб есть ЯД? А карточкой я сейчас разве что семечки у бабушки на остановке оплатить не смогу.
                                                              0
                                                              Речь о случае, когда вашу основную карту светить не хочется, зато есть очень большое желание быть анонимным. Тогда удобнее использовать анонимную виртуальную карту, нежели зарплатную банковскую :)
                                                                0
                                                                Не сказать, чтобы сильно анонимную. От любопытства госорганов не поможет.
                                                                  0
                                                                  Анонимный счет, заведенный через ТОР, пополнение через любой терминал на улице. Достаточно анонимно, чтобы вас не нашли.
                                                                0
                                                                В чём морока получать деньги на карточку? Пришли, да и всё. Или в банкомате закинуть. Через онлайн-клиент банка перекидываем на ЯД, оттуда быстро перекидываем куда надо.

                                                                Вот выводить деньги с ЯД (именно выводить, а не расплачиваться тиньковской картой) — проблема, там комиссию берут.

                                                                Про 150-300 рублей я выше писал — оплата тем, кто принимает ЯД (точно так же они могут принимать ещё кучу разных электронных денег).
                                                                  0
                                                                  Через онлайн-клиент банка перекидываем на ЯД, оттуда быстро перекидываем куда надо.

                                                                  Т.е. вы делаете вот так: «Карта -> ЯД -> магазин»
                                                                  А я делаю вот так «Карта -> магазин»
                                                                  Вам не кажется, что в вашей схеме что-то не так?
                                                                    0
                                                                    В вашей схеме: ваша карта -> анонимная карта -> магазин.
                                                                0
                                                                Она не на одну транзакцию, она на год;) Но менять номер карты можно раз в сутки.
                                                                  0
                                                                  Так уже лучше. Только за неё платить надо. А за ЯД я не плачу. Деньги на кошелёк можно закинуть без комиссии. А вот внутриЯДные платежи — они с комиссией.
                                                                  0
                                                                  Нажал кнопку — получил карту, не особая морока :) Тем более счет анонимный, зачем на одну транзакцию?
                                                            0
                                                            Я просто оставлю это здесь zurb.com/ink/
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Ну во-первых они нормально отображают письма.
                                                                Во-вторых нам усложняют задачу по повторению почтового интерфейса в письме во избежание фишинговых приемов. По мне так — неплохая себе версия.
                                                                В третьих, это остерегает многих людей делать из рассылки накрашенную проститутку.
                                                                Так же меня полностью устраивает, что я не могу использовать в письмах флеш и звук.
                                                                Не вижу причин для негодования по поводу того, что нам не дают делать в письмах полноценные сайты.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                    0
                                                                    Это даже хорошо, что заказчики не прислушиваются к вашему мнению, хотя бы потому что имеют голову на плечах и умеют считать деньги.
                                                                    Давайте на секундочку отойдем от транзакционных писем и поговорим о маркетинге.

                                                                    Довелось мне работать с одним интернет магазином, который слал своим клиентам Plain/text письма. Был хороший текст, но не было графики. Даже картинок с товаром. Но конверсия была высокой. Мы решили попробовать сделать html выпуск. И послали новую рассылку 50 на 50. Половине людей старую версию, половине новую. Конверсия на html упала что то около 15%. От сюда мы сделали вывод, что стоит оставить текстовую версию, ибо она приносит больше трафика на сайт.

                                                                    Берем другой магазин. Слали текстовые письма и среднего качества текст. Отрисовал им письмо, добавил изображения к позициям товара, немного «визуального мусора» и переходы на сайт увеличились на 200%. Продажи возросли соответственно.

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

                                                                    Вам говорит о чем нибудь CPA? Если заниматься подобными рассылками в текстовом варианте, вы разоритесь. Ибо хомяк не клюет на голый текст. Во избежание вопросов отвечу, что CPA — это прибыльно, но не интересно. Меня хватило на 3 месяца. Потом забросил.

                                                                    Я к чему это все. Не надо быть субъективным и отталкиваться только от личных предпочтений. Сплит тесты в помощь, прежде чем морочить головы заказчикам.
                                                                      0
                                                                      WTF is CPA? Что-то из этого? Пожалуйста, давайте ссылки на расшифровку узкопрофильных терминов.
                                                              +1
                                                              Я был бы рад получить по почте такой же чек — то есть простой текст без скрепочек и загнутых уголков. Адаптивно из коробки, кстати. Это тебе в первый раз «мило», а во второй и дальше ты уже воешь от визуального мусора.
                                                                0
                                                                Я это тоже в отдел интерфейсов передала. Спасибо!
                                                                  0
                                                                  Кстати, добавлю, есть такие письма, которые обзываются multipart/alternate. Можно ведь слать сразу две версии письма, text/plain (только информация) и text/html (со всеми визуальными вкусностями), а почтовый клиент может выбрать какой отображать по вкусу пользователя.
                                                                  Все продвинутые библиотеки для программного составления писем такую возможность имеют.
                                                                    0
                                                                    Более того, письма с multipart/alternate более удачно проходят антиспам-фильтры. Хотя для Яндекса это неактуально, наверное. :)
                                                                0
                                                                Амазон выставляет фиксированную высоту строки в своих письмах, в итоге при увеличенном размере шрифтов в iOS Mail строки налезают друг на друга. Я написал им об этом приложив скриншот, они ответили, что письмо не от них, что это фишинг, и порекомендовали удалить :)
                                                                  0
                                                                  Хм. А как удается добиться нормальной работы media на ios7? Я как раз последние 2 дня бьюсь над проблемой. код четко адаптируется под desktop/mobile пока он в браузере, но полностью игнорируется, когда он присылается в качестве письма в стандартное приложение iOS.
                                                                    0
                                                                    Копать и тестировать
                                                                      0
                                                                      Увы. Копание показало очень странную вещь. Если делать определение стиля div, а следом его переопределение через

                                                                      @media only screen and (max-device-width: 600px)
                                                                      


                                                                      То тогда это переопределение игнорируется ios7, и письмо отображается в соответствии с правилами первого div. Но тогда письмо нормально отображается в gmail клиентах, как «для большого экрана».

                                                                      Если же первый div упаковать в

                                                                      @media only screen and (max-device-width: 6000px)
                                                                      


                                                                      то есть сделать его так, чтобы «свободных» стилей div'ов, без media не было бы — тогда на ios7 все начинает работать корректно, но в gmail-клиенте письмо выглядит так, как будто определения стилей div'ов вообще нет (что так и есть).

                                                                      Причину понять не могу. :(
                                                                        0
                                                                        Gmail вообще не понимает media queries, можно сказать. Он все жмет по своим алгоритмам. Понимание приходит методом научного тыка. Лучшее решение — не использовать фиксированные величины > 320 px в ширину. Только резина.

                                                                        Т.е. банальная резина — лучше переопределения стилей.
                                                                          0
                                                                          В общем все, разобрался. Почему-то, когда есть базовый стиль, и попытка его переопределить в media, то Apple Safari это понимает корректно, а Apple Mail криво. Я около всех тегов внутри media прописал !important, и все заработало, как ожидалось.

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

                                                                  Самое читаемое