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

91

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

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

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

धन्यवाद!

html twitter-bootstrap html-email

— ब्रायन आर्मस्ट्रांग
स्रोत

16

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

— एंड्रेस इलिच

मेरे साथ भी वही दिक्कत है। मुझे लगता है कि मैं जो कर रहा हूं वह ईमेल बना रहा है, एक स्क्रीनशॉट ले रहा है कि कैसे सीएसएस पाठ के बिना इसे देखता है, और फिर HTML में पाठ के साथ स्क्रीनशॉट छवि का उपयोग कर रहा है। यह एक बुरा समाधान है, लेकिन इसे काम मिलना चाहिए।

— gsingh2011

2

मुझे उपरोक्त सह-हस्ताक्षर करने होंगे। ईमेल वास्तव में विशिष्ट हैं, (यदि आप अपरिचित हैं तो) कुछ मुफ्त ईमेल टेम्पलेट डाउनलोड करने की कोशिश करें और कोड को ट्विक करें। इन लिंक को आज़माएं freemailtemplates.com, www.campaignmonitor.com/css/ & www.sitepoint.com/code-html-email-newsletters/

— frontsideup

2

-1 सादे पाठ ईमेल के अलावा कुछ भी भेजने के लिए।

— कॉडी ग्रे

2

पूरी तरह से आप ब्रायन से सहमत हैं। मैं पिछले कुछ दिनों से HTML ईमेल पर काम कर रहा हूं, और यह अनावश्यक रूप से और बेहद दर्दनाक है। मैं HTML ईमेल के लिए बराबर बूटस्ट्रैप शैली शुरू करने का इच्छुक हूं; क्या आप मदद करने में रुचि रखते हैं?

— NoizWaves

83

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

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

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

वहाँ रहे हैं भार के जवाब पर एसओ, और बड़े पैमाने पर इंटरनेट पर मौजूद अन्य लिंक के बहुत सारे।

— डैन ब्लो
स्रोत

1

पहला लिंक मर चुका है।

— होउमन

45

मैं इस पुराने धागे को हटाने के लिए माफी माँगता हूँ, लेकिन मैं बस सभी को बताना चाहता हूँ कि बहुत ही नज़दीकी बूटस्ट्रैप है, जैसे CSS फ्रेमवर्क विशेष रूप से ईमेल स्टाइल के लिए बनाया गया है, यहाँ लिंक है: http://zurb.com/ink/

आशा है कि यह किसी की मदद करता है।

निंजा संपादन: इसका नाम बदलकर Foundation for Emailsनया लिंक कर दिया गया है: https://foundation.zurb.com/emails.html

— adamj
स्रोत

1

सभी लिंक टूट गए।

— होउमैन

16

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

शैलियों के साथ एक अनुभाग शामिल करें । Apple Mail.app इसका समर्थन करता है, लेकिन Gmail और Hotmail नहीं करते हैं, इसलिए यह एक नहीं-नहीं है। हॉटमेल शरीर में एक शैली अनुभाग का समर्थन करेगा लेकिन जीमेल अभी भी नहीं करता है।

बाहरी स्टाइलशीट का लिंक। कई ईमेल क्लाइंट इसका समर्थन नहीं करते हैं, सबसे अच्छा यह है कि इसे भूल जाएं।

पृष्ठभूमि-छवि / पृष्ठभूमि-स्थिति। इस पर भी जीमेल अपराधी है।

अपनी झांकियां साफ करें । फिर से जीमेल।

हाशिए पर । हां, गंभीरता से, हॉटमेल मार्जिन को अनदेखा करता है। मूल रूप से किसी भी सीएसएस स्थिति में काम नहीं करता है।

फ़ॉन्ट-कुछ भी । संभावनाएं हैं यूडोरा कुछ भी अनदेखा कर देगा जिसे आप फोंट के साथ घोषित करने का प्रयास करते हैं।

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

Mailchimp में आपके द्वारा उपयोग किए जाने वाले ईमेल टेम्प्लेट हैं - यहाँ

कुछ और संसाधन जो आपको मदद करने चाहिए

— एल्विस डिसूजा
स्रोत

1. आप शैलियों का उपयोग कर सकते हैं - आपको इसे सिर में नहीं रखना चाहिए, लेकिन आप इसे शरीर में शामिल कर सकते हैं। 2. पृष्ठभूमि ठीक है - सीएसएस के बजाय पृष्ठभूमि HTML विशेषता का उपयोग करें। आउटलुक 2007/2010 को अपने स्वयं के ('वीएमएल') समाधान की आवश्यकता है। 3. आप फ्लोट्स का उपयोग बिल्कुल भी नहीं कर सकते हैं, अकेले उन्हें साफ करें। 4. फ़ॉन्ट-कुछ भी - यूडोरा एक अल्पसंख्यक ग्राहक है। जाहिर है, आपके क्लाइंट (एनालिटिक्स को देखें) पर निर्भर करता है, लेकिन font-sizeआपको बहुत कम कीमत पर अधिक लचीलापन देता है।

— डैन ब्लो

10

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

— Viktorminator
स्रोत

2

इस लिंक के लिए धन्यवाद। मैं हर जगह कुछ इस तरह से खोज रहा था! यह शर्म की बात है कि यह बूटस्ट्रैप 2.x पर विकसित किया गया था और अब उत्पादन में नहीं है।

— पुरानी .nicho

2

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

— MattyHarris
स्रोत

1

हाय ब्रायन आर्मस्ट्रांग । इस लिंक पर जाएँ ।

यह ब्लॉग आपको बताता है कि रेल को बूटस्ट्रैप से कैसे कम किया जाए (प्रीमियर-रेल का उपयोग करके)।

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

कुछ बूटस्ट्रैप एसएएस फाइलों को ईमेल में भेजकर शुरू करें

@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

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

सबसे पहले, 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 फ़ाइल को संदर्भित करता है, जिसमें केवल आपके ईमेल में चयनित बूटस्ट्रैप शैलियों को संदर्भित और नेस्टेड शामिल किया गया है।

उदाहरण के लिए, कुछ बूटस्ट्रैप स्टाइल Zurb की उत्तरदायी तालिका शैली के साथ संघर्ष करेंगे। इसे ठीक करने के लिए, आप बूटस्ट्रैप की शैलियों को एक मूल वर्ग या अन्य चयनकर्ता के भीतर घोंसला बना सकते हैं ताकि बूटस्ट्रैप की तालिका शैलियों को केवल जरूरत पड़ने पर कॉल किया जा सके।

इस तरह, आपके पास केवल जरूरत पड़ने पर कक्षाओं में खींचने का लचीलापन है। आप देखेंगे कि मैं उपयोग http://zurb.com/करता हूं जो उपयोग करने के लिए एक महान उत्तरदायी ईमेल लाइब्रेरी है। यह सभी देखेंhttp://zurb.com/ink/

अन्त में, https://github.com/fphilipe/premailer-rails3शैली में इनलाइन सीएसएस को संसाधित करने के लिए ऊपर बताए गए एक प्रीमियर का उपयोग करें , इनलाइन शैलियों को केवल उस विशेष ईमेल टेम्पलेट में उपयोग किए जाने के लिए संकलित करें। उदाहरण के लिए, प्रीमियर के लिए, आपकी रूबी फ़ाइल ईमेल को इनलाइन शैली में संकलित करने के लिए कुछ इस तरह दिख सकती है।

    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

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

— रेयान वाल्टन
स्रोत

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
स्रोत

0

बूटस्ट्रैप ईमेल के बारे में क्या ? यह बूटस्ट्रैप 4 के साथ वास्तव में अच्छा और संगत लगता है।

— लिंग
स्रोत