Главная Услуги Работы Персона Юзабилити анализы
IMG
PDA версия
 тел. +7(98I) 7608865
Хабр, давай пофиксим письма?




ПОИСК по сайту


    Полный список статей / Хабр, давай пофиксим письма? / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Хабр, давай пофиксим письма?

Привет.

В очередной раз получив письмо от хабра, я расстроился. А дело вот в чем. На скриншоте слева мы видим нормальное адаптированное письмо. Так оно отображается во всех вменяемых мобильных почтовых клиентах, которые поддерживают media queries. Теперь давайте взглянем на скрин справа. Таким письмо мы видим в мобильных Gmail, Yandex, Mail.ru клиентах как на андроиде, так и на яблочке. Как вы уже возможно догадались, эти клиенты media queries не поддерживают.

Будем лечить?

Powered by WPeMatico

/habrahabr, CSS, email, HTML, адаптивные письма, верстка, Верстка писем, Мобильный веб /habrahabr
Стандартный
19.05.2015 admin 0

 Использование media queries в вёрстке email-писем: за и против

e8c15dbd79064d419d6eee3b736ec0df

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

Однако, прежде чем погрузиться в мир веб-дизайна и вёрстки уникальных email-кампаний, следует поподробнее взглянуть на media queries, как на инструмент, который имеет свои плюсы и минусы.
Читать дальше →

Powered by WPeMatico

/habrahabr, CSS, HTML, media queries, media query, Блог компании Pechkin-mail.ru, Верстка писем /habrahabr
Стандартный
14.05.2015 admin 0

[Перевод] Как использовать прогрессивное улучшение для вёрстки писем

33ceaf79d4c5420197d2cb006674ac0d

При верстке email-рассылок важно сделать разметку пригодной для парсинга и добиться того, чтобы «рюшечки» не мешали чтению контента. А главным контентом в письме почти всегда является текст.

Сегодня мы поговорим о том, как использовать технику прогрессировного улучшения при разработке HTML-шаблонов писем.

Поговорим о тексте


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

Обычно дизайнеры и верстальщики, занимающиеся подготовкой писем, из кожи вон лезут, чтобы сделать текст «примерно одинаково выглядящим» в разных почтовых клиентах. Пользователь, открывший письмо в Gmail, должен видеть то же, что и человек, пользующийся на работе Outlook.

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

Вёрстка со стилем


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

Хорошо выглядит выделение текста горизонтальными линиями подчеркивания, и если их не вытягивать на всю длину текста цитаты, то он выглядит еще лучше:



Чтобы заверстать это без добавления лишних тегов <hr />, можно использовать несколько интересных техник, редко применяемых в почтовых рассылках.

TL;DR — это иллюзия

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

<blockquote>
  <p>Hey Bonita, nice to meet ya</p>
</blockquote>

Если поэкспериментировать с отступами для цитаты (<blockquote>), то вскоре выяснится, что некоторые почтовые клиенты отрицательные отступы для внутренних элементов просто игнорируют — в итоге ширина текста выравнивается по границам шаблона.

Далее можно использовать псевдоэлементы ::before и ::after — их применяют в CSS для того, чтобы вставить на страницу стилизованные элементы, не являющиеся HTML-кодом (подробнее эта техника описана в руководстве Smashing Magazine).

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

blockquote {
  position: relative;
}
blockquote:before,
blockquote:after {
  content: ';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}
blockquote:before {
  top: -2px;
}
blockquote:after {
  bottom: -2px;
}

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

Этого удалось добиться, сделав фоном каждого псевдоэлемента,CSS3-градиент. Но куда лучше выглядит не плавное перетекание цвета градиента, а четкая граница между белым и серым цветом.

Чтобы получить нужный результат, часть градиента была закрашена белым цветом — начало на 25% от всей линии псевдоэлемента и затем в конце начиная с 75% длины линии. В итоге получился жесткий переход от белого к серому цвету.

blockquote:before,
blockquote:after {
  background: linear-gradient(to right, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%);
}

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

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

Обеспечение отказоустойчивости*


* На Хабре было несколько хороших статей по progressive enhancement и graceful degradation и второе понятие там переводилось, как _отказоустойчивость_ — будем придерживаться принятой терминологии.

Хорошая новость заключается в том, что некоторые популярные почтовые клиенты вроде Apple Mail, iPhone Mail и «дефолтного» клиента Android. Несмотря на это, об использовании псевдоэлементов можно забыть в Gmail или Outlook.

И здесь на сцену выходит техника progressive degradation (или отказоустойчивость). Для всех менее оснащенных технически почтовых клиентов нужно добавить пару простых границ на CSS:

blockquote {
  border-top: 2px solid #d9d9d9;
  border-bottom: 2px solid #d9d9d9;
}

Эти границы покажут вообще практически все почтовые программы, а если успешно «отрендерятся» элементы ::before и ::after, то они закроют собой серые линии новыми бело-серыми полосами.

Вот как выглядят оба варианта отображения в динамике:



Так стоит ли писать дополнительный CSS-код, только чтобы добавить несколько «рюшечек», которые еще не факт, что увидят все получатели письма? Каждый случай, каждая рассылка уникальны, и нет однозначного ответа — для того, чтобы принять такое решение, как минимум, нужно ознакомиться со статистикой использования почтовых клиентов участниками (ранее мы публиковали подробный материал по статистике для создания успешной рассылки).

Вполне оправдан подход, при котором создаются шаблоны писем, которые выглядят максимально хорошо в каждой среде использования, а не просто идентично во всех возможных почтовых клиентах.
3
Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(98I) 7608865

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2024 romver.ru

Полная карта сайта Display Pagerank