Twitter Bootstrapで動作するHTMLメールを受け取った人はいますか？

91

私はpremailer-rails3HTMLメールのスタイルをインラインでプルするgemを使用しており、Twitterブートストラップで動作するようにしています。

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

一部のスタイルは正しく組み込まれているようですが、すべてのスタイルが組み込まれているわけではありません。私は誰かが彼らのTwitter Bootstrap css（変更されているかどうかにかかわらず）をhtml電子メールに送信する素晴らしい実例があるかどうか疑問に思っています。

ありがとう！

html  twitter-bootstrap  html-email 
— ブライアンアームストロング
ソース
16
メールクライアントは、スタイルを設定するのが非常に困難です。ブートストラップからのすべての複雑なCSSでは、うまくいくとは思いません。できることを取り除き、テーブルとインラインスタイルを使用して、目的のスタイルに到達するか、閉じます。
— Andres Ilich
同じ問題があります。最終的には、メールを作成し、CSSがテキストなしでどのように表示するかを示すスクリーンショットを撮り、スクリーンショット画像とテキストを使用してHTMLを作成することになると思います。それは厄介な解決策ですが、仕事を終わらせるはずです。
— gsingh2011 2012
2
上記に共同署名する必要があります。メールは本当に具体的です（慣れていない場合に備えて）。いくつかの無料のメールテンプレートをダウンロードして、コードを微調整してみてください。これらのリンクfreemailtemplates.com、www.campaignmonitor.com/css/＆www.sitepoint.com/code-html-email-newsletters/試してみてください
— frontsideup
2
平文以外のメールを送信する場合は-1。
— Cody Grey
2
ブライアンと完全に同意します。私は過去数日間HTMLメールに取り組んでおり、それは不必要にそして非常に苦痛です。HTMLメールと同等のBootstrapスタイルを開始することに興味があります。あなたは手助けに興味がありますか？
— NoizWaves

回答:

83

「Bootstrapのスタイルに関するプレゼンテーションをメールで使用できますか？」それならできますが、まだそれを行った人は誰も知りません。ただし、テーブル内のすべてを再コーディングする必要があります。

機能が必要な場合は、メールが表示される場所によって異なります。ユーザーのかなりの割合がOutlook、Gmail、Yahoo、Hotmailを使用している場合（通常、これらは合計でメールクライアントの約75％になります）、Bootstrapの多くの優れた点は不可能です。Android上のMac Mail、iOS Mail、GmailはCSSのレンダリングに優れているため、主にモバイルデバイスを対象とする場合はそれほど悪くありません。

  • JavaScript-完全に立ち入り禁止。試してみると、おそらく地獄（スパムフォルダ）に直接メールを送るでしょう。これは、LESSも範囲外であることを意味しますが、必要に応じて、結果のCSSスタイルを使用できます。
  • インラインCSSは、他のどのタイプのCSSよりもはるかに安全に使用できます（埋め込みが可能で、リンクは明確です）。メディアクエリが可能であるため、何らかのレスポンシブデザインを使用できます。ただし、機能しないCSS属性の長いリストがあります。基本的に、ボックスモデルはメールクライアントではほとんどサポートされていません。すべてをテーブルで構造化する必要があります。
  • font-face-外部画像のみを使用できます。他のすべての外部リソース（CSSファイル、フォント）は除外されます。
  • グリフとスプライト-Outlook 2007の背景画像（VML）の奇妙な実装のため、background-repeatまたはpositionは使用できません。
  • 疑似セレクターは使用できません-たとえば:hover、:active状態を個別にスタイル設定することはできません

あります 負荷 の 答え に SO、および大規模で、インターネット上の他のリンクがたくさん。

— ダンブローズ
ソース
1
最初のリンクは死んでいます。
— ホウマン
45

この古いスレッドを元に戻したことをお詫びしますが、電子メールのスタイリング用に特別に作成されたCSSフレームワークのような非常に近いBootstrapがあることを皆に知らせたかったのです。ここにリンクがあります：http : //zurb.com/ink/

それが誰かを助けることを願っています。

忍者の編集：それは改名されてFoundation for Emailsおり、新しいリンクはhttps://foundation.zurb.com/emails.htmlです。

— アダムジ
ソース
1
すべてのリンクが壊れています。
— ホウマン
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.背景は問題ありません-CSSの代わりに背景のhtml属性を使用してください。Outlook 2007/2010には独自の（「VML」）ソリューションが必要です。3.フロートをクリアすることはもちろん、フロートはまったく使用できません。4. Font-anything-Eudoraは少数派のクライアントです。明らかに、クライアントに依存します（分析を見てください）が、font-size非常に少ないコストで柔軟性が向上します。
— Dan Blows
2

最近、HTMLメールテンプレートの作成に少し時間をかけましたが、私が見つけた最良の解決策は、このhttp://htmlemailboilerplate.com/を使用することでした。それ以来、私は3つの非常に複雑なテンプレートを作成し、さまざまな電子メールクライアントでうまく機能しています。

— マティハリス
ソース
1

こんにちはブライアンアームストロング、このリンクをご覧ください。

このブログでは、RailsをBootstrap less と統合する方法を説明します（premailer-railsを使用）。

ブートストラップ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" %>

— ヤン・シュルイ
ソース
0

私が思いついた最善のアプローチは、Sassインポートを選択ベースで使用して、必要に応じてブートストラップ（またはその他の）スタイルを電子メールに取り込むことです。

まず、email.scssメールスタイルのような新しい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に処理し、インラインスタイルをその特定の電子メールテンプレートで使用されているものだけにコンパイルします。たとえば、プリメーラーの場合、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、および当社の製品に組み込まれている自動応答と毎日のメールにまたがる柔軟なメールテンプレートフレームワークを見つけるのに苦労しています。

— ライアン・ウォルトン
ソース
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';
— gabeodess
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.