একটা সাধারণ মার্কেটিং ইমেইল যারা খোলেন, তাদের মধ্যে মাত্র ৬.৮১% কোনো লিংকে ক্লিক করেন (MailerLite)। মানে, যে ১০০ জন আগ্রহ নিয়ে ইমেইলটা খুলেছিলেন, তাদের ৯৩ জন একটু স্ক্রল করে, চোখ বুলিয়ে, বন্ধ করে দেন।
এর বড় কারণ — বেশিরভাগ ইমেইল দেখতে একই রকম: একটা স্টক ছবি, মাঝখানে একটা “Shop now” বাটন, আর আগের ক্যাম্পেইন থেকে কপি করা ফুটার। কিছুই ভাঙা নেই, কিন্তু ট্যাপ করার মতো কারণও নেই।
এই গাইডে দেখাব, কিভাবে ইমেইল ডিজাইন বেস্ট প্র্যাক্টিস মেনে আপনার ইমেইলকে সত্যিই আলাদা করে তুলবেন। আমরা ব্লক ধরে ধরে এগোব — হিরো থেকে ফুটার পর্যন্ত। ইমেইল মার্কেটিংয়ে নতুন হলেও চিন্তা নেই: প্রতিটা টার্ম প্রথমবার আসার সময় সহজ ভাষায় বুঝিয়ে দেওয়া হয়েছে।
বেশিরভাগ ইমেইল কেন দেখতে একই রকম
যেকোনো ইমেইল ডিজাইন ইন্সপিরেশন গ্যালারিতে চোখ বোলালে দেখবেন, সেরা উদাহরণগুলোর মধ্যে ১টা মিল আছে: প্রতিটা ব্লক ওই নির্দিষ্ট ইমেইলের জন্যই ডিজাইন করা। কিন্তু ইনবক্সে আসা বেশিরভাগ ইমেইল উল্টো পথে চলে, ৩টি কারণে।
- ইমেইলের HTML বানানো কঠিন। ইমেইল এখনও টেবিল-ভিত্তিক লেআউট আর inline style-এ চলে, আর যে ডিজাইন Gmail-এ ঠিকঠাক দেখায়, সেটা Outlook-এ ভেঙে যেতে পারে। তাই ডিফল্ট টেমপ্লেটের বাইরে কিছু করতে গেলেই একজন ডেভেলপার আর এক রাউন্ড টেস্টিং লাগে। বেশিরভাগ টিম তাই স্টক লেআউট নেয়, লোগো বদলায়, আর পাঠিয়ে দেয়।
- স্টক ভিজ্যুয়াল। হিরো ইমেজ (ইমেইলের একদম ওপরের বড় ছবি) এমনভাবে বাছা হয় যাতে যেকোনো ক্যাম্পেইনে মানায় — ফলে আসলে কোনোটাতেই মানায় না। পাঠক প্রথমেই এটা দেখেন, অথচ অফার নিয়ে এটা কিছুই বলে না।
- কোনো ডিজাইন সিস্টেম নেই। ব্র্যান্ডের রং, ফন্ট আর ফুটার রাখার কোনো একক জায়গা নেই, তাই প্রতিটা ক্যাম্পেইন হাতে হাতে স্টাইল করা হয়। কয়েক মাস পরে দেখা যায়, কোনো ২টা ইমেইল ঠিক একরকম দেখায় না।
এই ভুলগুলোর দাম চোকাতে হয় ইমেইল খোলার পরে। সাবজেক্ট লাইন তার কাজ করেছে, পাঠক ইমেইলটা খুলেছেন। তারপর কোনো ক্লিক ছাড়াই বন্ধ করে দিয়েছেন, কারণ ইমেইলটা ইনবক্সের বাকি সবার মতোই দেখাচ্ছিল, চোখে পড়ার মতো কিছুই ছিল না।
কিভাবে আপনার ইমেইলকে সত্যিই আলাদা করবেন?
ছোট উত্তর: ভালো ডিজাইন। একটু বড় উত্তর: ইমেইলের প্রতিটা ব্লক এমনভাবে সাজান যাতে পাঠকের কাছে সেটা প্রাসঙ্গিক আর ব্যক্তিগত লাগে, আর ক্লিক করার একটা সত্যিকারের কারণ থাকে — সেটা কেনাকাটা হোক, বুকিং হোক, বা অ্যাপে ফিরে আসা।
আর না, এর মানে এই নয় যে প্রতিটা ইমেইলের জন্য কোনো ডেভেলপার বা ডিজাইনারকে নতুন করে HTML লিখতে হবে।
চলুন এবার ব্লক ধরে ধরে দেখি: ইমেইলের প্রতিটা অংশ কিভাবে উন্নত করলে বেশি ক্লিক আসে।
ইমেইল ডিজাইন বেস্ট প্র্যাক্টিস, ব্লক ধরে ধরে
যে ইমেইলটা আমরা খুলে খুলে দেখব: একটা রানিং গিয়ার অ্যাপের সেল ক্যাম্পেইন, ৪৮ ঘণ্টা, ট্রেইল শু-তে ২৫% ছাড়, Pushwoosh-এর ড্র্যাগ-এন্ড-ড্রপ এডিটরে বানানো। একই কাঠামো দুর্গাপূজা, ঈদ বা পহেলা বৈশাখের সেলেও হুবহু কাজে লাগাতে পারবেন।
ইমেইলটা ৫টি ব্লকে ভাগ করা যায়। প্রতিটা ব্লক কিভাবে আলাদা হয়ে ওঠে, আর পাঠকের জন্য তাতে কী বদলায় — নিচের টেবিলে এক নজরে দেখুন।
| ব্লক | কিভাবে আলাদা হবেন | ফলাফল |
|---|---|---|
| হেডার | ১টা ব্র্যান্ড সিস্টেমে বানানো কমপ্যাক্ট হেডার: Brand book আর Derive brand দিয়ে, synced block হিসেবে সেভ করা | সঙ্গে সঙ্গে চেনা যায়, প্রতিটা ইমেইলে একই লুক |
| হিরো | Generate with AI দিয়ে অফারকে ঘিরে বানানো ভিজ্যুয়াল, হেডলাইন লাইভ টেক্সট হিসেবে রাখা | প্রথম দেখাতেই পাঠক অফারটা বুঝে যান |
| কপি ও CTA | merge tag আর Liquid দিয়ে ১ জন পাঠকের জন্য লেখা হেডলাইন, আর ১টা স্টাইল করা লাইভ-টেক্সট বাটন | প্রাসঙ্গিকতা, আর পরের ধাপ ১টাই, স্পষ্ট |
| কন্টেন্ট | লাইভ ক্যাটালগ থেকে প্রোডাক্ট গ্রিড, display condition দিয়ে আলাদা অডিয়েন্সের জন্য আলাদা সেকশন, Timer block দিয়ে কাউন্টডাউন | প্রোডাক্টে বেশি ক্লিক, প্রত্যেক পাঠকের জন্য সঠিক অফার, এখনই কাজ করার তাড়া |
| ফুটার | synced block হিসেবে সেভ করা ১টা ফুটার, Smart check দিয়ে যাচাই করা | প্রতিটা ইমেইলে আইনি তথ্য সঠিক থাকে |
নিচে প্রতিটা ব্লক তার প্র্যাক্টিসগুলো ধরে খুলে দেখব, ইমেইলের ওপর থেকে নিচ পর্যন্ত: প্রতিটা প্র্যাক্টিস কেন কাজ করে, আর Pushwoosh-এ কিভাবে সেটা করবেন।
ইমেইলের ওপরের অংশ: হেডার ও হিরো
#১. আপনার ব্র্যান্ড সিস্টেমে হেডার বানান
কেন কাজ করে: প্রতিটা ইমেইল শুরু হয় হেডার দিয়ে। লোগো, রং আর ফন্ট যখন প্রতিবার একই রকম দেখায়, পাঠক এক নজরেই প্রেরককে চিনে ফেলেন — আর নিচের প্রতিটা ব্লকও সেই একই লুক পায়।
এর বদলে: আগের ইমেইল থেকে কপি করা রং আর প্রতিটা ক্যাম্পেইনে নতুন হেডার লেআউট → ট্রাই করুন: ১টা ব্র্যান্ড সিস্টেম আর একটা কমপ্যাক্ট হেডার (লোগো আর ২–৩টা লিংক), যেটা প্রতিটা ইমেইলে হুবহু এক।
Pushwoosh-এ: Brand book সেট আপ করুন: লোগো, রং, ফন্ট, ব্লকের ডিফল্ট সেটিং আর ব্র্যান্ড ভয়েস। হাতে হাতে পূরণ করার দরকার নেই: Derive brand আপনার ওয়েবসাইট, ব্র্যান্ড-বুক PDF বা লোগো স্ক্যান করে প্যালেট, ফন্ট আর টোন প্রস্তাব করে। Apply brand book styles কন্টেন্টে হাত না দিয়েই যেকোনো টেমপ্লেট নতুন করে রাঙিয়ে দেয়, পুরনো টেমপ্লেটও।
তারপর লোগো আর একটা Menu block দিয়ে হেডার বানান, এবং Keep copies in sync চালু রেখে সেটাকে reusable block হিসেবে সেভ করুন। এতে মেনুতে নতুন একটা লিংক যোগ করলে সেটা একসাথে সব ইমেইলে দেখা যাবে। ফুটারও একইভাবে কাজ করে (দেখুন প্র্যাক্টিস ৮)।
#২. স্টক ফটো নয়, অফারকে ঘিরে হিরো বানান
কেন কাজ করে: স্ক্রল করবেন কি না, সেই সিদ্ধান্ত নেওয়ার আগে পাঠক হিরোটাই দেখেন। হিরো যদি অফারটা দেখায়, ১ নজরেই তিনি মূল কথা বুঝে যান।
এর বদলে: স্টক লাইব্রেরি থেকে নেওয়া হাসিমুখ একজন রানারের ছবি → ট্রাই করুন: সেলে থাকা আসল ট্রেইল শু, আর ওপরে লাইভ টেক্সট হিসেবে “ট্রেইল শু-তে ২৫% ছাড়। মাত্র ৪৮ ঘণ্টা।”
Pushwoosh-এ: Image block-এ Generate with AI একটা প্রম্পট থেকে ভিজ্যুয়াল বানিয়ে দেয় (“ভেজা বনপথে ট্রেইল রানিং শু, উষ্ণ শরতের আলো”), ১৬:৯ ব্যানার রেশিওতে। ছবিটা একটা Card block-এর ব্যাকগ্রাউন্ড হিসেবে বসান, তাহলে হেডলাইন আর বাটন লাইভ টেক্সট হিসেবেই থাকবে: ছবি ব্লক থাকলেও এগুলো দেখা যায়, আর স্ক্রিন রিডারও পড়তে পারে। মোবাইল ডেটায় যারা ইমেইল খোলেন — বাংলাদেশ ও পশ্চিমবঙ্গে যাদের সংখ্যা অনেক — ছবি লোড হতে দেরি হলেও তারা অফারটা আগেই পড়ে ফেলেন।
ইমেইলের মূল অংশ: কপি, CTA ও কন্টেন্ট
#৩. প্রতিটি পাঠকের জন্য পার্সোনালাইজড হেডলাইন লিখুন
কেন কাজ করে: যে হেডলাইনে পাঠকের চেনা কিছু থাকে (তার নাম, তার সাইজ, যে ক্যাটাগরি তিনি দেখেছেন), সেটা সবার জন্য পাঠানো ঘোষণা নয়, তাকে লেখা একটা মেসেজের মতো পড়ে।
এর বদলে: “আমাদের নতুন কালেকশন দেখুন” → ট্রাই করুন: “রিয়া, আপনার সাইজের ট্রেইল শু আবার স্টকে এসেছে।”
Pushwoosh-এ: Heading টুলবার থেকে নামটা merge tag হিসেবে বসান। merge tag হলো একটা প্লেসহোল্ডার, যেটা পাঠানোর সময় প্রত্যেক পাঠকের নিজের তথ্য দিয়ে বদলে যায়। যাদের নাম জানা নেই, তাদের জন্য একটা ডিফল্ট মান দিন, যেমন “রানার”। ভাষা বা দেশ অনুযায়ী আলাদা লাইন দেখাতে চাইলে Liquid টেমপ্লেট ব্যবহার করুন — যেমন বাংলাদেশের পাঠকদের এক লাইন, পশ্চিমবঙ্গের পাঠকদের আরেক লাইন।
#৪. প্রতিটা ইমেইলে ১টাই CTA রাখুন, যেটা স্পষ্টভাবে চোখে পড়ে
কেন কাজ করে: CTA (call to action) হলো সেই বাটন বা লিংক, যেটা পাঠককে পরের কাজটা করতে বলে। প্রতিটা বাড়তি বাটন মনোযোগ ভাগ করে দেয়। কনট্রাস্ট রঙের ১টা প্রধান CTA পাঠককে বলে দেয় এরপর কী করতে হবে। আর ফোনে এর ট্যাপ করার জায়গা অন্তত ৪৪×৪৪ pt হওয়া দরকার — Apple-এর Human Interface Guidelines অনুযায়ী। Android ফোনেও এই মাপ ধরে চললে বুড়ো আঙুল দিয়ে বাটনে সহজে ট্যাপ করা যায়।
এর বদলে: ৩টা সমান বাটন (“Shop now”, “Learn more”, “View all”), বা ছবির ভেতরে বসানো বাটন → ট্রাই করুন: ১টা লাইভ-টেক্সট বাটন, “আমার সাইজ খুঁজুন”, আপনার অ্যাকসেন্ট রঙে।
Pushwoosh-এ: Button block-কে সলিড বা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড, কর্নার রেডিয়াস আর প্যাডিং দিয়ে স্টাইল করুন, আর মোবাইলের জন্য প্যাডিং একটু বেশি রাখুন, যাতে বাটনটা আঙুলের মাপের থাকে।
#৫. লাইভ ডেটা থেকে প্রোডাক্ট গ্রিড ভরুন
কেন কাজ করে: স্টক-আউট হয়ে যাওয়া আইটেম আর পুরনো দাম ক্লিক আর বিশ্বাস দুটোই কমায়।
এর বদলে: সোমবারে টেমপ্লেটে কপি করা ৬ জোড়া জুতো, যার ২টা বৃহস্পতিবারের মধ্যেই স্টক-আউট → ট্রাই করুন: প্রত্যেক পাঠক যা দেখেছেন তার ভিত্তিতে ট্রেইল শু-র একটা গ্রিড, লাইভ ক্যাটালগ থেকে আনা।
Pushwoosh-এ: Products block আইটেমগুলো ভরে দেয় ক্যাটালগ রুল অনুযায়ী, পাঠকের abandoned cart (কার্টে রেখে কেনা হয়নি এমন পণ্য) থেকে, বা কোনো রেকমেন্ডেশন স্ট্র্যাটেজি দিয়ে — যেমন বেস্টসেলার, আবার স্টকে আসা, বা পাঠক যা দেখেছেন তার ভিত্তিতে। আপনার Product catalog ফিড প্রতি ঘণ্টায় সিঙ্ক হয়, তাই কাউকে ইমেইল এডিট না করেই দাম আর স্টক আপডেট থাকে। ই-কমার্স অ্যাপের জন্য এটা সবচেয়ে বড় সময় বাঁচানোর জায়গা।
মিডিয়া, কন্টেন্ট আর EdTech অ্যাপের জন্য, News block একই কাজ করে আপনার ফিডের আর্টিকেল দিয়ে — যেমন নতুন লেসন বা ব্লগ পোস্ট — আর প্রতিটা হেডলাইনের নিচে AI-লিখিত ছোট ভূমিকা জুড়ে দেয়।
#৬. প্রতিটা অডিয়েন্সকে তার নিজের সেকশন দিন
কেন কাজ করে: একজন নিয়মিত মেম্বার আর ৩ মাস ধরে অর্ডার না করা একজন কাস্টমার — দুজনের ক্লিক করার কারণ আলাদা।
এর বদলে: সবার জন্য একই “নতুন কালেকশন” পিচ → ট্রাই করুন: ৩টা ভ্যারিয়েন্টসহ ১টা সেকশন: লয়্যালটি মেম্বারদের জন্য আর্লি অ্যাক্সেস, ৯০+ দিন ধরে নিষ্ক্রিয় সবার জন্য ২৫% ছাড়, আর বাকি সবার জন্য নতুন আসা পণ্য।
Pushwoosh-এ: প্রতিটা ভ্যারিয়েন্টে একটা display condition যোগ করুন — Tags বা একটা Liquid expression-এর ভিত্তিতে — আর IF / ELSE IF / ELSE দিয়ে সেগুলো পরপর সাজান। সহজ কথায়: নিয়ম মিললে ওই সেকশন দেখাবে, না মিললে পরেরটা। বানাতে আর QA করতে হবে ১টা ক্যাম্পেইন, অথচ ইনবক্সে পৌঁছাবে ৩টা আলাদা ইমেইল।
#৭. কাউন্টডাউন দিয়ে তাড়াটা বাস্তব করুন
কেন কাজ করে: “শিগগিরই” কথাটা অস্পষ্ট। চোখের সামনে একটা ডেডলাইন থাকলে “পরে দেখব” বদলে যায় এমন সিদ্ধান্তে, যেটা পাঠককে এখনই নিতে হবে।
এর বদলে: সাবজেক্ট, হেডলাইন আর বাটন — তিন জায়গাতেই “সেল শিগগিরই শেষ!” → ট্রাই করুন: ৪৮ ঘণ্টার সেলের আসল শেষ সময় পর্যন্ত একটা কাউন্টডাউন, CTA-র ঠিক পাশে।
Pushwoosh-এ: Timer block বসান, শেষ তারিখ, সময় আর টাইমজোন সেট করুন (বাংলাদেশ আর পশ্চিমবঙ্গের পাঠকদের জন্য টাইমজোন আলাদা — ৩০ মিনিটের পার্থক্য — তাই ঠিকটা বেছে নিন), আর সংখ্যাগুলো ব্র্যান্ডের রঙে স্টাইল করুন। দুর্গাপূজা বা ঈদের সেল, কিংবা EdTech অ্যাপে কোর্স ভর্তির শেষ দিন — সব ক্ষেত্রেই এটা কাজে লাগে। অফারটা যদি দোকানে গিয়ে রিডিম করার হয়? Barcode block প্রত্যেক পাঠকের জন্য আলাদা স্ক্যান করার মতো কোড তৈরি করে দেয়।
ইমেইলের নিচের অংশ: ফুটার
#৮. ফুটার একবার বানান, আর সব জায়গায় সিঙ্কে রাখুন
কেন কাজ করে: ফুটারে থাকে আনসাবস্ক্রাইব লিংক, পোস্টাল ঠিকানা আর আইনি টেক্সট। প্রতিটা ইমেইলে এটা সঠিক থাকতেই হবে।
এর বদলে: এক ক্যাম্পেইন থেকে আরেক ক্যাম্পেইনে কপি-পেস্ট হতে থাকা ফুটার, যতক্ষণ না আইনি টেক্সটের ২টা আলাদা ভার্সন তৈরি হয় → ট্রাই করুন: ১টা ফুটার, ১ জায়গা থেকে আপডেট করা।
Pushwoosh-এ: ব্র্যান্ড স্টাইলে ১টা ফুটার বানান — আনসাবস্ক্রাইব লিংক, পোস্টাল ঠিকানা আর সোশ্যাল লিংকসহ — আর Keep copies in sync চালু রেখে reusable block হিসেবে সেভ করুন। ঠিকানা একবার এডিট করলেই যে সব ইমেইলে এই ফুটার আছে সেগুলো আপডেট হয়ে যায়, এমনকি যেগুলো আগে থেকে শিডিউল করা আছে সেগুলোও।
টিপ: Smart check জানিয়ে দেয় যদি কোনো মার্কেটিং ইমেইলের ফুটারে পোস্টাল ঠিকানা না থাকে, আর সতর্ক করে যখন ইমেইলটা Gmail-এর ~১০২ KB ক্লিপিং লিমিট পার হয়ে যায়। এই লিমিটের পর Gmail বাকি অংশ কেটে দেয়, আর সবার আগে কাটা পড়ে ফুটার। Android ফোনে অনেক পাঠক Gmail অ্যাপেই ইমেইল পড়েন, তাই এই চেকটা বাদ দেবেন না।
AI টুল দিয়ে ইমেইল ডিজাইন দ্রুত করুন
একটা নজরকাড়া ইমেইল বানাতে এক সপ্তাহ লাগার দরকার নেই। এই AI টুলগুলো (মনে রাখবেন: প্রত্যেক Pushwoosh ইউজারের জন্য পাওয়া যায়) প্রোডাকশনের সময় কমায় আর ডিজাইন উন্নত করতে সাহায্য করে। ছোট টিম, যেখানে আলাদা ডিজাইনার নেই, তাদের জন্য এগুলো বিশেষভাবে কাজের।
AI অ্যাসিস্ট্যান্ট
AI tab-এ ইমেইলটা কেমন হবে লিখে দিন, অ্যাসিস্ট্যান্ট আপনার জন্য পুরো ইমেইল সাজিয়ে দেবে।
AI ছবি ও alt টেক্সট
Generate with AI একটা টেক্সট প্রম্পট থেকে ভিজ্যুয়াল বানায়, সরাসরি Image block-এর ভেতরে। Generate alt with AI ছবি দেখে নিজেই alt টেক্সট (ছবি লোড না হলে বা স্ক্রিন রিডারের জন্য ছবির লিখিত বর্ণনা) লিখে দেয়।
AI সাবজেক্ট লাইন ও প্রিহেডার
কন্টেন্ট তৈরি হয়ে গেলে, ১ ক্লিকেই ইমেইলের আসল কন্টেন্ট থেকে সাবজেক্ট লাইন আর প্রিহেডার (ইনবক্সে সাবজেক্টের পাশে দেখানো ছোট লাইন) তৈরি হয়ে যায়।
অটো-ট্রান্সলেট
যে ভাষার ভার্সন নেই, সেটা AI ভরে দেয় — প্রতিটা ভাষা হাতে টাইপ করতে হয় না। যেমন বাংলা আর ইংরেজি দুই ভার্সনই পাঠাতে চাইলে এটা কাজে লাগে।
Brand book ও synced block
প্র্যাক্টিস ১ আর ৮-এর স্টাইল, হেডার আর ফুটার থাকলে নতুন ক্যাম্পেইনের জন্য কাউকে আর বেসিক জিনিস নতুন করে বানাতে হয় না।
আপনার প্রথম নজরকাড়া ইমেইল বানান
-
টেমপ্লেট বা প্রম্পট দিয়ে শুরু করুন।
ইমেইল টেমপ্লেট লাইব্রেরি থেকে একটা লেআউট, অথবা AI অ্যাসিস্ট্যান্টের বানানো প্রথম ড্রাফট।
-
আপনার Brand book প্রয়োগ করুন।
ব্র্যান্ড স্টাইল আর একটা synced হেডার: প্র্যাক্টিস ১।
-
ইমেইলটা ওপর থেকে নিচ পর্যন্ত দেখে নিন।
হিরো, হেডলাইন, CTA, প্রোডাক্ট, অডিয়েন্স সেকশন, কাউন্টডাউন, ফুটার।
-
মোবাইল ভার্সন ডিজাইন করুন।
ডেস্কটপ লেআউটকে শুধু ছোট হয়ে ফোনে বসতে দেবেন না — মোবাইল-ফার্স্ট বাজারে অনেক পাঠকই ইমেইল খোলেন ফোনে। মোবাইল ভিউতে যান, যেটা আসল ফোনের প্রস্থে পুরোপুরি এডিট করা যায়, আর প্রতিটা Columns সারির জন্য Stack, Keep row বা Reverse বেছে নিন। মোবাইলের জন্য আলাদা ফন্ট সাইজ, প্যাডিং আর ছবির মাপ সেট করুন, আর যেসব ব্লক শুধু ১টা স্ক্রিনেই মানায় সেগুলোর জন্য Hide on mobile বা Hide on desktop ব্যবহার করুন। এভাবেই একটাও media query না লিখে মোবাইল-ফ্রেন্ডলি (responsive) ইমেইল ডিজাইন হয়ে যায়।
-
টেস্ট করুন।
Smart check চালান, তারপর সর্বোচ্চ ৫০টা ঠিকানায় টেস্ট ইমেইল পাঠান।
-
পাঠান, তারপর Click map দেখুন।
Click map ট্যাব ইমেইল প্রিভিউয়ের ওপর একটা হিটম্যাপ এঁকে দেয় — কোন অংশে কত ক্লিক পড়েছে, রঙের ঘনত্ব দিয়ে। এতে বুঝবেন কোন এলিমেন্ট ক্লিক টেনেছে, আর নতুন হিরো তার কাজ করেছে কি না।
FAQ
সম্পর্কিত আর্টিকেল
সব দেখুন
