Ответы пользователя по тегу Вёрстка писем
  • Верстка писем. В чем нюанс?

    Raxen
    @Raxen
    Frontend Developer, X5 Reatail Group
    Это старая известная фишка gmail, он адаптирует письма по своей никому неизвестной логике.
    Есть два способа решить этот момент: костыльный и геморройный
    1. Костыльный -
    В конце письма делаем невидимый блок на всю ширину письма (700пкс)
    <div align="center" style="display:none;text-align:center;white-space:nowrap;font:15px courier;color:#f3f3f5">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>

    2. Геморройный -
    Необходимо ко всем элементам, который gmail адаптирует (в основном блоки с текстом) прописать размер шрифта в !important и переносы убрать - white-space: nowrap;
    Буржуины предлагают еще способ использовать прозрачную картинку -
    <style>
    @media only screen and (max-width: 600px) {
      *[class="gmail-fix"] {
        display: none !important;
      }
    }
    </style>
    <tr class="gmail-fix">
        <td>
          <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
            <tr>
              <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 600px;">
                <img src="spacer.gif" width="600" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;"/>
                </td>
              </tr>
          </table>
        </td>
      </tr>

    Последний не проверял, но есть у меня мнение, что gmail выпиливает css код в тегах < style >
    Ответ написан
  • Где тестировать верстку email?

    Raxen
    @Raxen
    Frontend Developer, X5 Reatail Group
    Тестировать iphone без iphone уже плохая идея, как вариант - ставить виртуальную машину с OS X, на МакОс ставить эмулятор iphone(ios sdk) и на нем уже смотреть, но тут тоже не все просто - у меня заказчик смотрел верстку писем на приложении gmail для iphone, другой открывал gmail в браузере мобильного устройства, там вообще своя атмосфера.

    Так что стандартный набор -
    MS Outlook, Mozila Thunderbird (полезная для тестирования вещь, т.е. в ней есть возможность отправить письмо с html), для эмуляции Android устройств можно использовать Bluestack, для iOS виртуалочку с OSX (https://ru.wikipedia.org/wiki/IOS_SDK), ну и какой-нибудь девайс все же полезно иметь под рукой

    И помните, изначальная верстка отличается от той, которая приходит на email, т.к. каждый почтовый клиент имеет свои ограничения и выпиливает все ему ненужное
    Ответ написан