16 মোবাইল ফ্রেন্ডলি HTML ইমেল সর্বোত্তম অভ্যাস যা ইনবক্স প্লেসমেন্ট এবং ব্যস্ততাকে সর্বাধিক করে তোলে
2023 সালে, ইমেল খোলার প্রাথমিক ডিভাইস হিসাবে মোবাইল ডেস্কটপকে ছাড়িয়ে যাওয়ার সম্ভাবনা রয়েছে। আসলে, হাবস্পট এটি খুঁজে পেয়েছে 46 শতাংশ সব ইমেইল এখন মোবাইলে খোলে। আপনি যদি মোবাইলের জন্য ইমেল ডিজাইন না করেন, তাহলে আপনি টেবিলে অনেক ব্যস্ততা এবং অর্থ রেখে যাচ্ছেন।
- ই - মেইল যাচাইকরণ: আপনার নিশ্চিত করা ইমেল প্রমাণীকৃত হয় পাঠানোর ডোমেনে এবং IP ঠিকানাটি ইনবক্সে যাওয়ার জন্য গুরুত্বপূর্ণ এবং কোনো জাঙ্ক বা স্প্যাম ফোল্ডারে পাঠানো হয় না। এটিও অপরিহার্য, অবশ্যই, আপনি একটি প্ল্যাটফর্ম ব্যবহার করে ইমেল থেকে অপ্ট আউট করার একটি উপায় প্রদান করেন যা একটি আনসাবস্ক্রাইব লিঙ্ক অন্তর্ভুক্ত করে।
- প্রতিক্রিয়াশীল ডিজাইন: সার্জারির এইচটিএমএল ইমেইল হতে হবে প্রতিক্রিয়াশীল হতে পরিকল্পিত, যার মানে এটি যে ডিভাইসে এটি দেখা হচ্ছে তার স্ক্রিনের আকারের সাথে সামঞ্জস্য করতে পারে৷ এটি নিশ্চিত করে যে ইমেলটি ডেস্কটপ এবং মোবাইল উভয় ডিভাইসেই ভাল দেখায়।
- পরিষ্কার এবং সংক্ষিপ্ত বিষয় লাইন: একটি পরিষ্কার এবং সংক্ষিপ্ত বিষয় লাইন মোবাইল ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ কারণ তারা তাদের ইমেল পূর্বরূপ ফলকে শুধুমাত্র বিষয় লাইনের প্রথম কয়েকটি শব্দ দেখতে পারে। এটি সংক্ষিপ্ত হওয়া উচিত এবং সঠিকভাবে ইমেলের বিষয়বস্তু প্রতিফলিত করা উচিত। একটি ইমেল বিষয় লাইনের সর্বোত্তম অক্ষর দৈর্ঘ্য বিভিন্ন কারণের উপর নির্ভর করে পরিবর্তিত হতে পারে, যেমন ইমেল বিষয়বস্তু, দর্শক এবং ইমেল ক্লায়েন্ট ব্যবহার করা হচ্ছে। যাইহোক, বেশিরভাগ বিশেষজ্ঞ ইমেলের বিষয় লাইনগুলিকে ছোট এবং বিন্দু পর্যন্ত রাখার পরামর্শ দেন, সাধারণত 41-50 অক্ষর বা 6-8 শব্দের মধ্যে৷ মোবাইল ডিভাইসে, 50টি অক্ষরের বেশি সাবজেক্ট লাইন কেটে ফেলা হতে পারে এবং কিছু ক্ষেত্রে, শুধুমাত্র সাবজেক্ট লাইনের প্রথম কয়েকটি শব্দ প্রদর্শন করতে পারে। এটি প্রাপকের পক্ষে ইমেলের মূল বার্তাটি বোঝা কঠিন করে তুলতে পারে এবং ইমেল খোলার সম্ভাবনা হ্রাস করতে পারে।
- প্রিহেডার: একটি ইমেল প্রিহেডার হল একটি ইমেলের বিষয়বস্তুর একটি সংক্ষিপ্ত সারাংশ যা একটি ইমেল ক্লায়েন্টের ইনবক্সে বিষয় লাইনের পাশে বা নীচে প্রদর্শিত হয়। এটি একটি গুরুত্বপূর্ণ উপাদান যা অপ্টিমাইজ করা হলে আপনার ইমেলের খোলা হারকে প্রভাবিত করতে পারে। বেশিরভাগ ক্লায়েন্ট প্রিহেডার টেক্সট সঠিকভাবে সেট আপ করা হয়েছে তা নিশ্চিত করতে HTML এবং CSS অন্তর্ভুক্ত করে।
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- একক-কলাম বিন্যাস: একক-কলাম লেআউট দিয়ে ডিজাইন করা ইমেলগুলি মোবাইল ডিভাইসে পড়া সহজ। বিষয়বস্তু একটি যৌক্তিক ক্রমানুসারে সংগঠিত হওয়া উচিত এবং একটি সহজ, সহজে পড়া যায় এমন বিন্যাসে উপস্থাপন করা উচিত। আপনার একাধিক কলাম থাকলে, CSS ব্যবহার করে একক-কলাম বিন্যাসে কলামগুলিকে সুন্দরভাবে সংগঠিত করতে পারে।
এখানে একটি HTML ইমেইল লেআউট এটি ডেস্কটপে 2টি কলাম এবং মোবাইল স্ক্রিনে একটি একক কলামে ভেঙে যায়:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
এখানে একটি HTML ইমেইল লেআউট এটি ডেস্কটপে 3টি কলাম এবং মোবাইল স্ক্রিনে একটি একক কলামে ভেঙে যায়:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- হালকা এবং অন্ধকার মোড: সবচেয়ে ইমেল ক্লায়েন্ট হালকা এবং অন্ধকার মোড সমর্থন করে সিএসএস
prefers-color-scheme
ব্যবহারকারীর পছন্দ মিটমাট করা। আপনার যেখানে স্বচ্ছ ব্যাকগ্রাউন্ড আছে সেখানে ইমেজ প্রকার ব্যবহার করতে ভুলবেন না। এখানে একটি কোড উদাহরণ.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- বড়, সুস্পষ্ট ফন্ট: হরফের আকার এবং শৈলী নির্বাচন করা উচিত যাতে পাঠ্যটি একটি ছোট পর্দায় সহজে পড়া যায়। কমপক্ষে একটি 14pt ফন্ট সাইজ ব্যবহার করুন এবং ছোট স্ক্রিনে পড়তে অসুবিধা হয় এমন ফন্ট ব্যবহার করা এড়িয়ে চলুন। সাধারণভাবে ব্যবহৃত ফন্টগুলির বিভিন্ন ইমেল ক্লায়েন্ট জুড়ে ধারাবাহিকভাবে রেন্ডার করার উচ্চ সম্ভাবনা রয়েছে, তাই Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, এবং Trebuchet MS ব্যবহার করা সাধারণত নিরাপদ ফন্ট। আপনি যদি একটি কাস্টম ফন্ট ব্যবহার করেন, আপনার CSS-এ একটি ফলব্যাক ফন্ট চিহ্নিত করা নিশ্চিত করুন:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- ছবির সর্বোত্তম ব্যবহার: ছবিগুলি লোডের সময় কমিয়ে দিতে পারে এবং সমস্ত মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত নাও হতে পারে৷ অল্প পরিমাণে ছবি ব্যবহার করুন, এবং নিশ্চিত করুন যে সেগুলি আকারের এবং সঙ্কুচিত মোবাইল দেখার জন্য। ইমেল ক্লায়েন্ট সেগুলিকে ব্লক করলে ইভেন্টে আপনার চিত্রগুলির জন্য Alt পাঠ্যটি পূরণ করতে ভুলবেন না। সমস্ত ছবি সংরক্ষণ করা উচিত এবং একটি নিরাপদ ওয়েবসাইট থেকে উল্লেখ করা উচিত (SSL এর) এখানে একটি HTML ইমেলে প্রতিক্রিয়াশীল ছবির উদাহরণ কোড।
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- কল-টু-অ্যাকশন পরিষ্কার করুন (সিটিএ): যেকোন ইমেইলে একটি পরিষ্কার এবং বিশিষ্ট CTA গুরুত্বপূর্ণ, তবে এটি মোবাইল-ফ্রেন্ডলি ইমেলে বিশেষভাবে গুরুত্বপূর্ণ। নিশ্চিত করুন যে CTA খুঁজে পাওয়া সহজ এবং এটি একটি মোবাইল ডিভাইসে ক্লিক করার জন্য যথেষ্ট বড়। আপনি যদি বোতামগুলি অন্তর্ভুক্ত করেন তবে আপনি নিশ্চিত করতে পারেন যে আপনি সেগুলি ইনলাইন স্টাইল ট্যাগের সাথে সিএসএস-এ লেখা আছে:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>
- সংক্ষিপ্ত এবং সংক্ষিপ্ত বিষয়বস্তু: ইমেলের বিষয়বস্তু সংক্ষিপ্ত এবং বিন্দুতে রাখুন। একটি HTML ইমেলের জন্য অক্ষর সীমা ব্যবহৃত ইমেল ক্লায়েন্টের উপর নির্ভর করে পরিবর্তিত হতে পারে। যাইহোক, বেশিরভাগ ইমেল ক্লায়েন্ট ইমেলের জন্য সর্বাধিক আকারের সীমা আরোপ করে, সাধারণত 1024-2048 কিলোবাইটের মধ্যে (KB, যা HTML কোড এবং যেকোনো ছবি বা সংযুক্তি উভয়ই অন্তর্ভুক্ত করে। একটি ছোট স্ক্রিনে স্ক্রোল করার সময় এবং পড়ার সময় বিষয়বস্তু সহজে স্ক্যানযোগ্য করতে সাব-শিরোনাম, বুলেট পয়েন্ট এবং অন্যান্য বিন্যাস কৌশল ব্যবহার করুন।
- ইন্টারেক্টিভ উপাদান: একত্রিত ইন্টারেক্টিভ উপাদান যা আপনার গ্রাহকের মনোযোগ আকর্ষণ করবে আপনার ইমেল থেকে ব্যস্ততা, বোঝাপড়া এবং রূপান্তর হার বাড়িয়ে দেবে। অ্যানিমেটেড GIFs, কাউন্টডাউন টাইমার, ভিডিও এবং অন্যান্য উপাদানগুলি বেশিরভাগ স্মার্টফোন ইমেল ক্লায়েন্ট দ্বারা সমর্থিত।
- ব্যক্তিগতকরণ: একটি নির্দিষ্ট গ্রাহকের জন্য অভিবাদন এবং বিষয়বস্তু ব্যক্তিগতকরণ উল্লেখযোগ্যভাবে ব্যস্ততা বাড়াতে পারে, শুধু নিশ্চিত হন যে আপনি এটি ঠিক করেছেন! যেমন প্রথম নামের ক্ষেত্রে কোনো ডেটা না থাকলে ফলব্যাক থাকা গুরুত্বপূর্ণ।
- গতিশীল বিষয়বস্তু: বিষয়বস্তুর বিভাজন এবং কাস্টমাইজেশন আপনার সদস্যতা ত্যাগের হার কমাতে পারে এবং আপনার গ্রাহকদের নিযুক্ত রাখতে পারে।
- ক্যাম্পেইন ইন্টিগ্রেশন: বেশিরভাগ আধুনিক ইমেল পরিষেবা প্রদানকারীদের স্বয়ংক্রিয়ভাবে যুক্ত করার ক্ষমতা রয়েছে UTM প্রচারাভিযানের ক্যোয়ারীস্ট্রিং প্রতিটি লিঙ্কের জন্য যাতে আপনি বিশ্লেষণে একটি চ্যানেল হিসাবে ইমেল দেখতে পারেন।
- পছন্দ কেন্দ্র: ইমেল বিপণন শুধুমাত্র একটি অপ্ট-ইন বা ইমেল থেকে অপ্ট-আউট পদ্ধতির জন্য খুবই গুরুত্বপূর্ণ। একটি অগ্রাধিকার কেন্দ্র অন্তর্ভুক্ত করা যেখানে আপনার গ্রাহকরা কত ঘন ঘন ইমেল পান এবং কোন বিষয়বস্তু তাদের জন্য গুরুত্বপূর্ণ তা পরিবর্তন করতে পারে নিযুক্ত গ্রাহকদের সাথে একটি শক্তিশালী ইমেল প্রোগ্রাম রাখার একটি দুর্দান্ত উপায়!
- পরীক্ষা, পরীক্ষা, পরীক্ষা: একাধিক ডিভাইসে আপনার ইমেল পরীক্ষা করা নিশ্চিত করুন বা একটি অ্যাপ্লিকেশন ব্যবহার করুন ইমেল ক্লায়েন্ট জুড়ে আপনার ইমেল পূর্বরূপ আপনার পাঠানোর আগে এটি ভাল দেখাচ্ছে এবং বিভিন্ন স্ক্রীন মাপ এবং অপারেটিং সিস্টেমে সঠিকভাবে কাজ করছে তা নিশ্চিত করতে। litmus রিপোর্ট করে যে শীর্ষ 3টি জনপ্রিয় মোবাইল উন্মুক্ত পরিবেশগুলি একইভাবে চলতে থাকে: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail)৷ এছাড়াও, আপনার খোলা এবং ক্লিক-থ্রু রেট উন্নত করতে আপনার বিষয় লাইন এবং বিষয়বস্তুর পরীক্ষার বৈচিত্রগুলি অন্তর্ভুক্ত করুন। অনেক ইমেল প্ল্যাটফর্ম এখন স্বয়ংক্রিয় পরীক্ষার অন্তর্ভুক্ত করে যা তালিকার নমুনা দেবে, একটি বিজয়ী বৈচিত্র সনাক্ত করবে এবং অবশিষ্ট গ্রাহকদের সেরা ইমেল পাঠাবে।
যদি আপনার কোম্পানী মোবাইল প্রতিক্রিয়াশীল ইমেলগুলি ডিজাইন, পরীক্ষা এবং বাস্তবায়নের সাথে লড়াই করে যা ব্যস্ততাকে চালিত করে, আমার ফার্মের সাথে যোগাযোগ করতে দ্বিধা করবেন না। DK New Media কার্যত প্রতিটি ইমেল পরিষেবা প্রদানকারীর বাস্তবায়নের অভিজ্ঞতা রয়েছে (ESP).