Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как верстать html письма


Верстка html-писем - советы

Большинству тех, кто занимается email-маркетингом, в том числе и новичкам, так или иначе приходится вникать в кухню html-верстки.Мы часто используем готовые html-шаблоны, но несмотря на свою предполагаемую универсальность, всегда надо уметь правильно вставлять и подгонять картинки, вставлять их в рамочки, менять стили заголовков, фон, шрифт, размер. И уже начиная с этих базовых знаний о CSS (атрибуты стиля), мы начинаем копать глубже и начинаем понимать из чего на самом деле состоит html-верстка.Даже если вы не профессионал, не web-девелопер и не web-дизайнер и используете чужие шаблоны, вам все равно придется их адаптировать под свои нужды, а это значит — копаться в уже созданном коде.Не все html-шаблоны, которое вы встретите на просторах интернета будут учитывать все особенности и универсально хорошо отображаться во всех почтовых ящиках и email-клиентах. Мы собрали для вас несколько рекомендаций для html-верстки писем, которые вам надо будет иметь в виду и, по необходимости, добавлять. Будьте готовы к экспериментам!

Но для начала, небольшое отступление.

На то, как будет видеть шаблон ваш подписчик, влияет в первую очередь устройство, с которого он его читает — это ПК или мобильное устройство. Если это ПК — то почтовый клиент (десктопное приложение) или веб-почта (вход в почту через веб-браузер). Если это смартфон или планшет, то и тут может быть родной почтовый клиент, другой почтовый клиент или отдельное приложение от любимого email-провайдера (например Gmail App или приложение Yandex.Mail).И теперь все эти факторы помножьте на существующее количество почтовых провайдеров, почтовых клиентов, девайсов и приложений. В общем вы поняли, html-верстка — то еще развлечение.Сегодня мы рассмотрим html-верстку писем для ПК. Он пока все-таки еще преобладает. Адаптивная верстка писем для мобильных устройств — отдельная тема, требует отдельного поста.Начнем с главного.Верстку html-писем рекомендуется осуществлять на табличной основе. Если для web-разработки этот прием устарел, то для email он оптимален именно из-за этого самого разнообразия девайсов, почтовых клиентов и email-провайдеров, где каждый — со своими фишками и настройками.Нечто похожее, кстати, было с браузерами лет 10 назад, когда они вели яростную войну за долю рынка и не желали сотрудничать друг с другом. Приходилось из кожи вон лезть, чтобы сайт одинаково хорошо выглядел и в Интерент-Эксплорере, и в Опере. Благодаря Web Standards Project и совместным усилиям программистов, удалось создать и внедрить универсальные стандарты. Будет ли у email-писем такая же судьба?Не отходя от кассы — что такое табличная структура:

Первая строка

Второя строка

Блочная структура, популярная в web-верстке использует тэг div.

Ширина письма не должна превышать 680px. Иногда вполне уместно использовать и 700px, но не более. И тут дело не только в современной эстетике.Уже доказано на многочисленных экспериментах, что для быстрого, поверхностного чтения (а именно так и читают/просматривают свою почту читатели), оптимальный размер горизонтальной строки — это около 65-75 символов. Если учесть пробелы, пунктуацию, отступы и стандартный шрифт в 14px, то это как раз 600-680 пикселей.Создать email, в котором поля и отступы отображались абсолютно одинаково во всех почтовых ящиках и email-клиентах практически невозможно. Не только email-провайдеры, но и email-клиенты вырезают или добавляют те, или иные свойства.

Сначала обнулить

Одно из основных правил табличной верстки — это добавление свойств, которые обнуляют лишние отступы и рамки, добавляемые очень многими почтовыми клиентами и провайдерами web-почты (Gmail, Yandex, Outlook и т.д.).

Эти свойства (border, cellpadding, cellspacing, margin) должны вставляться под каждым тэгом table.

А потом добавить

В 2013, Outlook.com (бывший Hotmail) стал вырезать внешние отступы, или поля — margin — из кода емэйлов. Поэтому, для того чтобы горизонтальные отступы отображались корректно, необходимо прибегнуть к внутренним отступам — padding. С другой стороны, тот же Outlook, только уже почтовый клиент не поддерживает padding, когда он прописан inline (подробнее об этом ниже). Т. е. когда данное свойство прописано непосредственно под тэгом p . Поэтому, чтобы уравновесить отступы, можно прибегнуть к следующим трюкам.

Вариант 1: Отказаться как от padding, так и от margin

Для горизонтального отступа использовать вложенную таблицу меньших размеров чем основная ширина блока. Т. е., получается табличка в табличке. А для вертикального отступа использовать пустой блок/контейнер с заданной высотой строки. Например:

Вариант 2: Отказаться от тэга

В таком случае, вписывать текстовые блоки непосредственно под тэгом td, предварительно прописав в каждом тэге td ВСЕ свойства, от шрифта до отступов. А для разбивки абзацев использовать тэг br. Например:

В качестве дополнительного вертикального отступа, между блоками можно использовать пустые блоки/контейнеры с заданной высотой строки. Например:Второй вариант будет означать очень много кода.Обычно, html-шаблон предполагает белый фон для основного письма (текстовые блоки) и более темный, контрастный — для основного контейнера самого html-шаблона. Обычно это разновидности серого, но сегодня им никто не ограничивается. Например — это может быть бордовый, темно-коричневый, лазурный или даже черный.Важно помнить — всегда необходимо использовать полный, шестизначный hex-код оттенка, например #2a7fb8 или #b6b6b6, и не укорачивать его. Например, правильно писать белый цвет как #ffffff, а не сокращенно как #fff. Иначе, многие почтовые клиенты его просто не распознают.Также, сейчас в качестве фона можно использовать изображения или паттерн, т. е. повторяющийся мотив.Ниже приведен пример кода для фонового паттерна.

Добавьте этот кусок после открывающего тэга body, до первого открывающего тэга table:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
height=«100%» width=«100%» cellpadding=«0» cellspacing=«0» border=«0»> +7 (495) 664-22-74

Для электронной почты:

[email protected] Блокирование изображений — частая проблема. Многие почтовики и email-клиенты блокируют изображения по умолчанию, лишая таким образом html-шаблон одного из самых главных своих преимуществ — картинок.

Подписчик может разрешить почтовику/клиенту отображать автоматически ваши картинки, а может и не разрешить, предпочитая, от раза к разу, загружать или не загружать изображения в ручном режиме. И в этом случае, открывая письмо, вместо изображений подписчик будет видеть пустое место. Разумеется, это пустое место можно как-то обозначить или дополнить по смыслу. Для этого существуют атрибуты alt, title и другие свойства.

Атрибут alt отображает текст, присвоенный изображению. Таким образом, если картинка заблокирована, подписчик сможет увидеть ее подпись. У этой подписи могут быть такие свойства, как шрифт, цвет шрифта, его размер, стиль. Атрибут title отображает всплывающий текст-подсказку и может быть отличным от alt-текста.У изображения также может быть собственный фон — background-color (такой-же как и общий фон шаблона или отличный от него), скругленные края — border-radius (к сожалению, нечитаемое некоторыми почтовиками и клиентами свойство — Yahoo, Outlook), а также просто рамки.

Насчет рамки — border — всегда стоит использовать полный, не сокращенный вариант этого стиля. Например, правильно будет указывать:

  • border-width:1px; border-style:solid; border-color:#999999;

А так будет не правильно: border: 1px solid #999;

display:block; — свойство изображения, позволяющее отображать его отдельным блоком, иначе, в некоторых клиентах оно может поплыть и уйти в другой ряд или угол. Также, это не позволяет email-клиенту Outlook добавлять к изображению нежелательные отступы.Стоит также указывать line-height, когда высота изображения менее 19px. Это поможет избежать лишних зазоров между ячейками в Outlook 2013.Также, всегда стоит указывать ширину и высоту изображения, в точных и реальных размерах, чтобы избежать некорректного изображения и позиционирования внутри самого шаблона. Например, если ваша изображение — размером 820х600px, не стоит его масштабировать и писать размеры как — 410х300px, так как Outlook будет отображать именно реальные размеры изображения, а не его уменьшенную версию. Такое изображение запросто сломает вам весь шаблон.В итоге, код для изображения может выглядеть так:«ВесеннийКак видите, есть с чем повозиться.В итоге, какими бы проверенными не были данные советы, все установленные в html-шаблоне свойства необходимо будет тестировать, и по нескольку раз, прежде чем определиться с самым оптимальным вариантом. Подгон шаблона под все перечисленные параметры может занять некоторое время и к этому надо быть готовым. Тестируйте!

С уважение, Дмитрий Арсеньев!

HTML верстка e-mail писем, 4 особенности которые следует принять во внимание - Юрий Ключевский

Публикую перевод статьи “How to Code HTML Email Newsletters”, написанной Тимом Слэйвином (Tim Slavin) для сайта sitepoint.com.

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

В последнее время сверстать письмо в HTML формате стало легче – некоторые почтовые провайдеры, такие как Google Mail, улучшили поддержку CSS. Однако, в тоже время, Outlook 2007 сделал шаг назад на пути отображения HTML писем: в прошлом году Microsoft заменила движок рендеринга HTML, который использовался Outlook, на новый, уступающий предыдущему в плане поддержки CSS.

Другими достижениями в этой области за последние несколько лет стало появление сервиса Email Standards Project, который направлен на то, чтобы улучшить соответствия между почтовым программным обеспечением; появление услуг тестирования того, как письма будут отображаться в разных почтовых десктопных и веб приложениях; появление множества бесплатных шаблонов для использования в своих целях. В этой статье мы рассмотрим некоторые сервисы и шаблоны, которые помогут вам понять, как правильно сверстать письмо в HTML формате.

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

Это, по сути, вторая версия статьи, которая была написана и опубликована на sitepoint.com в 2004 году, и включает в себя новые материалы, которые помогут вам убедиться в том, что ваши электронные письма отвечают всем требованиям сегодняшних почтовых клиентов.

Основы html для e-mail

При верстке HTML писем много времени отнимает фактор существования большого количества различных программ для чтения электронной почты: из настольных программ – Eudora, Outlook, AOL, Thunderbird, и Lotus Notes; из работающих через веб-интерфейс — Yahoo!, Hotmail, Google Mail и др. Если Вы думали, что придерживаться кросс-браузерности при верстке веб-страниц было трудным, то приготовьтесь к новой игре, так как каждый из выше упомянутых клиентов может отображать одно и то же электронное письмо совсем по-другому. И даже когда эти средства будут отображать все отлично, вы должны помнить, что читатели, могут изменять размеры окна при чтении, при этом могут возникать разного рода неприятности.

Если вы решите заниматься ручной версткой HTML писем (мое предпочтение) или использовать уже готовый шаблон, вы должны помнить о двух вещах:

  1. Используйте таблицы (table) при верстке для контроля представления и дизайна. Вы, наверное, использовали последние достижения XHTML/CSS верстки для веб-страниц, но эти принципы плохо работают в почтовых клиентах.
  2. Используйте вложенный в HTML-тэги CSS код, например, цвет фона или стили для текста.

Простой и быстрый способ увидеть, как взаимодействуют HTML таблицы и inline-CSS в электронном письме – скачать несколько бесплатных шаблонов с Campaign Monitor и MailChimp. Когда вы просмотрите исходный код, вы увидите несколько вещей, которые мы обсудим немного позже:

  1. Объявление CSS-стилей описано ниже тэга body.
  2. Не используется CSS-сокращения: вместо того, что бы использовать правило font: 12px/16px Arial, Helvetica, вы должны использовать сочетание правил: font-family, font-size, и line-height.
  3. Таблицы исполняют всю работу по представлению письма, а с помощью тэгов span и div можно добиться специфических эффектов.
  4. CSS-стили — базовые.

Шаг 1: Используйте таблицы для представления

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

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

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

Одноколоночный формат типично состоит из:

  1. Шапки, куда помещается логотип и некоторые (или все) навигационные ссылки из оригинального веб-сайта, для того, чтобы обеспечить схожесть с сайтом.
  2. Ссылки на новости, которые находятся ниже в письме.
  3. Подвал (футер) — внизу письма, который обычно содержит ссылки, которые идентичны ссылкам в шапке письма, а также инструкции о том, как отписаться от рассылки.

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

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

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

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

Вот какой подход я использую при создании писем в HTML формате:

  1. Для двухколоночного представления создайте три таблицы — одну для шапки, одну (двухколоночную) для контента (главной части) и одну для подвала. Поместите эти три таблицы в одну большую таблицу. Используйте такой же подход и для одноколоночного документа. Не нужно скупиться на таблицы, используйте для каждого элемента свою, так вы будете уверены, что ваше письмо будет отображаться хорошо почти во всех почтовых клиентах.
  2. Используйте атрибуты в тэгах таблицы (table) и ячеек (td), для контроля отображения. Например, border=»0″, valign=»top», align=»left», cellpadding=»0″ и так далее. Это поможет старым почтовым клиентам корректно отображать письмо.
  3. Даже если ваш дизайн не предусматривает границ вокруг таблиц, вы найдете очень полезным во время разработки установить значение border=»1″ для того, чтобы найти возможные ошибки. После того, как ошибки будут устранены, установите border=»0.»

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

Давайте посмотрим, как можно стилизировать текст в электронном письме.

Шаг 2: Добавляем стили CSS

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

Во-первых, используйте inline-стили, как показано здесь:

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

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

Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 98%. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 95%-90%, чтобы удостовериться, что все будет отображаться хорошо. И конечно же для таблиц в середине выставляйте значение ширины равное 100%.

Прописывайте основную информацию о стилях шрифта в теге ячейки

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

И еще:

  1. Избегайте использования JavaScript. В большинстве случаев они будут отключены почтовыми клиентами.
  2. Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2007 не отображает фоновые изображения.
  3. Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно.
  4. Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц.
  5. Используйте атрибуты alt, height, и width для картинок. Установив значения для этих атрибутов, получите отличный результат отображения в Google Mail, и, если даже картинки будут отключены, весь шаблон будет показан хорошо. Однако помните, что Outlook 2007 не поддерживает атрибут alt.
  6. Используйте атрибут target=»_blank» для ссылок, чтобы читатели, которые используют веб-интерфейс, не загружали страницу в том же окне, в которм открыта почта.
  7. Попробуйте не использовать одно-пиксельные изображения, даже если это улучшит вид письма, так как фильтры могут подумать, что ваше письмо — спам. Именно таким приемом пользуются спамеры для того, чтоб узнать, открыл ли читатель их письмо. В худшем случае ваше письмо попадет под фильтр и читатель может его даже не прочитать.

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

В тест вашего электронного письма, включите тест проверки “на спам.” Для этого можно воспользоваться бесплатным сервисом SpamCheck.

Если все проверенно, и все ошибки исправлены, следующим шагом будет проверить следующие пункты:

  1. Правильно ли отображается отправитель письма – имя или почтовый адрес?
  2. Корректна ли тема письма?
  3. Корректна ли контактная информация, и можно ли ее увидеть сразу?
  4. Есть ли текст, вверху письма, “Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.”?
  5. Есть ли у вас ссылка для добавления вашего адреса в контакты?
  6. Присутствуют ли в вашем письме ссылки на веб-версию письма?

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

Шаг 4: Код для Google Mail, Lotus Notes и Outlook 2007

Google Mail, Lotus Notes и Outlook 2007 имеют свои определенные моменты. Хотите верьте, хотите нет, но Outlook 2007 имеет еще более слабую поддержку CSS стилей, чем предыдущие версии данного продукта.

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

Хорошей новостью является то, что если ваше письмо сверстано хорошо для этих трех почтовых клиентов (Google Mail, Lotus Notes и Outlook 2007), то оно будет хорошо отображаться почти во всех остальных почтовых клиентах, если не во всех.

Некоторые методы, которых необходимо придерживаться для Google Mail и старых почтовых клиентов:

  1. Прописывайте определение фонового цвета с помощью атрибута bgcolor тэга td, не использует для этих целей CSS-стили.
  2. Используйте атрибут background для тэга td, что бы применить фоновую картинку, вместо CSS-стилей.
  3. Используйте padding для контроля отступов в ячейках, margin в этом случае не работает.
  4. Если вам нужны границы вокруг ячеек, используйте дополнительный тэг div, в котором прописывайте значения границ, так как назначение границ напрямую тэгу td не будет работать в Google Mail.
  5. Выставляйте отступы по 10 пикселей вокруг контента, что бы текст не “заезжал” на границы.
  6. Тщательно проверяйте все шрифты, может случиться, что вы забудете прописать стили в нескольких местах.

А теперь перейдем к Lotus Notes. Много компаний продолжают использовать и обновлять этот почтовый клиент (в 1995 IBM объявила, что 95 миллионов людей пользуются Lotus Notes).

Главным для правильного отображения письма в этом почтовом клиенте – код должен быть как можно проще и понятней.

Если вам нужно протестировать ваше письмо в Lotus Notes, вы можете скачать бесплатную пробную версию.

Что бы Lotus Notes отображал ваше письмо в HTML формате корректно, придерживайтесь следующих рекомендаций:

  1. Как мы уже обсуждали выше, используйте таблицу-контейнер, которая будет включать все остальные элементы письма, а также отдельные таблицы для шапки, основной части и подвала.
  2. Создайте пространство вокруг главной таблицы, используйте атрибут cellpadding, установив его значение, равным как минимум 5%.
  3. Не используйте декларации стилей в тэге head, Lotus может просто их удалить.
  4. Используйте абсолютные пути для картинок, которые храните на сервере.
  5. Попробуйте не использовать атрибут colspan в таблицах, ранние версии Lotus Notes не понимают их.
  6. Прописывайте ширину ячеек в тэгах td.
  7. Центрирование письма обычно не работает в Lotus.

Использование данных методов и рекомендаций обеспечит вашим HTML письмам отличное отображение в Google Mail и Lotus Notes, а также даст гарантии, что не возникнет проблем с Outlook 2007, который использует более старый движок.

Резюме

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

Полезные ссылки по теме

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

Campaign Monitor и MailChimp — много различных шаблонов для писем в HTML формате.

SpamCheck — проверка “на спам” писем.

Litmus — сервис тестирования шаблона письма во всех популярных почтовых сервисах и почтовых клиентах.

Добавлено:

Сводная таблица поддержки html тегов и css стилей разными почтоывыми клиентами — http://www.campaignmonitor.com/css/

Подборка доступных для скачивания e-mail шаблонов — http://www.campaignmonitor.com/templates/

Купить готовый email шаблон

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

Описание шаблона

Купить шаблон

Верстка писем – все, что сложнее plain text / Хабр

  • Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.

    Победить Outlook
  • Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки. Утри слёзы, верстальщик
  • У разработчика, который впервые столкнулся с генерированием электронных писем, практически нет шансов написать приложение, которое будет делать это корректно. Около 40 % писем, генерируемых корпоративными приложениями, имеют те или иные нарушения стандартов, и, как следствие, проблемы с доставкой и отображением. На это есть причины: электронная почта технически гораздо сложнее, чем веб, работа почты регулируется несколькими сотнями стандартов и несчетным количеством общепринятых (и не очень) практик, а почтовые клиенты отличаются разнообразием и непредсказуемостью. Тестирование может заметно улучшить ситуацию, но материалов, посвященных тестированию почты, практически нет. Почта Mail.Ru регулярно взаимодействует со своими пользователями посредством электронных писем. В нашем проекте все компоненты, отвечающие за генерирование писем, и даже единичные рассылки проходят обязательное тестирование. В этой статье мы поделимся своим опытом (и набитыми шишками). Читать дальше →
  • У нашего заказчика есть интернет-портал и пользователи, данные которых заведены в домене. Доступ в личный кабинет — по паролю, а где пароль, там и людская забывчивость.

    У нас уже была страница смены пароля, но механизм работы был не оптимальным. Вот как всё происходило. Пользователь оставлял заявку в домене на смену пароля. В ответ система, в свою очередь, оставляла заявку, которую администратор обрабатывал вручную. Он генерировал пароль в домене, после чего приписывал его в заявке. Пользователю приходило email-уведомление: “Ваш пароль изменён на такой”.

    Нас смущали три момента:

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

    И ещё был психологический момент: система создавала такие сложные пароли, что их было сложновато запомнить, оставалось только где-то записать.Тоже небезопасно. Зато такой пароль очень просто забыть. Можем предположить, что это обстоятельство тоже влияло на количество заявок на смену пароля.

    Итак, стало понятно, что механику смены пароля пора изменить.

    Читать дальше →

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

    Читать дальше →
  • Я пишу письмо, а мне не отвечают. Я пишу ещё одно, а в ответ молчание. Наконец, я пишу третье с текстом вроде «Чувак, а ты ещё заинтересован в нашем сотрудничестве?». Тут получаю ответ: «Жду не дождусь когда начнём работать, шли презентацию». Я стараюсь строить свою переписку по определённым принципам, чтобы сдвигать общение с мёртвой точки. В статье поделюсь некоторыми своими наработками, расскажу как задолбать молчунов полюбить милашек-адресатов, а они ответили взаимностью.

    Превратиться в емейл-машину
  • Давно хостился на одном ресурсе, у которого была услуга «списки рассылки». Для тех, кто не в курсе – загружаешь список адресов (списки сформированы легально, никакого спама, Double Opt-in) и формируешь письмо, сервис автоматически рассылает письмо по всем адресатам. Собственно всё устраивало, кроме одного – статистики. Хотелось знать, сколько доставлено, сколько прочитано и т.д. и т.п.

    Читать дальше →
  • Привет, Хабр! Все, кто хоть раз сталкивался с версткой email-писем, знают, что это нудно, утомительно и порой очень сильно раздражает. В большинстве случаев это обусловлено тем, что почтовые клиенты не умеют поддерживать очень многое из того, что мы используем при верстке самых простых веб-страниц. Поэтому дизайн письма делается простым или не делается вовсе, а львиная доля времени уходит на проверку и фиксы багов в многочисленных почтовиках.

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

    Читать дальше →
  • Считаете ли вы, что содержимое письма электронной почты нельзя изменить после доставки? Если вас интересует вопрос информационной безопасности, вам следует узнать о методе атаки, который исследователи из Mimecast назвали ROPEMAKER. Акроним ROPEMAKER расшифровывается как «Remotely Originated Post-delivery Email

    Manipulation Attacks Keeping Email Risky». В действительности ROPEMAKER — это тип хакерской атаки через электронную почту, обнаруженный Франциско Рибейро (@blackthorne) из Mimecast. Этот эксплойт может дать злоумышленнику возможность удаленно изменять контент письма электронной почты в любое время после доставки. Является ли ROPEMAKER уязвимостью, которую необходимо исправить, чтобы защитить обычных пользователей? Мы надеемся, что эта статья поможет ответить на этот вопрос.

    Читать дальше →
  • Всем привет! Не так давно мне поступила задача встроить визуальный редактор email в наш сервис внутренней рассылки, ибо людям надоело набирать html руками и компоновать валидные шаблоны для писем. Побродив по интернету, я нашёл 2 редактора, которые, как мне тогда казалось, прекрасно подойдут для этих целей. Ссылки на них приведу в конце топика. Изучив их более внимательно (EmailEditor написан с использованием jQuery, который я в своё время неплохо изучил, а Mosaico был на KnockoutJS, с ним я знаком лишь поверхностно), я остановился на EmailEditor, и снова окунулся в то дерьмо из которого год назад так успешно выбрался с помощью Angular и Ionic, а именно — файлы по 2-3к строк, повсеместное и рандомное изменение DOM различными способами из различных мест и т.д., ну вы меня понимаете).

    Потратив больше месяца на попытки пофиксить все баги, запилить нужные нам для рассылки строительные блоки и прочее, я сдался… Решил попробовать Mosaico и даже начал активно изучать Knockout, но проблема в том, что этот монстр (я про Mosaico) был настолько сложно написан, что EmailEditor показался не таким уж и плохим. Плюс ко всему, а точнее минус, у Mosaico практически нет вменяемой документации и если в первом я интуитивно понимал как всё работает и как создать свои блоки, то тут никакая интуиция мне не помогла. Возможно, просто не хватило мозга, терпения и желания разбираться, не знаю, просто гляньте на досуге исходники этих редакторов… А сроки поджимали...

    Что же делать?!

    Читать дальше →

И этот кусок — до закрывающего тэга /body:

ближе к контенту. Это может привести к повторению стилей в других тегах . Прописывайте стили в тегах заголовков (h2, h3), p или a, когда это необходимо.

Используйте тэг div для позиционирования блоков слева или справа в ячейках таблицы. Google Mail игнорирует блоки, описанные как плавающие (float), но в Yahoo! и Hotmail не возникает проблем. В некоторых случаях лучше всего будет создать таблицу посложнее, с большим количеством ячеек, чем полагаться на плавающие блоки

В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания.

Заметьте, что некоторые сервисы, которые доставляют электронные письма, могут модифицировать стили так, что, например, короткое правило style=»margin: 10px 5px 10px 0;» будет разбито на несколько меньших правил. Делается это для того, что бы письмо было понятно большинству почтовых клиентов. Тестируйте каждое письмо и смотрите, что происходит с кодом, избегайте частое использование коротких правил.

Если вы уже скачали и просмотрели некоторые шаблоны из Campaign Monitor и MailChimp, вы могли увидеть, что основная таблица описана так, как-будто это тэг body. Команда разработчиков из Campaign Monitor дает внешней таблице название “BodyImposter,” что дает представление о ней, как о главной таблице – каркасе, в середине которого размещаются все остальные элементы.

Шаг 3: Лучшие приемы e-mail верстки

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

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

Первыми инструментами для тестов служат браузеры Firefox и Internet Explorer. Если все отображается прекрасно в обоих браузерах, есть все надежды, что тестирование в Outlook, Yahoo!, Google Mail и других сервисах могут показать только незначительные ошибки. Я также рекомендую тестировать все ваши шаблоны писем в браузере Internet Explorer 6 – он сразу же покажет, как ваше письмо будет отображено в Outlook 2003.

Как только ваш шаблон корректно отображается в этих двух веб-браузерах, переходите к тестам, используя сервис доставки писем, разослав их на свои тестовые почтовые адреса в различных почтовых службах. В идеальном случае это могут быть Yahoo!, Hotmail и Google Mail. Почтовые аккаунты, которые вы будете использовать для тестов должны определяться тем, какими сервисами пользуются ваши подписчики. Для примера, если среди ваших подписчиков нет пользователей с почтовыми адресами из сервиса AOL, то, возможно, тестирование и наладка шаблона под этот сервис будет пустой тратой времени и денег.

Важные приемы на этом шаге:

  1. Иногда смена ширины таблицы с процентов на фиксированную ширину очень важна. Пользователи могут менять размер окна при просмотре, фиксированная ширина таблицы – единственный способ добиться правильного отображения.
  2. Если наблюдаются проблемы с пространством в колонках, нужно в первую очередь настроить значения атрибутов cellpadding и cellspacing для таблицы. Если это не приводит к желаемому результату, примените CSS-атрибуты margin и padding.
  3. Неправильное перемещение картинок может возникнуть, когда тэг

Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!