क्या किसी ने ट्विटर बूटस्ट्रैप के साथ काम कर रहे HTML ईमेल प्राप्त किए हैं?

Question

मैं premailer-rails3 मणि का उपयोग कर रहा हूं जो HTML ईमेल के लिए शैलियों की इनलाइन खींचता है, और मैं इसे ट्विटर बूटस्ट्रैप के साथ काम करने की कोशिश कर रहा हूं।

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

ऐसा लगता है कि कुछ शैलियों सही ढंग से में आते हैं, लेकिन उनमें से सभी नहीं। मैं सोच रहा हूं कि किसी के पास एचटीएमएल ईमेल में अपने ट्विटर बूटस्ट्रैप सीएसएस (संशोधित या नहीं) प्राप्त करने का अच्छा काम करने का उदाहरण है।

धन्यवाद!

Answer 1

यदि आप मतलब है "मैं एक ईमेल में बूटस्ट्रैप के शैलीगत प्रस्तुति का उपयोग कर सकते हैं?" तो आप कर सकते हैं, हालांकि मैं किसी को भी नहीं जानता जिसने इसे अभी तक किया है। हालांकि आपको टेबल में सबकुछ रिकोड करना होगा।

यदि आप कार्यक्षमता के बाद हैं, तो यह इस बात पर निर्भर करता है कि आपके ईमेल कहां देखे जाते हैं। यदि आपके उपयोगकर्ताओं का एक महत्वपूर्ण अनुपात आउटलुक, जीमेल, याहू या हॉटमेल पर है (और ये आमतौर पर लगभग 75% ईमेल क्लाइंट जोड़ते हैं) तो बहुत सारे बूटस्ट्रैप की भलाई संभव नहीं है।मैक मेल, आईओएस मेल और एंड्रॉइड पर जीमेल सीएसएस को प्रस्तुत करने में काफी बेहतर है, इसलिए यदि आप ज्यादातर मोबाइल उपकरणों को लक्षित कर रहे हैं तो यह काफी खराब नहीं है।

• जावास्क्रिप्ट - पूरी तरह से सीमा बंद। यदि आप कोशिश करते हैं, तो आप शायद सीधे ईमेल नरक (ए.के.ए. स्पैम फ़ोल्डर) पर जायेंगे। इसका मतलब है कि कम भी सीमा से बाहर है, हालांकि आप स्पष्ट रूप से परिणामस्वरूप सीएसएस शैलियों का उपयोग कर सकते हैं यदि आप चाहते हैं।
• इनलाइन सीएसएस ज्यादा सीएसएस के किसी भी अन्य प्रकार की तुलना में उपयोग करने के लिए सुरक्षित है (एम्बेड किए गए संभव है, एक निश्चित नहीं है)। मीडिया प्रश्न संभव हैं, इसलिए आपके पास कुछ प्रकार का उत्तरदायी डिज़ाइन हो सकता है। हालांकि, सीएसएस विशेषताओं की एक लंबी सूची है जो काम नहीं करती - अनिवार्य रूप से, बॉक्स मॉडल ईमेल क्लाइंट में काफी हद तक असमर्थित है। आपको टेबल के साथ सबकुछ ढांचा बनाना होगा।
• font-face - आप केवल बाहरी छवियों का उपयोग कर सकते हैं। अन्य सभी बाहरी संसाधन (सीएसएस फ़ाइलें, फोंट) को बाहर रखा गया है।
• ग्लिफ़ और स्प्राइट - आउटलुक 2007 की पृष्ठभूमि-छवियाँ (VML) की अजीब कार्यान्वयन की वजह से, आप पृष्ठभूमि दोहराने या स्थिति का उपयोग नहीं कर सकते।
• छद्म चयनकर्ता संभव नहीं हैं - उदा। :hover, :active राज्यों अलग

स्टाइल नहीं किया जा सकता है areloadsofanswerson अतः, और बड़े पैमाने पर इंटरनेट पर मौजूद अन्य लिंक के बहुत सारे।

• http://www.emailology.org/
• http://www.email-standards.org/
• http://htmlemailboilerplate.com/
• http://www.campaignmonitor.com/css/

Answer 2

मैंने हाल ही में एचटीएमएल ईमेल टेम्पलेट्स बनाने में कुछ समय बिताया, मैंने पाया कि सबसे अच्छा समाधान इस http://htmlemailboilerplate.com/ का उपयोग करना था। मैंने तब से 3 जटिल जटिल टेम्पलेट बनाए हैं और उन्होंने विभिन्न ईमेल क्लाइंट में अच्छी तरह से काम किया है।

Answer 3

यहाँ कुछ चीजें आप ईमेल के साथ नहीं कर सकते हैं:

• शैलियों के साथ एक अनुभाग को शामिल करें। ऐप्पल मेल.एप इसका समर्थन करता है, लेकिन जीमेल और हॉटमेल नहीं करता है, इसलिए यह नो-नो है। हॉटमेल शरीर में एक शैली अनुभाग का समर्थन करेगा लेकिन जीमेल अभी भी नहीं करता है।
• बाहरी स्टाइलशीट से लिंक करें। बहुत से ईमेल क्लाइंट इसका समर्थन नहीं करते हैं, बस इसे भूलने के लिए सबसे अच्छा।
• पृष्ठभूमि-छवि/पृष्ठभूमि-स्थिति। जीमेल भी इस पर अपराधी है।
• अपनी फ्लोट साफ़ करें। जीमेल फिर से
• मार्जिन। हां, गंभीरता से, हॉटमेल मार्जिन को अनदेखा करता है। असल में कोई सीएसएस स्थिति बिल्कुल काम नहीं करती है।
• फ़ॉन्ट-कुछ भी। संभावना है कि यूडोरा फोंट के साथ घोषित करने की कोशिश करने वाली किसी भी चीज को अनदेखा कर देगा।

स्रोत: http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp ईमेल टेम्पलेट्स है आप उपयोग कर सकते हैं - here

कुछ और संसाधनों है कि आप

• Best practices for styling HTML emails
• Styling html in email
मदद करनी चाहिए
• Styling HTML email for Gmail

Answer 4

आप बी-चाबुक की मार अपने ईमेल के लिए इस https://github.com/advancedrei/BootstrapForEmail उपयोग कर सकते हैं। http://zurb.com/ink/

आशा है कि यह किसी को मदद मिलती है:

Answer 5

मैं इस पुराने धागे resurecting लिए माफी माँगता हूँ, लेकिन मैं तो बस सबको पता सीएसएस ढांचे विशेष रूप से ईमेल स्टाइल के लिए बनाया की तरह एक बहुत करीबी बूटस्ट्रैप है बताना चाहता था, यहाँ की कड़ी है।

निंजा संपादित करें: के बाद से Foundation for Emails नाम दिया है और नई कड़ी है यह कर दिया गया है: https://foundation.zurb.com/emails.html

Answer 6

सबसे अच्छा तरीका मैं ले कर आए हैं एक चयनित आधार पर सास आयात का उपयोग करने के अपने बूटस्ट्रैप में खींचने के लिए है (या किसी अन्य) शैलियों को ईमेल में आवश्यक हो सकता है।

पहले, अपने ईमेल शैली के लिए 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 इनलाइन सीएसएस में शैली कार्रवाई करने के लिए ऊपर उल्लेख किया है की तरह एक 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 

उम्मीद है कि इससे मदद मिलती है! पार्डोट, सेल्सफोर्स, और हमारे उत्पाद की अंतर्निहित ऑटो-प्रतिक्रिया और दैनिक ईमेल में लचीली ईमेल टेम्पलेटिंग ढांचे को खोजने के लिए संघर्ष कर रहे थे।

Answer 7

यहाँ चाल है कि आप पूरे बूटस्ट्रैप शामिल करने के लिए नहीं करना चाहती है। मुद्दा यह है कि ईमेल क्लाइंट मीडिया प्रश्नों को अनदेखा कर देंगे और उन सभी प्रिंट शैलियों को संसाधित करेंगे जिनमें बहुत सारे महत्वपूर्ण कथन हैं।

इसके बजाय, आप केवल कि आप की आवश्यकता बूटस्ट्रैप के विशिष्ट भागों को शामिल करने की जरूरत है। मेरे 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'; 

Answer 8

हाय ब्रायन आर्मस्ट्रांग, पर जाएँ this link।

इस ब्लॉग आप कैसे बूटस्ट्रैप कम साथ रेल एकीकृत करने के लिए (premailer-रेल का प्रयोग करके) बताता है।

आप बूटस्ट्रैप सास का उपयोग कर रहे हैं, तो आप कर सकता है एक ही:

अपने ध्यान में रखते हुए

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

और फिर email.css.scss में कुछ बूटस्ट्रैप सास फ़ाइलें आयात द्वारा

शुरू <head> अनुभाग जोड़ें <%= stylesheet_link_tag "email" %>