নতুন iOS 13 আপডেটের সাথে, Apple Mail-এ একটি ডার্ক থিম আসছে। এর মানে এটি पहला মেজর ইমেল ক্লায়েন্ট যেটি prefers-color-scheme CSS মিডিয়া কোয়েরি সাপোর্ট করে। তাই এখন আপনি ডার্ক এবং লাইট থিম দুটোই জন্য স্পেসিফিক্যালি ইমেল ডিজাইন করতে পারেন।
আমি একটি বড় ডার্ক মোড ফ্যান, এবং অন্ধকারী উজ্জ্বল ইমেল আমার শত্রু। তাই iOS 13-এ ডার্ক মোড শুনলে আমি একমাত্র স্পষ্ট জিনিসটি করলাম — একটি ব্র্যান্ড নিউ আইফোন অর্ডার করলাম টেস্ট করার জন্য।
সেটির পাশাপাশি, আমি প্রায় সকল ইমেল ক্লায়েন্টে ডার্ক মোড কীভাবে কাজ করে সেটি টেস্ট করলাম, trouble-maker Outlook সহ। আমি যা পেলাম সেটি এখানে।
তবে প্রথম, prefers-color-scheme কী?prefers-color-scheme CSS মিডিয়া কোয়েরি ব্যবহার করা হয় এটি ডিটেক্ট করতে যে ইউজার লাইট বা ডার্ক থিম পছন্দ করে কিনা, যা ইমেলকে দুটো থিমের জন্য স্পেসিফিক্যালি ডিজাইন করা সম্ভব করে।
iOS 13 আপডেটের সাথে, সবচেয়ে জনপ্রিয় ইমেল ক্লায়েন্টগুলোর সাপোর্ট ২.৩% থেকে ৩৮.৪%-এ যাওয়া হয়েছে! Apple Mail-এর জনপ্রিয়তার কারণে একটি বিশাল লাফ। আশ্চর্য, Outlook একমাত্র ইমেল ক্লায়েন্ট ছিল যা Apple Mail-এর আগে এই ফিচার সাপোর্ট করত।
জনপ্রিয় ইমেল ক্লায়েন্টগুলোর ডার্ক মোড কীভাবে কাজ করে
ইমেল মেসেজকে নিজে ডার্ক রেন্ডার করতে, ইমেল ক্লায়েন্টরা পেছনে থেকে ইমেলের কালারগুলো ইনভার্ট করে অটোমেটিক্যালি। রেগুলার ইউজার-টু-ইউজার ইমেলের জন্য, এটি সব ইমেল ক্লায়েন্টে ভালো এবং কনসিস্টেন্টলি কাজ করে।
তবে, কাস্টম HTML ইমেলের জন্য — যেগুলো আমাদের ইনবক্সের অধিকাংশ ভরে — এটি সেটি সিম্পল নয়। আমি ট্রানজ্যাকশনাল এবং প্রোমোশনাল ইমেলের কথা বলছি।
ইমেল ক্লায়েন্টরা ডার্ক মোড ইমেল রেন্ডারিং কীভাবে হ্যান্ডেল করে তার পার্থক্য আমি যা পেলাম:
| Email client | Popularity | Dark UI | Auto-invert email colors | Supports @media (prefers-color-scheme) | |
|---|---|---|---|---|---|
| Apple Mail iPhone + iPad | 36.1% | ✔ Yes | ✔ Yes | ✔ Yes | (Show screenshot) |
| Gmail Android 10 | 27.8% * | ✔ Yes | ✔ Yes | ✖ No | (Show screenshot) |
| Gmail iOS 13 | 27.8% * | ✖ No | ✖ No | ✖ No | (Show screenshot) |
| Gmail webmail | 27.8% * | ✔ Yes | ✖ No | ✖ No | (Show screenshot) |
| Outlook iOS 13 | 9.1% * | ✔ Yes | ✔ Yes | ✖ No | (Show screenshot) |
| Outlook Android 10 | 9.1% * | ✔ Yes | ✔ Yes | ✖ No | (Show screenshot) |
| Outlook Windows 10 | 9.1% * | ✔ Yes | ✔ Yes | ✖ No | (Show screenshot) |
| Outlook macOS | 9.1% * | ✔ Yes | ✔ Yes | ✔ Yes | (Show screenshot) |
| Apple Mail macOS | 7.5% | ✔ Yes | ✔ Yes | ✖ No | (Show screenshot) |
| Yahoo! webmail | 6.3% * | ✔ Yes | ✖ No | ✖ No | (Show screenshot) |
| AOL webmail | 6.3% * | ✖ No | ✖ No | ✖ No | (Show screenshot) |
| Outlook.com webmail | 2.3% | ✔ Yes | ✔ Yes | ✔ Yes | (Show screenshot) |
| Windows 10 Mail Windows 10 | 0.5% | ✔ Yes | ✔ Yes | ✖ No | (Show screenshot) |
| Zoho Mail webmail | less than 0.5% | ✔ Yes | ✔ Yes | ✖ No | (Show screenshot) |
| Mozilla Thunderbird Windows 10 | less than 0.5% | ✔ Yes | ✖ No | ✔ Yes | (Show screenshot) |
| Spark macOS | less than 0.5% | ✔ Yes | ✔ Yes | ✔ Yes | (Show screenshot) |
| Spark iOS 13 | less than 0.5% | ✔ Yes | ✔ Yes | ✔ Yes | (Show screenshot) |
| Spark Android 9 | less than 0.5% | ✔ Yes | ✔ Yes | ✔ Yes | (Show screenshot) |
* জনপ্রিয়তা একই ইমেল ক্লায়েন্টের সকল প্ল্যাটফর্মে শেয়ার করা হয়েছে কারণ সেগুলো নির্ভুলভাবে ডিস্টিংগুইশ করা যায় না। জনপ্রিয়তার উৎস: Litmus, the 2019 email client market share.
(মূল পোস্টে ভিজিট করুন আমার টেস্টিং নোটগুলো দেখতে, এবং লেটেস্ট টেস্টগুলো দেখতে καθώς আমি ধীরে ধীরে আরও ইমেল ক্লায়েন্ট টেস্ট করছি এবং আর্টিকেলটি সেখানে প্রথমে আপডেট করছি।)
HTML ইমেলকে ডার্ক মোড-ফ্রেন্ডলি बनाने의 পদ্ধতি
আমি ইতিমধ্যে ডেটাটি ব্যবহার করলাম, এবং কয়েকটি Outlook-সম্পর্কিত চ্যালেঞ্জের পর, আমি আমাদের ইমেলগুলোকে ডার্ক মোড-ফ্রেন্ডলি বানালাম। এখানে আপনিও কীভাবে করবেন সেটি দেওয়া হলো:
ডেটা কী বলে:
৫৫% এরও বেশি ইমেল ডার্ক মোড ইনেবলড অবস্থায় খোলা হতে পারে। একবার Gmail ডার্ক সাইডে চলে গেলে, ডার্ক মোডে খোলা যেতে পারে এমন ইমেলগুলো ৮৩%-এ উঠে যাবে!
১) কালার অ্যাডজাস্ট করা
Apple Mail-এ নজর রাখুন, কারণ এটি কালারগুলো ইনভার্ট করে শুধু যদি ব্যাকগ্রাউন্ড কালার ট্রান্সপেরেন্ট বা अनস্পেসিফাইড হয় — সাদা ব্যাকগ্রাউন্ড কাজ করবে না। আপনার ইমেলগুলো কাউকে অন্ধা করবে না তা নিশ্চিত করার সবচেয়ে সহজ পদ্ধতি হলো চেক করা যে ব্যাকগ্রাউন্ড কালার স্পেসিফাইড আছে কিনা। ডিজাইনের ওপর আরও কন্ট্রোলের জন্য, এখানে 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 টেক্সট কালার হিসেবে এড়িয়ে চলুন। আমি খুঁজে পেলাম কনট্রাস্ট রেশিও ১১.৫ প্রায় মেইন টেক্সটের জন্য একটি ভালো কামপ্রোমাইজ যা নাকाफी উজ্জ্বল নয় এবং নাকाफी ম্লানও নয়। কনট্রাস্ট রেশিও এখানে চেক করুন: https://contrast-ratio.com বা Chrome dev tools ব্যবহার করুন।
২) লাইট এবং ডার্ক লোগোর মধ্যে স্যুইচ করা
একটি ডার্ক ব্যাকগ্রাউন্ডের ওপর ডার্ক টেক্সট প্রায় অদৃশ্য, এবং ইমেল ক্লায়েন্টে ডার্ক মোড ইনেবলড থাকলে একটি লোগোর সাথে ঠিক সেটিই ঘটে।
আজকাল, একটি টিপিক্যাল লোগো সাধারণত ট্রান্সপেরেন্ট ব্যাকগ্রাউন্ড, কালারফুল আইকন, এবং ডার্ক কপি ধারণ করে। সমস্যা দেখছেন? ইমেল ক্লায়েন্টরা ইমেজ কালার ইনভার্ট করে না, তাই আপনাকে নিজে হ্যান্ডেল করতে হবে।
এটিকে ট্যাকল করতে, আপনি যেকোনো একটি করতে পারেন:
- লোগোটি সাদা ব্যাকগ্রাউন্ডে সেভ করুন ট্রান্সপেরেন্ট ব্যাকগ্রাউন্ডের বদলে (এটি সমস্যা ফিক্স করার সবচেয়ে সহজ পথ)। কিন্তু আমি এই অ্যাপ্রোচ রিকমেন্ড করব না — ডার্ক মোড ইউজাররা খুশি হবেন না।
- একটি লাইট লোগো ডার্ক ব্যাকগ্রাউন্ডে রাখুন, এবং বাকি ইমেলটি সাদা ব্যাকগ্রাউন্ডে রাখুন (Litmus কীভাবে করে সেটি দেখুন)।
- ডার্ক মোড ইমেলকে আপনার ডিফল্ট বানান। এর জন্য Spotify একটি ভালো ক্যান্ডিডেট যারা শুধু তাদের অ্যাপগুলিতে ডার্ক থিম অফার করে।
prefers-color-schemeমিডিয়া কোয়েরি ব্যবহার করে লাইট এবং ডার্ক দুটোই ভার্সন লোগো ইনক্লুড করুন এবং স্যুইচ করুন
আমার পছন্দ চतुর্থ পদ্ধতি, তাই এখানে কীভাবে করবেন সেটি দেওয়া হলো:
CSS স্টাইলে একটি সিম্পল "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" /> <!-- লাইট লোগোটি Outlook এবং Windows 10 Mail-এ পারফেক্টলি হাইড করতে, আপনাকে লাইট লোগো ইমেজ ট্যাগকে একটি 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।
তাই, ইমেলে লোগোকে ফুলি বুলেটপ্রুফ করার জন্য, আমি উপরের মেথড ১ এবং ৪ কম্বাইন করব। মেথড ১ যেসব ইমেল ক্লায়েন্ট ডার্ক মোড সাপোর্ট করে কিন্তু prefers-color-scheme সাপোর্ট করে না সেগুলো কভার করবে। এবং মেথড ৪ Apple Mail, macOS-এ Outlook, এবং Outlook.com কভার করবে, যারা দুটোই সাপোর্ট করে।
এছাড়া, লোগোকে সাদা ব্যাকগ্রাউন্ডে সেভ করার বদলে, আমি একটি ৩-পিক্সেল চওড়া ব্যাকগ্রাউন্ড-ম্যাচিং বর্ডার যোগ করব এবং সেটি সাধারণত ট্রান্সপেরেন্ট ব্যাকগ্রাউন্ডে সেভ করব।
এটা শুধু একটি লোগোর জন্য যথেষ্ট কমপ্লেক্স দেখা যাচ্ছে (জাস্ট ফর এ লোগো), তাই HTML মার্কআপটি প্রথমে দেখি:
<!-- ডিফল্ট লোগো ৩-পিক্সেল চওড়া ব্যাকগ্রাউন্ড-ম্যাচিং বর্ডার সহ --> <image src="dark-logo-with-background.png" class="darkLogoDefault" /> <!-- লাইট থিম (তাই ডার্ক লোগো): এটি Apple Mail, macOS-এ Outlook, Outlook.com-এর জন্য --> <div class="darkLogoWrapper" style="mso-hide: all; display: none"> <image src="dark-logo.png" class="darkLogo" style="display: none" /> </div> <!-- ডার্ক থিম (তাই লাইট লোগো): এটি Apple Mail, macOS-এ Outlook, 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> Gmail-এ ডার্ক মোড আসছে
নতুন Android 10-এ ডার্ক মোড আসছে, এবং Gmailও সম্পূর্ণ ডার্ক হওয়া উচিত, অবশেষে। আপনার প্রয়োজন Android 10 এবং সর্বনতুন Gmail (কমপক্ষে ভার্সন 2019.09.01.268168002)। তবে, Google নতুন ফিচারগুলো (এই কেসে ডার্ক থিম) ইউজারদের জন্য ধীরে ধীরে সার্ভার-সাইড পুশ দিয়ে ইনেবল করে, এবং আমি এখনো সেটি পাইনি।
আমি কৌতূহলী যে @media prefers-color-scheme সাপোর্ট Gmail-এ আসছে কিনা। আমি যা পড়লাম, সেটি আশাদায়ক না। অনুমান করি আমাদের ওপেক্ষা করতে হবে। আমি আর্টিকেলটি আপডেট করব একবার Gmail-এ ডার্ক থিম ইনেবল হলে।
শেষে
ডার্ক মোড HTML ইমেলে আসছে, এবং আমি এটিকে ভালোবাসি! কিন্তু, এটি আরেকটা চিন্তার বিষয় — HTML টেবিল লেয়াউটের জন্য ব্যবহার করা যথেষ্ট নয় বলে।
ইমেলে ডার্ক মোড সম্পর্কে আপ-টু-ডেট থাকতে আমাদের মেইলিং লিস্টে জয়েন করুন। আমরা সেখানে আমাদের SaaS প্রোডাক্ট — Sidemail — বানানো এবং বড় করার সময় যেসব ইনসাইট এবং চ্যালেঞ্জ ফেস করি সেগুলো শেয়ার করি।
পড়ার জন্য ধন্যবাদ!
