ฉันใช้premailer-rails3อัญมณีที่ดึงสไตล์อินไลน์สำหรับอีเมล html และฉันพยายามทำให้มันทำงานร่วมกับ Twitter bootstrap
https://github.com/fphilipe/premailer-rails3
ดูเหมือนว่าบางสไตล์จะเข้ามาอย่างถูกต้อง แต่ไม่ใช่ทั้งหมด ฉันสงสัยว่าใครมีตัวอย่างการทำงานที่ดีในการรับ Twitter Bootstrap css (แก้ไขหรือไม่) ลงในอีเมล html
ขอบคุณ!
คำตอบ:
หากคุณหมายถึง "ฉันสามารถใช้การนำเสนอโวหารของ Bootstrap ในอีเมลได้หรือไม่" แล้วคุณก็ทำได้แม้ว่าฉันยังไม่รู้ว่ามีใครทำ คุณจะต้องเข้ารหัสทุกอย่างในตาราง
หากคุณอยู่หลังการใช้งานมันขึ้นอยู่กับว่าคุณดูอีเมลที่ไหน หากผู้ใช้ของคุณมีสัดส่วนที่สำคัญอยู่ใน Outlook, Gmail, Yahoo หรือ Hotmail (และโดยทั่วไปแล้วจะเพิ่มได้ถึง 75% ของไคลเอนต์อีเมล) คุณจะไม่สามารถใช้ประโยชน์จาก Bootstrap ได้มากนัก Mac Mail, iOS Mail และ Gmail บน Android นั้นดีกว่ามากในการแสดงผล CSS ดังนั้นหากคุณกำหนดเป้าหมายไปยังอุปกรณ์เคลื่อนที่ส่วนใหญ่ก็ไม่เลวร้ายนัก
font-face- คุณสามารถใช้ได้เฉพาะรูปภาพภายนอกเท่านั้น ไม่รวมทรัพยากรภายนอกอื่น ๆ ทั้งหมด (ไฟล์ CSS แบบอักษร):hover, :activeรัฐไม่สามารถแยกสไตล์มีมี โหลด ของ คำตอบ ใน SO และจำนวนมากของการเชื่อมโยงอื่น ๆ บนอินเทอร์เน็ตที่มีขนาดใหญ่
ฉันต้องขออภัยที่นำเธรดเก่านี้กลับมาใช้ใหม่ แต่ฉันแค่อยากให้ทุกคนรู้ว่ามี Bootstrap ที่ใกล้เคียงมากเช่นเฟรมเวิร์ก CSS ที่สร้างขึ้นโดยเฉพาะสำหรับการจัดรูปแบบอีเมลนี่คือลิงค์: http://zurb.com/ink/
หวังว่ามันจะช่วยใครบางคน
การแก้ไขนินจา:ได้รับการเปลี่ยนชื่อเป็นFoundation for Emailsและลิงก์ใหม่คือ: https://foundation.zurb.com/emails.html
การแก้ไขที่เงียบ แต่ร้ายแรง:ลิงก์ใหม่https://get.foundation/emails.html
นี่คือบางสิ่งที่คุณไม่สามารถทำได้กับอีเมล:
- รวมถึงส่วนที่มีรูปแบบ Apple Mail.app รองรับ แต่ Gmail และ Hotmail ไม่รองรับดังนั้นจึงไม่ใช่ Hotmail จะรองรับส่วนสไตล์ในเนื้อหา แต่ Gmail ยังไม่รองรับ
- ลิงก์ไปยังสไตล์ชีตภายนอก มีไคลเอนต์อีเมลจำนวนไม่มากที่สนับสนุนสิ่งนี้ควรลืมไป
- พื้นหลังภาพ / พื้นหลังตำแหน่ง Gmail ก็เป็นตัวการในเรื่องนี้เช่นกัน
- ล้างลอยของคุณ Gmail อีกครั้ง
- ขอบ อ๋ออย่างจริงจัง Hotmail ไม่สนใจระยะขอบ โดยทั่วไปการวางตำแหน่ง CSS ใด ๆ เลยไม่ได้ผล
- font-อะไร มีโอกาสที่ Eudora จะเพิกเฉยต่อสิ่งที่คุณพยายามประกาศด้วยฟอนต์
ที่มา: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp มีเทมเพลตอีเมลที่คุณสามารถใช้ได้ที่นี่
แหล่งข้อมูลอีกสองสามอย่างที่จะช่วยคุณได้
font-sizeให้ความยืดหยุ่นมากขึ้นโดยเสียค่าใช้จ่ายเพียงเล็กน้อย
คุณสามารถใช้https://github.com/advancedrei/BootstrapForEmailนี้เพื่อผูกอีเมลของคุณ
เมื่อเร็ว ๆ นี้ฉันใช้เวลาในการสร้างเทมเพลตอีเมล html ทางออกที่ดีที่สุดที่ฉันพบคือใช้http://htmlemailboilerplate.com/นี้ ฉันได้สร้างเทมเพลตที่ค่อนข้างซับซ้อน 3 แบบและทำงานได้ดีในไคลเอนต์อีเมลต่างๆ
สวัสดี Brian Armstrong， เยี่ยมชมลิงค์นี้
บล็อกนี้จะบอกวิธีรวมRails เข้ากับBootstrap ให้น้อยลง (โดยใช้ premailer-rail)
หากคุณใช้ 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" %>
แนวทางที่ดีที่สุดที่ฉันคิดขึ้นมาคือการใช้การนำเข้า Sass บนพื้นฐานที่เลือกเพื่อดึงสไตล์ bootstrap (หรืออื่น ๆ ) ลงในอีเมลตามความจำเป็น
ขั้นแรกสร้างไฟล์หลัก 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 ที่คอมไพล์ของคุณซึ่งมีเฉพาะสไตล์ bootstrap ที่เลือกอ้างอิงและซ้อนกันอย่างถูกต้องใน email.scss ของคุณ
ตัวอย่างเช่นรูปแบบ bootstrap บางรูปแบบจะขัดแย้งกับสไตล์ตารางที่ตอบสนองของ Zurb ในการแก้ไขปัญหานี้คุณสามารถซ้อนสไตล์ของ bootstrap ภายในคลาสพาเรนต์หรือตัวเลือกอื่น ๆ เพื่อเรียกสไตล์ตารางของ bootstrap เมื่อจำเป็นเท่านั้น
ด้วยวิธีนี้คุณจะมีความยืดหยุ่นในการเข้าร่วมชั้นเรียนเมื่อจำเป็นเท่านั้น คุณจะเห็นว่าฉันใช้http://zurb.com/ซึ่งเป็นไลบรารีอีเมลตอบสนองที่ยอดเยี่ยมในการใช้ ดูสิ่งนี้ด้วยhttp://zurb.com/ink/
สุดท้ายให้ใช้ premailer https://github.com/fphilipe/premailer-rails3ดังที่กล่าวไว้ข้างต้นเพื่อประมวลผลสไตล์เป็น inline css รวบรวมสไตล์อินไลน์เฉพาะสิ่งที่ใช้ในเทมเพลตอีเมลนั้น ๆ ตัวอย่างเช่นสำหรับผู้ส่งอีเมลล่วงหน้าไฟล์ทับทิมของคุณอาจมีลักษณะเช่นนี้เพื่อรวบรวมอีเมลในรูปแบบอินไลน์
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 และการตอบกลับอัตโนมัติและอีเมลรายวันในผลิตภัณฑ์ของเรา
เคล็ดลับคือคุณไม่ต้องการรวม bootstrap ทั้งหมด ปัญหาคือไคลเอนต์อีเมลจะเพิกเฉยต่อคิวรีของสื่อและดำเนินการกับรูปแบบการพิมพ์ทั้งหมดที่มีข้อความสำคัญ!
แต่คุณต้องรวมเฉพาะส่วนของ 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';
แล้วBootstrap Email ล่ะ? ดูเหมือนว่าจะดีและเข้ากันได้กับ bootstrap 4