Вёрстка E-mail писем

О некоторых моментах я хотел бы упомянуть в данной заметке, ну а если вам не хочется всем этим заморачиваться, то для организации E-mail и SMS рассылок вы можете воспользоваться специализированными сервисами, например Esputni. Конечно, все наблюдения описанные ниже являются плодом собственного наблюдения, и возможно есть лучшие пути решения некоторых проблем.

Вёрстка

1. Любое письмо начинается с элемента , лучше всего подходит следующий: в сложных письмах, где очень много нарезанных изображений, он позволит избежать отступов под изображениями в ячейке таблицы.
2. Никаких тегов , они лишь введут вас в заблуждение, используйте только inline стили.
   
3. Вся вёрстка только в табличном виде, никаких
   и

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

4. Желательно иметь одну основную таблицу, которая и будет являться всем письмом. У этой таблицы также не забываем указать cellSpacing="0" cellPadding="0" и ширину в атрибуте width. У всех ячеек тоже должна быть проставлена ширина и в сумме ширина ячеек в одной строке должна равняться ширине таблицы, в противном случае предсказать результат будет сложно.
   
5. Rowspan и colspan использовать можно, не без фанатизма. Верстать с их помощью заумные конструкции будет лишней тратой времени т.к. Outlook ваших старании не оценит и сделает всё по своему.
   
6. У всех картинок должны быть проставлены атрибуты width, height, alt и style="display: block"
   
7. Про фоновые картинки забываем, используем только тег
   
8. Закругления краёв блоков придется делать по старинке с помощью изображений.
   
9. Если ячейка таблицы содержит лишь одно изображение, то ей необходимо обязательно указать ширину (см. пункт 4) и, высоту указывать у неё не надо, т.к. это может вызвать появление «непонятных» полосок(отступов) под картинкой.
   
10. В каждой ячейке не забываем обрамлять текст тегом , у которого в стилях указываем шрифт и его размер. Если необходимо сменить текст анкора у ссылки, то тут поможет только тег
    

11. Бывает так, что необходимо добавить пустую ячейку, обычное указание её ширины не поможет, т.к. к примеру ячейка в Outlook’е просто «схлопнется», добавление неразрывного пробела внутрь не поможет, тут вам должен прийти на встречу заранее подготовленный прозрачный пиксель. Это обычная прозрачная картинка размером 1х1 пиксель. Её можно использовать как распорку, которая не даст ячейке схлопнуться, например  

12. Обязательно в конце письма должна быть ссылка на отписку и причина, по которой клиент получил данное письмо. Это значительно уменьшит вероятность попадания вас в спам листы.