Java, UX, HTML, CSS, WEB-design

Методы преодоления плохой поддержки CSS в электронной почте

Краткое описание по статье Методы преодоления плохой поддержки CSS в электронной почте

Название: Методы преодоления плохой поддержки CSS в электронной почте . Краткое описание: [ad_1] ⭐ Линда Э . Дата публикации: 18.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Линда Эллиотт

  • 0 Комментарии

Методы преодоления плохой поддержки CSS в электронной почте

  • 9 минут чтения

  • Кодирование, CSS, методы, информационные бюллетени, HTML, электронная почта

Краткое резюме ↬

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

В отличие от большинства веб-браузеров, почтовые клиенты еще не объединили поддержку стандартов электронной почты в формате HTML, что привело к плохой поддержке электронной почты CSS.

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

Дальнейшее чтение на SmashingMag:

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

Техника 1: HTML-градиенты

Создание градиентов для Интернета очень просто благодаря повторяющимся фоновым изображениям и инструментам, создающим кросс-браузерный код, таким как Ultimate CSS Gradient Generator. Градиент для электронной почты требует совсем другого подхода из-за отсутствия поддержки фоновых изображений в некоторых почтовых клиентах.

Еще после прыжка! Продолжить чтение ниже ↓

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

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

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

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

  1. То градиент заголовка будет расширяться по горизонтали с обеих сторон изображения заголовка в зависимости от ширины браузера или устройства. Таким образом, если ширина области просмотра больше, чем ширина изображения заголовка, градиент заполнит дополнительное пространство. Использование процентной ширины 33%, 34% и 33% для трех столбцов делает это возможным.
  2. То градиент тени блока будет иметь фиксированную ширину и гибкую высоту в зависимости от высоты содержимого, которая будет варьироваться от электронного письма к электронному письму.
  3. Подобно градиенту заголовка, градиент нижнего колонтитула также будет расширяться по горизонтали в соответствии с шириной браузера или устройства, но не будет иметь изображения в центре.

снимок экрана

Поведение градиентов заголовка, box-shadow и нижнего колонтитула.

Планируйте пиксель за пикселем: пробные цвета, записывайте цвета и записывайте количество повторяющихся цветов

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

Изображение заголовка представляет собой максимальную рекомендуемую ширину электронного письма (600 пикселей в ширину) и 120 пикселей в высоту. Откройте оптимизированное изображение заголовка в Photoshop и увеличьте его до 3200%. Используйте инструмент «Пипетка», чтобы выбрать значения цвета для каждого пикселя сверху вниз. Запишите значения цвета в текстовом редакторе и запишите количество пикселей, если значения цвета повторяются. Примеры цветов непосредственно из PSD для градиентов box-shadow и нижнего колонтитула, поскольку они не должны соответствовать каким-либо оптимизированным изображениям. Запишите цвета градиента нижнего колонтитула так же, как вы делали градиент верхнего колонтитула.

Снимок экрана

Увеличивайте масштаб, собирайте и записывайте цветовые значения с помощью инструмента «Палитра цветов» в Photoshop.

Кривбол угловые

Градиент box-shadow — это не только градиент. Градиент находится между четырьмя углами, что также можно воссоздать в HTML. Используйте палитру цветов, чтобы определить, где заканчивается градиент и начинается угол. Попробуйте и запишите цвета, как вы делали для градиентной части тени блока. Используйте электронную таблицу для угловой части тени блока, чтобы записать значения цвета и положение пикселя. Выборка и запись только одного угла и одной стороны градиента необходимы, поскольку значения цвета одинаковы для всех четырех.

снимок экрана

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

Сохраните все файлы с данными о цвете для дальнейшего использования, когда www.

Временные хитрости для облегчения написания кода

Добавьте к таблице временное заполнение ячеек и ширину 100 %, чтобы упростить выбор ячеек в представлении «Дизайн» в Dreamweaver. Добавьте цвета фона, чтобы различать углы и упростить слияние.

снимок экрана

Слева: Временные цвета и отступы различают углы и ячейки для упрощения www. Справа: добавьте значения цвета и объедините центральные ячейки.

Как кодировать HTML-градиенты

Скопируйте и вставьте записанные значения цвета в <tr> теги в качестве фоновых цветов. Добавьте высоты к <td> теги, обращаясь к повторяющимся номерам пикселей, а затем объедините центральные ячейки от конца градиента вверх. Это объединило <td> ячейка — это место для добавления изображения заголовка.

<tr bgcolor="#525252">
    <td height="2" width="33%"></td>
    <td rowspan="95" width="34%">Header image will go here</td>
    <td width="33%"></td>
  </tr>
  <tr bgcolor="#515151">
    <td height="2"></td>
    <td></td>
  </tr>
  <tr bgcolor="#505151">
    <td height="1"></td>
    <td></td>
  </tr>
  <tr bgcolor="#505050">
    <td height="2"></td>
    <td></td>
  </tr>
  <tr bgcolor="#4f4f4f">
    <td height="2"></td>
    <td></td>
  </tr>

Чтобы закодировать углы HTML, вернитесь к электронной таблице для значений цветов углов. Скопируйте и вставьте их в соответствующие <tr> теги. Цвета фона из одного угла можно применить ко всем углам, изменив порядок значений цвета по вертикали и/или по горизонтали.

Фиксированные значения высоты и ширины будут препятствовать расширению ячеек. Применяйте высоту и ширину ячеек только к тем ячейкам, которые необходимо определить. Например, в градиенте box-shadow добавьте высоты только к ячейкам первого столбца, исключая одну центральную ячейку, представляющую градиент. Это позволит градиенту расширяться по вертикали в зависимости от высоты содержимого. Добавьте ширину ко всем ячейкам только первой строки. Средняя ячейка первой строки должна быть шире, чтобы вместить вложенную оглавление.

После добавления всех значений высоты, ширины и цвета удалите временное заполнение ячеек, 100% ширину таблицы и неразрывные пробелы.

снимок экрана

Представление «Дизайн» в Dreamweaver, показывающее основную таблицу с градиентами верхнего и нижнего колонтитула.

Вот некоторые плюсы и минусы метода градиента HTML.

Плюсы

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

Минусы

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

Техника 2: Планирование отступов в виде строк и столбцов

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

Перетащите и подсчитайте

В Photoshop обязательно включите линейки, чтобы можно было добавлять направляющие. Перетащите направляющие вертикально и горизонтально по макету PSD, чтобы определить разделы для содержимого, изображений, заполнения и т. д. Как только столбцы и строки будут четко определены, сосчитайте их и вставьте таблицу соответствующим образом.

снимок экрана

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

Сливайтесь с осторожностью и проверяйте свою широкую загрузку

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

снимок экрана

Четыре таблицы объединены с соответствующей шириной и высотой ячеек.

Как избежать непреднамеренного заполнения дополнительных ячеек

Устранение пробелов между <td> теги важны. Некоторые почтовые клиенты создают дополнительные отступы из пустого пространства, что разрушает градиент, увеличивая высоту ячеек. Неразрывные пробелы также следует избегать по тем же причинам во всех почтовых клиентах.

Не забудьте вставить только HTML-код в представление HTML окна WYSIWYG. Не вставляйте код HTML в визуальное представление окна WYSIWYG. Редактор WYSIWYG добавит в HTML нежелательный код, например, неразрывные пробелы, что приведет к неточным результатам, испортит поля и т. д. Это также может свести с ума разработчика, пытающегося отладить код.

Инструменты для тестирования шаблонов электронной почты

Проверяйте HTML-шаблон на протяжении всего процесса кодирования локально в браузере. Еще один полезный ресурс — Fractal, который проверяет электронные письма в формате HTML на всех основных клиентах и ​​исправляет известные проблемы с электронной почтой. Последним шагом является проверка совместимости между клиентами. Litmus обеспечивает предварительный просмотр электронной почты в более чем 30 почтовых клиентах, тесты спам-фильтров и аналитику электронной почты. Я использую почтовый голубь, который использует функцию рендеринга Litmus.

Окончательный результат среди разных почтовых клиентов

Градиенты HTML и отступы одинаково отображаются в следующих почтовых клиентах и ​​браузерах:

  • Почта AOL (Internet Explorer и Firefox);
  • Apple Почта 4;
  • Gmail (Internet Explorer и Firefox);
  • Hotmail (Internet Explorer и Firefox);
  • Lotus Notes (8 и 8.5);
  • Me.com (Файрфокс);
  • Перспективы (2000, 2002/XP, 2003, 2007, 2010);
  • Тандерберд (2.0 и 3.0);
  • Yahoo Mail (Internet Explorer и Firefox).

Lotus Notes (6.5 и 7) — единственный почтовый клиент, который неправильно отображает градиенты.

снимок экрана

Образец предварительного просмотра входящих сообщений и отчетов о спаме.

Ресурсы

  • Проект стандартов электронной почты Этот коллектив работает с разработчиками почтовых клиентов и дизайнерским сообществом над улучшением поддержки веб-стандартов и доступности в электронной почте.
  • «Применение фоновых изображений к вашим электронным бюллетеням», Росс Ходжекисс, CampaignMonitor
  • «Разрабатывайте и создавайте информационные бюллетени по электронной почте, не теряя ума (и души)», Мэтью Паттерсон, журнал Smashing Magazine.
  • «Полное руководство по поддержке CSS в электронной почте» (PDF), CampaignMonitor
  • «Как кодировать информационные бюллетени по электронной почте в формате HTML», Тим Славин, SitePointПрактическая и исчерпывающая статья с практическими рекомендациями.
Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Методы преодоления плохой поддержки CSS в электронной почте

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»