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

72

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

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

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

Спасибо!

  • 15
    Почтовые клиенты очень очень сложны для стиля. Со всем сложным CSS из начальной загрузки я не думаю, что это будет работать. Вам лучше избавиться от того, что вы можете, и использовать таблицы и встроенные стили, чтобы получить нужный стиль или закрыть его.
  • 0
    У меня такая же проблема. Я думаю, что в итоге я сделаю электронное письмо, сделав скриншот того, как CSS заставляет его выглядеть без текста, а затем в HTML, используя изображение скриншота и текст. Это неприятное решение, но оно должно быть выполнено.
Показать ещё 4 комментария
Теги:
html-email

8 ответов

72
Лучший ответ

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

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

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

загружает отвечает on SO и множество других ссылок в Интернете в целом.

Поделиться
  • 2
    если бы я мог прочитать это, прежде чем я начал ...
24

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

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

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

Поделиться
  • 6
    Zurb Ink - действительно хорошая структура для отзывчивых рассылок.
15

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

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

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

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

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

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

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

Поделиться
  • 2
    Спасибо за эту ссылку. Я искал везде что-то подобное! Обидно, что он был разработан на Bootstrap 2.x и больше не выпускается.
1

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

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

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

начните с импорта некоторых файлов Bootstrap sass в файл 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" %>

Поделиться
1

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

Поделиться
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';
Поделиться
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, упомянутый выше, для обработки стиля в inline css, скомпилирования встроенных стилей только для того, что используется в этом конкретном шаблоне электронной почты. Например, для premailer ваш ruby файл может выглядеть примерно так, чтобы скомпилировать электронную почту в встроенный стиль.

    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 и наш продукт, встроенный автоответчик и ежедневные электронные письма.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню