() translation by (you can also view the original English article)
কোনো প্রক্রিয়া বুঝার সহজ উপায় হলো একেবারে গোঁড়া থেকে নিজে নিজে করা। আমরা আজকে শুরু থেকে একটি HTML ইমেইল টেম্পলেট তৈরি করার মাধ্যমে ইমেইল ডিজাইনের ক্ষেত্রে এটা করতে যাচ্ছি।
তাহলে শুরু করি
শুরুতেই, আমি বলতে চাই কোথা থেকে আমি এইসব রিসোর্স ধার নিয়েছি।
- ড্রিবল থেকে পিয়েরে বড়দিনের সুন্দর দ্বিমাত্রিক আইকনটি।
- যেসব টাইপফেস ব্যবহার করা হয়েছে তা হচ্ছে Oil Can, Source Sans Pro এবং Mission Script।
- সোশ্যাল মিডিয়া আইকনগুলো Metrize Icons থেকে নেয়া।
এখন, পূর্বের টিউটোরিয়ালে আমরা যেমন আলোচনা করেছি, সেইমতে আপনার HTML ডকুমেন্টটি আপনাকে একটি XHTML doctype দিয়ে শুরু করতে হবে:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
<title>Demystifying Email Design</title> |
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
7 |
</head>
|
8 |
</html>
|
সাজানোর সাথে সাথে, আমরা স্ট্রাকচারটির বাকি কাজ নির্মাণ শুরু করতে পারি।
বডি এবং মেইন টেবিল তৈরি করা
প্রথমে, আমরা আমাদের ইমেইলের জন্য একটি পূর্ণ কাঠামো যোগ করবো, যেটা একটি <body> ট্যাগ দিয়ে শুরু হবে। যেকোনও অনাকাঙ্ক্ষিত খালি জায়গা এড়ানোর জন্য, আমরা আমাদের বডি ট্যাগে মার্জিন এবং প্যাডিং এর মান শূন্য বসাবো।
আমরা একইসাথে একটি টেবিল যোগ করবো যা ১০০% প্রশস্ত হবে। এটা আমদের ইমেইলের জন্য সত্যিকারের বডি ট্যাগ হিসেবে কাজ করবে, কারণ বডি ট্যাগে কোনও স্টাইল যোগ করা সব ব্রাউজারের জন্য সমর্থিত নয়। আপনি যদি আপনার ইমেইলের 'বডি' তে কোনও ব্যাকগ্রাউণ্ড কালার যোগ করতে চান, তাহলে আপনাকে এই বড় সারণীতে এটি প্রয়োগ করতে হবে।
টেবিলের কোনও অপ্রত্যাশিত স্থান এড়াতে আপনার সেলপ্যাডিং এবং সেলস্পেসিংয়ের মান শূন্য বসান।
দ্রষ্টব্যঃ আমরা আমাদের টেবিলের border="1" বাদ দিতে যাচ্ছি, যাতে আমরা অগ্রসর হতে হতে আমাদের লেআউটের মূল কাঠামোটি দেখতে পারি। আমরা কাজশেষে এগুলো Find & Replace এর মাধ্যমে খুঁজে বের করে মুছে দিতে পারি।
1 |
<body style="margin: 0; padding: 0;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Hello! |
6 |
</td>
|
7 |
</tr>
|
8 |
</table>
|
9 |
</body>
|
যদি একটি এট্রিবিউট HTML এ থাকে, তাহলে এটা CSS এর পরিবর্তে ব্যবহার করুন।
এবার কণ্টেইনার টেবিলের ভিতর ঠিক মাঝ বরাবর ৬০০ পিক্সেল প্রশস্ত একটি টেবিল স্থাপন করুন। 600 পিক্সেল আপনার ইমেইলের জন্য সবচেয়ে নিরাপদ ও সর্বাধিক প্রশস্থ, যা বেশিরভাগ স্ক্রিন রেজুলেশনগুলিতে এবং ডেস্কটপ ও ওয়েবমেইল ক্লায়েন্টে সহজভাবে প্রদর্শিত হবে।
CSS এর পরিবর্তে HTML ব্যবহার করে এই প্রস্থটি সেট করুন। এজন্য width attribute ব্যবহার করতে পারেন। HTML ইমেইল ডেভেলপমেণ্টের ক্ষেত্রে গোল্ডেন রুলস হচ্ছে: যদি একটি এট্রিবিউট HTML এ থাকে, তবে তা CSS এর পরিবর্তে ব্যবহার করুন।
আমরা আমাদের ছোট্ট ‘Hello!’ অভিবাদনটি এই সারণীর জন্য পরিবর্তন করে দিবো:
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Hello! |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
আমরা একইসাথে একটি ইনলাইন স্টাইল প্রোপার্টি যোগ করেছি, যেটা border-collapse প্রোপার্টিকে collapse করার জন্য বসবে। আমরা যদি এটা না করি, তাহলে নতুন ভার্শনের আউটলুক আমাদের টেবিল এবং বর্ডারের মাঝখানে ছোট্ট একটা জায়গা খালি জায়গা রাখবে।
স্ট্রাকচার এবং হেডার তৈরি করা
আমাদের ডিজাইনে আমরা দেখতে পাচ্ছি যে, ইমেইলটি তিনটি সমান ভাগে বিভক্ত, তাই আমরা প্রত্যেকটির জন্য আলাদা করে একটি সারি তৈরি করতে পারি।
চলুন, আমরা ইতিমধ্যেই যেই একক সারিটি তৈরি করেছি তা দুইবার পুনরাবৃত্তি করি, তাহলে আমরা মোট তিনটি সারি পাবো। আমি ভেতরের লেখাগুলো পরিবর্তন করেছি তাই আমরা এখন সহজেই প্রতিটি সারি চিহ্নিত করতে পারবো।
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td>
|
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
এখন আমরা ডিজাইন অনুসারে এগুলোকে রঙ করবো। যেহেতু bgcolor হচ্ছে একটি বৈধ HTML এট্রিবিউট, তাই আমরা এটা CSS এর পরিবর্তে ব্যাকগ্রাউণ্ড কালার হিসেবে বসাতে পারি। সর্বদা একটি হেক্স কোডের পূর্ণ ছয়টি অক্ষর ব্যবহার করার কথা মনে রাখুন, কারন ছোট হাতের তিন অক্ষরের ব্যবহার সর্বদা কাজ করে না।
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td bgcolor="#70bbd9"> |
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td bgcolor="#ffffff"> |
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td bgcolor="#ee4c50"> |
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
ঠিক আছে, এবার আমরা ১নং সারির দিকে মনোযোগ দিবো। আমরা প্রথমে আমাদের সেল বা ঘরের প্যাডিং বা পরস্পর দূরত্বটি সমন্বয় করবো এবং তারপর ইমেজ প্রবেশ করাবো।
প্যাডিংয়ের ব্যবহার
যখন আপনি আপনার ইমেইলে প্যাডিং ব্যবহার করবেন, আপনি তখন সর্বদা অবশ্যই প্রত্যেকটি ভ্যালুকে চিহ্নিত করবেন (উপরদিক, ডানদিক, নিচের দিক এবং বামদিক) অন্যথায় আপনি অনিশ্চিত ফলাফল পেতে পারেন। আমি দেখতে পাচ্ছি যে, আপনি এখানেও শর্টহ্যান্ড ব্যবহার করতে পারেন, যেমন padding: 10px 10px 8px 5px;, কিন্তু যদি আপনার অসুবিধা হয়, তবে আপনি চাইলে এটাকে বড় করেও লিখতে পারেন, যেমন padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;।
যদি আপনার প্যাডিং বা জায়গা খালি রাখার ব্যপারে সমস্যা হয় (উদাহরণস্বরূপ, যদি আপনার প্রেরিত প্ল্যাটফর্মটি আপনার CSS স্টাইল বা নকশাটিকে বিচ্যুত করে ফেলে), তাহলে এটা মোটেই ব্যবহার করবেন না। খালি সেল বা ঘরগুলো ব্যবহার করে জায়গা তৈরি করুন। এখানে জায়গা সৃষ্টি করার জন্য GIF ফাইল ব্যবহার করার কোনই প্রয়োজন নেই, শুধু এটুকু নিশ্চিত হউন যে আপনি সেল বা ঘরে style="line-height: 0; font-size: 0;" যুক্ত করেছেন, ভিতরে একটি যুক্ত করুন, এবং এটাকে একটি সুস্পষ্ট উচ্চতা অথবা প্রস্থ প্রদান করুন। এখানে একটি উদাহরণ দেয়া হলো:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
একইসাথে এটা মনে রাখুন যে, TD ট্যাগের জন্য প্যাডিং ব্যবহার করা নিরাপদ কিন্তু P ট্যাগ বা DIV এর জন্য নয়। তারা অনেক বেশি অনিয়মিত আচরণ করে।
সুতরাং, আমরা এবার কিছু ইনলাইন সিএসএস ব্যবহার করে সেলে প্যাডিং যোগ করতে পারি। তারপর আমরা আমাদের ইমেজ বা ছবি প্রবেশ করাবো। alt টেক্সট যোগ করবো এবং style="display:block;" যোগ করবো। এটা একটি কমন ফিক্স যা কিছু ইমেইল ক্লায়েন্টকে আপনার ইমেজের নীচে খালি চিহ্ন বা শূন্যস্থান বসাতে সাহায্য করবে। আমরা আমাদের ইমেজে align = "center" আইডি ট্যাগ যোগ করে চিত্রটিকে কেন্দ্রীভূত করবো। আমরা একটি Alt ট্যাগ যোগ করব যা আমাদের ইমেইলটি প্রাথমিকভাবে লোড হওয়ার জন্য গুরুত্বপূর্ণ, বেশিরভাগ ক্ষেত্রে ছবিগুলো যেখানে থাকবে না।
দ্রষ্টব্য: যদি আপনার হেডারের বিষয়বস্তু আপনার বার্তাটির জন্য সত্যিই গুরুত্বপূর্ণ হয়, তবে কেবলমাত্র ইমেজ-সর্বোস্ব হেডার ব্যবহার করবেন না। মনে রাখবেন, বেশিরভাগ ক্লায়েন্টের জন্য ডিফল্টভাবে ইমেজগুলি ব্লক করা হয়, তাই যদি আপনার ইমেইলের এই দিকটি গুরুত্বপূর্ণ না হয় তবে ইমেজ ব্যবহার না করাই ভালো। এই উদাহরণে, যদিও, আমার হেডারটি সুন্দরভাবে অনাবৃত।
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
কনটেন্ট এরিয়া তৈরি করা
প্রথমে, আমরা কিছু প্যাডিং মাঝের সেলে যোগ করব যাতে আমাদের নকশা অনুযায়ী টেবিলের ভেতরে কিছু জায়গা থাকে।
এখন আমরা আমাদের মূল কন্টেন্টের জন্য তিনটি সারি ভিতর একটি একটি করে টেবিল যোগ করব - শিরোনামটির জন্য একটি, প্রাথমিক পাঠের জন্য একটি এবং দুটি কলামের সাথে সারিবদ্ধভাবে একটি। আমরা আমাদের টেবিল বা সারণীগুলোর জন্য পিক্সেল ভ্যালু সেট করার পরিবর্তে ১০০% প্রশস্ততা বসাবো, কারণ এটা আমাদেরকে পরবর্তীতে সাহায্য করবে, যদি আমরা আমাদের ইমেইলটিকে রেস্পন্সিভ হিসেবে তৈরি করতে চাই। যদি আপনি সর্বদাই সবকিছুতে প্রশস্ততার ক্ষেত্রে পিক্সেল ব্যবহার করে থাকেন, আপনি এই অভ্যাস মিডিয়া কুয়েরি যোগ করার মাধ্যমে সহজেই পরিত্যাগ করতে পারেন। আপনি যদি শতকরার উপর ভিত্তি করে টেবিলের প্রশস্ততা সাজিয়ে থাকেন, তাহলে যখন আপনি মূল উপাদানের প্রশস্ততা সমন্বয় করবেন, তখন সে অনুযায়ী সবকিছু অভিযোজিত হবে।
1 |
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Row 1 |
6 |
</td>
|
7 |
</tr>
|
8 |
<tr>
|
9 |
<td>
|
10 |
Row 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
<tr>
|
14 |
<td>
|
15 |
Row 3 |
16 |
</td>
|
17 |
</tr>
|
18 |
</table>
|
19 |
</td>
|
এখন আমরা আমাদের কনটেন্ট যোগ করবো, এবং মাঝের সেলে কিছুটা প্যাডিং যোগ করুন।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Lorem ipsum dolor sit amet! |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td style="padding: 20px 0 30px 0;"> |
9 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
এবার আমরা আমাদের ৩য় সারিতে আরও দুইটি কলাম যোগ করতে যাচ্ছি। কারণ আমরা দুইটি ঘরের মাঝামাঝি একটি মার্জিন চাচ্ছি, কিন্তু মার্জিন এখানে সমর্থিত নয়, সেজন্য আমরা তিন-কলামের একটি টেবিল তৈরি করতে যাচ্ছি যেখানে দুটি বহির্গত কলামের মাঝামাঝি একটি খালি ঘর থাকবে।
আমি যতই শতকরা হিসাব ব্যবহার করি না কেন, যখন আপনার নির্দিষ্ট সাইজের কোনও বিষয়বস্তু থাকবে, তখন সেটাকে শতকরা অনুপাতে রূপান্তর করা বেশ জটিল (এই উদাহরণে, কলামগুলো ৪৮.১% যেটা বিভ্রান্তি সৃষ্টি করতে পারে)। এই কারণে, যখন আমাদের ইমেজ দুটি ২৬০ পিক্সেল প্রশস্ত, আমরা এমন কিছু কলাম তৈরি করতে পারি যেগুলো ২৬০ পিক্সেল প্রশস্ত হবে, যার মধ্যভাগে ২০ পিক্সেলের একটি মার্জিন সেল থাকবে। (এটা সর্বমোট ৫৪০ পিক্সেল, যা আমাদের টেবিলের ৬০০ পিক্সেল প্রস্থ এবং উভয় দিক থেকে প্যাডিং হিসেবে ৩০ পিক্সেল বিয়োগ হবে।) আপনার ফণ্ট সাইজ এবং লাইন হাইট যেন শূন্য থাকে এবং মার্জিন সেলের প্রস্থের জায়গায় একটি নন-ব্রেকিং স্পেস ক্যারেক্টার যুক্ত করুন।
আমরা একই সাথে উভয় সেলের valign এর জন্য "top" বসাবো যাতে এগুলো উলম্বভাবে উপর দিকে সমান্তরাল থাকে, এমনকি যদিও একটি কলামের লেখা অন্য কলাম থেকে বেশী হয়। সাধারনভাবে ডিফল্ট ভার্টিক্যাল এলাইনমেন্ট হচ্ছে "middle"।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
Column 1 |
5 |
</td>
|
6 |
<td style="font-size: 0; line-height: 0;" width="20"> |
7 |
|
8 |
</td>
|
9 |
<td width="260" valign="top"> |
10 |
Column 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
</table>
|
এখন চলুন আমাদের ইমেজ এবং বিষয়বস্তুগুলো এই কলামে যুক্ত করা যাক। যেহেতু আমাদের একাধিক সারি দরকার, আমরা আরেকটি টেবিল যুক্ত করবো কারণ আমরা কোনও colspan বা rowspan ট্যাগ ব্যবহার করতে পারবো না। আমরা প্রতিটি কলামের মধ্যে ইমেজ এবং অনুলিপির মধ্যে কিছু প্যাডিং যোগ করবো।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
5 |
<tr>
|
6 |
<td>
|
7 |
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td style="padding: 25px 0 0 0;"> |
12 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
</td>
|
17 |
<td style="font-size: 0; line-height: 0;" width="20"> |
18 |
|
19 |
</td>
|
20 |
<td width="260" valign="top"> |
21 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
22 |
<tr>
|
23 |
<td>
|
24 |
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> |
25 |
</td>
|
26 |
</tr>
|
27 |
<tr>
|
28 |
<td style="padding: 25px 0 0 0;"> |
29 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
30 |
</td>
|
31 |
</tr>
|
32 |
</table>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
এখানে আমরা HTML ব্যবহার করে ইমেজের প্রস্থ কলামের ১০০% প্রস্থ অনুযায়ী সেট করেছি। এই কারণে আবার, যদি আমরা ইমেইলটিকে রেস্পন্সিভ করতে চাই তাহলে মূল ঊপাদানের প্রস্থ পরিবর্তন করে মিডিয়া কুয়েরি ব্যবহার করলেই হবে। এখন আমাদেরকে উচ্চতাও পিক্সেলের মাধ্যমে ঠিক করে দিতে হবে কারণ style="height: auto" সব ইমেইল ক্লায়েণ্টে কাজ নাও করতে পারে (যেমন, আউটলুকে)। সুতরাং আমরা এটি পিক্সেল ব্যবহার করে সেট করব। মানে আমরা পরবর্তীতে এই ইমেজগুলোর জন্য মিডিয়া কুয়েরি ব্যবহার করে height: auto!important সেট করবো যাতে মিডিয়া কুয়েরিতে মূল পিক্সেল মান গুলো অগ্রাহ্য করা হয়, কিন্তু আমরা এটা একক ক্লাস ব্যবহারের মাধ্যমেই সম্পন্ন করতে পারি। আমরা যেহেতু প্রশস্ততাকে শতকরা হার হিসেবে সেট করেছি, তাই এটাকে অগ্রাহ্য করা প্রয়োজন নেই। যত কম জিনিস অগ্রাহ্য করা যায়, ততই ভালো।
ফুটার
এবার আমরা ফুটারের সারিতে প্যাডিং যোগ করবো।
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
এই ঘরটির ভিতরে, আমরা আরেকটি দুই কলামের টেবিল তৈরি করবো।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Column 1 |
5 |
</td>
|
6 |
<td>
|
7 |
Column 2 |
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
আমরা একই সাথে সোশ্যাল মিডিয়া আইকনের জন্য আরেকটি ছোট্ট টেবিল তৈরি করবো। আমরা এটার মূল ঘরটিকে align="right" -এ বসাবো। নিশ্চিত করুন, যেন এই ইমেজ লিঙ্কগুলোর জন্য border="0" বসানো হয় (নীল রঙের লিঙ্ক বর্ডার এড়িয়ে যাওয়ার জন্য) এবং display:block দিতে ভুলবেন না যেন।
1 |
<td align="right"> |
2 |
<table border="0" cellpadding="0" cellspacing="0"> |
3 |
<tr>
|
4 |
<td>
|
5 |
<a href="http://www.twitter.com/"> |
6 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
7 |
</a>
|
8 |
</td>
|
9 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
10 |
<td>
|
11 |
<a href="http://www.twitter.com/"> |
12 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
13 |
</a>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
</td>
|
এখন আমরা আমাদের পাঠ্য যোগ করব এবং কেবলমাত্র নিরাপদ হতে আমাদের ঘরগুলোর জন্য কিছু প্রস্থ যোগ করব, যদিও তাদের মধ্যে বেশ কিছু খালি জায়গা রয়েছে। আমরা এই ঘরটির জন্য 75% এবং অন্য অংশের জন্য 25% সেট করব।
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
এবং শেষ পর্যন্ত এটা পেলাম! আমাদের লেআউট সম্পন্ন হয়েছে।
ভেলিডেশন
চলুন, এটা W3C Validator এর মাধ্যমে যাচাই করে নিশ্চিত হই যে এর কোনও অংশ খারাপ অথবা ভেঙ্গে যায় নি। যদি আপনি সঠিকভাবে অনুসরণ করে থাকেন, তবে ভেলিডেশনে বলবে যে আপনার কোডটি পাস করেছে।
এরপর আমরা Litmus -এও চেক করবো এটা নিশ্চিত হতে যে আমাদের ইমেইলটি সব ধরণের ইমেইল ক্লায়েন্টেই সুন্দরভাবে কাজ করছে কিনা। এখানে আমার টেস্টের সংক্ষিপ্তসার দেয়া হলো:
লেখা স্টাইল করা
আমাদের প্রথম সারিটা হচ্ছে শিরোনাম বা হেডিং। আমরা গাড় বা বোল্ড টেক্সট ইফেক্ট তৈরি করতে <b> ট্যাগ ব্যবহার করবো, কারণ আমরা ইতিমধ্যেই জানি, কোনও স্টাইল যদি HTML এ থাকে, তবে আমরা তা CSS এর পরিবর্তে ব্যবহার করতে পারি।
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
আমরা এই ইনলাইন স্টাইলটি অন্য সব টেক্সটের সেল বা ঘরেও ব্যবহার করবো:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
এরপর আমাদের ফুটার টেক্সট স্টাইল করা প্রয়োজন, এবং আমরা আমাদের আনসাবস্ক্রাইব লিঙ্কটাও কিছুটা পরিচ্ছন্ন করে তুলবো। আমরা আমাদের আনসাবস্ক্রাইব লিঙ্কটি CSS এবং HTML <font> ট্যাগ দুটোই ব্যবহার করে স্টাইল করবো। এই দ্বিগুণ পদ্ধতিটি এটা নিশ্চিত করবে যে আপনার লিঙ্কগুলো কখনোই ডিফল্ট নীল রঙের দেখাবে না।
1 |
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly |
4 |
</td>
|
এবং অবশেষে আমরা এটা পেলাম! সব কিছুই ভিতরে আছে। এখন বর্ডারটি অদৃশ্য করে দেয়ার পালা এবং দেখুন এটা সত্যিই সুন্দর দেখাচ্ছে। এবার আরও একটি কাজ করতে হবে আর তা হচ্ছে যেখানে যেখানে border="1" আছে সেটা border="0" দিয়ে বদলে দিতে হবে।
এই পর্যায়ে এসে, এটা দেখতে অনেকটা খালি জায়গার মধ্যে ইতস্ততঃ ভেসে থাকার মত দেখাচ্ছে , তাই চলুন আমাদের প্রথম ৬০০ পিক্সেল প্রশস্ত টেবিলটাতে ফিরে যাই এবং নিন্মলিখিত অংশগুলো যোগ করি:
1 |
style="border: 1px solid #cccccc;" |
এখন এটা আর ভেসে থাকার মত দেখাচ্ছে না। চূড়ান্ত ছোঁয়া হিসেবে, আমাদের একেবারে প্রথম ঘর বা সেলের নীচে আমি 30px প্যাডিং যোগ করতে যাচ্ছি। কিছু কিছু ওয়েবমেইল ক্লায়েণ্ট (যেমন, অ্যাপল মেইলে) নীচের অংশ প্রদর্শন করে না, এটা দূর করতে নীচের প্যাডিং, এবং উপরেও 10px প্যাডিং যোগ করবো, তাহলে আমাদের নীল হেডারটি কিছুটা সুন্দরভাবে প্রদর্শিত হবে।
1 |
<td style="padding: 20px 0 30px 0;"> |
এবং হয়ে গেলো! আপনি এখন চূড়ান্ত পরীক্ষার জন্য সম্পূর্ণ প্রস্তুত।
এটা হচ্ছে সারাংশ!
এটা ব্যবহার করার আগে, যদি আপনি এইচটিএমএলের ভিতর কোনও কমেন্ট ব্যবহার করে থাকেন, তবে তা থেকে মুক্ত হোন। কিছু ইমেইল ক্লায়েণ্ট কমেন্টে থাকা বিষয়বস্তুও প্রকাশ করে দেয়, তাই আপনার ফাইলে কোনও স্থানে কোনও অপ্রয়োজনীয় কোড না রাখাই বুদ্ধিমানের কাজ।
এখন এটা চূড়ান্তভাবে পরীক্ষা করার জন্য সবচেয়ে ভাল সময়, এবং তারপর, আপনার HTML ইমেইলটি পাঠানোর জন্য প্রস্তুত!
আপনি যা শিখেছেন তা অন্য মাত্রায় নিয়ে যেতে, পরবর্তী টিউটোরিয়ালগুলো চেক করে দেখুন:
