ডার্ক মোড মাত্র কয়েক বছর আগে চালু হয়েছিল এবং গ্রহণ অব্যাহত রয়েছে। গাঢ় মোড ম্যাকস, আইওএস এবং অ্যান্ড্রয়েড জুড়ে এখন মাইক্রোসফ্ট আউটলুক, সাফারি, রেডডিট, টুইটার, ইউটিউব, জিমেইল এবং রেডডিট সহ একাধিক অ্যাপ্লিকেশন উপলব্ধ। যদিও সর্বত্র প্রতিটি ক্ষেত্রে সম্পূর্ণ সমর্থন নেই isn't
ডার্ক মোড স্ক্রিন শক্তির ব্যবহার হ্রাস করে এবং ফোকাস বাড়ায়। কিছু ব্যবহারকারী তাদের চোখের স্ট্রেন হ্রাস অনুভব বলেও জানিয়েছে, তবে তা প্রশ্ন করা হয়েছে.
সম্প্রতি, আমরা একটি বিপণন ক্লাউড টেম্পলেট তৈরি করেছি যা তার কোডটিতে ডার্ক মোডকে সংযুক্ত করে যা ইমেল ক্লায়েন্টে দেখার সময় ইমেল বিভাগগুলি সত্যই নাটকীয়ভাবে বিপরীত করে তোলে। এটি এমন একটি প্রচেষ্টা যা আপনার গ্রাহকদের জন্য অতিরিক্ত ব্যস্ততা এবং ক্লিক-থ্রো রেট ড্রাইভ করতে পারে।
এটি প্রায়শই নয় যে ইমেল প্রযুক্তিতে অগ্রগতি হয়, তাই শিল্প জুড়ে এই অভিজ্ঞতার গ্রহণযোগ্যতা দেখে খুব ভাল লাগছে। সর্বোত্তম অনুশীলনগুলি, প্রয়োগের কোড এবং সেইসাথে ক্লায়েন্ট সমর্থন বোঝা আপনার অন্ধকার মোডের বাস্তবায়ন সাফল্যের জন্য গুরুত্বপূর্ণ। যে কারণে, আপলারদের দলটি এই গাইডটি প্রকাশ করেছিল ডার্ক মোড ইমেল সমর্থন.
গাark় মোড ইমেল কোড
পদক্ষেপ 1: ইমেল ক্লায়েন্টগুলিতে অন্ধকার মোড সক্ষম করতে মেটাডেটা অন্তর্ভুক্ত করুন - প্রথম পদক্ষেপটি হ'ল গ্রাহকদের জন্য যারা অন্ধকার মোড সেটিংস চালু করেছেন তাদের জন্য ইমেলের অন্ধকার মোড সক্ষম করা। আপনি এই মেটাডেটা অন্তর্ভুক্ত করে এটি করতে পারেন ট্যাগ
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">পদক্ষেপ 2: @ মিডিয়ার জন্য ডার্ক মোড শৈলী অন্তর্ভুক্ত করুন (রঙ-স্কিম পছন্দ: অন্ধকার) - আপনার এমবেড করা এই মিডিয়া ক্যোয়ারী লিখুন tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, আউটলুক 2019 (ম্যাকোস), এবং আউটলুক অ্যাপ (আইওএস)। আপনি যদি আপনার ইমেলটিতে কোনও রূপরেখামূলক লোগো না চান তবে আপনি নীচের চিত্রের মতো .dark-img এবং .light-img ক্লাস ব্যবহার করতে পারেন।
@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}পদক্ষেপ 3: অন্ধকার মোড শৈলীর সদৃশ করতে [ডেটা-ওগএসসি] উপসর্গটি ব্যবহার করুন - অ্যান্ড্রয়েডের জন্য আউটলুক অ্যাপ্লিকেশনটিতে ডার্ক মোডের সাথে সামঞ্জস্য রাখতে ইমেলগুলির জন্য এই কোডগুলি অন্তর্ভুক্ত করুন।
[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }পদক্ষেপ 3: বডি এইচটিএমএলে কেবল গা dark় মোড-স্টাইল অন্তর্ভুক্ত করুন - আপনার এইচটিএমএল ট্যাগগুলিতে অবশ্যই ডার্ক মোডের ক্লাস থাকা উচিত।
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->ডার্ক মোড টিপস এবং অতিরিক্ত সংস্থানগুলি ইমেল করুন
আমি কাজ করছি Martech Zone ডার্ক মোড সমর্থন করার জন্য প্রতিদিন এবং সাপ্তাহিক নিউজলেটারগুলি নিশ্চিত হন এখানে সাবস্ক্রাইব। বেশিরভাগ ইমেল কোডিংয়ের মতো, বিভিন্ন ইমেল ক্লায়েন্ট এবং তাদের মালিকানাধীন কোডিং পদ্ধতির কারণে এটি কোনও সহজ প্রক্রিয়া নয়। আমি যে সমস্যার সমাধান করেছি তা ব্যতিক্রম ছিল ... উদাহরণস্বরূপ, আপনি অন্ধকার মোড নির্বিশেষে একটি বোতামে সাদা পাঠ্য চান। কোডের পরিমাণটি কিছুটা হাস্যকর ... আমার নিম্নলিখিত ব্যতিক্রমগুলি থাকতে হয়েছিল:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } কিছু অতিরিক্ত সংস্থান:
- litmus - ইমেল বিপণনকারীদের জন্য অন্ধকার মোডের চূড়ান্ত গাইড।
- ক্যাম্পেইনমনিটর - বিকাশকারীরা ইমেলের জন্য ডার্ক মোডে গাইড করে।
আপলারগুলি ইন্টারেক্টিভ ইনফোগ্রাফিক দেখুন
