HTML5 রেসপন্সিভ ওয়েব ডিজাইন

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

একটি ওয়েব পেজের রেসপন্সিভনেস বলতে ব্রাউজারে লোড হওয়ার পর মিডিয়াম অনুযায়ী ওয়েব পেজ থেকে পাওয়া আউটপুট বা প্রতিক্রিয়াকে বোঝায়।

HTML-এ অনেক সীমাবদ্ধতা ছিল, যা নতুন ভার্সনের প্রয়োজনীয়তা তৈরি করেছিল। ওয়েব ডিজাইনাররা পরিবর্তনশীল প্রযুক্তির সাথে তাল মিলিয়ে ওয়েব পেজ তৈরি করার নমনียত্ব পায়নি।

সর্বশেষ প্রযুক্তি ব্যবহারকারীদের ডেস্কটপ, ল্যাপটপ, মোবাইল ফোন, আইপ্যাড ইত্যাদিতে ওয়েব পেজ অ্যাক্সেস করার সুবিধা দিয়েছে। 게다가, এই সব ডিভাইস ভিন্ন ভিন্ন ডাইমেনশন সহ আসছে। ওয়েব ডিজাইনাররা এমন একটি সমাধান খুঁজছিলেন যা সব ডিভাইসের জন্য ফিট হবে। জবাব হিসেবে HTML5 এসেছে।

লিকวিড লে আউট

HTML5 হলো HTML, CSS এবং JavaScript-এর একটা গুচ্ছ। এটি ব্যবহারকারীদের লিকুইড বা নমনีย লে আউট তৈরি করতে দেয়, যেন পানি। যেমন পানি তার কন্টেইনারের আকার গ্রহণ করে, ঠিক তেমনি লিকুইড লে আউট ডিজাইনারদের তাদের কন্টেন্ট নির্দিষ্ট কন্টেইনারে ফ্লোট করতে দেয়। একই ওয়েবসাইট আইপ্যাডে খোলা হলে তার ডাইমেনশন অনুযায়ী এডজাস্ট হবে, এবং একই URL মোবাইলে অ্যাক্সেস করলে তার ডাইমেনশন অনুযায়ী ফিট হবে।

ওয়েব ডিজাইনারদের আর একটি অনুরোধ ছিল কন্টেন্ট সম্পর্কে। মোবাইল স্ক্রিনে ভিন্ন কন্টেন্ট এবং ল্যাপটপ স্ক্রিনে ভিন্ন কন্টেন্ট থাকলে কী হবে? আমি একটি সহজ উদাহরণ দিয়ে এর পেছনের মনস্তাত্ত্বিক lý thuyết ব্যাখ্যা করছি। ধরা যাক, আপনি আপনার অফিসে আছেন এবং হঠাৎ আপনার টিম আউটডোর লাঞ্চ পার্টির পরিকল্পনা করে। আপনি আপনার ফোন বের করেন যা একটি ওয়েবপেজ খোলে আশেপাশের রেস্তোরাঁ খুঁজতে (যেমন zomato, dineout ইত্যাদি) এখন আপনার মানদণ্ড অনুযায়ী ফিল্টার করুন এবং যা আপনার প্রয়োজন তার সাথে সবচেয়ে ভালো মিলে যাওয়া রেস্তোরাঁ বেছে নিন। এখন, যদি আপনার টিম আগামী সপ্তাহান্তে লাঞ্চ পার্টির পরিকল্পনা করে। এই পরিস্থিতিতে, আপনি সম্ভবত আপনার ল্যাপটপ খুলবেন; একই ওয়েবসাইটের ওয়েবপেজ খুলবেন, পেজটি নেভিগেট করবেন, ওয়েবসাইটের অফার, ফ্রিলস এবং অ্যাড-অন চেক করবেন।

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

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

রেসপন্সিভ ওয়েব ডিজাইন হলো ইউজারের ডিভাইস স্ক্রিন রেজোলিউশন অনুযায়ী লে আউট অ্যাডজাস্ট করে একটি ওয়েবপেজ ডেভেলপ করার কনসেপ্ট। এটি ওয়েব ডিজাইনারদের লে আউট টইক করতে এবং প্রাসঙ্গিক তথ্য প্রথমে উপস্থাপন করতে দেয়: ঘন্টা, ফোন নম্বর, দিকনির্দেশনা এবং কিংবা মেনুর লিংক। একই সাথে আপনার ডেস্কটপে, রেস্তোরাঁর পেজে সকল ঘণ্টা-কাঁটা থাকবে যেগুলো আপনি ফোনে ব্রাউজ করার সময় খেয়াল করেননি।

রেসপন্সিভ ওয়েব ডিজাইনিং (RWD)-এ লে আউট করা হয় নমনีย বা লিকুইড লে আউট প্যারামিটার ব্যবহার করে (যেমন ems এবং শতাংশ) ফাইনাইট মান (যেমন পিক্সেল, পয়েন্ট ইত্যাদি) ব্যবহার না করে।

আপনার পেজগুলিতে রেসপন্সিভনেস সক্ষম করতে, পেজের কাঠামো পরিবর্তন করা হয় এবং HTML5-এর বেসিক কনসেপ্ট প্রয়োগ হয়। HTML5-এ কোড লিখার বেসিক গাইডলাইনগুলো হলো:

• কন্টেন্ট HTML ফাইলে যায়
• দৃষ্টি এবং প্লেসমেন্ট CSS ফাইলে যায়
• ভ্যালিডেশন JavaScript ফাইলে যায়

অতএব, রেসপন্সিভনেস পেতে, আমাদের ডিভাইসের স্ক্রিন সাইজ পরিবর্তন অনুযায়ী CSS ফাইলগুলো রিপ্লেস করতে হয়, যখন আমাদের কন্টেন্ট (যা HTML পেজগুলিতে থাকে) একই থাকে।

RWD কৌশল

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

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

অন্যদিকে, প্রগ্রেসিভ এনহ্যান্সমেন্ট ব্রাউজারের বদলে কন্টেন্টের ওপর ফোকাস করে। এই কনসেপ্টটি কন্টেন্ট-আউট আপ রোচ হিসেবে লেন, যেন পিনัট M&M চকলেটের কেসে।

• পিনั: সমৃদ্ধ সিমান্টিক HTML-এ মার্কআপ করা কন্টেন্ট
• সমৃদ্ধ ক্রিমি CSS-এ কোয়েটেড

JS হার্ড ক্যান্ডি শেল হিসেবে যোগ করা হয়।

RWD ফ্রেমওয়ার্ক

একটি HTML5 ফ্রেমওয়ার্ক হলো পূর্ব-তৈরি টেমপ্লেট যার সাথে পূর্ব-নির্ধারিত পুনরায় ব্যবহারযোগ্য CSS এবং JS ফাইল এবং পেজে ডামি টেক্সট কন্টেন্ট থাকে। এগুলো নবীন ডেভেলপারদের বেসিক ডিজাইনিং-এ কিক স্টার্ট করতে সাহায্য করে। লে আউটগুলো ডিফাইন করা থাকে এবং ডিজাইনগুলো তৈরি করা থাকে।

রেসপন্সিভনেস ইমপ্লিমেন্ট করার জন্য মার্কেটে একাধিক ফ্রেমওয়ার্ক উপলব্ধ। সবচেয়ে জনপ্রিয় এবং সহজে ইমপ্লিমেন্ট করা যাবে - Twitter Bootstrap। তালিকায় আরও আছে, Foundation, Skeleton, Boilerplate, Kickstart এবং অন্যান্য অনেক। অধিকাংশ ফ্রেমওয়ার্ক গ্রিড সিস্টেম বেস ব্যবহার করে প্রাথমিক লে আউট ডেভেলপমেন্টের জন্য।

Twitter Bootstrap মোবাইল-ফাস্ট আপ রোচ ব্যবহার করে, ফ্রি টু ইউজ এবং ইजी টু ইনস্টল। জেনেরিক CSS ফাইল প্যাকেজের অংশ, যা ওয়েব পেজের অধিকাংশ এলিমেন্ট এবং কন্ট্রোল ডিজাইন করতে সাহায্য করে। বিভিন্ন ধরনের লে আউট উপলব্ধ যা ওয়েব পেজ বিল্ড করতে আপনাকে সাহায্য করে।

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