Кто-нибудь получал электронные письма в формате HTML, работающие с Twitter Bootstrap?

92

Я использую premailer-rails3гем, который извлекает встроенные стили для HTML-писем, и я пытаюсь заставить его работать с загрузкой Twitter.

https://github.com/fphilipe/premailer-rails3

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

Благодарность!

html twitter-bootstrap html-email Брайан Армстронг
источник
16
Почтовые клиенты очень сложно стилизовать. Я не думаю, что со всем сложным CSS из начальной загрузки это сработает. Вам лучше отказаться от того, что вы можете, и использовать таблицы и встроенные стили, чтобы достичь желаемого стиля, или закрыть его.
Андрес Ильич
У меня такая же проблема. Я думаю, что в конечном итоге я сделаю электронное письмо, сделаю снимок экрана того, как CSS заставляет его выглядеть без текста, а затем в HTML, используя изображение скриншота вместе с текстом. Это неприятное решение, но оно должно работать.
gsingh2011
2
Я должен совместно подписать вышеуказанное. Электронные письма действительно специфичны (на случай, если вы не знакомы). Попробуйте загрузить несколько бесплатных шаблонов электронной почты и настроить код. Попробуйте эти ссылки freemailtemplates.com, www.campaignmonitor.com/css/ & www.sitepoint.com/code-html-email-newsletters/
frontsideup
2
-1 для отправки чего-либо, кроме обычных текстовых писем.
Коди Грей
2
Полностью согласен с тобой, Брайан. Последние несколько дней я работал над электронными письмами в формате HTML, и это излишне и очень болезненно. Я заинтересован в создании эквивалента стиля Bootstrap для электронных писем HTML; хотели бы вы помочь?
NoizWaves

Ответы:

83

Если вы имеете в виду «Могу ли я использовать стилистическое представление Bootstrap в электронном письме?» тогда вы можете, хотя я еще не знаю никого, кто это делал. Однако вам нужно будет перекодировать все в таблицах.

Если вам нужна функциональность, это зависит от того, где просматриваются ваши электронные письма. Если значительная часть ваших пользователей использует Outlook, Gmail, Yahoo или Hotmail (а они обычно составляют около 75% почтовых клиентов), тогда большая часть возможностей Bootstrap невозможна. Mac Mail, iOS Mail и Gmail на Android намного лучше обрабатывают CSS, поэтому, если вы ориентируетесь в основном на мобильные устройства, это не так уж плохо.

  • JavaScript - полностью запрещено. Если вы попытаетесь, вы, вероятно, попадете прямо в ад электронной почты (также известный как папка для спама). Это означает, что LESS также выходит за рамки, хотя вы, очевидно, можете использовать полученные стили CSS, если хотите.
  • Встроенный CSS намного безопаснее в использовании, чем любой другой тип CSS (встроенный возможен, связанный - определенно нет). Возможны медиа-запросы, так что у вас может быть какой-то адаптивный дизайн. Однако существует длинный список атрибутов CSS, которые не работают - по сути, блочная модель в основном не поддерживается в почтовых клиентах. Вам нужно все структурировать с помощью таблиц.
  • font-face- вы можете использовать только внешние изображения. Все остальные внешние ресурсы (файлы CSS, шрифты) исключены.
  • глифы и спрайты - из-за странной реализации фоновых изображений (VML) в Outlook 2007 вы не можете использовать повторение фона или положение.
  • псевдоселекторы невозможны - например :hover, :activeсостояния не могут быть стилизованы отдельно

Там являются грузы из ответов на SO, а также множество других ссылок в Интернете в целом.

Дэн Блоуз
источник
2
Первая ссылка мертва.
Houman
45

Я прошу прощения за реставрацию этого старого потока, но я просто хотел сообщить всем, что есть очень близкий Bootstrap, такой как CSS-фреймворк, специально созданный для стилизации электронной почты, вот ссылка: http://zurb.com/ink/

Надеюсь, это кому-то поможет.

Редактирование ниндзя: с тех пор он был переименован в, Foundation for Emailsи новая ссылка: https://foundation.zurb.com/emails.html

Тихое, но смертоносное редактирование: новая ссылка https://get.foundation/emails.html

Адамдж
источник
2
Все ссылки битые.
Хоуман,
16

Вот несколько вещей, которые нельзя делать с электронной почтой:

  • Включите раздел со стилями . Apple Mail.app поддерживает его, а Gmail и Hotmail - нет, так что это недопустимо. Hotmail будет поддерживать раздел стилей в теле, а Gmail - нет.
  • Ссылка на внешнюю таблицу стилей. Не многие почтовые клиенты поддерживают это, лучше просто забыть об этом.
  • Фоновое изображение / Фоновое положение. Gmail также является виновником этого.
  • Очистите поплавки . Снова Gmail.
  • Маржа . Ага, серьезно, Hotmail игнорирует поля. По сути, никакое позиционирование CSS не работает.
  • Шрифт-ничего . Скорее всего, Eudora проигнорирует все, что вы пытаетесь объявить с помощью шрифтов.

Источник: http://css-tricks.com/using-css-in-html-emails-the-real-story/

У Mailchimp есть шаблоны писем, которые вы можете использовать - здесь

Еще несколько ресурсов, которые должны вам помочь

Элвис Д'Суза
источник
1. Вы можете сортировать стили использования - вы не должны класть их в голову, но вы можете включить их в тело. 2. Фон в порядке - используйте атрибут html фона вместо CSS. Outlook 2007/2010 требует собственного решения («VML»). 3. Вы вообще не можете использовать поплавки, не говоря уже о их очистке. 4. Шрифт-все - Eudora - клиент меньшинства. Очевидно, это зависит от вашего клиента (посмотрите на аналитику), но font-sizeдает вам большую гибкость при очень небольших затратах.
Dan Blows
10

Вы можете использовать https://github.com/advancedrei/BootstrapForEmail для b-привязки своей электронной почты.

Викторминатор
источник
2
Спасибо за ссылку. Я везде искал что-то подобное! Жаль, что он был разработан на Bootstrap 2.x и больше не находится в производстве.
oldo.nicho 09
2

Недавно я потратил некоторое время на создание HTML-шаблонов электронной почты. Лучшим решением, которое я нашел, было использование http://htmlemailboilerplate.com/ . С тех пор я создал 3 довольно сложных шаблона, и они хорошо работают в различных почтовых клиентах.

Мэтти Харрис
источник
1

Привет, Брайан Армстронг ， посетите эту ссылку .

В этом блоге рассказывается, как меньше интегрировать Rails с Bootstrap (используя premailer-rails).

Если вы используете bootstrap sass, вы можете сделать то же самое:

начните с импорта некоторых файлов sass Bootstrap в email.css.scss

@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
@import 'bootstrap/progress-bars';

а затем в <head>разделе просмотра добавьте <%= stylesheet_link_tag "email" %>

Шуруи Ян
источник
0

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

Сначала создайте новый родительский файл scss, похожий email.scssна ваш стиль электронной почты. Это могло выглядеть так:

    // Core variables and mixins
    @import "css/main/ezdia-variables";

    @import "css/bootstrap/mixins";
    @import "css/main/ezdia-mixins";

    // Import base classes
    @import "css/bootstrap/scaffolding";
    @import "css/bootstrap/type";
    @import "css/bootstrap/buttons";
    @import "css/bootstrap/alerts";

    // nest conflicting bootstrap styles
    .bootstrap-style {
        //use single quotes for nested imports
        @import 'css/bootstrap/normalize';
        @import 'css/bootstrap/tables';
    }

    @import "css/main/main";

    // Main email classes
    @import "css/email/zurb";
    @import "css/email/main";

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

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

Таким образом, у вас есть возможность использовать классы только при необходимости. Вы увидите, что я использую http://zurb.com/отличную адаптивную библиотеку электронной почты. Смотрите такжеhttp://zurb.com/ink/

Наконец, используйте предварительную рассылку, подобную https://github.com/fphilipe/premailer-rails3упомянутой выше, для преобразования стиля во встроенный CSS, компилируя встроенные стили только для того, что используется в этом конкретном шаблоне электронной почты. Например, для premailer ваш рубиновый файл может выглядеть примерно так, чтобы скомпилировать электронное письмо во встроенном стиле.

    require 'rubygems' # optional for Ruby 1.9 or above.
    require 'premailer'

    premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)

    # Write the HTML output
    File.open("delivery_report.html", "w") do |fout|
      fout.puts premailer.to_inline_css
    end

    # Write the plain-text output
    File.open("output.txt", "w") do |fout|
      fout.puts premailer.to_plain_text
    end

    # Output any CSS warnings
    premailer.warnings.each do |w|
      puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
    end

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

Райан Уолтон
источник
0

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

Вместо этого вам нужно включить только определенные части начальной загрузки, которые вам нужны. Мой файл email.css.scss выглядит так:

@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";

@import 'bootstrap/normalize';
@import 'bootstrap/tables';
Габеодесса
источник