এইচটিএমএল ইমেলে কীভাবে ডার্ক মোড সক্ষম করবেন - আপনার যা কিছু জানা দরকার

নতুন iOS 13 আপডেটের সাথে, Apple Mail একটি অন্ধকার থিম পাচ্ছে। তার মানে এটিই প্রথম প্রধান ইমেল ক্লায়েন্ট যা prefers-color-scheme সমর্থন করে CSS মিডিয়া প্রশ্ন। তাই আপনি এখন অন্ধকার এবং হালকা উভয় থিমের জন্য বিশেষভাবে ইমেল ডিজাইন করতে পারেন।

আমি একটি বিশাল ডার্ক মোড ফ্যান, এবং অন্ধভাবে-উজ্জ্বল ইমেল আমার নেমেসিস। তাই যখন আমি iOS 13-এ ডার্ক মোড সম্বন্ধে জানলাম, তখন আমি একমাত্র স্পষ্ট কাজটি করেছিলাম এবং জিনিসগুলি পরীক্ষা করার জন্য একটি একেবারে নতুন আইফোনের অর্ডার দিয়েছিলাম।

আমি যখন এটিতে ছিলাম, আমি এটিও পরীক্ষা করেছিলাম যে সমস্যা সৃষ্টিকারী আউটলুক সহ প্রায় সমস্ত ইমেল ক্লায়েন্টে ডার্ক মোড কীভাবে কাজ করে। আমি যা পেয়েছি তা এখানে।

কিন্তু প্রথমে, wহ্যাট কি prefers-color-scheme?
prefers-color-scheme ব্যবহারকারী হালকা বা গাঢ় থিম পছন্দ করেন কিনা তা সনাক্ত করতে CSS মিডিয়া ক্যোয়ারী ব্যবহার করা হয়, যার ফলে উভয়ের জন্য বিশেষভাবে ইমেল ডিজাইন করা সম্ভব হয়।

iOS 13 আপডেটের সাথে, সবচেয়ে জনপ্রিয় ইমেল ক্লায়েন্টের সমর্থন 2.3% থেকে বেড়ে 38.4% হয়েছে ! অ্যাপল মেইলের জনপ্রিয়তার জন্য একটি বিশাল পদক্ষেপ ধন্যবাদ। আশ্চর্যজনকভাবে, আউটলুকই একমাত্র ইমেল ক্লায়েন্ট যা অ্যাপল মেইলের আগে এটি সমর্থন করেছিল।

জনপ্রিয় ইমেল ক্লায়েন্টে ডার্ক মোড কীভাবে কাজ করে

ইমেল বার্তাটিকে অন্ধকারে রেন্ডার করতে, ইমেল ক্লায়েন্টরা পর্দার আড়ালে স্বয়ংক্রিয়ভাবে ইমেলের রঙগুলি উল্টে দেয়। নিয়মিত ব্যবহারকারী-থেকে-ব্যবহারকারী ইমেলের জন্য, এটি সমস্ত ইমেল ক্লায়েন্টে ভাল এবং ধারাবাহিকভাবে কাজ করে।

যাইহোক, কাস্টম HTML ইমেলগুলির জন্য এটি এত সহজ নয় - যেগুলি আমাদের বেশিরভাগ ইনবক্স পূরণ করে৷ আমি লেনদেন এবং প্রচারমূলক কথা বলছি।

ইমেল ক্লায়েন্টরা কীভাবে ডার্ক মোড ইমেল রেন্ডারিং পরিচালনা করে তার মধ্যে আমি যে পার্থক্যগুলি খুঁজে পেয়েছি তা এখানে:

* জনপ্রিয়তা একই ইমেল ক্লায়েন্টের জন্য সমস্ত প্ল্যাটফর্মে ভাগ করা হয় কারণ এটি নির্ভরযোগ্যভাবে আলাদা করা যায় না। জনপ্রিয়তার সূত্রঃ Litmus, 2019 ইমেল ক্লায়েন্ট মার্কেট শেয়ার ।

(পরীক্ষা থেকে আমার নোটগুলি দেখতে, এবং আমি ধীরে ধীরে আরও ইমেল ক্লায়েন্ট পরীক্ষা করতে এবং প্রথমে সেখানে নিবন্ধটি আপডেট করার সাথে সাথে সর্বশেষ পরীক্ষাগুলি দেখতে মূল পোস্টটিতে যান৷)

কিভাবে HTML ইমেলগুলিকে ডার্ক মোড বন্ধুত্বপূর্ণ করা যায়

আমি ইতিমধ্যে ডেটা ব্যবহার করার জন্য রেখেছি, এবং কিছু আউটলুক সম্পর্কিত চ্যালেঞ্জ পরে, আমি আমাদের ইমেলগুলিকে ডার্ক মোড বন্ধুত্বপূর্ণ করেছি। এখানে আপনি কীভাবে এটি করতে পারেন:৷

ডেটা কি বলে:
55% এরও বেশি ইমেল ডার্ক মোড সক্ষম করে খোলা হতে পারে। একবার Gmail ডার্ক সাইডে যোগদান করলে, ডার্ক মোড সক্ষম করে খোলা হতে পারে এমন ইমেলগুলি 83%-এ বেড়ে যাবে!

1) রং সামঞ্জস্য করা

অ্যাপল মেইলের দিকে নজর রাখুন, কারণ এটি শুধুমাত্র পটভূমির রঙ স্বচ্ছ বা অনির্দিষ্ট হলেই রঙগুলিকে উল্টে দেয় — সাদা পটভূমি তা করবে না . আপনার ইমেলগুলি কাউকে অন্ধ করবে না তা নিশ্চিত করার সবচেয়ে সহজ উপায় হল একটি পটভূমির রঙ নির্দিষ্ট করা আছে কিনা তা পরীক্ষা করা। ডিজাইনের উপর আরো নিয়ন্ত্রণের জন্য, এখানেই prefers-color-scheme কাজে আসে।

সিনট্যাক্স (@media prefers-color-scheme):

<style>
	/* Your light mode (default) styles: */
	body {
		background: white;
		color: #393939;
	}

	@media (prefers-color-scheme: dark) {
		/* Your dark mode styles: */

		body {
			background: black;
			color: #ccc;
		}
	}
</style>

একটি ডিজাইন টিপ: বিশুদ্ধ সাদা #fff এড়িয়ে চলুন পাঠ্যের রঙ হিসাবে। আমি দেখেছি যে মূল পাঠ্যের জন্য বৈসাদৃশ্য অনুপাত প্রায় 11.5 খুব উজ্জ্বল নয় এবং খুব ম্লান না হওয়ার মধ্যে একটি চমৎকার সমঝোতা। এখানে বৈসাদৃশ্য অনুপাত পরীক্ষা করুন:https://contrast-ratio.com অথবা Chrome dev টুল ব্যবহার করুন।

2) আলো এবং অন্ধকার লোগোর মধ্যে পরিবর্তন করা

একটি অন্ধকার পটভূমিতে একটি অন্ধকার পাঠ্য প্রায় অদৃশ্য, এবং সক্রিয় ডার্ক মোড সহ একটি ইমেল ক্লায়েন্টে দেখা হলে একটি লোগোর ক্ষেত্রে এটিই ঘটে।

আজকাল, একটি সাধারণ লোগোতে সাধারণত একটি স্বচ্ছ ব্যাকগ্রাউন্ড, রঙিন আইকন এবং গাঢ় কপি থাকে। সমস্যা দেখুন? যেহেতু ইমেল ক্লায়েন্টরা ছবির রং উল্টে দেয় না, তাই আপনাকে নিজেই এটি পরিচালনা করতে হবে।

এটি মোকাবেলা করতে, আপনি যেটি করতে পারেন:

1. স্বচ্ছ ব্যাকগ্রাউন্ডের পরিবর্তে একটি সাদা পটভূমি দিয়ে লোগোটি সংরক্ষণ করুন (এটি ঠিক করার সবচেয়ে সহজ উপায়)। কিন্তু আমি এই পদ্ধতির সুপারিশ করব না — ডার্ক মোড ব্যবহারকারীরা খুশি হবেন না।
2. একটি অন্ধকার পটভূমিতে একটি হালকা লোগো রাখুন, এবং বাকি ইমেলটি একটি সাদা পটভূমিতে রাখুন (লিটমাস কীভাবে এটি করে দেখুন)।
3. ডার্ক মোড ইমেলকে আপনার ডিফল্ট করুন। এটির জন্য একটি ভাল প্রার্থী হবে Spotify কারণ তারা শুধুমাত্র তাদের অ্যাপে একটি গাঢ় থিম অফার করে।
4. আপনার লোগোর হালকা এবং গাঢ় উভয় সংস্করণই অন্তর্ভুক্ত করুন এবং prefers-color-scheme এর মধ্যে পাল্টান মিডিয়া ক্যোয়ারী

আমার প্রিয় হল শেষ পন্থা, তাই আপনি কীভাবে এটি করবেন তা এখানে:

একটি সাধারণ "display: none" অন ​​ডার্ক লোগো সব আধুনিক ইমেল ক্লায়েন্টে ঠিক কাজ করে। কিন্তু সবাইকে অবাক করে, এটি Outlook এবং Windows 10 Mail-এ কাজ করে না৷

CSS শৈলীতে:

<style>
	@media (prefers-color-scheme: dark) {
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

…এবং HTML গঠন:

<image src="dark-logo.png" class="darkLogo" />

<!--
	To hide the light logo perfectly in Outlook and Windows 10 Mail, 
	you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

এই পদ্ধতিটি বেশ ভাল কাজ করে, তবে এটি এখনও বোর্ড জুড়ে সঠিকভাবে কাজ করবে না। অন্ধকার পটভূমি সমস্যায় অন্ধকার পাঠ্য ইমেল ক্লায়েন্টগুলির সাথে ঘটবে যেগুলি ডার্ক মোড সমর্থন করে কিন্তু prefers-color-scheme সমর্থন করে না . সেটি হল Outlook, Windows 10 Mail, Zoho এবং সম্ভাব্য Gmail৷

সুতরাং, ইমেলে লোগোটিকে সম্পূর্ণ বুলেটপ্রুফ করতে, আমি উপরের থেকে পদ্ধতি 1 এবং 4 একত্রিত করব। পদ্ধতি 1 অন্ধকার মোড সমর্থন করে এমন সমস্ত ইমেল ক্লায়েন্টকে কভার করবে, কিন্তু prefers-color-scheme নয় . এবং পদ্ধতি 4 কভার করবে Apple Mail, Outlook on MacOS, এবং Outlook.com, যা উভয়কেই সমর্থন করে৷

এছাড়াও, সাদা ব্যাকগ্রাউন্ডে লোগো সংরক্ষণ করার পরিবর্তে, আমি একটি 3-পিক্সেল চওড়া ব্যাকগ্রাউন্ড-মেলে বর্ডার যোগ করব এবং স্বাভাবিকের মতো একটি স্বচ্ছ ব্যাকগ্রাউন্ডে সংরক্ষণ করব।

এটি দেখতে বেশ জটিল (শুধুমাত্র একটি লোগোর জন্য), তাই প্রথমে HTML মার্কআপটি দেখা যাক:

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- Light theme (so dark logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
	<image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- Dark theme (so light logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

…এবং CSS শৈলী:

<style>
	@media (prefers-color-scheme: light) {
		.darkLogoDefault,
		.lightLogo {
			display: none !important;
		}

		.darkLogoWrapper,
		.darkLogo {
			display: block !important;
		}
	}

	@media (prefers-color-scheme: dark) {
		.darkLogoDefault,
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

জিমেইলে ডার্ক মোড আসছে

নতুন অ্যান্ড্রয়েড 10 এ অ্যান্ড্রয়েডে ডার্ক মোড আসছে এবং অবশেষে জিমেইলও সম্পূর্ণ অন্ধকার হয়ে যাবে। আপনার যা দরকার তা হল Android 10 এবং নতুন Gmail (অন্তত সংস্করণ 2019.09.01.268168002)। যাইহোক, Google সার্ভার-সাইড পুশ দিয়ে ধীরে ধীরে ব্যবহারকারীদের জন্য নতুন বৈশিষ্ট্যগুলি (এই ক্ষেত্রে একটি অন্ধকার থিম) সক্ষম করার প্রবণতা রাখে, এবং আমি আপাতত এটির সাথে ভাগ্যবান হইনি।

আমি @media prefers-color-scheme এর জন্য সমর্থন কিনা তা দেখতে আগ্রহী Gmail এ আসছে। আমি যা পড়ি তা থেকে, এটি প্রতিশ্রুতিশীল বলে মনে হচ্ছে না। আমি অনুমান আমাদের খুঁজে পেতে অপেক্ষা করতে হবে. Gmail-এ ডার্ক থিম চালু হলেই আমি নিবন্ধটি আপডেট করব।

র্যাপিং আপ

ডার্ক মোড HTML ইমেলে আসছে, এবং আমি এটা পছন্দ করি! তবে, এটি নিয়ে চিন্তা করার আরেকটি বিষয় - যেমন লেআউটের জন্য HTML টেবিল ব্যবহার করা যথেষ্ট ছিল না।

আমাদের মেলিং তালিকায় যোগ দিয়ে ইমেলে ডার্ক মোড সম্পর্কে আপ-টু-ডেট থাকুন। আমাদের SaaS পণ্য - সাইডমেল তৈরি এবং বৃদ্ধি করার সময় আমরা সেখানে অন্তর্দৃষ্টি এবং চ্যালেঞ্জগুলিও শেয়ার করি৷

পড়ার জন্য ধন্যবাদ!