Adakah yang mendapat email HTML yang bekerja dengan Twitter Bootstrap?

92

Saya menggunakan premailer-rails3permata yang menarik gaya sebaris untuk email html, dan saya mencoba membuatnya berfungsi dengan bootstrap Twitter.

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

Sepertinya beberapa gaya masuk dengan benar, tetapi tidak semuanya. Saya bertanya-tanya apakah ada yang memiliki contoh kerja yang bagus untuk mendapatkan css Bootstrap Twitter mereka (dimodifikasi atau tidak) menjadi email html.

Terima kasih!

Brian Armstrong
sumber
16
Klien email sangat sulit untuk ditata. Dengan semua CSS yang kompleks dari bootstrap saya rasa itu tidak akan berhasil. Anda lebih baik menanggalkan apa yang Anda bisa dan menggunakan tabel dan gaya sebaris untuk mendapatkan gaya yang Anda inginkan, atau tutup.
Andres Ilich
Saya memiliki masalah yang sama. Saya pikir yang akan saya lakukan adalah membuat email, mengambil tangkapan layar tentang bagaimana CSS membuatnya terlihat tanpa teks, dan kemudian di HTML menggunakan gambar tangkapan layar bersama dengan teks. Ini solusi yang buruk, tetapi harus menyelesaikan pekerjaan.
gsingh2011
2
Saya harus menandatangani bersama di atas. Email sangat spesifik, (jika Anda tidak terbiasa) Coba unduh beberapa templat email gratis dan ubah kodenya. Coba tautan ini freemailtemplates.com, www.campaignmonitor.com/css/ & www.sitepoint.com/code-html-email-newsletters/
frontsideup
2
-1 untuk mengirim apa pun selain email teks biasa.
Cody Gray
2
Sangat setuju dengan Anda Brian. Saya telah mengerjakan email HTML selama beberapa hari terakhir, dan itu tidak perlu dan sangat menyakitkan. Saya tertarik untuk memulai gaya Bootstrap yang setara untuk email HTML; apakah Anda tertarik untuk membantu?
NoizWaves

Jawaban:

83

Jika yang Anda maksud adalah "Dapatkah saya menggunakan presentasi gaya Bootstrap dalam email?" maka Anda bisa, meskipun saya belum tahu siapa pun yang telah melakukannya. Anda harus mengodekan ulang semua yang ada di tabel.

Jika Anda menginginkan fungsionalitas, itu tergantung di mana email Anda dilihat. Jika sebagian besar pengguna Anda menggunakan Outlook, Gmail, Yahoo atau Hotmail (dan ini biasanya berjumlah sekitar 75% dari klien email) maka banyak kebaikan Bootstrap tidak mungkin dilakukan. Mac Mail, iOS Mail, dan Gmail di Android jauh lebih baik dalam merender CSS, jadi jika Anda menargetkan sebagian besar perangkat seluler, itu tidak terlalu buruk.

  • JavaScript - benar-benar terlarang. Jika Anda mencoba, Anda mungkin akan langsung masuk ke neraka email (alias folder spam). Ini berarti LESS juga di luar batas, meskipun Anda jelas dapat menggunakan gaya CSS yang dihasilkan jika Anda mau.
  • CSS sebaris jauh lebih aman untuk digunakan daripada jenis CSS lainnya (disematkan dimungkinkan, terkait pasti tidak). Kueri media dimungkinkan, jadi Anda dapat memiliki beberapa jenis desain responsif. Namun, ada daftar panjang atribut CSS yang tidak berfungsi - pada dasarnya, model kotak sebagian besar tidak didukung di klien email. Anda perlu menyusun semuanya dengan tabel.
  • font-face- Anda hanya dapat menggunakan gambar eksternal. Semua sumber daya eksternal lainnya (file CSS, font) dikecualikan.
  • mesin terbang dan sprite - karena implementasi aneh gambar latar belakang (VML) Outlook 2007, Anda tidak dapat menggunakan pengulangan latar atau posisi.
  • pseudo-selector tidak dimungkinkan - misalnya :hover, :activestate tidak dapat ditata secara terpisah

Ada yang banyak dari jawaban pada SO, dan banyak link lain di internet pada umumnya.

Dan Blows
sumber
2
Tautan pertama sudah mati.
Houman
45

Saya minta maaf karena telah menghidupkan kembali utas lama ini, tetapi saya hanya ingin memberi tahu semua orang bahwa ada Bootstrap yang sangat mirip seperti kerangka kerja CSS yang khusus dibuat untuk gaya email, berikut tautannya: http://zurb.com/ink/

Semoga bisa membantu seseorang.

Edit Ninja: Sejak itu telah diganti namanya menjadi Foundation for Emailsdan tautan barunya adalah: https://foundation.zurb.com/emails.html

Pengeditan diam tapi mematikan: Tautan baru https://get.foundation/emails.html

adamj
sumber
2
Semua tautan rusak.
Houman
16

Berikut beberapa hal yang tidak dapat Anda lakukan dengan email:

  • Sertakan bagian dengan gaya . Apple Mail.app mendukungnya, tetapi Gmail dan Hotmail tidak, jadi tidak boleh. Hotmail akan mendukung bagian gaya di body tetapi Gmail tetap tidak.
  • Tautkan ke lembar gaya eksternal. Tidak banyak klien email yang mendukung ini, lebih baik lupakan saja.
  • Background-image / Background-position. Gmail juga pelakunya yang satu ini.
  • Bersihkan pelampung Anda . Gmail lagi.
  • Margin . Ya, serius, Hotmail mengabaikan margin. Pada dasarnya semua posisi CSS sama sekali tidak berfungsi.
  • Font-apa saja . Kemungkinan Eudora akan mengabaikan apa pun yang Anda coba nyatakan dengan font.

Sumber: http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp memiliki template email yang dapat Anda gunakan - di sini

Beberapa sumber daya lagi yang akan membantu Anda

Elvis D'Souza
sumber
1. Anda dapat menggunakan gaya - Anda tidak boleh meletakkannya di kepala, tetapi Anda dapat memasukkannya ke dalam tubuh. 2. Latar belakang baik-baik saja - gunakan atribut html latar belakang daripada CSS. Outlook 2007/2010 memerlukan solusi ('VML') mereka sendiri. 3. Anda tidak bisa menggunakan pelampung sama sekali, apalagi membersihkannya. 4. Font-apapun - Eudora adalah klien minoritas. Jelas, tergantung pada klien Anda (lihat analitik), tetapi font-sizememberi Anda fleksibilitas yang lebih besar dengan biaya yang sangat sedikit.
Dan Blows
10

Anda dapat menggunakan https://github.com/advancedrei/BootstrapForEmail ini untuk mengikat email Anda.

Viktorminator
sumber
2
Terima kasih untuk tautan ini. Saya sedang mencari di mana-mana untuk sesuatu seperti ini! Sayang sekali itu dikembangkan di Bootstrap 2.x dan tidak lagi dalam produksi.
oldo.nicho
2

Saya menghabiskan beberapa waktu baru-baru ini melihat ke dalam membangun template email html, solusi terbaik yang saya temukan adalah menggunakan http://htmlemailboilerplate.com/ ini . Saya telah membangun 3 template yang cukup kompleks dan mereka telah bekerja dengan baik di berbagai klien email.

MattyHarris
sumber
1

Hai Brian Armstrong, kunjungi tautan ini .

Blog ini memberi tahu Anda cara mengintegrasikan Rails dengan Bootstrap lebih sedikit (menggunakan premailer-rails).

Jika Anda menggunakan bootstrap sass, Anda dapat melakukan hal yang sama:

mulai dengan mengimpor beberapa file sass Bootstrap ke 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';

dan kemudian di <head>bagian tampilan Anda tambahkan <%= stylesheet_link_tag "email" %>

Shurui Yang
sumber
0

Pendekatan terbaik yang saya temukan adalah dengan menggunakan impor Sass atas dasar yang dipilih untuk menarik gaya bootstrap Anda (atau lainnya) ke dalam email yang mungkin diperlukan.

Pertama, buat file induk scss baru seperti email.scssuntuk gaya email Anda. Ini akan terlihat seperti ini:

    // 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";

Kemudian di template email Anda, hanya rujuk file email.css yang telah dikompilasi, yang hanya berisi gaya bootstrap terpilih yang direferensikan dan disarangkan dengan benar di email.scss Anda.

Misalnya, gaya bootstrap tertentu akan bertentangan dengan gaya tabel responsif Zurb. Untuk memperbaikinya, Anda dapat menyarangkan gaya bootstrap dalam kelas induk atau pemilih lain untuk memanggil gaya tabel bootstrap hanya jika diperlukan.

Dengan cara ini, Anda memiliki fleksibilitas untuk menarik kelas hanya jika diperlukan. Anda akan melihat bahwa saya menggunakan http://zurb.com/perpustakaan email responsif yang bagus untuk digunakan. Lihat jugahttp://zurb.com/ink/

Terakhir, gunakan premailer seperti yang https://github.com/fphilipe/premailer-rails3disebutkan di atas untuk memproses gaya menjadi css sebaris, mengompilasi gaya sebaris hanya untuk apa yang digunakan dalam templat email tertentu itu. Misalnya, untuk premailer, file ruby ​​Anda akan terlihat seperti ini untuk mengompilasi email menjadi gaya sebaris.

    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

Semoga ini membantu! Telah berjuang untuk menemukan kerangka kerja templat email yang fleksibel di Pardot, Salesforce, dan respons otomatis bawaan produk kami serta email harian.

Ryan Walton
sumber
0

Triknya di sini adalah Anda tidak ingin menyertakan keseluruhan bootstrap. Masalahnya adalah klien email akan mengabaikan kueri media dan memproses semua gaya cetak yang memiliki banyak pernyataan penting.

Sebagai gantinya, Anda hanya perlu menyertakan bagian tertentu dari bootstrap yang Anda perlukan. File email.css.scss saya terlihat seperti ini:

@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';
kecerdikan
sumber