একটি প্রতিক্রিয়াশীল HTML ইমেল টেমপ্লেট তৈরি করুন:একটি ধাপে ধাপে প্রাথমিক নির্দেশিকা

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

ইমেল ডিজাইনের মৌলিক বিষয়গুলি আয়ত্ত করতে আগ্রহী নতুনদের জন্য এই প্রকল্পটি উপযুক্ত!

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

একটি ইমেল টেমপ্লেট তৈরি করতে, আপনি একটি মৌলিক 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>

ধাপ 2:ইমেল কাঠামো তৈরি করুন

আপনার ইমেলের মৌলিক কাঠামো তৈরি করতে টেবিল ব্যবহার করুন। এটি বিভিন্ন ইমেল ক্লায়েন্ট জুড়ে সামঞ্জস্যতা নিশ্চিত করবে৷

<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>

ধাপ 3:বিষয়বস্তু এবং ইনলাইন শৈলী যোগ করুন

ইমেল ক্লায়েন্টরা কিভাবে CSS রেন্ডার করে তার মধ্যে ভিন্নতা রয়েছে, তাই ইনলাইন শৈলী ব্যবহার করা নিরাপদ। এখানে একটি সাধারণ ইমেল বডির উদাহরণ:

<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">

এটি ইমেলের জন্য ডিফল্ট ফন্টকে 'পপিনস'-এ সেট করে, যদি 'পপিনস' উপলভ্য না থাকে তবে এরিয়াল এবং সান-সেরিফের ফলব্যাক সহ।

টেবিল গঠন

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

এটি হল সবচেয়ে বাইরের টেবিল যা ইমেলের প্রস্থের 100% নেয়৷ border , cellspacing , এবং cellpadding ডিফল্ট স্টাইলিং এবং ব্যবধান সরাতে 0 এ সেট করা হয়েছে৷

এই টেবিলের ভিতরে আরেকটি <table class="content"> নেস্ট করা আছে 600px এর একটি নির্দিষ্ট প্রস্থের সাথে, td align="center" এর সাথে এর অভিভাবক দ্বারা কেন্দ্রীভূত .

এই অভ্যন্তরীণ সারণীতে একটি সীমানা এবং নির্দিষ্ট স্টাইলিং রয়েছে, এটিকে প্রধান বিষয়বস্তু এলাকা হিসাবে সংজ্ঞায়িত করে৷

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

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

শারীরিক বিষয়বস্তু

বডি সেকশনে ইমেলের প্রধান বার্তা রয়েছে, ভালো পঠনযোগ্যতার জন্য 16px এর ফন্ট সাইজ এবং 1.6 লাইনের উচ্চতায় সেট করা হয়েছে। বিষয়বস্তু বাম দিকে সারিবদ্ধ, এবং <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) সরানোর জন্য বোতামের মধ্যে ট্যাগ স্টাইল করা হয়েছে ) এবং একটি ওয়েবপৃষ্ঠার সাথে লিঙ্ক করা হয়েছে যেখানে প্রাপকরা "একটি বিনামূল্যে পরামর্শ বুক করতে পারেন।"

পাদচরণ শিরোনামের স্টাইলিং পদ্ধতির পুনরাবৃত্তি করে কিন্তু একটি গাঢ় পটভূমি (#333333) এবং ছোট ফন্টের আকার (14px) ব্যবহার করে। এতে কপিরাইট তথ্য এবং লিঙ্ক বা অন্যান্য যোগাযোগের বিবরণ থাকতে পারে।

চিত্রণ

একটি প্রতিক্রিয়াশীল HTML ইমেল টেমপ্লেট তৈরি করুন:একটি ধাপে ধাপে প্রাথমিক নির্দেশিকা টেমপ্লেটের বিভিন্ন অংশের চিত্র:হেডার, CTA বোতাম এবং ফুটার

পদক্ষেপ 4:এটিকে প্রতিক্রিয়াশীল করুন

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

মিডিয়া প্রশ্নগুলি ডিভাইসের প্রস্থের উপর ভিত্তি করে শৈলী সামঞ্জস্য করে।

<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) { ... }

এই মিডিয়া ক্যোয়ারীটি সর্বোচ্চ 600 পিক্সেল প্রস্থের স্ক্রীনকে লক্ষ্য করে। এটি নিম্নলিখিত শৈলীগুলি প্রয়োগ করে যখন ইমেলটি 600px বা তার কম স্ক্রিনের প্রস্থের ডিভাইসগুলিতে দেখা হয়, যার মধ্যে সাধারণত স্মার্টফোন এবং কিছু ছোট ট্যাবলেট অন্তর্ভুক্ত থাকে৷

মিডিয়া ক্যোয়ারী ক্লাসের মধ্যে শৈলী:

.সামগ্রী

width_: 100% !important;_ :এই স্টাইলটি .content এর প্রস্থ পরিবর্তন করে HTML-এ উল্লেখিত 600px-এর পরিবর্তে পর্দার সম্পূর্ণ প্রস্থ ব্যবহার করার জন্য টেবিল। !important নিয়ম অন্য কোনো বিরোধপূর্ণ শৈলী ওভাররাইড করতে ব্যবহৃত হয়।
display: block !important; :যদিও <table> উপাদানগুলি স্বাভাবিকভাবেই ব্লক-স্তরের উপাদান, display: block সেটিং কিছু ইমেল ক্লায়েন্টকে স্পষ্টভাবে সাহায্য করতে পারে যাতে উপাদানটি প্রত্যাশা অনুযায়ী আচরণ করে।
padding: 10px !important; :.content এর মধ্যে সামগ্রীর চারপাশে প্যাডিং যোগ করে টেবিল, ছোট ডিভাইসে কমে যাওয়া স্ক্রীন স্পেসকে আরও ভালোভাবে ব্যবহার করার জন্য HTML-এর আসল 40px থেকে কমিয়ে আনা।

.হেডার, .বডি, .ফুটার

৷

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

ইমেল ডিজাইনের প্রসঙ্গে, !important এর ব্যবহার ইমেল ক্লায়েন্ট দ্বারা প্রয়োগ করা হতে পারে যে ডিফল্ট শৈলী এবং অন্যান্য সম্ভাব্য বিরোধপূর্ণ শৈলী উভয়ই অগ্রাহ্য করে শৈলীগুলিকে উদ্দেশ্য হিসাবে প্রয়োগ করা হয়েছে তা নিশ্চিত করা মোটামুটি সাধারণ।

ধাপ 5:ইমেল ক্লায়েন্ট জুড়ে পরীক্ষা করুন

সামঞ্জস্য এবং প্রতিক্রিয়া নিশ্চিত করতে বিভিন্ন ইমেল ক্লায়েন্ট (যেমন Gmail, আউটলুক, এবং অ্যাপল মেল) এবং ডিভাইসগুলিতে আপনার ইমেল টেমপ্লেট পরীক্ষা করা অত্যন্ত গুরুত্বপূর্ণ। লিটমাস বা ইমেল অন অ্যাসিডের মতো সরঞ্জামগুলি এতে সহায়তা করতে পারে।

ধাপ 6:Google ফন্ট যোগ করা

একটি এইচটিএমএল ইমেল টেমপ্লেটের মধ্যে Google ফন্টগুলি অন্তর্ভুক্ত করা এর দৃশ্যমান আবেদনকে উল্লেখযোগ্যভাবে উন্নত করতে পারে।

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

৷

এটি সমর্থন করে না এমন ক্লায়েন্টদের জন্য একটি ফলব্যাক বিকল্পের সাথে আপনি কীভাবে আপনার ইমেল টেমপ্লেটে একটি Google ফন্ট যুক্ত করতে পারেন তা এখানে রয়েছে:

আপনার Google ফন্ট চয়ন করুন

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

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

<head>-এ Google ফন্টের লিঙ্কটি অন্তর্ভুক্ত করুন আপনার HTML নথির। যেহেতু এটি সমস্ত ইমেল ক্লায়েন্টে সমর্থিত নাও হতে পারে, তাই নিশ্চিত করুন যে আপনার শৈলীতে একটি উপযুক্ত ফলব্যাক ফন্ট আছে৷

<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 উপাদানগুলিতে Google ফন্ট প্রয়োগ করতে ইনলাইন CSS ব্যবহার করুন এবং সর্বদা একটি জেনেরিক ফলব্যাক ফন্ট অন্তর্ভুক্ত করুন। ইমেল টেমপ্লেটগুলিতে, <style>-এর জন্য বিভিন্ন সমর্থনের কারণে স্টাইলগুলি ইনলাইনে প্রয়োগ করা নিরাপদ ইমেল ক্লায়েন্ট জুড়ে ট্যাগ।

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

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

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

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

একটি প্রতিক্রিয়াশীল HTML ইমেল টেমপ্লেট তৈরি করুন:একটি ধাপে ধাপে প্রাথমিক নির্দেশিকা ইমেল টেমপ্লেটের স্ক্রিনশট

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

যতটা সম্ভব আপনার CSS ইনলাইনে রাখুন, কারণ অনেক ইমেল ক্লায়েন্ট <style> সমর্থন করে না ট্যাগ।
আপনার পাঠ্য সমস্ত ইমেল ক্লায়েন্টে সঠিকভাবে প্রদর্শিত হচ্ছে তা নিশ্চিত করতে ওয়েব-নিরাপদ ফন্ট ব্যবহার করুন৷
যেসব ক্লায়েন্ট HTML সমর্থন করে না বা HTML নিষ্ক্রিয় আছে তাদের জন্য সর্বদা আপনার ইমেলের একটি সাধারণ পাঠ্য সংস্করণ সরবরাহ করুন৷

আমি আশা করি এই নির্দেশিকা আপনাকে একটি প্রতিক্রিয়াশীল ইমেল টেমপ্লেট তৈরি করার জন্য একটি মৌলিক কাঠামো প্রদান করবে। আপনি ইমেল ডিজাইনের সাথে আরও আরামদায়ক হয়ে উঠলে, আপনি আরও জটিল লেআউট এবং শৈলী নিয়ে পরীক্ষা করতে পারেন।

শুভ কোডিং!৷

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন