রেসপন্সিভ HTML ইমেইল টেমপ্লেট তৈরি করুন: ধাপে ধাপে বীজিনিয়ার গাইড

এই বীজিনিয়ার-ফ্রেন্ডলি গাইডে, আপনি শিখবেন কীভাবে একটি রেসপন্সিভ ইমেইল টেমপ্লেট তৈরি করবেন। কোড স্নিপেটসহ ধাপে ধাপে নির্দেশনা অনুসরণ করে একটি ইমেইল টেমপ্লেট ডিজাইন করুন যা যেকোনো ডিভাইসে চমৎকার দেখাবে।

ইমেইল ডিজাইন বেসিকস 습দ করতে চাই এমন নовичোকদের জন্য এই প্রজেক্টটি बिलকুল পারফেক্ট!

ধাপ ১: বেসিক স্ট্রাকচার সেট আপ করুন

একটি ইমেইল টেমপ্লেট তৈরি করতে, আপনি একটি বেসিক HTML স্ট্রাকচার দিয়ে শুরু করতে পারেন। এতে ইমেইলের জন্য একটি DOCTYPE ডিক্লেয়ারেশন, head এবং body সেকশন সংজ্ঞায়িত করা, এবং head সেকশনে মেটা ট্যাগ ব্যবহার করা থাকে যাতে মোবাইল রেন্ডারিং এবং জুমিং সঠিকভাবে কাজ করে।

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Email Template</title> </head> <body> <!-- Email content goes here --> </body> </html> 

ধাপ ২: ইমেইল স্ট্রাকচার তৈরি করুন

বিভিন্ন ইমেইল ক্লায়েন্টের সাথে কম্প্যাটিবিলিটি নিশ্চিত করার জন্য আপনার ইমেইলের বেসিক স্ট্রাকচার তৈরি করতে টেবিল ব্যবহার করুন।

<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" border="0"> <!-- Email content goes here --> </table> </td> </tr> </table> 

ধাপ ৩: কন্টেন্ট এবং ইনলাইন স্টাইল যোগ করুন

ইমেইল ক্লায়েন্টগুলো CSS রেন্ডার করার ক্ষেত্রে ভিন্ন ভিন্নmaßen আচরণ করে, তাই ইনলাইন স্টাইল ব্যবহার করা নিরাপদ। একটি সাধারণ ইমেইল বডির উদাহরণ এখানে:

<body style="font-family: 'Poppins', Arial, sans-serif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="padding: 20px;"> <table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;"> <!-- Header --> <tr> <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;"> Responsive Email Template </td> </tr> <!-- Body --> <tr> <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;"> Hello, All! <br> Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam. <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis. </td> </tr> <!-- Call to action Button --> <tr> <td style="padding: 0px 40px 0px 40px; text-align: center;"> <!-- CTA Button --> <table cellspacing="0" cellpadding="0" style="margin: auto;"> <tr> <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;"> <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a> </td> </tr> </table> </td> </tr> <tr> <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. </td> </tr> <!-- Footer --> <tr> <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;"> Copyright &copy; 2024 | Your brand name </td> </tr> </table> </td> </tr> </table> </body> 

প্রধান এলিমেন্টগুলো এবং তাদের ফাংশনগুলোর একটি ব্রেকডাউন এখানে দেওয়া হল:

বডি ট্যাগ এবং ফন্ট সেটআপ

<body style="font-family: 'Poppins', Arial, sans-serif"> 

এটি ইমেইলের ডিফল্ট ফন্টকে 'Poppins' সেট করে, 'Poppins' উপলব্ধ না থাকলে Arial এবং sans-serif ফলব্যাক হিসেবে থাকে।

টেবিল স্ট্রাকচার

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 

এটি আউটারমোস্ট টেবিল যা ইমেইলের প্রস্থের ১০০% ব্যবহার করে। border, cellspacing, এবং cellpadding ০ সেট করা হয়েছে ডিফল্ট স্টাইলিং এবং স্পেসিং রিমুভ করতে।

এই টেবিলের ভিতরে একটি নেস্টেড <table class="content"> রয়েছে যার ফিক্সড প্রস্থ ৬০০px, এবং প্যারেন্টের td align="center" দ্বারা সেন্টার করা হয়েছে।

এই ইনার টেবিলে একটি বর্ডার এবং নির্দিষ্ট স্টাইলিং রয়েছে, যা এটিকে প্রধান কন্টেন্ট এলাকা হিসেবে সংজ্ঞায়িত করে।

হেডারটি ইনলাইন CSS ব্যবহার করে গাঢ় নীল ব্যাকগ্রাউন্ড (#345C72), সাদা টেক্সট কালার, এবং বড় টেক্সট সাইজ (২৪px) দিয়ে স্টাইল করা হয়েছে। এটি ইমেইলের শুরুতেই মনোযোগ আকর্ষণ করার জন্য ডিজাইন করা।

নোট: আপনি এই সেকশনটি আপনার ব্র্যান্ডের নাম বা লোগো দিয়ে কাস্টমাইজ করতে পারেন।

বডি কন্টেন্ট

বডি সেকশনটি ইমেইলের মূল মেসেজ ধারণ করে, ১৬px ফন্ট সাইজ এবং ১.৬ লাইন হাইট দিয়ে ভালো রিডেবিলিটির জন্য। কন্টेंट বাম পাশে অ্যালাইন করা হয়েছে, এবং <br> ট্যাগ ব্যবহার করে লাইনগুলো স্পেস আউট করা হয়েছে।

কল টু অ্যাকশন (CTA) বাটন

<!-- Call to action Button --> <tr> <td style="padding: 0px 40px 0px 40px; text-align: center;"> <!-- CTA Button --> <table cellspacing="0" cellpadding="0" style="margin: auto;"> <tr> <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;"> <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a> </td> </tr> </table> </td> </tr> <tr> 

এখানে CTA বাটনটি হেডারের সাথে মিলে যাওয়া ব্যাকগ্রাউন্ড কালার, রাউন্ডেড কর্নার (border-radius: 5px), এবং বোল্ড, সাদা টেক্সট দিয়ে দৃশ্যমান করার জন্য ডিজাইন করা হয়েছে।

বাটনের ভিতরে থাকা <a> ট্যাগটি ডিফল্ট আন্ডারলাইন রিমুভ করার জন্য স্টাইল করা হয়েছে (text-decoration: none) এবং একটি ওয়েবপেজের সাথে লিংক করা হয়েছে যেখানে প্রাপকরা "Book a Free Consultation" করতে পারবে।

ফুটারটি হেডারের মতো স্টাইলিং অ্যাপ্রোচ অনুসরণ করে কিন্তু গাঢ় ব্যাকগ্রাউন্ড (#333333) এবং ছোট ফন্ট সাইজ (১৪px) ব্যবহার করে। এতে কপ이라াইট ইনফো এবং লিংক বা অন্যান্য কন্টাক্ট ডিটেইল থাকতে পারে।

ইলাস্ট্রেশন

টেমপ্লেটের বিভিন্ন অংশের ইলাস্ট্রেশন: হেডার, CTA বাটন, এবং ফুটার

ধাপ ৪: রেসপন্সিভ বানান

মোবাইল ডিভাইসে ইমেইলটি ভালো দেখতে নিশ্চিত করতে, আপনি CSS মিডিয়া কোয়ারী ব্যবহার করতে পারেন। যদিও অধিকাংশ স্টাইলিং ইনলাইন, রেসপন্সিভ বিহেভিয়ার জন্য head-এ একটি <style> ব্লক যোগ করতে হবে।

মিডিয়া কোয়ারী ডিভাইসের প্রস্থ অনুযায়ী স্টাইল অ্যাডজাস্ট করে।

<style> @media screen and (max-width: 600px) { .content { width: 100% !important; display: block !important; padding: 10px !important; } .header, .body, .footer { padding: 20px !important; } } </style> 

এই নির্দিষ্ট CSS স্নিপেটের ব্রেকডাউন এখানে:

@media screen and (max-width: 600px) { ... } 

এই মিডিয়া কোয়ারী ৬০০ পিক্সেল সর্বোচ্চ প্রস্থের স্ক্রিনকে টার্গেট করে। এটি নিচের স্টাইলগুলো তभी প্রয়োগ করে যখন ইমেইলটি ৬০০px বা কম প্রস্থের স্ক্রিন वाले ডিভাইসে দেখা হয়, যেটি সাধারণত স্মার্টফোন এবং কিছু ছোট ট্যাবলেট অন্তর্ভুক্ত করে।

মিডিয়া কোয়ারী ক্লাসের মধ্যে স্টাইলগুলো:

.content

• width: 100% !important; : এই স্টাইল .content টেবিলের প্রস্থকে ৬০০px নির্দিষ্ট করা থেকে স্ক্রিনের ফুল প্রস্থ ব্যবহার করার দিকে পরিবর্তন করে। !important নিয়ম অন্যান্যopposed স্টাইল ওভাররাইড করতে ব্যবহৃত হয়।
• display: block !important;: যদিও <table> এলিমেন্টগুলো স্বভাবতঃ ব্লক-লেভেল এলিমেন্ট, display: block এক্সপ্লিসিটলি সেট করা কিছু ইমেইল ক্লায়েন্টে এলিমেন্টটি প্রত্যাশা অনুযავად আচরণ করাতে সাহায্য করতে পারে।
• padding: 10px !important;: .content টেবিলের ভিতরে কন্টেন্টের চারপাশে প্যাডিং যোগ করে, মূল HTML-এ ৪০px থেকে কমিয়ে ছোট ডিভাইসের কম স্ক্রিন স্পেসের জন্য ভালো ব্যবহার নিশ্চিত করে।

.header, .body, .footer

• padding: 20px !important;: এই স্টাইল হেডার, বডি, এবং ফুটার সেকশনগুলির প্যাডিংকে সব দিক থেকে একইভাবে ২০px-এ সেট করে, ছোট স্ক্রিনের জন্য স্পেসিং অপ্টিমাইজ করে। এটি HTML-এ সংজ্ঞায়িত বিভিন্ন প্যাডিং সেটিংস ওভাররাইড করে, যেগুলোর মধ্যে কিছু বড় মান রয়েছে।

ইমেইল ডিজাইনের প্রেক্ষাপটে, !important ব্যবহার করা খুব সাধারণ যাতে স্টাইলগুলো ইচ্ছামতো প্রয়োগ হয়, ডিফল্ট স্টাইল এবং ইমেইল ক্লায়েন্ট নিজে যেopotentially conflicting স্টাইল প্রয়োগ করতে পারে সেগুলো ওভাররাইড করে।

ধাপ ৫: ইমেইল ক্লায়েন্ট জুড়ে টেস্ট করুন

আপনার ইমেইল টেমপ্লেটটি বিভিন্ন ইমেইল ক্লায়েন্টে (যেমন Gmail, Outlook, এবং Apple Mail) এবং ডিভাইসে টেস্ট করা অত্যন্ত গুরুত্বপূর্ণ যাতে কম্প্যাটিবিলিটি এবং রেসপন্সিভনেস নিশ্চিত হয়। Litmus বা Email on Acid-এর মতো টুলগুলো এতে সাহায্য করতে পারে।

ধাপ ৬: গুগল ফন্ট যোগ করা

HTML ইমেইল টেমপ্লেটে গুগল ফন্ট ইনকর্পোরেট করা এর ভিজ্যুয়াল আপিল উল্লেখযোগ্যভাবে উন্নত করতে পারে।

তবে, মনে রাখা গুরুত্বপূর্ণ যে সব ইমেইল ক্লায়েন্ট ওয়েব ফন্ট সাপোর্ট করে না। কিছু, যেমন Apple Mail, গুগল ফন্ট সাপোর্ট করে, কিন্তু অন্যদের মতো Gmail করে না। সব প্রাপকের কাছে আপনার ইমেইল চমৎকার দেখাতে নিশ্চিত করতে, সবসময় একটি ফলব্যাক ফন্ট প্রদান করুন।

এখানে আপনি কীভাবে আপনার ইমেইল টেমপ্লেটে একটি গুগল ফন্ট যোগ করতে পারেন, সাপোর্ট না করার ক্লায়েন্টের জন্য একটি ফলব্যাক অপশনসহ:

আপনার গুগল ফন্ট বেছে নিন

প্রথমে, গুগল ফন্টস ওয়েবসাইটে যান এবং একটি ফন্ট বেছে নিন। এই উদাহরণের জন্য, আমরা "Poppins" ব্যবহার করব।

আপনার ইমেইল হেডে ফন্ট লিংক যোগ করুন

আপনার HTML ডকুমেন্টের <head>-এ গুগল ফন্টের লিংকটি অন্তর্ভুক্ত করুন। যেহেতু এটি সব ইমেইল ক্লায়েন্টে সাপোর্টেড নাও হতে পারে, আপনার স্টাইলে একটি উপযুক্ত ফলব্যাক ফন্ট নিশ্চিত করুন।

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 

আপনার স্টাইলে ফন্ট প্রয়োগ করুন

আপনার HTML এলিমেন্টগুলোর জন্য গুগল ফন্ট প্রয়োগ করতে ইনলাইন CSS ব্যবহার করুন, এবং সবসময় একটি জেনেরিক ফলব্যাক ফন্ট অন্তর্ভুক্ত করুন। ইমেইল টেমপ্লেটে, বিভিন্ন ইমেইল ক্লায়েন্টে <style> ট্যাগের সাপোর্ট পরিবর্তনশীল হওয়ায় ইনলাইন স্টাইল প্রয়োগ করা নিরাপদ।

এখানে আপনার ইমেইলের body-এ ফন্ট প্রয়োগ করার পদ্ধতি এবং একটি ফলব্যাক অন্তর্ভুক্ত করা:

<body style="font-family: 'Poppins', Arial, sans-serif;"> <table width="100%" cellspacing="0" cellpadding="0"> <!-- Email content --> </table> </body> 

আমরা কী তৈরি করেছি

নিচে আমাদের ডিজাইন করা ইমেইল টেমপ্লেটের একটি স্ক্রিনশট দেওয়া হল। এতে একটি প্রফেশনাল লেআউট রয়েছে যার হেডারে লোগো প্লেসহোল্ডার, আপনার মেসেজের জন্য একটি মূল বডি সেকশন, এবং কন্টাক্ট এবং সাবস্ক্রিপশন ম্যানেজমেন্ট লিংক সহ একটি গাঢ় ফুটার রয়েছে।

ইমেইল টেমপ্লেটের স্ক্রিনশট

অতিরিক্ত টিপস:

• যতটুকু সম্ভব আপনার CSS ইনলাইন রাখুন, কারণ অনেক ইমেইল ক্লায়েন্ট <style> ট্যাগ সাপোর্ট করে না।
• ওয়েব-সেফ ফন্ট ব্যবহার করুন যাতে আপনার টেক্সট সব ইমেইল ক্লায়েন্টে সঠিকভাবে দেখায়।
• সambique ক্লায়েন্টের জন্য যারা HTML সাপোর্ট করে না, বা HTML ডিজেবল করা থাকে, তাদের জন্য আপনার ইমেইলের একটি প্লেইন টেক্সট ভার্সন সবসময় প্রদান করুন।

আশা করি এই গাইডটি আপনাকে একটি রেসপন্সিভ ইমেইল টেমপ্লেট তৈরির জন্য একটি বেসিক ফ্রেমওয়ার্ক দিয়েছে। আপনি ইমেইল ডিজাইনগুলোর সাথে বেশি কমফরটেবল হলে, আরও জটিল লেআউট এবং স্টাইল এক্সপেরিমেন্ট করতে পারেন।

শুভ কোডিং!

নি:শুল্কে কোডিং শিখুন। freeCodeCamp-এর ওপেন সোর্স ক্যারিকুলাম ৪০,০০০-এর অধিক লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন।