কেউ কি টুইটার বুটস্ট্র্যাপের সাথে এইচটিএমএল ইমেল কাজ করছে?

Question 1

আমি এই premailer-rails3মণিটি ব্যবহার করছি যা এইচটিএমএল ইমেলের জন্য শৈলীগুলি ইনলাইন টানছে এবং আমি এটি টুইটার বুটস্ট্র্যাপের সাথে কাজ করার চেষ্টা করছি।

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

দেখে মনে হচ্ছে কিছু স্টাইল সঠিকভাবে এসেছে তবে সেগুলি সব নয়। আমি ভাবছি যে কারও কাছেই এইচটিএমএল ইমেলের মাধ্যমে তাদের টুইটার বুটস্ট্র্যাপ সিএসএস (পরিবর্তিত বা না) পাওয়ার কোনও দুর্দান্ত উদাহরণ রয়েছে।

ধন্যবাদ!

Question 2

যদি আপনি বোঝাতে চান "আমি কি কোনও ইমেলের বুটস্ট্র্যাপের স্টাইলিস্টিক উপস্থাপনাটি ব্যবহার করতে পারি?" তবে আপনি পারবেন, যদিও আমি এখনও কাউকে জানি না যে এটি এখনও করেছে। যদিও আপনাকে টেবিলগুলির মধ্যে সমস্ত কিছু পুনরুদ্ধার করতে হবে।

আপনি যদি কার্যকারিতার পরে থাকেন তবে এটি আপনার ইমেলগুলি কোথায় প্রদর্শিত হবে তার উপর নির্ভর করে। যদি আপনার ব্যবহারকারীদের একটি উল্লেখযোগ্য অনুপাত আউটলুক, জিমেইল, ইয়াহু বা হটমেইলে থাকে (এবং এগুলি সাধারণত ইমেল ক্লায়েন্টগুলির প্রায় 75% পর্যন্ত জুড়ে থাকে) তবে বুটস্ট্র্যাপের অনেক সদ্ব্যবহার সম্ভব নয়। সিএসএস উপস্থাপনে অ্যান্ড্রয়েডে ম্যাক মেল, আইওএস মেল এবং জিমেইল অনেক ভাল, সুতরাং আপনি যদি বেশিরভাগ মোবাইল ডিভাইসগুলি লক্ষ্য করে থাকেন তবে এটি এতটা খারাপ নয়।

জাভাস্ক্রিপ্ট - সম্পূর্ণ সীমাবদ্ধতা। যদি আপনি চেষ্টা করেন, আপনি সম্ভবত সরাসরি ইমেল করতে যাবেন নরকে (ওরফে স্প্যাম ফোল্ডার)। এর অর্থ হ'ল কমটিও সীমার বাইরে নয়, যদিও আপনি চাইলে ফলাফলের সিএসএস শৈলীগুলি অবশ্যই ব্যবহার করতে পারেন।
অন্যান্য ধরণের সিএসএসের চেয়ে ইনলাইন সিএসএস ব্যবহার করা অনেক বেশি নিরাপদ (এম্বেড করা সম্ভব, সংযুক্ত একটি নির্দিষ্ট নম্বর)। মিডিয়া প্রশ্নগুলি সম্ভব, যাতে আপনার কাছে একধরনের প্রতিক্রিয়াশীল নকশা থাকতে পারে। যাইহোক, সিএসএস বৈশিষ্ট্যগুলির একটি দীর্ঘ তালিকা রয়েছে যা কাজ করে না - মূলত, বক্স মডেলটি ইমেল ক্লায়েন্টগুলিতে মূলত অসমর্থিত। আপনাকে টেবিলগুলি দিয়ে সবকিছু কাঠামো তৈরি করতে হবে।
font-face- আপনি কেবল বাহ্যিক চিত্র ব্যবহার করতে পারেন। অন্যান্য সমস্ত বাহ্যিক সংস্থান (সিএসএস ফাইল, ফন্ট) বাদ দেওয়া হয়েছে।
গ্লাইফ এবং স্প্রাইটস - ব্যাকগ্রাউন্ড-চিত্রগুলির (ভিএমএল) আউটলুক 2007 এর অদ্ভুত বাস্তবায়নের কারণে, আপনি ব্যাকগ্রাউন্ড-পুনরাবৃত্তি বা অবস্থান ব্যবহার করতে পারবেন না।
সিউডো-নির্বাচকগুলি সম্ভব নয় - যেমন :hover, :activeরাজ্যগুলি আলাদাভাবে স্টাইল করা যায় না

সেখানে হয় লোড এর উত্তর উপর শুট-আউট, এবং বৃহৎ এ ইন্টারনেটে লিঙ্কগুলি প্রচুর।

Question 3

আমি এই পুরানো থ্রেডটি পুনরায় সংশ্লেষের জন্য ক্ষমা চাইছি, তবে আমি কেবল সবাইকে জানাতে চেয়েছিলাম যে সিএসএস কাঠামোর মতো একটি খুব কাছের বুটস্ট্র্যাপ রয়েছে যা বিশেষত ইমেল স্টাইলিংয়ের জন্য তৈরি করা হয়েছে, এখানে লিঙ্কটি দেওয়া হয়েছে: http://zurb.com/ink/

আশা করি এটি কাউকে সাহায্য করবে।

নিনজা সম্পাদনা: এরপরেFoundation for Emails এর নতুন নামকরণ করা হয়েছে এবং নতুন লিঙ্কটি হ'ল: https://foundation.zurb.com/emails.html

নিঃশব্দ তবে মারাত্মক সম্পাদনা: নতুন লিঙ্ক https://get.foundation/emails.html

Question 4

ইমেলের মাধ্যমে আপনি যে কিছু করতে পারবেন না তা এখানে:

শৈলীর সাথে একটি বিভাগ অন্তর্ভুক্ত করুন । অ্যাপল মেইল.এপ এটি সমর্থন করে, তবে জিমেইল এবং হটমেল এটি সমর্থন করে না, তাই এটি কোনও নম্বর নয়। হটমেল শরীরের একটি স্টাইল বিভাগ সমর্থন করবে কিন্তু Gmail এখনও তা দেয় না।

বাহ্যিক স্টাইলশিটের লিঙ্ক। অনেক ইমেল ক্লায়েন্ট এটিকে সমর্থন করে না, কেবল এটি ভুলে যাওয়ার পক্ষে সেরা।

পটভূমি-চিত্র / পটভূমি অবস্থান। জিমেইলও এটির অপরাধী।

আপনার ভাসমান সাফ করুন । আবার জিমেইল।

মার্জিন । হ্যাঁ, গুরুতরভাবে, হটমেল মার্জিনগুলি উপেক্ষা করে। মূলত কোনও সিএসএস পজিশনিং কাজ করে না।

হরফ-কিছু । সম্ভাবনা হ'ল ইউডোরা আপনি ফন্টের সাহায্যে ঘোষণার চেষ্টা করা কিছু উপেক্ষা করবেন।

সূত্র: http://css-tricks.com/ using-css-in-html-emails-the-real-story/

মেলচিম্পে ইমেল টেম্পলেট রয়েছে যা আপনি ব্যবহার করতে পারেন - এখানে

আরও কয়েকটি সংস্থান যা আপনাকে সহায়তা করবে

Question 5

আপনার ইমেলটি বি-স্ট্র্যাপিংয়ের জন্য আপনি এই https://github.com/advancedrei/BootstrapForEmail ব্যবহার করতে পারেন ।

Question 6

আমি সম্প্রতি এইচটিএমএল ইমেল টেম্পলেটগুলি তৈরি করার জন্য কিছুটা সময় ব্যয় করেছি, আমার সবচেয়ে ভাল সমাধানটি হ'ল এই http://htmlemailboilerplate.com/ ব্যবহার করা । আমি তখন থেকে 3 টি বেশ জটিল টেম্পলেট তৈরি করেছি এবং তারা বিভিন্ন ইমেল ক্লায়েন্টগুলিতে ভাল কাজ করেছে।

Question 7

হাই ব্রায়ান আর্মস্ট্রং this এই লিঙ্কটি দেখুন ।

এই ব্লগটি আপনি বলে কিভাবে সংহত করতে পাগল সঙ্গে বুটস্ট্র্যাপ কম (premailer-পাগল ব্যবহার করে)।

আপনি যদি বুটস্ট্র্যাপ স্যাস ব্যবহার করছেন তবে আপনিও এটি করতে পারেন:

ইমেল.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" %>

Question 8

আমি যে সেরা পদ্ধতির সাথে হাজির করেছি তা হ'ল আপনার বুটস্ট্র্যাপ (বা অন্য কোনও) শৈলীর প্রয়োজন অনুসারে ইমেলগুলিতে টানতে বাছাই ভিত্তিতে সাস আমদানি ব্যবহার করা।

প্রথমে 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";

তারপরে আপনার ইমেল টেমপ্লেটগুলিতে কেবলমাত্র আপনার সংকলিত ইমেল সিএসএস ফাইলটিকেই উল্লেখ করুন যা কেবলমাত্র আপনার নির্বাচিত বুটস্ট্র্যাপ শৈলীগুলিকে রেফার করে এবং আপনার ইমেল.এসএসএস-তে সঠিকভাবে নেস্ট করে।

উদাহরণস্বরূপ, কিছু বুটস্ট্র্যাপ শৈলী জুরব এর প্রতিক্রিয়াশীল টেবিল শৈলীর সাথে বিরোধ করবে। এটি ঠিক করার জন্য, বুটস্ট্র্যাপের টেবিল স্টাইলগুলি কেবল প্রয়োজন হলে কল করার জন্য আপনি পিতামাত্ত শ্রেণীর বা অন্য নির্বাচকের মধ্যে বুটস্ট্র্যাপের স্টাইলগুলি বাসাতে পারেন।

এইভাবে, আপনার যখন প্রয়োজন হয় তখনই ক্লাসে টানতে নমনীয়তা পান। আপনি দেখতে পাবেন যে আমি ব্যবহার করি এটি ব্যবহারের 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

আশাকরি এটা সাহায্য করবে! পারডোট, সেলসফোর্স এবং আমাদের পণ্যটির অন্তর্নির্মিত স্বয়ংক্রিয় প্রতিক্রিয়া এবং প্রতিদিনের ইমেলগুলি জুড়ে একটি নমনীয় ইমেল টেম্প্লেটিং ফ্রেমওয়ার্ক খুঁজে পেতে লড়াই করতে হয়েছে।

Question 9

এখানে কৌশলটি হ'ল আপনি পুরো বুটস্ট্র্যাপটি অন্তর্ভুক্ত করতে চান না। ইস্যুটি হ'ল ইমেইল ক্লায়েন্টরা মিডিয়া প্রশ্নগুলি উপেক্ষা করবে এবং সমস্ত মুদ্রণ শৈলীর প্রক্রিয়া করবে যার অনেকগুলি গুরুত্বপূর্ণ বিবৃতি রয়েছে।

পরিবর্তে, আপনাকে কেবল বুটস্ট্র্যাপের নির্দিষ্ট অংশগুলি অন্তর্ভুক্ত করতে হবে যা আপনার প্রয়োজন। আমার ইমেল। সিএসএসএসএসএস ফাইলটি দেখতে এমন দেখাচ্ছে:

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

Question 10

বুটস্ট্র্যাপ ইমেল সম্পর্কে কী ? বুটস্ট্র্যাপ 4 এর সাথে এটি সত্যিই দুর্দান্ত এবং সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে।