Что такое ксс моя почта: Ссылка на адрес электронной почты

HTML в почте без таблиц / Хабр

Первый пункт руководства по разработке электронной почты MailChimp гласит: «Кодируйте всю структуру при помощи элемента table». В рекомендациях Cerberus (вероятно, самого популярного шаблона HTML-писем) говорится: «В случае сомнений встройте ещё одну таблицу». Прогресс не дошёл даже до структур на основе float. Кодинг электронной почты — это коллекция обходных путей, хаков и устаревших неподдерживаемых HTML-элементов.

Он долго был Диким Западом несогласованности, для решения задач на котором требовались тайные знания. Изучив таблицу поддержки на сайте look Can I Email (это аналог Can I Use для электронной почты), ты понимаешь, что клиенты электронной почты очень сильно различаются. Создание электронного письма для Apple Mail, Hey, Fastmail, Outlook for Mac, Proton Mail или Mail.ru не сильно отличается от кодинга современной веб-страницы. Однако, например, Yahoo Mail даже не поддерживает фоновые градиенты. Но гораздо сильнее, чем какой-либо иной клиент, электронной почте не давал вырваться из прошлого Outlook для Windows.

Outlook для Windows во многом можно назвать Internet Explorer среди клиентов электронной почты. Десктопное приложение Outlook для Windows, наряду с приложением Windows Mail, было единственной причиной того, что разработчикам приходилось собирать электронные письма из HTML-таблиц. (Приложения Outlook для macOS, iOS и Android таких проблем не имеют.)

Из-за Outlook современный код электронного письма выглядит примерно так:

    <tr>
      <td>
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="left">
                    <br>
                    <strong>MacBook Pro Winner</strong>
                    <br>
                    <br>First things first. During our pre-launch, we promised one lucky winner a brand-spanking-new MacBook Pro. M1 Chip and all.

  
 
                    <br>
                    <br>
                    Well, now that Lemon Squeezy has officially launched it's time to announce the winner.
                    <br>
                    <br>
                    <a href="#" >Drum roll, please →</a>
                    <br>
                    <br>
                    <br>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- etc. -->

Таблицы, вложенные в таблицы внутри таблиц…

Для Outlook уже давно пришло время надлежащего апдейта, и его наконец выпустили. Новый Outlook перешёл с движка рендеринга Microsoft Word на движок Edge. Похоже, поддержка возможностей CSS в новом приложении Outlook идентична поддержке outlook.com, что стало огромным шагом вперёд.

Outlook для Windows не поддерживал background-image — одно из самых старых и полезных CSS-свойств . Он не поддерживал border-radius, flexbox, float, opacity, outline, z-index, анимированные GIF и целую кучу других функций. Даже поддержка width, margin и display: none была частичной и забагованной. Пользовательская база Outlook со временем уменьшалась, но он оставался третьим по популярности клиентом электронной почты. Outlook был поистине ужасным, но слишком важным, чтобы его игнорировать.

Доля рынка клиентов электронной почты на февраль 2023 года, рассчитанная по более чем 1,3 миллиардам запусков в Litmus Email Analytics

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

На мой взгляд, большинство проблем с #A11y и багов рендеринга в клиентах электронной почты вызвано необходимостью поддержки рендеринга Word в Outlook.

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

— Марк Роббинс (@M_J_Robbins), 5 января 2021 года

Gmail имеет ограничение размера HTML в 102 КБ. После этой границы он обрезает письмо словами «[Message clipped]» и добавляет ссылку для просмотра остальной части письма. Не нужно говорить, что это не особо удобно для пользователей и большинство из них, вероятно, не нажмёт на ссылку, поэтому часть содержимого письма останется непрочитанной многими получателями. Разметка структуры HTML-таблицы чрезвычайно объёмна, и отход от неё поможет перестать усекать сообщения в Gmail. Тем временем, код некоторых современных электронных писем представляет собой такой дикий хаос вложенных таблиц, что способен поломать Outlook.

Хотя скорость обработки электронных писем никогда не была так важна для сообщества разработчиков клиентов, как для веб-разработчиков во фронтенде, она должна повлиять на click-through rate и восприятие пользователями вашей компании. Старые версии Outlook для Windows — это единственный клиент, в котором нет поддержки изображений WebP (даже AVIF поддерживается в большинстве клиентов), а учитывая распространённое отсутствие поддержки элемента <picture>, подстройка под Outlook вредит производительности.

Самые большие проблемы электронной почты сегодня

Каждый месяц Litmus (популярный инструмент тестирования электронной почты) выпускает статистику по долям рынка клиентов электронной почты.

С большим отрывом опережает всех конкурентов Apple Mail. Он по умолчанию поставляется со всеми устройствами Apple и, к счастью, обладает наилучшей поддержкой CSS среди всех клиентов электронной почты. Из 253 свойств HTML и CSS, перечисленных на Can I Email, Apple Mail поддерживает 234 (или 92%). Для примера, Gmail на iOS поддерживает только 92 (36%) из них.

Вот урезанная версия таблицы оценок Can I Email, в которой показаны только самые популярные клиенты:

Смерть структуры на основе таблиц не переносит автоматически электронную почту в современный мир. Существует множество CSS-свойств и значений, у которых по-прежнему отсутствует полная кросс-клиентская поддержка, в том числе:

• линейные, радиальные и конические градиенты для background-image
• box-shadow
• gap/column-gap/row-gap для размещения элементов в grid и flexbox
• grid
• align-items и justify-content
• object-fit
• относительное и абсолютное позиционирование

Сейчас самым проблемным клиентом является Gmail. Приложение Gmail поддерживает разные уровни CSS в зависимости от того, используете ли вы адрес электронной почты @gmail.com или сторонний адрес (@outlook.com, @yahoo.com и так далее). Уровень поддержки стилизации для сторонних аккаунтов минимален. Эти пользователи в меньшинстве, но они всё равно заслуживают поддержки.

Как же теперь создавать электронные письма?

Это интересный вопрос. Если мы собираемся отказаться от HTML-таблиц и двигаться дальше, то нам нужно понять, что способны делать сегодня в электронной почте HTML и CSS.

Во-первых, использовать div

При работе со стандартным элементом <div> не будет возникать проблем, но это не значит, что электронная почта поддерживает весь остальной HTML. Следующие элементы HTML5 поддерживаются не всеми клиентами электронной почты, поэтому вместо них нужно использовать <div>.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Другие HTML-элементы, такие как заголовки (<h2>, <h3>, etc. ), параграфы (<p>) и списки (<ul>, <li>), поддерживаются везде.

Нам всё ещё (как будто) нужен встроенный CSS

Подавляющее большинство клиентов электронной почты поддерживает тэги <style>, однако есть несколько пограничных случаев. Если переслать письмо в десктопную версию электронной почты Gmail, то все тэги <style> в пересланной копии письма будут удалены. Аккаунты сторонней электронной почты, используемые с приложением Gmail, тоже не поддерживают тэг <style>.

Тэг <style> нужен для определения таких вещей, как медиа-запросы, :hover стили и объявлений @font-face, потому что их нельзя определить встроенным CSS. Для всех остальных стилей лучше продолжить использовать встроенный CSS, чтобы охватить максимально широкую аудиторию.

А что насчёт AMP для электронной почты?

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

Теренс Иден сообщил с совещания AMP Advisory Committee:

Мы много раз слышали, что издателям не нравится AMP. Они ощущают, что вынуждены использовать его, в противном случае им не попасть в карусель новостей Google, находящуюся прямо наверху поисковых результатов.

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

Динамические электронные письма

Все клиенты электронной почты блокируют JavaScript в письмах с HTML. Вместо выполнения произвольного скрипта AMP предлагает ограниченную альтернативу. Это открывает новые возможности, которые ранее были невозможны.

Вы когда-нибудь отвечали на приглашение на мероприятие, не выходя из письма? Это стало возможно благодаря AMP.

Уведомление об обновлении @gmail! Теперь вы можете ответить на приглашение на мероприятие, оставить ответ на комментарий или просмотреть каталог непосредственно из входящих.

— Google Design (@GoogleDesign) 27 марта 2019 года

Благодаря AMP пользователи могут выполнять действия внутри письма даже без необходимости нажимать на ссылку.

Отправка писем с AMP

Для отправления писем с AMP ваш поставщик услуг электронной почты должен поддерживать AMP. Довольно большая их часть имеет такую поддержку, но определённо не все. Также нужно будет зарегистрироваться в Yahoo и Google.

Для получения писем с AMP получатель должен использовать Yahoo, Gmail, AOL или Mail.ru. Необходимо отправлять и AMP-версию, и HTML-версию писем. HTML-версия необходима для получателей, которые пользуются Apple Mail, Outlook и любыми другими входящими без поддержки AMP.

AMP обеспечивает возможность современной стилизации

Хотя в качестве основного преимущества позиционировали интерактивные возможности AMP, вероятно, лучшая особенность AMP — это его согласованность. AMP для почты реализует чётко заданное множество возможностей CSS. В письме с AMP вы можете использовать современный CSS и разметку, будучи относительно уверенным в том, что оно отрендерится одинаково в Gmail, Yahoo и любом другом клиенте, поддерживающем AMP. Для тех, кому приходилось выполнять контроль качества электронной почты, это важный аспект. Существует целая индустрия, построенная на тестировании HTML-писем, обусловленная огромным количеством несогласованностей в разных клиентах. Отказ от всего этого — одна из самых привлекательных черт AMP.

Клиенты электронной почты используют санитайзер, вырезающий определённый код в целях безопасности. Если позволить любому произвольному CSS выполнять такие действия, как абсолютное позиционирование и z-index, то отправитель сможет наложить собственный контент поверх интерфейса Gmail. Большинство клиентов электронной почты не рендерит письма в iframe, в то время как письма с AMP всегда рендерятся в iframe. Это меняет отношение к безопасности, поскольку Google и другие клиенты могут менее строго вырезать код из писем (хотя стоит учесть, что санитайзер CSS в Gmail не обновлялся уже довольно давно, в то время как AMP получил второе дыхание). Именно поэтому два самых плохих для HTML и CSS клиента, Yahoo и Gmail, способны рендерить современную разметку и стили в AMP.

Yahoo и Gmail — это единственные популярные клиенты, в которых отсутствует поддержка, например, flex-wrap, align-items и justify-content. Не учитывая интерактивные возможности AMP, мы можем использовать AMP как способ применения современного CSS. Кодинг двух разных типов писем может показаться обременительным, однако бОльшая часть валидного кода HTML-писем является валидным кодом AMP с некоторыми незначительными различиями (не допускается использование !important, AMP использует вместо тэга <img> тэг <amp-img>).

Редактор кода Parcel, специально спроектированный для электронной почты, имеет кнопку «Generate AMP from your HTML», автоматизирующую этот процесс. Она работает хорошо, однако требует ручного редактирования. При работе с HTML-письмами я вручную встраиваю CSS, чтобы знать, что нужно переопределить при помощи !important внутри медиа-запроса (!important требуется для переопределения встроенного стиля). Parcel удаляет все объявления !important, потому что они не валидны в AMP, то есть код внутри медиа-запроса перестаёт работать. Необходимо вручную брать все встроенные стили и перемещать их в блок <style> внутри <head>.

AMP имеет свои недостатки

Это шаг в нужном направлении, но он всё ещё далёк от идеала:

• письма с AMP существуют только тридцать дней. После этого они откатываются к отображению обычного письма с HTML. Большинство людей прочитает ваше письмо или сразу же, или никогда, но это всё равно неидеально.
• Если перенаправить письмо с AMP, даже в другие входящие, поддерживающие AMP (например, Gmail или Yahoo), то получатель получит только стандартную HTML-версию.
• AMP не поддерживает встроенный SVG.
• Письма с AMP не поддерживают @font-face, поэтому можно использовать только шрифты в системе получателя.
• AMP поддерживает CSS-переходы, но не CSS-анимации (@keyframes).
• Нет поддержки псевдоэлементов ::before или ::after.

AMP для электронной почты выглядит немного устаревшим, но не стоит списывать его со счетов. Google печально известна убийством собственных проектов, но об AMP для почты я не волнуюсь. User experience собственных продуктов Google (Google Calendar и так далее) получил выгоду от AMP, поэтому отказ от его поддержки негативно повлияет на собственные сервисы корпорации.

Заключение

Мир электронной почты движется медленно, но в правильном направлении. Email Markup Consortium недавно принял решение о стимулировании повышения согласованности между клиентами; надеюсь, они возымеют успех, ведь путь предстоит ещё долгий.

Правила верстки email-рассылки | DashaMail

Несмотря на прекрасный онлайн-редактор, который мы последовательно улучшаем и дополняем на ДашаМейл, некоторые наши клиенты предпочитают использовать собственные html-макеты. Иногда это связано с жесткими правилами бренд-бука, иногда – с наследством, оставшимся от предыдущих маркетологов. В любом случае, это право мы уважаем и стараемся помогать нашим клиентам делать email-рассылки адаптивными и прекрасно выглядящими в различных почтовых клиентах и браузерах. Ведь, как известно, существует множество почтовых клиентов и программ:

• веб-версии почтовиков (Gmail, Yandex, Mail, Yahoo итд.)
• десктопные программы (Outlook, Mail, Mozilla Thunderbird и даже Bat)
• мобильные почтовые клиенты (Iphone, Ipad, различные версии Android итд)

К большому сожалению, разработчики всех этих приложений действовали в разнобой в лучших традициях умножения стандартов. Часть из этих клиентов поддерживает CSS3, часть – нет, какие-то аттрибуты и стили поддерживаются мобильными клиентами и не поддерживаются десктопными. Более того, поддержка HTML и CSS может скакать от версии к версии вроде бы одной и той же программы. Веб-версии иногда просто обрезают код или добавляют свой собственный. Для того, чтобы минимизировать последствия этой вакханалии мы выработали 5 правил, которыми следует руководствоваться при верстке собственного html-макета.

1. Верстка таблицами

Если вы хотите простого и надежного решения, то таблицы – это самый очевидный выбор. Он однозначно убережет вас от проблем со старыми почтовыми клиентами. Не стоит забывать и о браузерах, которыми открывают веб-версии почтовиков, некоторые из них могут оказаться IE7 или даже, боже упаси, IE6.

2. Проверять универсальность поддержки аттрибутов у HTML-тегов и CSS-свойств

Мы подготовили специальную таблицу, которая позволит вам быстро и просто проверять поддержку различных аттрибутов и свойств в 10-ти самых популярных почтовых клиентах. Если вы не уверены в чем-то, то не стесняйтесь, загляните в нее и проверьте свои предположении о корректности вашей верстки.

3. Забудьте про блочные CSS

Использование CSS рекомендуется строго inline. Конечно, это может вызывать мучения при ручном формировании html-кода, поэтому ДашаМейл предлагает использовать данный инструмент автоматически – сразу после загрузки html-кода на 2-м шаге создания рассылки.

4. Ширина письма в 600 пикселей

Многие десктопные почтовые клиенты имеют максимальную область просмотра письма примерно равную 600px, что позволяет нам вместить письмо, оставив небольшие поля. 600 также кратно 1-2-3-4-5-6, что позволит вам реализовать нормальную адаптивную мультиколоночную структуру без использования “говна и палок”. Если 600 разделить на 9, то получится дофига шестерок. Это, в принципе, никак не применимо, но просто прикольно. В общем, как говорится, “не рефлексируйте – распространяйте”.

5. Media-query не очень круто.

Поддержка media queries в большинстве почтовых клиентов ограничена, например, она тупо отключена в почтовых клиентах Gmail, как в браузере, так и в мобильных приложениях. Достигнуть адаптивности без использования этого компонента CSS можно, хоть и немного заморочено. Но я верю в вас, мои юные падаваны. Использование этих 5-ти правил позволит вам создать корректный html-код, универсально отображаемый во всех почтовых клиентах и браузерах, а это значит, что все ваши подписчики будут испытывать глубочайшее удовлетворения от ее созерцания у себя в почтовом ящике. Да будет так! С любовью, Даша.

Подпишись на рассылку новостей

Только полезная и актуальная информация без спама

CSS в электронных письмах в формате HTML: что вам нужно знать, чтобы начать работу — Программное обеспечение для электронного маркетинга, которое работает на вас

Электронная почта является важной частью любой маркетинговой стратегии.

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

Однако кампании по электронной почте не обходятся без проблем.

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

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

В этой статье объясняется, как используется CSS, а также разбираются некоторые проблемы, часто связанные с внедрением CSS в электронные письма HMTL, и предлагаются несколько возможных решений.

Что такое каскадные таблицы стилей (CSS)?

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

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

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

Почему CSS в сообщениях электронной почты в формате HTML может вызвать проблемы

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

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

Основная причина этих проблем с отображением в электронных письмах CSS заключается не в коде. Скорее, это возможности провайдера электронной почты, которые могут различаться в зависимости от используемой вами версии провайдера электронной почты.

Так, например, для определенного кода может потребоваться шаблон с большим количеством изображений. Хотя оно может отлично выглядеть в приложении Gmail вашего друга, вы можете открыть электронное письмо в Outlook на своем рабочем столе, и оно будет выглядеть урезанным без изображений, например:

 

Источник: CSS-tricks.com

Другая распространенная проблема с электронными сообщениями CSS связана с форматированием. Тщательно спланированные блоки или шаблоны могут неправильно складываться или казаться сжатыми вместо того, чтобы занимать весь экран, как должны.

Рассмотрим этот пример, полученный в Gmail:

Источник: Github.com

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

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

Как добиться успеха с CSS в электронных письмах в формате HTML

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

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

Вот несколько вариантов, которые помогут сохранить впечатляющее отображение электронной почты без проблем с CSS:

1. Используйте встроенный CSS.

Если вы настроены на использование CSS, лучше всего использовать встроенный код. Это наиболее эффективный и широко используемый метод включения CSS в электронные письма в формате HTML. Согласно исследованию Litmus, 86% дизайнеров электронной почты встраивают свой CSS.

Преимущество использования встроенного CSS заключается в том, что большинство провайдеров электронной почты поддерживают этот стиль, а это означает, что вы, скорее всего, получите наилучшие результаты, не сталкиваясь с проблемами форматирования. Однако, поскольку разработчику электронной почты придется писать дополнительный код в каждой строке для каждого дополнительного элемента дизайна помимо базового HTML, создание шаблонов электронной почты может занять дополнительное время.

Источник: Litmus

Существуют инструменты для создания шаблонов электронной почты, которые могут помочь упростить эту разработку, но то же исследование Litmus показало, что почти 70% маркетологов встраивали свой CSS вручную или без каких-либо встроенных конструкторов.

2. Избегайте встроенных и внешних стилей CSS в электронных письмах в формате HTML.

Есть еще два параметра CSS, которые можно использовать в электронных письмах в формате HTML, но они повышают риск возникновения проблем с отображением.

• Встроенный CSS: этот стиль становится все более популярным с появлением мобильных и адаптивных электронных писем. Встроенные коды CSS определяются в одном месте электронного письма, как правило, в разделе как