মিডিয়া কুয়েরী ছাড়াই একটি প্রামাণ্য রেস্পন্সিভ ইমেইল তৈরি করুন

HTML ইমেইল কোডিং করা যথেষ্ট মাথা খাটানোর কাজ। তার উপর যদি বেশ কিছু ইমেইল ক্লায়েন্ট ও ডিভাইসের সাইজের কথাও আপনাকে মাথায় রাখতে হয়, তাহলে ত আর কথাই নেই। অ্যাপ্লিকেশন ভেদে CSS এবং মিডিয়া কুয়েরী কিছুটা ভিন্ন ধরণের হতে পারে, তাই যখনই আপনি নতুন কোনও মেইল অ্যাপ্লিকেশনের কথা শুনবেন, তখন আপনার ইমেইল নিয়ে দুশ্চিন্তায় পড়ে যাওয়া স্বাভাবিক।

কিন্তু যদি আপনি এমন একটি ইমেইল টেম্পলেট তৈরি করতে সক্ষম হোন, যা সব সময়ই রেস্পন্সিভ থাকবে এমনকি কোনও অ্যাপ্লিকেশন খুব অল্প পরিমাণে আধুনিক CSS এর সাপোর্ট পাওয়ার পরও, তাহলে কেমন হয়? তাহলে ত আপনি নতুন কোনও ইমেইল অ্যাপ্লিকেশনের কথা শুনে ভয় না পেয়ে নিশ্চিন্তে আপনার ইমেইলটি সেখানে পাঠাতে পারবেন, কারণ আপনি তো জানেন যে আপনার ইমেইলটি সব জায়গাতেই কাজ করবে, নাকি?

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

এটাকে বলা হয় ফ্লুয়েড হাইব্রিড মেথড, ইমেইল ডেভেলপমেন্টের ক্ষেত্রে যাকে অনেক সময় স্পঞ্জি মেথডও বলা হয়। যদি আমরা কোনও ডিজাইনের ক্ষেত্রে অনেক বেশী শতাংশ ব্যবহার করি, তাহলে এই অংশটিকে ফ্লুইড বা তরল বলা হয়। হাইব্রিড সেই অংশকে বলা হয়, যেখানে আমরা বড় স্ক্রিনের জন্য বেশ কিছু উপাদানের ক্ষেত্রে max-width নির্দিষ্ট করে দেই।

ছয়টি বড় সমস্যা যা আমরা সমাধান করাই আমাদের লক্ষ্য

১। অ্যাণ্ড্রয়েড এবং আইওএসের জন্য জিমেইল অ্যাপ্লিকেশন ভালোভাবে কাজ করে না।

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

২। নতুন নতুন ইমেইল অ্যাপ্লিকেশন সব সময়ই প্রকাশিত হচ্ছে

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

৩। অসংখ্য মাপের ডিভাইস স্ক্রিন নিত্য, নতুন তৈরি হচ্ছে যার সংখ্যা অসীম

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

৪। <td> দিয়ে রেস্পন্সিভ ইমেইল তৈরি করা মোবাইলের ক্ষেত্রে সব সময় কাজ করে না

বেশ কিছু ই-মেইল ক্লায়েন্ট (আইওএস এমন কি পূর্ববর্তী অ্যান্ড্রয়েড ভার্সন এর বেশকিছু নেটিভ মেইল অ্যাপ্লিকেশনের ক্ষেত্রে) একই সারিতে ২টি টেবিলের ঘর কে সঠিকভাবে সাজাতে সক্ষম নয়, এগুলো কেবল দুইটি আলাদা টেবিল কে একত্র করতে পারে। এই টিউটোরিয়ালে একটি সম্পূর্ণ ব্যতিক্রম পদ্ধতি ব্যবহার করা হয়েছে, যা সব ধরনের অ্যাপ্লিকেশন এবং ডিভাইসে সাপোর্ট করবে। একটি সাধারণ সমাধান হচ্ছে টেবিলগুলোর সাথে align="left" অথবা align="right" এট্রিবিউট ব্যবহার করা, কিন্তু এক্ষেত্রেও আরেকটি অসুবিধা দেখা দিতে পারে:

৫। রেস্পন্সিভ ডেভলপমেন্টের ক্ষেত্রে aligned table মেথড যখন ব্যবহার করবেন, তখন আপনার মোবাইল অ্যাপ্লিকেশনে যদি মিডিয়া কোয়েরি না থাকে, তবে টেবিলগুলো ডানে অথবা বামে আটকে থাকবে।

এই টিউটোরিয়ালে একটি ভিন্ন পদ্ধতি ব্যবহার করা হয়েছে যাতে আপনার কলামগুলো মোবাইলের একেবারে মাঝখানে থাকবে এমনকি জিমেইল অ্যাপ্লিকেশনেও। (আপনি চাইলে খুব সহজেই এগুলোকে ডানে অথবা বামে এলাইন করতে পারেন।)

৬। যখন আপনি রেস্পন্সিভ ডেভলপমেন্টের জন্য aligned table (সমান্তরাল টেবিল) পদ্ধতিটি ব্যবহার করবেন, তখন আপনি সংলগ্ন কলামগুলো উল্লম্বভাবে সারিবদ্ধ করার ক্ষমতা হারাবেন।

এই টিউটোরিয়ালটি আপনাকে দেখাবে কিভাবে দুটি কলাম লম্বালম্বিভাবে একই সারিতে উপরে অথবা মাঝামাঝি সমান্তরাল করা যায়, ঠিক যেমনি ভাবে একই সারিতে valign এট্রিবিউট ব্যবহার করে টেবিলের ঘর সমূহ সাজানো হয়।

১। শুরু করা

একটি খালি ফাইল দিয়ে শুরু করুন এবং এটাকে index.html হিসেবে সেভ করুন তারপর নিচের কোড কপি করে পেস্ট করুন:

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

6

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

7

	<title></title>

8

	<link rel="stylesheet" type="text/css" href="styles.css" />

9

	<!--[if (gte mso 9)|(IE)]>

10

	<style type="text/css">

11

		table {border-collapse: collapse;}

12

	</style>

13

	<![endif]-->

14

</head>

15

<body>

16

	<center class="wrapper">

17

		<div class="webkit">

18

			[content goes here]

19

		</div>

20

	</center>

21

</body>

চলুন এবার উপরের কোডের সবগুলো উপাদান দেখে নেই:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" এই DOCTYPE টি আমি সবচেয়ে বেশি পছন্দ করি—কারন এতে ঝামেলাও খুব কম।

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> এই কোডটি আমাদের ডকুমেন্টে সব ধরনের ইউনিকোড অক্ষর সাপোর্ট করার সুবিধা দেবে।

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> এবং <meta name="viewport" content="width=device-width, initial-scale=1.0"> ব্যবহার করা হয়েছে ফলে উইন্ডোজ ফোন আমাদের মোবাইল ভার্সনটি সঠিক ভাবে প্রদর্শন করবে।

এছাড়াও, আমরা <title></title> যুক্ত করেছি, যদিও এটা খালি রাখাই সবচেয়ে ভালো। একটি বৈধ XHTML এর জন্য টাইটেল ট্যাগ খুব জরুরি, কিন্তু বেশ কিছু নেটিভ এন্ড্রয়েড মেইল ক্লায়েন্ট এই টাইটেলকে ইনবক্স প্রিভিউয়ের প্রিহেডারের ঠিক আগে প্রদর্শন করে থাকে, যা আসলে সচরাচর আদর্শ নয়।

আপনি দেখতেই পাচ্ছেন যে, আমি এই টিউটোরিয়ালের জন্য একটি এক্সর্টানাল স্টাইলশীট ব্যবহার করেছি, কিন্তু এটা ব্যবহার করা বা না করা সম্পূর্ণ আপনার ইচ্ছাধীন। এই পর্যন্ত এসে আপনাকে style.css নামে একটি নতুন ডকুমেন্ট তৈরী করতে হবে এবং এইচটিএমএল ফাইলের একই ডিরেক্টরীতে তা সংরক্ষণ করতে হবে। সবশেষে, আমরা আমাদের CSS কে ইনলাইন করবো।

পরবর্তীতে, আমরা <!--[if (gte mso 9) | (IE)]> এবং <![endif]--> এর মাঝে আউটলুকের জন্য বেশকিছু কন্ডিশনাল CSS যুক্ত করবো, যাতে আউটলুকে টেবিলের বর্ডারগুলো বন্ধ করে অনাকাঙ্ক্ষিত শূন্যস্থান পূর্ণ করা যায়। এই কন্ডিশনাল এক্সপ্রেশনটি মাইক্রোসফট আউটলুকে সব ভার্শন এমনকি ভার্শন ৯ অথবা এর আগের ভার্সন আউটলুক ২০০০ ও একইসাথে যেসব আউটলুক ইন্টারনেট এক্সপ্লোরারে রেন্ডার হয়ে থাকে, (আউটলুক ২০০০ থেকে ২০০৩) সবগুলোকে লক্ষ্য করে কাজ করবে।

বডির নিচে আমাদেরকে প্রথমে একটি <center> ট্যাগ যুক্ত করতে হবে যাতে সম্পূর্ণ কন্টেন্টটি মাঝখানে থাকে এবং আমাদের বেশকিছু গ্লোবাল সিএসএস প্রপার্টির সাথে কাজ করার যোগ্য হয়ে ওঠে (যদিও body ট্যাগ প্রায়ই বিভিন্ন ওয়েব মেইল ক্লাইন্টে কাজ করে না)। এছাড়াও আমাদের আগের ভার্সনের জন্য <div class="webkit"> ব্যবহার করতে হবে যা ওয়েব কিট চালিত মেইল ক্লায়েন্ট বিশেষ করে অ্যাপল মেল ৬ এবং আউটলুক ২০১১ এর কিছু কিছু ক্ষেত্রে কাজ করবে। আগের এই ভার্শনগুলো কেবল ব্লক লেভেল এলিমেন্টের ক্ষেত্রে max-width সাপোর্ট করে এবং আপনার লেআউট সঠিক সাইজে প্রদর্শন হচ্ছে কিনা তা নিশ্চিত করতে অবশ্যই একটি div এর ভিতর রাখবেন, যার ফলে আমার আগের টিউটোরিয়াল অনুযায়ী মিডিয়া কুয়েরীতে প্রশস্ততা ঠিক করে দিতে হবে না। (ধন্যবাদ। এটা ফিক্সের জন্য জিরোসেন্টস এ যেতে পারেন।)

২। প্রাথমিক স্টাইলসমূহ

পরবর্তীতে styles.css নামক একটি খালি সিএসএস ফাইল তৈরি করুন। আপনার নতুন তৈরি ফাইলটিতে, নিচের অংশটি পেস্ট করুনঃ

1

/* Basics */

2

body {

3

    Margin: 0;

4

	padding: 0;

5

	min-width: 100%;

6

	background-color: #ffffff;

7

}

8

table {

9

	border-spacing: 0;

10

	font-family: sans-serif;

11

	color: #333333;

12

}

13

td {

14

	padding: 0;

15

}

16

img {

17

	border: 0;

18

}

19

.wrapper {

20

	width: 100%;

21

	table-layout: fixed;

22

	-webkit-text-size-adjust: 100%;

23

	-ms-text-size-adjust: 100%;

24

}

25

.webkit {

26

	max-width: 600px;

27

}

28

29

/* Windows Phone Viewport Fix */

30

@-ms-viewport { 

31

	width: device-width; 

32

}

এখানে আমি বডি টেবিল এবং টেবিল সেলের মার্জিন এবং প্যাডিং শূন্য করে দিবো এবং লিংক ইমেজে কোন বর্ডার থাকলে তাও বাদ করে দিবো। আমাদের স্টাইলে table এবং td ট্যাগ দুটি আমরা cellpadding এবং cellspacing এইচটিএমএল এট্রিবিউটের জায়গায় ব্যবহার করবো। এর পরিবর্তে আপনি যদি এইচটিএমএল এট্রিবিউট ব্যবহার করতে চান, তবে সেটা সম্পূর্ণ আপনার ইচ্ছার উপর নির্ভরশীল; আগে আমি CSS প্রপার্টির পরিবর্তে যেখানে সম্ভব সেখানেই এইচটিএমএল এট্রিবিউট ব্যবহার করতে চাইতাম, যদিও আমি বড় বড় প্রজেক্টে কাজ করার সময় বুঝতে পেরেছি এইসব সিএসএস প্রপার্টি ব্যবহার করলে কাজটি আরও ব্যবস্থাপনাযোগ্য হয়ে ওঠে বিশেষ করে যদি আপনি এমন প্লাটফর্মে কাজ করেন যা স্বয়ংক্রিয়ভাবে আপনার জন্য সিএসএস ইনলাইন করে দেয়।

আমি সাধারণত <body> ট্যাগে min-width 100% যুক্ত করি যাতে এমন কোন অবস্থা এড়ানো যায়, যদি মোবাইলে ভিউ পোর্টের সম্পূর্ণ প্রস্থ ব্যবহার না করা হয় তবুও তা ভালভাবে দেখা যায়, এবং সবসময় ব্যাকগ্রাউন্ড কালার সেট করা বেশ ভালো, যদিও এটা সম্পূর্ণ সাদা হোক না কেন। এর ফলে, আউটলুক অথবা লোটাস নোটে ব্যাকগ্রাউন্ড কালারের সমস্যা এড়ানো যায়।

উইন্ডোজ ফোন এবং আইওএসে অদ্ভুত উপায়ে টেক্সট রিসাইজিং বন্ধ করার জন্য আমরা .wrapper এর সাথে বিশেষ কিছু প্রোপার্টি, যেমন table-layout: fixed যুক্ত করবো, যাতে আমাদের মধ্যভাগের কনটেন্ট গুলো ইয়াহু মেইলে মাঝ বরাবর দেখা যায়। আমরা অ্যাপল মেইল ​​৬ (এবং এরও নীচের সংস্করণ) এবং আউটলুক ২০১১-এ সবকিছু ধারণ করার জন্য আমাদের .webkit div- এ সর্বাধিক 600px max-width সেটআপ করেছি।

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

৩। স্ট্রাকচারাল আউটার কনটেইনার তৈরি করা

এই পদ্ধতির জন্য আমরা একটি মূল বিল্ডিং ব্লক তৈরি করতে যাচ্ছি, তা হচ্ছে আউটলুকের জন্য একটি কন্ডিশনাল বা শর্তাধীন টেবিল যা অন্যান্য ক্লায়েণ্টের ক্ষেত্রে লুকিয়ে থাকবে। আমাদের এটা দরকার হবে, যেহেতু আমরা max-width প্রোপার্টি ব্যবহার করছি যা আউটলুক সাপোর্ট করে না। অতএব আমাদের আউটলুকের জন্য স্পষ্ট পিক্সেল প্রস্থ অনুযায়ী বিশেষ একটি টেবিল তৈরি করবো যা আউটলুকের ভিতরে সুন্দরভাবে সবকিছু প্রদর্শন করবে।

এবার আমাদের HTML ফাইলে [content goes here] প্লেস হোল্ডারটি মুছে নিচের কোড পেস্ট করি। আমি সাধারনত আমার কন্ডিশনাল ট্যাগগুলো বামদিকে সমান্তরাল করে রাখি, যাতে পড়তে সহজ হয়, কিন্তু আপনি কিভাবে এগুলোকে ফরমেট করবেন তা আপনার নিজস্ব ব্যাপার।

1

<!--[if (gte mso 9)|(IE)]>

2

<table width="600" align="center">

3

<tr>

4

<td>

5

<![endif]-->

6

<table class="outer" align="center">

7

    <tr>

8

		<td>

9

			[content goes here]

10

		</td>

11

	</tr>

12

</table>

13

<!--[if (gte mso 9)|(IE)]>

14

</td>

15

</tr>

16

</table>

17

<![endif]-->

দ্রষ্টব্য: আমার শর্তাধীন টেবিল ট্যাগগুলিতে কোন স্টাইল নেই। আমি এবার ক্যাম্পেইন মনিটরের ইনলাইনার টুল inliner.cm ব্যবহার করব যা স্টাইলসমূহকে কন্ডিশনাল টেবিল অনুযায়ী ইনলাইন করবে। আপনি যদি অন্যরকম কোনও ইনলাইনার ব্যবহার করেন, তাহলে এটা হবে না। এজন্য আপনার কন্ডিশনাল আউটলুক টেবিলে cellpadding="0" cellspacing="0" border="0 যুক্ত করুন।

আপনার কন্ডিশনাল টেবিলের ভিতর দেখতে পাবেন যে, আমাদের একটি <table class="outer"> আছে, যা আউটলুক ছাড়া অন্যান্য ইমেইল ক্লায়েন্টের জন্য আমাদের মূল আউটার বিল্ডিং ব্লক।

আমরা চাই এই আউটার টেবিলটি ছোট স্ক্রিনে 100% প্রশস্ত হোক, কিন্তু বড় স্ক্রিনে ম্যাক্সিমাম 600px প্রশস্ত হোক। অতএব আমরা এর দৈর্ঘ্য 100% সেট করবো এবং এর ম্যাক্সিমাম দৈর্ঘ্য 600px রাখবো।

কাজের টিপস: মোবাইলে সহজে বাফার করার জন্য প্যাডিং অথবা মিডিয়া কুয়েরীর ঝামেলায় না গিয়ে আপনার টেবিলের width 100% থেকে 95% এ পরিবর্তন করুন।

চলুন, তাহলে এই স্টাইলটি আমাদের styles.css ফাইলে পেস্ট করি:

1

.outer {

2

    Margin: 0 auto;

3

	width: 100%;

4

	max-width: 600px;

5

}

এছাড়াও আমরা Margin: 0 auto; সেট করবো যাতে ক্রোম ব্রাঊজার থেকে ইয়াহুতে আমাদের টেবিলটি মাঝ বরাবর দেখানো হয়। যদিও এই মার্জিনটি ইয়াহুর জন্য, কিন্তু আমি সর্বদাই Margin এর ক্ষেত্রে শুরুতে বড় হাতের অক্ষর ব্যবহার করেছি, তাই আউটলুকে এটা আলাদা হয়ে যাবে না-এই ছোট্ট হ্যাকটির জন্য এই ব্লগে উইকটরের কমেন্টের জন্য ধন্যবাদ।

এবার আমাদের বাইরের কাঠামোটি তৈরি, এখন আমরা বেশ কিছু কনটেন্ট যুক্ত করতে শুরু করবো।

৪। একটি সম্পূর্ণ-প্রশস্ত ব্যানার ইমেজ যুক্ত করা

প্রথমে, আমাদের টিউটোরিয়াল ফাইলগুলো ডাউনলোড করুন এবং /images ডাইরেক্টরিটি আপনার index.html ফাইলটি যে ফোল্ডারে আছে সেখানে সরিয়ে নিন।

এবার আমাদের .outer টেবিলের ভিতর td তে একটি full-width-image ক্লাস যুক্ত করুন এবং তারপর আমরা [content goes here] প্লেসহোল্ডারটি একটি ইমেজ দ্বারা বদলে দিবো, তাহলে সম্পূর্ণ টেবিলটি নিচের মত দেখাবে:

1

<table class="outer" align="center">

2

    <tr>

3

		<td class="full-width-image">

4

			<img src="images/header.jpg" alt="" />

5

		</td>

6

	</tr>

7

</table>

দেখতেই পাচ্ছেন, আমি ইমেজে কোনও width অথবা height অ্যাট্রিবিউট যুক্ত করিনি। আমি এগুলো সব CSS এ যুক্ত করবো, যা নিচের মত দেখাবে:

1

.full-width-image img {

2

    width: 100%;

3

	height: auto;

4

}

এই পদ্ধতি ব্যবহার করার সময় আমাদের ইমেজ সংক্রান্ত একটি অত্যন্ত গুরুত্বপূর্ণ বিষয়ের সমাধান হবে।

ইমেজগুলো সর্বদাই ফিজিক্যাল পিক্সেল সাইজে দেখা যাবে।

এই পদ্ধতিতে আমরা শতাংশ ব্যবহার করবো যাতে সব কিছু সুন্দর এবং তরল থাকে। অতএব, আমরা আমাদের ইমেজগুলোকে সব সময়ই তাদের কন্টেইনার অনুসারে ১০০% প্রশস্ত হিসেবে সেট করবো। এটা করতে হলে আমাদেরকে ইমেজের জন্য সঠিক ফিজিক্যাল পিক্সেল সাইজ প্রবেশ করাতে হবে। কারন আউটলুক ২০০৭, ২০১০ এবং ২০১৩ কোনও ইমেজকেই তাদের মূল মাত্রার চেয়ে বড় অথবা ছোট করবে না, যতক্ষন না আপনি ইমেজের জন্য একটি সুস্পষ্ট পিক্সেলের কোনও প্রস্থ ঠিক না করেন। আপনি যদি 600px প্রশস্ত কোনও সেলে 1200px প্রশস্ত কোনও ইমেজ স্থাপন করেন এবং এর প্রশস্ততা ১০০% সেট করেন। তাহলে আউটলুকে এই ইমেজটি 1200px প্রশস্ত হিসেবে প্রদর্শন করবে। অতএব, আপনার যদি 600px প্রশস্ত সেল (ডেস্কটপে) থাকে তবে আপনাকে 600px প্রশস্ত একটি চিত্র ব্যবহার করতে হবে।

আপনার স্ক্রিনের মিনিমাম প্রস্থের চেয়ে ছোট ইমেজের জন্য, আপনি একটি সুস্পষ্ট পিক্সেলের প্রশস্ততা বসাতে পারেন (যেমন, 100px) এবং হাই-রেজ্যুলেশন ইমেজ ব্যবহার করুন, কারণ নন-মিডিয়া-কুয়েরী অ্যাপসের জন্য প্রশস্ততা সর্বদাই 100px রাখবেন, যা যেকোনো মোবাইল ভিউপোর্টের ভিতর খুব সুন্দরভাবে বসে যাবে। আপনার কলামের প্রশস্ততা যদি 350px হয়, তাহলে আপনি ইমেজটিকেও 350px প্রশস্ত করতে পারবেন না, কারণ আপনি যদি কোনও জিমেইল অ্যাপে 320px প্রশস্ত ভিউপোর্টে মেইলটি দেখেন তাহলে এটা অনেক প্রশস্ত হয়ে যাবে।

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

আমার রুল হচ্ছে যেকোনো ইমেজ সব সময় ফিজিক্যাল পিক্সেল সাইজ অনুযায়ী দেখানো উচিত, যদি না এটি কোন 100px এর চেয়ে কম প্রস্থের কোন আইকন না হয়।

তাই এই সব কিছু মনে রেখেই, আমরা header.jpg নামে একটি ইমেজ সেভ করব যা ঠিক 600px প্রশস্ত হবে এবং আমাদের ইমেজ ডিরেক্টরীতে অবস্থান করবে। ইমেজটি নিন এবং সেভ করুন। তারপর আপনি আপনার HTML ফাইলের প্রিভিউয়ে দেখতে পাবেন যে, কিভাবে ভিউপোর্ট এর সাইজ অনুযায়ী ইমেজটি তরলের মত রিসাইজ হয়ে যায়।

৫। একক কলামের লেআউট যুক্ত করা

এই মার্কআপ দিয়ে .outer টেবিলে আরও একটি সারি যুক্ত করুন:

1

<tr>

2

    <td class="one-column">

3

		<table width="100%">

4

			<tr>

5

				<td class="inner contents">

6

					<p class="h1">Lorem ipsum dolor sit amet</p>

7

					<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>

8

				</td>

9

			</tr>

10

		</table>

11

	</td>

12

</tr>

এবং আপনার সিএসএস ফাইলে নিচের স্টাইলটি যোগ করুন:

1

.inner {

2

    padding: 10px;

3

}

4

p {

5

	Margin: 0;

6

}

7

a {

8

	color: #ee6a56;

9

	text-decoration: underline;

10

}

11

.h1 {

12

	font-size: 21px;

13

	font-weight: bold;

14

	Margin-bottom: 18px;

15

}

16

.h2 {

17

	font-size: 18px;

18

	font-weight: bold;

19

	Margin-bottom: 12px;

20

}

21

22

/* One column layout */

23

.one-column .contents {

24

	text-align: left;

25

}

26

.one-column p {

27

	font-size: 14px;

28

	Margin-bottom: 10px;

29

}

আপনি নিশ্চয়ই দেখতে পাচ্ছেন আমি <p> ট্যাগ এবং এক সেট ক্লাস দিয়ে এগুলো স্টাইল করেছি। টেক্সট স্টাইল এর জন্য আমি প্যারাগ্রাফ ব্যবহার করেছি, এবং আপনি এগুলো খুব সহজেই ব্যবস্থাপনা করতে পারবেন, কারণ বড় হাতের-M Margin হ্যাক যা আমি আগেই উল্লেখ করেছি। <h1> এর পরিবর্তে <p class="h1"> ব্যবহার করেছি, কারণ আউটলুকে কিছু h1 h2 ও h3 স্টাইল আছে যা আপনার স্টাইলকে সর্বদাই ওভাররাইট করবে।

তাই উপরের সিএসএসে আমরা আমাদের কলামের জন্য 10px প্যাডিং সেট করেছি, এবং <p> এর সমস্ত মার্জিন রিসেট করেছি, এবং লিঙ্কের জন্য এবং .h1 ও .h2 ক্লাসের জন্য বেশ কিছু বেসিক স্টাইল সেট করেছি, এবং নিশ্চিত করেছি যে, আমাদের কলামগুলো যাতে স্টাইল করা প্যারাগ্রাফসহ বামদিক থেকে সমান্তরালভাবে থাকে।

এবার আমরা একাধিক কলামের উপর বাকি কাজ করবো!

৬। দুই কলামের লেআউট যুক্ত করা*

*যা একটির উপর আরেকটি থাকা অবস্থায় মাঝ বরাবর থাকবে।

প্রথমে .outer টেবিলে এই নতুন সারিটি যুক্ত করুন। এতে .two-column ক্লাসের সাথে একটি সেলও আছে। এবং, এর ভিতর, আউটলুকের জন্য একটি ৫০% প্রশস্ত দুটি কলামসহ একটি কন্ডিশনাল টেবিল থাকবে:

1

<tr>

2

    <td class="two-column">

3

		<!--[if (gte mso 9)|(IE)]>

4

		<table width="100%">

5

		<tr>

6

		<td width="50%" valign="top">

7

		<![endif]-->

8

		[column to go here]

9

		<!--[if (gte mso 9)|(IE)]>

10

		</td><td width="50%" valign="top">

11

		<![endif]-->

12

		[column to go here]

13

		<!--[if (gte mso 9)|(IE)]>

14

		</td>

15

		</tr>

16

		</table>

17

		<![endif]-->

18

	</td>

19

</tr>

এই কন্ডিশনাল কলামগুলো গুরুত্বপূর্ণ, কারন এগুলো ছাড়া আউটলুকে আপনাকে দুটি কলাম একটি অপরটির পাশে দেখাবে না। যেহেতু আউটলুকে max-width সাপোর্ট করে না, তাই এই কলামগুলো প্রতিটি কলামকে সঠিক সাইজে আটকে রাখতে সহায়তা করবে।

এবার প্রত্যেকটি [column to go here] প্লেসহোল্ডার নিচের কন্টেণ্টগুলো দিয়ে বদলে দিন:

1

<div class="column">

2

    <table width="100%">

3

		<tr>

4

			<td class="inner">

5

				[content goes here]

6

			</td>

7

		</tr>

8

	</table>

9

</div>

এইভাবে আমরা দুটি কলামকে ডেক্সটপে পাশাপাশি প্রদর্শন করতে পারবো, কিন্তু মোবাইলে মাঝ বরাবর প্রদর্শন করতে হলে আমাদেরকে text-align: center এবং display: inline-block দুটোই যুক্ত করতে হবে। সমস্ত ইনলাইন এবং ইনলাইন ব্লক এলিমেন্ট টেক্সট এলাইন প্রোপার্টিকে মেনে চলে। অতএব, যদি আমরা আমাদের টেবিলগুলো এমন একটি div এর মাঝে রাখি যা ইনলাইন-ব্লক হিসেবে সেট করা হয়েছে, তাহলে আমরা এগুলোর কন্টেইনারে text-align প্রপার্টি সেট করার মাধ্যমে যখন একটির উপর আরেকটি থাকবে, তখন তা সমান্তরাল রাখতে পারবো। আপনি বাম দিকের, মধ্যভাগের অথবা ডানদিকের টেক্সট এলাইনমেন্ট পছন্দ করতে পারেন, এবং আপনার ইনলাইন-ব্লক ডিভিশন এটা মেনে চলবে। আপনি অবশ্যই টেবিলের ক্ষেত্রে display: inline-block সেট করতে পারেন, কিন্তু কেবল তখনই এটা করবেন যখন আপনি এর ভিতর অন্য টেবিল নেস্ট না করবেন। যদি আপনি ইনলাইন ব্লক টেবিলের ভিতর আরো টেবিল নেস্ট করেন তাহলে এগুলো অদ্ভুত আচরন করবে, তাই আপনাকে যদি ইনলাইন ব্লক কন্টেইনারটিতে কোনও টেবিল নেস্ট করতে হয় তবে তা div কিনা তা নিশ্চিত হয়ে নিবেন।

চলুন, এবার আমাদের কনটেইনার সেল .two-column কে আমাদের পছন্দের এলাইনমেন্ট দিয়ে স্টাইল করি। এছাড়াও আমরা এই সেলের ভিতর কলামের গ্যাপ থেকে মুক্তি পেতে font-size: 0 যুক্ত করবো।

1

/*Two column layout*/

2

.two-column {

3

    text-align: center;

4

	font-size: 0;

5

}

এবার আমরা আমাদের ইনলাইন ব্লক div কে স্টাইল করবো যা আমাদের কলামের হয়ে কাজ করবে:

1

.two-column .column {

2

    width: 100%;

3

	max-width: 300px;

4

	display: inline-block;

5

	vertical-align: top;

6

}

৩০০ পিক্সেল max-width এর ক্ষেত্রে আমরা প্রস্থ হিসেবে 100% ব্যবহার করবো, যাতে এই কলামগুলো ৩০০ পিক্সেল ভিউপোর্টের নিচে ১০০% প্রশস্ত হিসেবে দেখা যায়।

vertical-align হিসেবে আপনি top, center অথবা bottom যা খুশি তাই সেট করতে পারবেন। vertical-align টিকে top সেট করার মানে হলো প্রতিটি কলাম টেবিল সেলে valign="top" এর মতো আচরন করবে, অন্যদিকে middle সেট করা হলে valign="middle" এর মত আচরণ করবে। মনে রাখবেন আপনার এই divs এর একই সেলে অনেকগুলো সারি হতে পারে এবং vertical alignment একটির পর একটি সারি অনুযায়ী লম্বালম্বিভাবে সমান্তরাল করবে। এটা বেশ গোছানো! এখানে যাই আপনি পছন্দ করেন না কেন তা যেন valign এর সাথে মিলে যায় যেটা আপনি আপনার আউটলুকের কন্ডিশনাল টেবিলে সেট করতে পারবেন। কারণ আউটলুক vertical-align সাপোর্ট করে না। যদি আপনি আউটলুকের এলাইনমেন্টের সাথে মিল না দেখেন, তাহলে সম্ভবত কন্ডিশনাল টেবিলে valign সেট করতে ভুলে গেছেন।

পরবর্তীতে, আমরা প্রতিটি কলামে দুটি সারিসহ একটি টেবিল যুক্ত করবো। তাই যখন সবকিছু মোবাইলে একটির উপর আরেকটি দেখা যাবে, প্রত্যেকটি ইমেজের ঠিক নিচেই এর সংশ্লিষ্ট টেক্সট থাকবে।

এবার আমাদের দুটি [content goes here] প্লেসহোল্ডার নিচের কোড দ্বারা পালটে দিবো:

1

<table class="contents">

2

    <tr>

3

		<td>

4

			<img src="images/two-column-01.jpg" alt="" />

5

		</td>

6

	</tr>

7

	<tr>

8

		<td class="text">

9

			Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 

10

		</td>

11

	</tr>

12

</table>

এখানে আমাদের ইমেজটি 280px প্রশস্ত। উপরের আলোচনা অনুযায়ী, এটা আমরা যেই সেলে স্থাপন করবো তার সাথে এটা সঠিক পিক্সেল মাত্রা অনুযায়ী ঠিক করতে হবে। প্রতিটি কলাম দুই দিকে 10px প্যাডিংসহ 300px প্রশস্ত হবে, ফলে আমাদের ইমেজটি 280px হবে।

এরপর আমরা .contents ক্লাসটি ১০০% প্রশস্ত করার মাধ্যমে স্টাইল করবো:

1

.contents {

2

    width: 100%;

3

}

এবং তারপর আমাদের ফন্ট সাইজ এবং টেক্সট-অ্যালাইনমেন্ট সেট করতে দুই কলামের লেআউটে স্টাইল যুক্ত করুন, যা আমাদের ইমেজটি যাতে 100% প্রশস্ত হয় তা নিশ্চিত করবে, এবং আমাদের টেক্সটের নিচে কিছুটা প্যাডিং যুক্ত করবে:

1

.two-column .contents {

2

    font-size: 14px;

3

	text-align: left;

4

}

5

.two-column img {

6

	width: 100%;

7

	height: auto;

8

}

9

.two-column .text {

10

	padding-top: 10px;

11

}

এখন আপনার এমন একটি দুই কলামের লেআউট থাকবে যা ব্রাঊজার ৩০০ পিক্সেলের এর চেয়ে কম ভিউপোর্টে সংকুচিত করলে লম্বালম্বিভাবে একটি অন্যটির উপর অবস্থান করবে।

৭। তিন কলামের লেআউট যুক্ত করা

text-align: center এবং display: inline-block এর সমন্বয়ে আমরা আবারো এমন একটি সাইড বাই সাইড কলাম তৈরি করতে যাচ্ছি যা মোবাইলে একটির উপর আরেকটি দেখাবে।

আমরা এখানে text-align: center ব্যবহার করবো তাহলে আমাদের কলামগুলো মাঝ বরাবর থাকবে, কিন্তু আপনি চাইলে সর্বদাই বাম দিকের অথবা ডানদিকের টেক্সট এলাইনমেন্ট ব্যবহার করতে পারেন। নিচের উদাহরণে দেখানো হলো কিভাবে মাঝখানের এবং বামদিকের এলাইন করা এলিমেন্টগুলো একটি অপরটির উপর থাকবে:

তাহলে দুই কলামের প্রক্রিয়াটি আরো একটি কলামসহ পুনরাবৃত্তি করবো। .outer টেবিলে এই নতুন সারিটি যুক্ত করুন। (কণ্ডিশনাল আউটলুক টেবিলে আমি সাধারণত শতাংশ এর উপর ভিত্তি করে প্রশস্ততা ব্যবহার করে থাকি, কিন্তু এই ক্ষেত্রে প্রত্যেকটির প্রশস্ততা ২০০ সেট করাই সহজতর।)

1

<tr>

2

    <td class="three-column">

3

		<!--[if (gte mso 9)|(IE)]>

4

		<table width="100%">

5

		<tr>

6

		<td width="200" valign="top">

7

		<![endif]-->

8

		[column to go here]

9

		<!--[if (gte mso 9)|(IE)]>

10

		</td><td width="200" valign="top">

11

		<![endif]-->

12

		[column to go here]

13

		<!--[if (gte mso 9)|(IE)]>

14

		</td><td width="200" valign="top">

15

		<![endif]-->

16

		[column to go here]

17

		<!--[if (gte mso 9)|(IE)]>

18

		</td>

19

		</tr>

20

		</table>

21

		<![endif]-->

22

	</td>

23

</tr>

এবার নিচের সিএসএস যুক্ত করে সারিতে অতিরিক্ত প্যাডিং যুক্ত করুন, একইসাথে দুইকলামের লেআউটে আমরা যেসব প্রপার্টি ব্যবহার করেছি তাও সেটআপ করুন, যাতে আমাদের কলামগুলো আমাদের চাহিদামাফিক আচরণ করে। আমরা যেই div কলামগুলো যোগ করতে যাচ্ছি তার জন্য এটা একটি স্টাইল সেটআপ করবে, যা এই ক্ষেত্রে 200px প্রশস্ত হবে।

1

/*Three column layout*/

2

.three-column {

3

    text-align: center;

4

	font-size: 0;

5

	padding-top: 10px;

6

	padding-bottom: 10px;

7

}

8

.three-column .column {

9

	width: 100%;

10

	max-width: 200px;

11

	display: inline-block;

12

	vertical-align: top;

13

}

14

.three-column .contents {

15

	font-size: 14px;

16

	text-align: center;

17

}

18

.three-column img {

19

    width: 100%;

20

	height: auto;

21

}

22

.three-column .text {

23

	padding-top: 10px;

24

}

এবার চলুন [column to go here] প্লেসহোল্ডরের পরিবর্তে আমরা প্রতিটি টেবিলের জন্য একটি করে কলাম রাখি:

1

<table class="column">

2

    <tr>

3

		<td class="inner">

4

			<table class="contents">

5

				<tr>

6

					<td>

7

						<img src="images/three-column-01.jpg" alt="" />

8

					</td>

9

				</tr>

10

				<tr>

11

					<td class="text">

12

						Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. 

13

					</td>

14

				</tr>

15

			</table>

16

		</td>

17

	</tr>

18

</table>

ব্যস, হয়ে গেলো! এখন আপনি একটি তিন কলামের লেআউট পাবেন, যাতে কলামগুলো সংকীর্ণ ভিউপোর্টে একটি অপরটির উপরে উঠে যাবে।

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

একের অধিক সারি দিয়ে তিন কলামের লেআউট যুক্ত করা

মাল্টি কলাম লেআউটে আপনি যখন আরো সারি যুক্ত করতে চাইবেন, তখন আপনি চাইলে একটি একক কনটেইনারে যত খুশী ইনলাইন-ব্লক এলিমেন্ট যুক্ত করতে পারেন। এভাবে, যখন ভিউপোর্টে সব কলামের জন্য জায়গার সংকুলান না হবে তখন এগুলো বিদ্যমান জায়গাতে খাপ খাওয়ানোর জন্য পুনরায় বিন্যাস্ত হয়ে যাবে।

যদিও বেশিরভাগ ক্লায়েন্টের জন্য আপনাকে divs এর সারিসমূহ আলাদা করতে হবে না, তবুও আউটলুকের জন্য কন্ডিশনাল টেবিলে আপনাকে <tr> যুক্ত করতে হবে।

এবার আমাদের .outer টেবিলে .three-column ক্লাস দিয়ে একটি নতুন সারি যুক্ত করে এটা পরীক্ষা করবো। এই হচ্ছে ভিতরে একটি কন্ডিশনাল টেবিলসহ আমাদের নতুন তিন-কলামের সারি। আপনি দেখতেই পাচ্ছেন এখানে, আমাদের কন্ডিশনাল টেবিলের ভিতর তিনটি সারি আছে এবং সবশেষে আমরা কন্ডিশনাল টেবিলের সারিটি </tr> দিয়ে শেষ করেছি এবং আরও একটি নতুন <tr> ওপেন করেছি, যাতে 200px প্রশস্ত সেলের আরও একটি সারি আছে।

1

<tr>

2

    <td class="three-column">

3

		<!--[if (gte mso 9)|(IE)]>

4

		<table width="100%">

5

		<tr>

6

		<td width="200" valign="top">

7

		<![endif]-->

8

		[column to go here]

9

		<!--[if (gte mso 9)|(IE)]>

10

		</td><td width="200" valign="top">

11

		<![endif]-->

12

		[column to go here]

13

		<!--[if (gte mso 9)|(IE)]>

14

		</td><td width="200" valign="top">

15

		<![endif]-->

16

		[column to go here]

17

		<!--[if (gte mso 9)|(IE)]>

18

		</td>

19

		</tr>

20

		<tr>

21

		<td width="200" valign="top">

22

		<![endif]-->

23

		[column to go here]

24

		<!--[if (gte mso 9)|(IE)]>

25

		</td><td width="200" valign="top">

26

		<![endif]-->

27

		[column to go here]

28

		<!--[if (gte mso 9)|(IE)]>

29

		</td><td width="200" valign="top">

30

		<![endif]-->

31

		[column to go here]

32

		<!--[if (gte mso 9)|(IE)]>

33

		</td>

34

		</tr>

35

		</table>

36

		<![endif]-->

37

	</td>

38

</tr>

এবার আমরা প্রতিটি কন্ডিশনাল সেলে [column to go here] প্লেসহোল্ডারের পরিবর্তে নিচের মত একটি করে টেবিল যুক্ত করবো:

1

<table class="column">

2

    <tr>

3

		<td class="inner contents">

4

			<p class="h2">Heading</p>

5

			<p>Class eleifend aptent taciti sociosqu ad litora torquent conubia</p>

6

			<p><a href="#">Read more</a></p>

7

		</td>

8

	</tr>

9

</table>

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

আরো কলাম যুক্ত করা

আমরা এই টিউটরিয়ালের জন্য আর কোনও মাল্টি-কলাম লেআউট যুক্ত করবো না, কিন্তু আপনি চাইলে আপনার লেআউটে যত খুশী কলাম যুক্ত করতে পারেন। আপনাকে যা করতে হবে তা হচ্ছে আপনার সবগুলো কন্টেন্ট ব্লক যাতে আপনার কন্টেইনারের প্রস্থ অনুযায়ী হয় এবং এগুলো ধারণ করতে আপনার আউটলুকের কন্ডিশনাল টেবিলে যেন সঠিক সংখ্যক সেল এবং সারিও থাকে তা নিশ্চিত করা।

৮। দুই কলামের সাইডবার লেআউট যুক্ত করা

এরপর আমরা 500px প্রস্থের একটি কলাম এবং একটি আইকনের জন্য 100px সাইডবারসহ দুই কলামের একটি লেআউট তৈরি করবো।

প্রথমত, আমরা .left-sidebar ক্লাসের মাধ্যমে একটি সারি ও ঘর যুক্ত করবো। এবং এটার ভিতরে আমরা আউটলুকের জন্য আমাদের কন্ডিশনাল টেবিল যাতে একটি সারি ও দুটি অসম কলাম আছে তা যুক্ত করবো:

1

<tr>

2

    <td class="left-sidebar">

3

		<!--[if (gte mso 9)|(IE)]>

4

		<table width="100%">

5

		<tr>

6

		<td width="100">

7

		<![endif]-->

8

		[column to go here]

9

		<!--[if (gte mso 9)|(IE)]>

10

		</td><td width="500">

11

		<![endif]-->

12

		[column to go here]

13

		<!--[if (gte mso 9)|(IE)]>

14

		</td>

15

		</tr>

16

		</table>

17

		<![endif]-->

18

	</td>

19

</tr>

তারপর প্রতিটি কলামে, [column to go here] স্থানধারক বা প্লেসহোল্ডারের পরিবর্তে, আমরা একটি টেবিল যোগ করবো। এবার আমরা এগুলোর একটিকে .column .left এবং অপরটিকে .column .right নামে ডাকবো, কারণ এগুলোর প্রস্থ আলাদা।

দ্রষ্টব্য: এখানে আমি একটি একক এলিমেন্টে একাধিক ক্লাস ব্যবহার করেছি। কিছু ইনলাইনার টুল এবং/অথবা ESP এটা সাপোর্ট নাও করতে পারে, তাই প্রথমে আপনার সিস্টেম অথবা প্ল্যাটফর্মের সাথে কাজ করে কিনা তা পরীক্ষা করুন। আমি আগেই উল্লেখ করেছি, আমার সিএসএস ইনলাইন করতে আমি ইন লাইনার ডটকম ব্যবহার করেছি, যা একাধিক ক্লাস সমূহ সাপোর্ট করে।

প্রথম কলামে, বাম দিকের টেবিলটি যুক্ত করুন, যাতে আমাদের আইকনটি আছে:

1

<table class="column left">

2

    <tr>

3

		<td class="inner">

4

			<img src="images/sidebar-01.jpg" width="80" height="80" alt="" />

5

		</td>

6

	</tr>

7

</table>

যেহেতু এই ইমেজগুলো খুব ছোট তাই আমরা যাতে এগুলো একই সাইজের হয় সেজন্য এগুলোকে নির্দিষ্ট পিক্সেল প্রস্থ হিসেবে প্রদর্শন করাই নিরাপদ।

তারপর দ্বিতীয় কলামে, ডান দিকে টেবিলটি টেক্সট এবং লিঙ্ক সহ যুক্ত করুন:

1

<table class="column right">

2

    <tr>

3

		<td class="inner contents">

4

			Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="#">Read&nbsp;on</a>

5

		</td>

6

	</tr>

7

</table>

এই টেবিলগুলোর ভিতর নেস্টেড করা কিছু নেই তাই এগুলো খুব সহজ, আমি এগুলোকে একটি div এ নেস্টেড করার পরিবর্তে মার্কআপে display: inline-block হিসেবে সেট করবো। উপরের আলোচনা অনুযায়ী, এটা তখনই ব্যবহার করতে পারবেন যখন আপনি ভেতরে আর কোন এলিমেন্ট সমূহ নেস্ট করতে না চান। আপনি যদি অনেক বেশি নেস্টিং করেন তাহলে এই টেবিলটি একটি div এর মাঝখানে রাখতে পারেন এবং এরপর column .right ক্লাস ব্যবহার করুন।

এবার চলুন কন্টেইনারটি স্টাইল করি এবং কলামসমূহ সেটআপ করি:

1

/* Left sidebar layout */

2

.left-sidebar {

3

    text-align: center;

4

	font-size: 0;

5

}

6

.left-sidebar .column {

7

	width: 100%;

8

	display: inline-block;

9

	vertical-align: middle;

10

}

11

.left-sidebar .left {

12

	max-width: 100px;

13

}

14

.left-sidebar .right {

15

	max-width: 500px;

16

}

সবশেষে কিছু টেক্সট স্টাইল এবং লিংক কালার যুক্ত করতে হবে:

1

.left-sidebar .contents {

2

    font-size: 14px;

3

	text-align: center;

4

}

5

.left-sidebar a {

6

	color: #85ab70;

7

}

এখন নিশ্চয়ই আপনি আপনার বাম দিকের সাইডবারের লেআউটটি পেলেন এবং যখন আপনি ব্রাউজার রিসাইজ করে এটাকে আরো ছোট করবেন তখন আইকনটি টেক্সট এর উপর উঠে যাবে এবং মাঝ বরাবর দেখাবে‌। ‌

৯। একটি বিপরীত সাইডবার লেআউট যুক্ত করুন

এবার আমরা আমাদের সাইডবার লেআউটকে ডুপ্লিকেট করবো এবং এখন আমরা ডান দিকে একটি আইকন তৈরি করতে চাই যা ডেক্সটপে দেখা যাবে। কিন্তু মোবাইলের ক্ষেত্রে আমাদের আগের সাইডবার লেআউটের মতই আমরা এটাকেও একইভাবে দেখতে চাই যাতে আইকনটি টেক্সটের উপর থাকে।

প্রথমত, আমরা আমাদের সম্পূর্ণ সারিটি .left-sidebar সেলসহ কপি এবং পেস্ট করবো, এবং কনটেইনার সেল থেকে আমরা কেবল একটি জিনিস পরিবর্তন করবো, তা হচ্ছে ক্লাসের নাম .left-sidebar থেকে .right-sidebar এ পরিবর্তন করা

1

<tr>

2

    <td class="right-sidebar">

3

		<!--[if (gte mso 9)|(IE)]>

4

		<table width="100%">

5

		<tr>

6

		<td width="100">

7

		<![endif]-->

8

		<table class="column left">

9

			<tr>

10

				<td class="inner contents">

11

					<img src="images/sidebar-02.jpg" width="80" height="80" alt="" />

12

				</td>

13

			</tr>

14

		</table>

15

		<!--[if (gte mso 9)|(IE)]>

16

		</td><td width="500">

17

		<![endif]-->

18

		<table class="column right">

19

			<tr>

20

				<td class="inner contents">

21

					Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per&nbsp;inceptos</a>

22

				</td>

23

			</tr>

24

		</table>

25

		<!--[if (gte mso 9)|(IE)]>

26

		</td>

27

		</tr>

28

		</table>

29

		<![endif]-->

30

	</td>

31

</tr>

আর বাকি সব কিছু একই রকম থাকবে।

আমাদের সুবিধার জন্য আমরা dir="rtl" (অর্থাৎ ডান থেকে বাম দিক) ব্যবহার করবো। এই প্রপার্টি টি অক্ষর সমূহকে ডান থেকে বাম দিকে পরিচালনা করে, যেমন আরবির ক্ষেত্রে হয়ে থাকে। কিন্তু আমাদের ক্ষেত্রে এটা দিয়ে, আমরা সব ইমেইল ক্লায়েন্টকে আমাদের এলিমেন্টগুলো বিপরীত দিক থেকে রেন্ডার করতে বলবো।

এজন্য প্রথমে আপনাকে (.right-sidebar) কনটেইনারে, dir="rtl" যুক্ত করতে হবে। এতে আমাদের ভাসমান টেবিল গুলো ডান দিক থেকে বাম দিকে রেন্ডার হবে। এজন্য, আমাদের ওপেন ট্যাগ টি নিচের মত দেখাবে:

1

<td class="right-sidebar" dir="rtl">

এরপর আউটলুক কন্ডিশনাল টেবিলে, আমরা <table> ট্যাগ এর ক্ষেত্রেও dir="rtl" যুক্ত করব কারণ এর মাধ্যমে আমরা টেবিলের <td> ট্যাগ টিকে বিপরীত দিকে রেন্ডার করতে বলবো।

এবার আমাদের ওপেনিং কন্ডিশনাল কমেন্টটি নিচে মত দেখাবে:

1

<!--[if (gte mso 9)|(IE)]>

2

<table width="100%" dir="rtl">

3

<tr>

4

<td width="100">

5

<![endif]-->

পরিশেষে আমরা, .column-left ক্লাসে dir="ltr" যুক্ত করবো। এবং একই সাথে .column-right টেবিলেও, কারণ এগুলোর মধ্যে কিছু কনটেন্ট আছে, আর কনটেন্টগুলো যেহেতু ইংলিশে তাই তা বাম থেকে ডান দিকে প্রদর্শন করতে হবে। আমরা যদি এগুলোর জন্য আলাদা করে ডাইরেকশন সেট না করি তাহলে এগুলো তাদের মূল এলিমেন্টের মতই ডান দিক থেকে বাম দিকে প্রদর্শিত হবে।

আমাদের .column-left টেবিলটি এখন এমন দেখাবে:

1

<table class="column left" dir="ltr">

2

    <tr>

3

		<td class="inner contents">

4

			<img src="images/sidebar-02.jpg" width="80" height="80" alt="" />

5

		</td>

6

	</tr>

7

</table>

এবং আমাদের .column-right এখন এমন দেখাবে:

1

<table class="column right" dir="ltr">

2

    <tr>

3

		<td class="inner contents">

4

			Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per&nbsp;inceptos</a>

5

		</td>

6

	</tr>

7

</table>

পরিশেষে আমাদের সম্পূর্ণ সারিগুলো এখন এমন দেখাবে:

1

<tr>

2

    <td class="right-sidebar" dir="rtl">

3

		<!--[if (gte mso 9)|(IE)]>

4

		<table width="100%" dir="rtl">

5

		<tr>

6

		<td width="100">

7

		<![endif]-->

8

		<table class="column left" dir="ltr">

9

			<tr>

10

				<td class="inner contents">

11

					<img src="images/sidebar-02.jpg" width="80" height="80" alt="" />

12

				</td>

13

			</tr>

14

		</table>

15

		<!--[if (gte mso 9)|(IE)]>

16

		</td><td width="500">

17

		<![endif]-->

18

		<table class="column right" dir="ltr">

19

			<tr>

20

				<td class="inner contents">

21

					Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per&nbsp;inceptos</a>

22

				</td>

23

			</tr>

24

		</table>

25

		<!--[if (gte mso 9)|(IE)]>

26

		</td>

27

		</tr>

28

		</table>

29

		<![endif]-->

30

	</td>

31

</tr>

এবং সবশেষে, আমাদের স্টাইল যোগ করা যাক, যা ঠিক আমাদের .left-sidebar এর মতই হবে, শুধুমাত্র লিঙ্ক এর রং ছাড়া:

1

/* Right sidebar layout */

2

.right-sidebar {

3

    text-align: center;

4

	font-size: 0;

5

}

6

.right-sidebar .column {

7

	width: 100%;

8

	display: inline-block;

9

	vertical-align: middle;

10

}

11

.right-sidebar .left {

12

	max-width: 100px;

13

}

14

.right-sidebar .right {

15

	max-width: 500px;

16

}

17

.right-sidebar .contents {

18

	font-size: 14px;

19

	text-align: center;

20

}

21

.right-sidebar a {

22

	color: #70bbd9;

23

}

এভাবেই আমরা শুরু করতে পারি! এখন আমাদের বিপরীত দিক থেকে দুটি সাইডবার আছে, কিন্তু যখন মোবাইলে সবকিছুই একটির ওপর আরেকটি থাকবে তখন সাইডবার দুটো টেক্সট এর উপর দেখা যাবে।

১০। মিডিয়া কোয়েরি দিয়ে আরও উন্নত করে তুলুন

এখন আপনি একটি সম্পূর্ণ ইমেইল টেমপ্লেট পেলেন যা কোন মিডিয়া কোয়েরি ছাড়াই সব জায়গায় রেস্পন্সিভ দেখাবে! কিন্তু এছাড়াও বেশ কিছু ই-মেইল ক্লায়েন্ট আছে যাতে মিডিয়া কোয়েরির প্রয়োজন হতে পারে। তাই আমরা আমাদের ইতিমধ্যেই সুন্দর টেমপ্লেটটি সামান্য কিছু পরিবর্তনের মাধ্যমে আরো কিছুটা উন্নত করতে পারি, যাতে আইওএস মেইলের মতো ক্লায়েন্টে সবকিছু আরো সুন্দর ভাবে দেখা যায়।

প্রথমত আমাদের কলামগুলো 400px এর উপরের যেকোনো ভিউপোর্ট এর জন্য 100% প্রশস্ত করতে হবে। এছাড়াও আমরা তিন কলামের ইমেজগুলোর প্রস্থ 50% হিসেবে সীমিত করব, যাতে এগুলো খুব বেশি বড় না দেখায়। আমাদের যা করতে হবে তা হচ্ছে এই কলামগুলোর max-width রিসেট করা, কারণ আপনার নিশ্চয়ই মনে আছে, এগুলোর প্রস্থ ইতিমধ্যেই 100% আছে এবং কেবল max-width এর কারণেই তা বাধাগ্রস্ত হচ্ছে।

তাই সিএসএস ফাইলে নিচের অংশটি যুক্ত করুন:

1

/*Media Queries*/

2

@media screen and (max-width: 400px) {

3

    .two-column .column,

4

	.three-column .column {

5

		max-width: 100% !important;

6

	}

7

	.three-column img {

8

		max-width: 50% !important;

9

	}

10

}

তারপর 401px এবং 600px প্রশস্ততার মধ্যে আমরা নিচের কোডগুলো যুক্ত করে ২ এবং ৩ কলামের লেআউট ডেক্সটপে কেমন দেখাবে তা ঠিক করবো, একই সাথে সংকুচিত হলে যাতে মাপ মত হয়।

1

@media screen and (min-width: 401px) and (max-width: 620px) {

2

    .three-column .column {

3

		max-width: 33% !important;

4

	}

5

	.two-column .column {

6

		max-width: 50% !important;

7

	}

8

}

এটা আসলেই কি সম্ভব তা দেখানোর জন্য একটি সম্পূর্ণ ঐচ্ছিক সমন্বয়-- যেসব ডিভাইসে মিডিয়া কোয়েরি সাপোর্ট করে সেগুলোর জন্য আপনি আপনার মন মত ফলাফল পেতে যেভাবে খুশি এই কোডগুলো সাজিয়ে নিতে পারেন।

১১। আপনার কোডের লাইন ঠিক করা

পরিশেষে আপনি যদি আপনার কোড ইনলাইন করতে চান তবে style.css থেকে কনটেন্ট কপি করুন এবং তা আপনার ইন্ডেক্স এইচটিএমএল ডকুমেন্টের <head> এর ভিতর <style type="text/css"> </style> ট্যাগদ্বয়ের মাঝে পেস্ট করুন। সম্পূর্ণ ফাইলটি তারপর inliner.cm এ কপি এবং পেস্ট করুন ও ফলাফলের জন্য অপেক্ষা করুন। প্রসেসিং হয়ে গেলে কেবল কনটেন্টগুলো বক্সে কপি করুন এবং আপনি মেইল পাঠানোর জন্য একেবারে প্রস্তুত!

এবং আপনি এখন এটা পেলেন!

বেশ ভালো করেছেন! এখন আমরা সম্পূর্ণ কার্যকর একটি রেস্পন্সিভ এইচটিএমএল ইমেইল টেম্পলেট পেলাম, যাতে মাত্র ২০ লাইনের চেয়েও কম মিডিয়া কোয়েরি ব্যবহার করা হয়েছে।

কিছু চূড়ান্ত নোট এবং টিপস

• এই ধরনের ই-মেইল ডেভলপমেন্টের ক্ষেত্রে আমি দেখেছি যে সহজ সরল ও অভিন্নতাই মূল বিষয়। বিষয়টি জটিল হয়ে যাবে যদি আপনি ভিন্ন ভিন্ন কলামের ক্ষেত্রে ভিন্ন ভিন্ন প্যাডিং ব্যবহার করেন। এই টিউটোরিয়ালের জন্য আপনি নিশ্চয়ই খেয়াল করেছেন আমি প্যাডিং এর অভিন্নতা .inner ক্লাস এর জন্য টেন পিক্সেল রেখেছি যা প্রতিটি লেআউটে প্রয়োগ হবে। এটা গুরুত্বপূর্ণ কারণ মোবাইলে যেসব জিনিস একটির উপর আরেকটি থাকবে তাতে প্যাডিং অভিন্ন হওয়া প্রয়োজন।

• অনেক সময় আপনাকে লেআউটের বাহিরের অংশটি গণনার মধ্যে রাখতে হবে যাতে আপনি সঠিকভাবে বহির্ভাগের প্রস্থ নির্ণয় করতে পারেন। তবে এটা করার জন্য বাহিরের প্রস্থ এর পরিবর্তে প্যাডিং এর মান কত তার উপর নির্ণয় করে তৈরি করতে হবে। তারপর আপনি ভেতরের দিক তৈরি করতে পারেন।
• এই পদ্ধতিতে সাধারণত ব্রাউজারে ডিজাইন করাই সবচেয়ে ভালো উপায়। যদিও এই পদ্ধতিতে নির্দিষ্ট ডিজাইনের ইমেইলটিকে সুন্দর করে তৈরি করা একটি চ্যালেঞ্জিং কাজই বটে।
• এই মেথডটি প্রয়োগ করার সময় ইমেইল ডিজাইন স্বাভাবিকের চেয়ে প্রশস্ত মাপ অনুযায়ী তৈরি করা উচিত। কারণ আপনি নিশ্চয়ই জানেন যে, লেআউটটি নিজে থেকেই ছোট ভিউপোর্ট অনুযায়ী এটা কে খাপ খাইয়ে নিবে। এমন কি ওয়েব মেইল এর ক্ষেত্রেও। একমাত্র বাধা হচ্ছে আউটলুক যাতে এখনো কিছু কন্ডিশনাল টেবিল ব্যবহার করা দরকার। যাতে সবকিছু সঠিকভাবে দেখা যায়। কারণ আউটলুক এর ব্যবহারকারীরা সবচেয়ে প্রশস্ত মাপের ইমেইল দেখে অভ্যস্ত। যদিও আপনাকে এর সর্বনিম্ন মাপ কি হতে পারে তা মাথায় রাখতে হবে কিন্তু সাধারনত 500 থেকে 600 পিক্সেল মাপের অধিক প্রশস্ত ইমেইল তৈরি করার কথাও মাথায় রাখতে হবে।
• পরিশেষে আপনাকে নিশ্চিত হতে হবে যে আপনি ফিজিক্যাল পিক্সেল সাইজ অনুযায়ী ইমেজ ব্যবহার করছেন কি না। এটা করার সবচেয়ে ভালো উপায় হচ্ছে আপনার লেআউটটি প্রথমে কোড করা তারপর ব্রাউজারের টুল থেকে ইন্সপেক্টর ব্যবহার করে কতটুকু জায়গা আছে তা নির্ণয় করা। তারপর আপনি আপনার ইমেজ এই পরিমাপ অনুযায়ী তৈরি করে নিতে পারেন। সবশেষে এটি আবারো চেক করে নিন যাতে সব কিছু সঠিক থাকে। আপনি যদি এটা করতে না পারেন তাহলে আউটলুকে আপনার ভুলটি ধরা পড়বে। কারণ এটা প্রত্যেকটা ইমেজ তার মূল ফিজিক্যাল পরিমাপ অনুযায়ী প্রদর্শন করে।

আইকন সমূহ

আবারো ধন্যবাদ! আমার টিউটোরিয়ালে ব্যবহৃত আইকন গুলোর জন্য পিয়েরে বরডিন পেইজে যেতে পারেন।