Jump to content
  • 0

Верстка email писем

WhatIsHTML

Asked by WhatIsHTML,

 Share

Question

WhatIsHTML Explorer

WhatIsHTML

Posted
Posted

Делал задание по верстке email рассылки. Единственная проблема возникла с тестированием.

1. Я не знаю где и как можно проверить отображение на разных почтовиках.

Знаю есть сайт litmus, но для бесплатного тестирования там только 3 почтовика (gmail, iphone 6s, outlook 2013). Хочется быть более уверенным, когда отправляешь письмо заказчику, что оно тебе не будет снится по ночам и заказчик не будет вспоминать тебя трехэтажными словами.

 

Еще вопрос по поводу media запросов.

2.Можно ли их использовать?

Вот тут campaignmonitor написано за 19.09.2013

  Цитата

Added support for @font-face, @media and HTML 5 media tags in email clients, as well as email-relevant CSS properties. We re-tested all webmail clients and the latest versions of existing clients.

Expand  

Проверял письмо еще вот здесь . На media запросы никак не реагировало, поддержка написана 97%. Только вот запросы эти пишу в <head> а сервис после конвертирования их вырезает.

3. Писать стили (запросы) в head по-прежнему нельзя?

4. Как быть тогда с адаптивностью?

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
WhatIsHTML Explorer

WhatIsHTML

Posted
  • Author
Posted

Возможно, но с ними намного легче)

По поводу тестирования вопрос частично решил. На Mailchimp можно тестировать отправку письма по заданному адресу. Вставил хтмл, ввел адрес и отправил. Минус в том, что приходится заводить дополнительные ящики. А вот тестирование на мобильных устройствах по прежнему непонятно. У меня Android, но по статистике на IPhone открывают почту гораздо чаще чем в любом другом почтовом сервисе. Как тестировать для него? Может кто-то знает.

Link to comment
Share on other sites
  • 0
li4e Explorer

li4e

Posted
Posted

Может поможет
https://www.campaignmonitor.com/css/ - таблица с поддержкой тех или иных свойств на различных платформах

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

Link to comment
Share on other sites
  • 0
Launder Explorer

Launder

Posted
Posted

По информации, из "этих Ваших интернетов", The Bat! поддерживает язык гипертекста HTML 4.0 и стили форматирования документа CSS v2.0, игнорирует скрипты и исполняемый код. У Thunderbird, поскольку его разработка давно уже приостановлена (по крайней мере, Мозилой, подхватил ли кто эстафету, не в курсе), думаю, ситуация не лучше...

Впрочем, что касается Бата, то я бы поискал более точную информацию на сайте производителя, в первом приближении, её там нет, но зато там есть форум, думаю, можно поинтересоваться...

 

Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

хм... почему это Thunderbird приостановлен?
Только что обновился в приложении говорится, что создан он Mozilla (ни каких сторонних лиц не указанно), на офф сайте тех поддержка работает.

Или я что-то пропустил?

Link to comment
Share on other sites
  • 0
Launder Explorer

Launder

Posted
Posted
  On 3/25/2016 at 9:58 AM, Switch74 said:

хм... почему это Thunderbird приостановлен?
Только что обновился в приложении говорится, что создан он Mozilla (ни каких сторонних лиц не указанно), на офф сайте тех поддержка работает.

Или я что-то пропустил?

Expand  

Вот.

Link to comment
Share on other sites
  • 0
Launder Explorer

Launder

Posted
Posted (edited)

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

Edited by Launder
Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

Посмотрел я этого seamonkey - выглядит как IE 5, но работает вроде как шустро. Судя по всему может все, но как-то все это не очень удобно.
Инструменты разработчика не впечатлили. Пока даже для теста нет желания оставлять на компе это детище. 

Link to comment
Share on other sites
  • 0
WhatIsHTML Explorer

WhatIsHTML

Posted
  • Author
Posted (edited)

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

Ладно, по теме. Сел разбирать Foundation Email Framework. Все просто и понятно и круто, на первый взгляд. Но отправляю письмо на gmail, открываю его на Андроиде и вижу  такое... В общем, не годится он для разработки адаптивных писем (а на сайте обещали то!). Отдельные классы удобно использовать, но что касается сетки, то лучше делать ее самому. Ну или может есть еще какие-то инстурменты

 

2016-03-25 19.03.45.png

Edited by WhatIsHTML
загрузил картинку поменьше
Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

Если ты сделал по документации, которую прочитал досконально, и у тебя получилось не так как на примере, то скорее всего ты сделал что-то не так.

Foundation — очень не плохой фреймворк.

А так же надо учитывать что термин "responsive" и "email letters" ставить вместе, даже в нынешнее время, несколько скептично. Браузерная вёрстка опережает письма с прошлого тысячелетия...

Link to comment
Share on other sites
  • 0
WhatIsHTML Explorer

WhatIsHTML

Posted
  • Author
Posted

На скриншоте не мое творение, а их. Это один из стандартных шаблонов. Скорее всего проблема в медиа запросах. У них они помещаются в <style>, который в свою очередь помещается в <body> (не в <head> как обычно). А Gmail вырезает все, что лежит между <style> (не важно где эти стили, в <body> или в <head>). Ведь inline media никак же не встроить?

Link to comment
Share on other sites
  • 0
Vessel Explorer

Vessel

Posted
Posted

Да, gmail не воспринимает style. Но это не значит, что нельзя использовать медиа-запросы. Без медиа-запросов не сделать адаптивное письмо.

Срезает стайл насколько мне известно только gmail . Во всех остальных клиентах всё нормально. Очень также важно, с какой системы будет отправляться письмо. Многие сервисы рассылки форматируют код. Если вы занимаетесь вёрсткой писем, то должны знать об особенностях всех популярных клиентов.

В остальном gmail вполне предсказуем. Куда веселее тестировать письмо на outlook 07-10-13. Вы же знаете, что эти версии аутлука работают на движке word. Там около 30 хаков, которые нужно знать, чтобы качественно сверстать рассылку. Также есть некоторые нюансы на outlook 2000-02-03. Но они мелкие, несущественные и в принципе. На них в совокупности сидит около 10 процентов всех аутлучных пользователей. Обратил бы ваше внимание сейчас на outlook 2016. Сильно его не изучал, но баги идентичны с аутлук 2013. ios кстати отлично поддерживает медиа-запросы. Проблемы с этим только у gmail apps. Но там сейчас в последних версиях более-менее адекватно работает масштабирование. Просто не надо делать письмо шире 700 пикс. 

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept