0,0
рейтинг
29 августа 2011 в 15:13

Разработка → Почтовые рассылки: Долой костыли! tutorial

CSS*
Привет, хабраверстальщикам!

После долгого затишься спешу поделиться новыми наблюдениями относительно костылей при верстке, а так же приятных изменениях в этом плане. Данная статья является ремастерингом прошлого топика о костылях при верстке рассылок. Почему ремастеринг и зачем? Все просто! Глубокоуважаемые «Демоны»(почтовые клиенты и веб-интерфейсы) изменились визуально и пофиксили свои баги. Что ж, начнем!

Mail.ru


Первое что сделали эти ребята, так — сменили дизайн на более «легкий» и приятный в работе почтовый интерфейс. Более того, все переверстано дивами! Теперь не будут мэйлрушечку приводить в пример, мол они таблицами верстают и не парятся. Как говорит один персонаж в Интернетах: «И это хорошо!»


(изображение кликабельно)

На этом дело не заканчивается. Команда разработчиков взялась за парсер почтовика и исправила один противнейший баг, который заключался в том, что тег BR дублировался например в такой конструкции:
<span style="font-family:arial; font-size:12px; color:#404040;">Lorem[br/]Ipsum[br/]Dolor[br/]Sit[br/]Amet</span>

Она превращалась в нечто подобное:
<span style="font-family:arial; font-size:12px; color:#404040;">Lorem[br/][br/]Ipsum[br/][br/]Dolor[br/][br/]Sit[br/][br/]Amet</span>

Приходилось каждую отдельную строку текста заключать в отдельный div и span со своими стилями. Теперь костылить не приходится. Спасибо команде mail.ru за такую приятную мелочь!

Yahoo! mail


Прогресс не стоит на месте и старыми скинами страшных демонов-почтовиков уже никого не запугаешь. Yahoo! так же полностью обновили свой интерфейс, придав ему фиолетовый окрас. Дизайн не на столько «легок», как у mail.ru, но тем не менее вполне приятен в работе.


(изображение кликабельно)

И тут все только продолжается. Старательные программисты и тут исправили баг, о котором я писал ранее. Он заключался в том, что в некоторые ссылки хаотичным образом вставлялся тег span с классом yshortcuts, который объявлял свои дефолтные стили для этой ссылки. Теперь же все в порядке, появления этого «бесёнка» более не было заметно.

Gmail


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

Яндекс почта


Яндекс парсер по прежнему окрашивает ссылки красным цветом при наведении, что означает — important! во всех цветовых стилях относительно ссылок. Остальные почтовики, собственно так же ничего не поменяли в своей работе.

И снова об отписке


Знаю, что говорю об этом далеко не первый раз, но многие сервисы, пиарившиеся на хабре по прежнему грешат этим правилом. Да, некоторые вставляют ссылку на отписку, которая ведет на страницу авторизации в сервисе. Некоторые просто говорят: «Зайдите ка вы сами на сайт, авторизуйтесь, зайдите в настройки, и уже сами найдете как там отписаться». Неужели так трудно генерировать уникальный токен для каждого письма при рассылке чтобы пользователь мог отписаться по прямой ссылке? Вы(сервисы), конечно, как хотите, но такие письма я засылаю в спам. Ведь это проще, чем пройти авторизацию и отписаться ;)

P.S. Отдельное спасибо тем, оценил статью заранее и помог с публикацией!
Артур Кох @dudeonthehorse
карма
72,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (28)

  • +1
    Где-то читал о том, что для гмейл можно сделать такой заголовок письма, чтобы при клике на «спам» оно отписывало пользователя от рассылки.
    • +3
      Да, существует заголовок, именуемый list-unsubscribe, проводящий данную манипуляцию, но тем не менее это не повод усложнять отписку для пользователя.
      • +2
        Эм, так ведь это не усложнение, наоборот.
        Оставить ссылку «отписаться» обязательно нужно.
        • 0
          Под усложнением я имею в виду невозможность отписки по прямой ссылке и навешивание list-unsubscribe
      • 0
        я про то, чтобы одновременно с отпиской в письме ещё была отписка по заголовку. мне проще нажать «спам», чем искать кнопку «отписаться».
        • 0
          Ну так с list-unsubscribe по идее так и происходит, но работает далеко не везде.

          >> мне проще нажать «спам», чем искать кнопку «отписаться»
          ну зачем же портить жизнь тем, на кого сами подписались ;)
          • 0
            Бывает, что я не подписывался ;)
            • 0
              Если не подписывались/не давали своего согласия в пригласительном письме, то вы все правильно делаете! В спам!
  • 0
    Картиночный сервис сдох — картинки в статье не показываются
    • 0
      Вот и я думаю — для кого habrastorage.org/ делали?
      • +2
        А я вот параллельно с вами дума, почему же хабрасторадж выдает 500 ошибку при загрузке любого изображения.
        • +1
          ЧЯДНТ?

          • 0

            Спросите разработчиков
            • 0
              бывает. попробуйте то же изображение второй раз загрузить)
              • 0
                пробовал до посинения ;)
                • –1
                  Попробуйте загружать изображения вменяемого разрешения.
                  • +1
                    Как ни странно, мелкие картинки грузит. Хотя приведенные мною на мой взгляд вполне вменяемы. В любом случае спасибо за подсказку.
  • –1
    хабравестальщикам — буква!
    • +1
      Исправлено.
  • 0
    >Теперь не будут мэйлрушечку приводить в пример, мол они таблицами верстают и не парятся.
    я вот не знал, что у них оно было таблицами. Знал бы — приводил как плохой пример.
    • 0
      Ну почему же. Сервисы которые не гонятся за краткостью кода исправно делаю рабочие интерфейсы на таблицах. Как пример — онлайн операционные системы.
      • +1
        вот и Руперт Грин, исполнитель роли Рона в фиьмах о Гарри Поттере, тоже не гонится за краткостью кода.
        • 0
          Что не мешает этому сайту быть замеченным вами ;)
          • +1
            он такой теплый и ламповый, что навсегда будет в моем сердце.
            • 0
              Вот и славно ;)
    • 0
      Да и возьмем в пример обсуждаемую тут тему: рассылки!
      Как ты ни старайся дивами ты ничего не поделаешь. А раз длина кода не важна, верстаем таблицами, и все счастливы.
    • 0
      Боюсь представить как это выглядит в Opera Mini какой-нибудь или Opera Mobile… Или встроенном в Симбиан браузере :).
      Они див вёрстку не любят.
      • 0
        Вот вам и повод протестить ;)

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