Advertisement
  1. Web Design
  2. Email Design
Webdesign

একটি সাধারণ রেস্পন্সিভ এইচটিএমএল ইমেইল তৈরি করুন

by
Length:LongLanguages:

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

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

মিডিয়া কুয়েরীঃ সম্পূর্ণ সমাধানের অর্ধেক

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

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

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

কেন ফ্লুইড এখন জনপ্রিয়

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

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

আজকে আমরা যা তৈরি করবো:

Final-Product-Both

কাজ শুরু করা

চলুন, একটি খালি ক্যানভাস দিয়ে শুরু করি।

এখানে আমরা যা তৈরি করেছি তা হচ্ছে আমাদের বেসিক পেইজ যাতে header, doctype  এবং ব্যাকগ্রাউন্ড কালারসহ একটি কন্টেইনার টেবিল আছে (বডি এবং বিগ র‍্যাপার টেবিল দুটোর জন্যই, যেহেতু বডি ট্যাগ স্টাইল করা সম্পূর্ণ সাপোর্ট করে না)। এই বেসিক সেটআপ সম্পর্কে আরও তথ্য পেতে, খসড়া থেকে একটি এইচটিএমএল ইমেইল টেম্পলেট তৈরি করুন এই রচনাটি দেখুন।

এরপর আমি আমাদের মূল কন্টেন্ট টেবিলটি 'content' নামের একটি ক্লাসের সাহায্যে মধ্যভাগে যুক্ত করবো।

যেসব বিষয়ে নজর দিবেন

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

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

ইয়াহু থেকে মোবাইল স্টাইলসমুহ বাদ দেয়া!

লক্ষ্য করে দেখুন, বডি ট্যাগে একটি অতিরিক্ত অ্যাট্রিবিউট আছে। ইয়াহু মেইল আপনার মিডিয়া কুয়েরী খুব দ্রুত বদলে দিতে পারে, তাই এটা প্রতিহত করতে আপনাকে এট্রিবিউট সিলেক্টর ব্যবহার করতে হবে।  আমি এটা করার খুব সহজ একটি উপায় খুঁজে  পেয়েছি (ইমেইল অন এসিডে যেভাবে বলা হয়েছে) তা হচ্ছে বডি ট্যাগের সাথে একটি স্বাধীন এট্রিবিউট যুক্ত করা। আমি পরামর্শ অনুযায়ী 'yahoo' ব্যবহার করেছি, কিন্তু আপনি এটা যা খুশি তাই দিতে পারেন:

আপনি সিএসএস এ আপনার বডি ট্যাগের জন্য অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে নির্দিষ্ট ক্লাসসমূহ টার্গেট করতে পারবেন।

ফ্লুইড মেথডে দক্ষতার জন্য দুটি কৌশল

আপনি দেখতে পাচ্ছেন যে, আমাদের কনটেন্ট টেবিলটি ১০০% চওড়া হয়ে যাবে ফলে এটা ফ্লুইড হয়ে যাবে এবং স্মার্টফোন এবং ট্যাবলেট স্ক্রিনের সম্পূর্ণ জায়গা দখল করে নিবে। আমরা ম্যাক্সিমাম প্রশস্ততা সেট করেছি 600px, যাতে বড় ডীভাইসে স্ক্রিনের সম্পূর্ণ জায়গাটি দখল না করে।

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

১। Max-Width সাপোর্টের অভাব দূরীকরণ

দুর্ভাগ্যবশত, সব ধরণের ইমেইল ক্লায়েন্টে max-width  সমর্থন করে না। এজন্য, আমাদের ইমেইলটি আউটলুক এবং লোটাস নোটস 8 & 8.5 এ সঠিকভাবে প্রদর্শন করার জন্য, আমরা প্রতিটি টেবিল বেশ কিছু শর্তাধীন কোডের অধীনে রাখবো, যাতে বেশ কিছু প্রস্থসহ সব কিছু ধারণ করার জন্য স্বতন্ত্র একটি টেবিল তৈরি হয়। এটার লক্ষ্য হবে IE (যা লোটাস নোটে ব্যবহার করা হয়) এবং মাইক্রোসফট আউটলুক।

আমরা বেশ কিছু শর্তাধীন কোডের অধীনে আমাদের টেবিলগুলো রাখবো:

২। অ্যাপল মেইলের জন্য একটি সমাধান 

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

হেডার তৈরি করা

এখন আমরা আমাদের টেবিলের প্রথম সারিটি যুক্ত করবো — তা হচ্ছে হেডার। আমাদের তৈরি করা সারিতে নিচের স্টাইল যুক্ত করতে হবে:

এবং তারপর আপনার সিএসএস এ, হেডারের জন্য প্যাডিং যুক্ত করুন:

প্রথম রেস্পন্সিভ সারি যুক্ত করুন

এখন আমরা আমাদের প্রথম রেস্পন্সিভ সারি তৈরি করতে যাচ্ছি। আমরা এটা যেভাবে করেছি তা হচ্ছে 'align' এইচটিএমএল প্রোপার্টির মাধ্যমে পাশাপাশি দুটি টেবিল 'float' বা ভাসমান অবস্থায় রেখেছি।

বাম দিকের কলাম

নিচের মার্কআপটি দিয়ে আমাদের ছোট্ট "Hello!" অভিবাদনটি বদলে দিন:

আমরা আমাদের 70px টেবিল তৈরি করেছি এবং কিছু প্যাডিং যুক্ত করেছি যা দুটি কলামের মাঝখানে গাটার হিসেবে কাজ করবে।  কলামগুলো যখন মোবাইলে একটি অপরটির উপর থাকবে তখন নিচের প্যাডিংটির কারণে লম্বালম্বিভাবে কিছু ফাঁকা জায়গা তৈরি হবে। 

ডানদিকের কলাম

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

Responsive-AlignedTables

যদি আপনি 25px ফাঁকা জায়গা ছেড়ে যান, তাহলে আপনার টেবিলগুলো প্রত্যাশা অনুযায়ীই কাজ করবে।

Allow at least 25px of breathing room to stop Outlook from stacking your tables
আউটলুকে আপনার টেবিলগুলো যাতে ভেঙ্গে না ফেলে সেজন্য কমপক্ষে 25px জায়গা খালি রাখুন।

দাড়ান! আউটলুকের জন্য আরেকটি বিকল্প ট্রিক্স আছে

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


চালিয়ে যান...

ডানদিকের প্রশস্ত টেবিলের জন্য, আমরা কন্টেইনার টেবিলে ব্যবহার করা একই পদ্ধতি ব্যবহার করতে যাচ্ছি, যাতে একটি ক্লাস এবং একটি কন্ডিশনাল র‍্যাপার কোডও যুক্ত করা হবে। আমরা চাই, এই টেবিলটি যেন মোবাইলে ১০০% প্রশস্ত হয়, যার ফলে এটা বামপাশের টেবিলের নিচে দেখা যায়।

এখানে দেখতে পাচ্ছেন যে, এই টেবিলের জন্য আমি 'col425' নামে একটি ক্লাস তৈরি করেছি, আমাদের 425px প্রশস্ত কলাম। আমি এই টেবিলটি একটি কন্ডিশনাল কোডের ভিতর রেখেছি যা এটাকে 425px প্রশস্ত টেবিলের ভিতর আবদ্ধ করবে। এরপর আমরা আমাদের মিডিয়া কুয়েরীতে ক্লাস যুক্ত করেছি যা অ্যাপল মেইলের জন্যও তৈরি করেছি।

এবার আমাদের সেলের ভিতর আমরা স্টাইল করা হেডিং যুক্ত করেছি।

আমি এখানে প্রত্যেকটি সেলের স্টাইলের জন্য কিছু ক্লাস যুক্ত করেছি, তারপর আমরা একইভাবে অন্যান্য টেক্সট টাইপে পরে ব্যবহারের জন্যও কিছু স্টাইল যুক্ত করবো:

আমাদের হেডারটি এখন সম্পূর্ণ হয়ে গেছে, এবং আপনি নিচের দেখতে পাচ্ছেন যে কিভাবে কলামগুলো মোবাইলে একটি অপরটির উপর অবস্থান করছে। (কাজের সময় এটার প্রিভিউ দেখতে, আপনাকে সাময়িকভাবে min-device-width মিডিয়া কুয়েরীটি কমেণ্টে রুপান্তর করতে হবে, কারণ এর ফলে ডেক্সটপে একটি ফিক্সড প্রস্থ দেখা যাবে)।

01-header

একক কলামের পাঠ্য সারি তৈরি করা

একক কলামের টেক্সট বা পাঠ্য সারি তৈরি করতে, আমরা আমাদের '.content' টেবিলে একটি নতুন সারি যুক্ত করবো আমরা এই সারিগুলোতে কিছু পুনরায় ব্যবহার যোগ্য মানসহ একটি  'innerpadding' ক্লাস যুক্ত করবো। এছাড়াও আমরা প্রত্যেক সারিতে বর্ডার যুক্ত করতে  'borderbottom' নামে একটি ক্লাস যুক্ত করবো। 

এই সেকশনের জন্য আমাদের সিএসএস:

ডাবল কলামের রচনা তৈরি করা

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

'buttonwrapper' ক্লাসের মাধ্যমে আমরা এখানে একটি বাটন যুক্ত করেছি। এটাতে একটি ব্যাকগ্রাউন্ড কালার সেটসহ প্যাডেড সেল আছে, তার ভিতর একটি টেক্সট লিঙ্ক আছে। আমি এই পদ্ধিতিটিকেই অগ্রাধিকার দিয়ে থাকি, যেহেতু এটা আপনাকে ফ্লুইড প্রস্থের একটি বোতাম দিবে যা পুনরায় ব্যবহারযোগ্য টেম্পলেট তৈরির ক্ষেত্রে খুবই কার্যকর, কারণ এটা প্রতিবার ব্যবহারের সময় প্রতিটা বোতামের প্রস্থ বদলে যাবে। আপনি যদি ফিক্সড ওয়াইডথের বাটন চান তাহলে ক্যাম্পেইন মনিটর থেকে Bulletproof Button Generator ব্যবহার করতে পারেন।

বাটনের জন্য আমাদের স্টাইল হচ্ছে:

নতুন ক্লাস 'col380' এর সাথে প্রস্থ সেট করার পাশাপাশি অ্যাপল মেইলের জন্যও এই স্টাইলগুলো যুক্ত করবো।  এটা এখন এমন দেখাবে:

Email-TwoCol

একক কলামের ইমেজ তৈরি করা

এটা খুব সাধারণ একটি সারি; আমরা একটি ইমেজের প্রস্থ 100% সেট করে উচ্চতা যাতে স্বয়ংক্রিয়ভাবে নির্ধারিত হয় তা সিএসএস এর মাধ্যমে সেট করে দিতে পারি।

CSS এর ভিতর:

চূড়ান্ত প্লেইন টেক্সটের সারি তৈরি করা

পরিশেষে, আমরা নিচে কোনও বর্ডার ছাড়াই টেক্সটের সারি যুক্ত করতে পারি:

ফুটার তৈরি করা

ফুটার তৈরি করতে আমরা টেবিলের ভিতর আরও একটি নতুন সারি তৈরি করবো।  এর একটি সারি আমাদের সোশ্যাল মিডিয়া আইকনগুলোর আরেকটি টেবিলকে ধারণ করবে।

এরপর আমরা সিএসএস এ আমাদের ফুটারের জন্য নির্দিষ্ট স্টাইল যুক্ত করবো:

মোবাইলের জন্য বাটনসমূহ অপ্টিমাইজ করা

মোবাইলের জন্য সম্পূর্ণ বাটনটি যাতে লিঙ্ক হয় এটাই সব থেকে ভাল, কেবল পাঠ্য নয়, কারণ ছোট একটি টেক্সট লিঙ্ক আপনার আঙ্গুল দিয়ে টার্গেট করা সহজ নয়। কারণ, সব ডেস্কটপ ক্লায়েন্টের জন্য এই কাজটি করা সহজ নয় ( <a> ট্যাগে প্যাডিং সম্পূর্ণ সাপোর্ট করে না) তাই আমাকে মিডিয়া কুয়েরি ব্যবহার করে মোবাইল ভার্শন যুক্ত করতে হবে। 

আমাদের এখন <td>  থেকে রং বাদ দিয়ে <a>  ট্যাগে প্যাডিংসহ রঙ যুক্ত করতে হবে। 

IE9 এ Outlook.com এর একটি বাগ সরাতে আমি মিডিয়া কুয়েরীতে max-width এবং max-device-width  দুটোই ব্যবহার করবো।

এখন আপনি মোবাইলের রঙ্গিন বাটনের যেখানেই স্পর্শ করুন না কেন, তা একটি লিঙ্ক হয়ে যাবে!

মিডিয়া কুয়েরী আরও কিছুটা উন্নত করা

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

যেমন, আমরা লিঙ্কে ক্লাস যুক্ত করা মাধ্যেম আনসাবস্ক্রাইব লিঙ্কটিকে একটি বাটনে রূপান্তর করেছি:

তারপর মিডিয়া কুয়েরীতে নিচের সিএসএস যুক্ত করেছি:

Email-Footer-MQs

এছাড়াও আপনি .innerpadding, .header এবং .footer ক্লাসসমুহ টার্গেট করতে পারেন যাতে যেসব ক্লায়েন্টে মিডিয়া কুয়েরী সাপোর্ট করে তার প্যাডিং এর পরিমান হ্রাস করতে সমর্থ হয়।


টেস্ট করুন এবং ব্যবহার করুন!

পরিশেষে, বরাবরের মতই কোড ভেলিডেট করুন (W3C validator ব্যবহার করে-আপনি কেবল বডি ট্যাগে 'yahoo' এট্রিবিউট ব্যবহার করার কারণে একটি মাত্র এরর পাবেন) এবং লাইভ ডিভাইস ও ওয়েব প্রিভিউ সার্ভিস লিটমাস অথবা ইমেইল অন এসিড ব্যবহার করেও ভালোভাবে পরীক্ষা করুন।

এই রেস্পন্সিভ ইমেইলটি প্রত্যেকটি ইমেইল ক্লায়েন্টেই অসাধারণ দেখাবে!

যা শিখলেন তা ভিন্ন মাত্রায় নিয়ে যেতে, পরবর্তী টিউটোরিয়ালগুলো চেক করুন:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.