Создание красивых сообщений с помощью CSS.

Почему мы занимаемся темой красивых рассылок?

Мы не просто "веб-разработчики на Битриксе". Наша ключевая компетенция – умение интегрировать различные веб-системы и программные продукты между собой.

ИНТЕРВОЛГА – . Мы можем решить все задачи интеграции собственными силами. Мы приносим пользу бизнесу клиента за счет осмысленного применения веб-технологий.

Яркий пример "интеграционной" задачи – красивые стилизованные письма, которые решают бизнес-задачи вне зависимости от того, как именно читает письма ваш клиент и на каком устройстве.

Мы решили эту задачу для себя и можем помочь вам.

Я перехвачу у него эстафету и расскажу что можно сделать круче и какой крови это будет стоить.
Описанные Александром способы Email-рассылок (через модуль "Рассылки" , через MailChimp), как я уже говорил, работают, но не лишены недостатков. Например, к модулю рассылок 1С-Битрикс вы не сможете автоматически применять красивое оформление. А MailChimp бесплатен только если у вас менее 2000 подписчиков (потом начинает стоить немалых денег).

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

Покажи мне как выглядят письма с твоего сайта и я скажу насколько ты крут

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


А вот так вторые:



Откуда берутся такие “серые” письма? Я уверен что серьезная причина только одна: сделать по-настоящему красивые письма сложно. Причем сложно с 2-х позиций: творческой и технической.

Типы писем

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

    В текстовом формате
    Это самый простой тип - обычные письма не содержащие никакого форматирования. Только текст и ничего более. Именно в этом формате сайты на 1С-Битрикс по умолчанию рассылают пользователям уведомления (о регистрации, смене пароля и т.д.)

    В HTML-формате

      С минимальным использованием HTML
      Эти письма используют простейшие способы форматирование: цвет и размер текста, картинки. Для этого используются html-теги - те же самые что и в визуальном редакторе на сайте. Именно такие (и только такие, на момент написания статьи) письма умеют рассылать модули “Рассылки” и “Email-маркетинг”в 1С-Битрикс.

      Специально сверстанные
      Это самый сложный из типов писем - для него необходима специально подготовленная верстка. Именно про этот тип писем моя статья.

Как сделать письма сайта красивыми

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

Сделать такую верстку можно одним из 2-х способов:

    Использовать профессиональный сервис-конструктор.

    Сверстать самостоятельно. С нуля или используя специально “заточенную” под это библиотеку.

Создание верстки почтового шаблона С помощью конструктора

Для этого способа рекомендую использовать сервис MailChimp. Его полезной особенностью является бесплатный и весьма удобный редактор шаблонов писем. Он работает по принципу Drag&Drop. Вы просто накидываете блоки, редактируете текст и картинки.

Самое главное - не нужно изучать HTML, а значит не нужно привлекать верстальщика/программиста.

После того как вы сконструировали свой шаблон письма - сохраните его.

Этот код и есть наша цель.

С помощью специальной библиотеки

Оставь надежду, всяк сюда входящий

Данте Алигьери, «Божественная комедия»

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

Можно провести параллель с версткой сайта. На что тратится много времени? Конечно же на поддержку разных браузеров (чаще всего старых).

При верстке шаблонов почтовых рассылок огромное время будет потрачено на то же самое. Только теперь вместо IE, Firefox, Chrome и Opera у нас есть куча Email-клиентов: Gmail, Яндекс.Почта, Apple Mail и Outlook всех версий. Вынужден констатировать, что последние отстают в развитии лет на десять.

Этот способ следует выбирать если:

    возможностей конструктора не хватило (какой-то блок нужно подвинуть, а он не двигается);

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

    http://zurb.com/ink/ (мы сами выбрали именно ее)

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

Дополнительная подготовка почтового шаблона

К этому моменту мы имеем HTML-верстку. Но она еще не готова к отправке.

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

Факт остается - все стили перед отображением будут удалены. А Microsoft Outlook еще и своих стилей добавит. В результате ваше письмо будет выглядеть безобразно. Вот пример сверстанной рассылки:

А вот так она отобразится в Outlook если отправить ее без дополнительной обработки:

Решение этой проблемы существует и называется оно “Инлайнер” (inliner). Это инструмент который специальным образом преобразовывает ваш HTML-шаблон. Для каждого элемента вашего шаблона он вычисляет перечень стилей, которые к нему (элементу) должны быть применены, и записывает их в атрибут style соответствующего HTML-тега. Такие стили уже не вырезаются и не перебиваются почтовиками.

Воспользоваться можно например вот этими инлайнерами:

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

Как использовать шаблон почтовой рассылки в сайте на 1С-Битрикс

Возможны следующие сценарии:

    Сделать все исходящие уведомления сайта красивыми

Красивые уведомления с сайта

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

Реализовать этот сценарий можно используя новый функционал 1С-Битрикс - “Темы оформления”. Темы оформления позволяют добавлять “шапки” и “подвалы” к шаблонам исходящих писем.

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

Контентную часть нужно поместить в шаблон почтового уведомления. И вот тут возникает сложность: “проинлайненный” шаблон письма настолько громоздок, что применение этой верстки даже к одному уведомлению требует много времени (от десятков минут до нескольких часов) и нервов.

Простой шаблон

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

На скриншоте ниже уместилось только отображение одной строчки из скриншота выше.

А представьте сколько работы потребуется если вы захотите изменить цвет кнопок, например.

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

Красивая рассылка по базе подписчиков

Будем честны с собой: модуль “Рассылки” в 1С-Битрикс мертв. В нем реализован очень ограниченный набор действий, а серьезных обновлений не было много лет и более не будет. Модуль “Email-маркетинг” уже сейчас умеет намного больше, хотя темы оформления (шапки и подвалы) не поддерживает. Несмотря на это, я предлагаю использовать именно второй.

Все относительно просто, если ваша рассылка разовая и вы не собираетесь ее редактировать. При создании рассылки нужно выбрать “Пустой шаблон” и вставить туда полученный ранее (после инлайнера) шаблон почтовой рассылки. На этом все, если рассылка у вас единичная.

Если же ваш шаблон это только шаблон, а содержание вы хотите редактировать - возникает проблема. “В лоб” она решается только большим количеством ручного труда (на подготовку сниппетов). Однако мы придумали и умное решение.

А что дальше?

Если вы дочитали до этого момента - поздравляю вас с просветлением. Теперь вы знаете как непросто сделать красивую рассылку и какие проблемы ожидают на этом пути. Когда мы (ИНТЕРВОЛГА) начинали делать такие рассылки/шаблоны для наших клиентов мы набили много шишек на каждой из описанных проблем.

В результате мы решили автоматизировать часть этого процесса и собрать решения для описанных проблем в одном месте. Это место называется модуль “Почтовые инструменты” для 1С-Битрикс . Его ядром является тот самый инлайнер.

На этом интригующем моменте я хочу завершить статью. Читайте продолжение.

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

В этом уроке я хочу объяснить, как можно создать окна уведомления, которые будут появляться сверху в теле документа. Пользователь сможет кликать на сообщения, чтобы те исчезали и в конечном итоге вообще убрать их из DOM. Развлечения ради я также добавил кнопки, на которые можно нажать, чтобы вызвать новое предупреждающее сообщение вверху страницы. Посмотрите демо, чтобы получиться более полное представление о том, что мы будем делать.

Создание документа

Для начала нам нужно создать два файла: «index.html» и «style.css». Я впишу ссылки на последнюю библиотеку jQuery , работающую через CDN на серверах Google. Html-код довольно простой, так как нам нужно всего лишь написать импровизированный текст для предупреждающего сообщения. И весь JavaScript прописываем в конце хедера, чтобы сэкономить при HTTP обращении.

CSS3 Notification Boxes Demo

Вот так выглядит код в моем заголовке для настройки внешних документов и файлов типа HTML5. Не очень сложный, так как мы просто создаем образец. У нас будут два типа окон уведомления – успешное завершение операции и ошибка. Бывают и другие типы окон, к примеру, для предупреждений или информационных сообщений. Но я не создавал других вариантов, потому что хотел акцентировать внимание на эффекте.

Success!

Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.

Warning!

You did not set the proper return e-mail address. Please fill out the fields and then submit the form.

Click the error boxes to dismiss with a fading effect.

Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.

New Success Box New Alert Box

Перевод - Дежурка

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

Давайте начнем с типов сообщений

1. Информационные сообщения

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

2. Сообщения об успехе

Сообщения об успехе должны быть показаны после того, как юзер успешно выполнил какую-либо операцию. Успешно - означает полностью и без ошибок. Обычно такие сообщения зеленого цвета.

3. Сообщения-предупреждения

Подобные сообщения должны быть показаны пользователю если операция не может быть завершена. Обычно они желтого цвета.

4. Сообщения об ошибке

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

5. Сообщения проверки

Еще один тип сообщений. Я предпочел для них оранжевый цвет. Подобные сообщения показывают пользователю его ошибки (например, при заполнении форм).

Теперь давайте посмотрим как такие сообщения создать

Нам понадобится следующий код CSS :

Body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url("info.png");
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url("success.png");
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url("warning.png");
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url("error.png");
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url("validation.png");
}

Данный код можно вставить как в тот же файл, так и вынести в таблицу стилей.

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

Info message
Successful operation message
Warning message
Error message
Validation message

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

Чаще всего используется общепринятый набор уведомлений, включающий 4 вида оповещений:

  • Ошибки (error) При возникновении разного рода критических ошибок, лучше если пользователь будет уведомлен.
  • Предупреждения (warning) Этот вид сообщений предупредит пользователя о проблемах в будущем))).
  • Информационный (info) Проинформированный пользователь — это уже не «ёжик в тумане».
  • Успешное выполнение задач (success) Пользователь всё сделал правильно, это сообщение уведомит его об этом.

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

Разметка

Для начала выстроим html-каркас наших уведомлений. С этим всё очень просто, поместим нужные нам в 4 div-контейнера с общим для всех классом, обзовём его class="message" и присвоим каждому блоку уникальный идентификатор id, соответствующий типу уведомления. Например: предупреждающим прописываем id="warning" , информационной панели соответственно id="info" и т.д.
Идентификаторы нам понадобятся не только для привязки к CSS, но и для реализации закрытия уведомлений через событие onClick по клику.

× × × ×

× Внимание! Сообщение о критической ошибке. × Упс! Предупреждающее сообщение. × Важно! Просто информационное сообщение. × Поздравляем! Сообщение об успешном действии.

Изначально, для плавного исчезновения сообщений при закрытии, в onClick использовал свойства opacity:0; и visibility:hidden; , но так как элемент с нулевой непрозрачностью занимает то же самое место на странице, получалось пустое пространство. Пришлось пожертвовать плавностью перехода при закрытии и использовать display: none; , одно из тех свойств, которые без js нельзя анимировать(может и ошибаюсь). C помощью jQuery эта проблема решается на раз, тем более что для организации всплывающих уведомлений, воспользоваться этой библиотекой так и так придётся, но речь сейчас совсем не о том.

Для заголовков сообщений использовал тег , в кнопке закрытия вместо картинки элементарный спецсимвол & times; , обозначающий традиционный крестик(x).

CSS

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

. message{ background- size: 40px 40px; background- image: - moz- linear- gradient(135deg, rgba(255 , 255 , 255 , .05 ) 25 %, transparent 25 %, transparent 50 %, rgba(255 , 255 , 255 , .05 ) 50 %, rgba(255 , 255 , 255 , .05 ) 75 %, transparent 75 %, transparent) ; background- image: - webkit- linear- gradient(135deg, rgba(255 , 255 , 255 , .05 ) 25 %, transparent 25 %, transparent 50 %, rgba(255 , 255 , 255 , .05 ) 50 %, rgba(255 , 255 , 255 , .05 ) 75 %, transparent 75 %, transparent) ; background- image: linear- gradient(135deg, rgba(255 , 255 , 255 , .05 ) 25 %, transparent 25 %, transparent 50 %, rgba(255 , 255 , 255 , .05 ) 50 %, rgba(255 , 255 , 255 , .05 ) 75 %, transparent 75 %, transparent) ; box- shadow: 0 0 8px rgba(0 , 0 , 0 , .3 ) ; font: 16px "Open Sans" ; width: 85 %; margin: 20px auto; padding: 15px; - moz- animation: bg- animate 5s linear infinite; - webkit- animation: bg- animate 5s linear infinite; - ms- animation: bg- animate 5s linear infinite; animation: bg- animate 5s linear infinite; } . message span{ font- weight: 600 ; } . message #close{float:right; color:inherit; text-decoration:none;} . message#error{ background- color: tomato; border- left: 7px #dc3d21 solid; color: white; } . message#warning{ background- color: #eaaf51; border- left: 7px #df8b00 solid; color: #6b6d31; } . message#info{ background- color: #4ea5cd; border- left: 7px #3b8eb5 solid; color: #beecfc; } . message#success{ background- color: #61b832; border- left: 7px #55a12c solid; color: #296829; } @- webkit- keyframes bg- animate { from { background- position: 0 0 ; } to { background- position: - 80px 0 ; } } @- moz- keyframes bg- animate { from { background- position: 0 0 ; } to { background- position: - 80px 0 ; } } @ keyframes bg- animate { from { background- position: 0 0 ; } to { background- position: - 80px 0 ; } }

Message{ background-size: 40px 40px; background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); box-shadow: 0 0 8px rgba(0,0,0,.3); font:16px "Open Sans"; width: 85%; margin: 20px auto; padding:15px; -moz-animation: bg-animate 5s linear infinite; -webkit-animation: bg-animate 5s linear infinite; -ms-animation: bg-animate 5s linear infinite; animation: bg-animate 5s linear infinite; } .message span{font-weight:600;} .message #close{float:right; color:inherit; text-decoration:none;} .message#error{ background-color:tomato; border-left:7px #dc3d21 solid; color:white; } .message#warning{ background-color: #eaaf51; border-left:7px #df8b00 solid; color:#6b6d31; } .message#info{ background-color: #4ea5cd; border-left:7px #3b8eb5 solid; color:#beecfc; } .message#success{ background-color: #61b832; border-left:7px #55a12c solid; color:#296829; } @-webkit-keyframes bg-animate { from { background-position: 0 0; } to { background-position: -80px 0; } } @-moz-keyframes bg-animate { from { background-position: 0 0; } to { background-position: -80px 0; } } @keyframes bg-animate { from { background-position: 0 0; } to { background-position: -80px 0; } }

Анимацию, которая оживляет линии градиента на фоне уведомлений, логично обозвал bg-animate , чтобы сразу было понятно, какому элементу придаём движухи. Замедление смещения позиции диагональных полос выставил в 5s (пять секунд). Левый край блоков уведомлений выделил цветом и сделал его чуточку шире.
Цвет и начертание символа кнопки закрытия соответствует шрифту сообщений. В примере, шрифт семейства «Open Sans» подключил из библиотеки шрифтов Google, вы же можете использовать любой другой.

На этом пожалуй и всё. Остаётся только посмотреть работающий пример и при неуёмном желании поковырять код:

С Уважением, Андрей