মোবাইল ফ্রেন্ডলী ওয়েবসাইট কেন এবং কিভাবে?
যারা ওয়েব ডিজাইন নিয়ে কাজ করেন তাদের জন্য আজকের আর্টিকেলটি খুবই গুরুত্বপূর্ণ। তাই প্রথমে আলোচনা করব, মোবাইল ফ্রেন্ডলী ওয়েবসাইট বলতে আসলে কি বুঝানো হয়? যে সকল ওয়েবসাই্টের লেখা, ছবি, সাইডবার, মেনু, হেডার, ফুটার, ভিডিও প্লেয়ার এবং অন্যান্য কন্টেন্ট সমুহ 320 x 480 ফিক্সেলের আইফোন থেকে লইয়া 1920 x 1200 ফিক্সেলের ডেক্সটপ পর্যন্ত সকল ডিভাইসে এমন ভাবে উপাস্থাপন করা, যাতে যে কোন ইউজারের দেখতে, পড়তে, বুঝতে এবং সহজ ভাবে ব্যবহার করতে পারবে এমন ওয়েবসাইটেকে রেস্পন্সিভ ওয়েবসাইট বলা হয়। আর যেহেতু, মোবালের রেজুলুশন খুবই ছোট, সেহেতু মোবাইলের জন্য সকল কন্টেন্টকে সুন্দর ভাবে ফুটিয়ে তুলাই হচ্ছে, মোবাইল ফ্রেন্ডলী ওয়েবসাইট। যদিও ছোট রেজুলুশনে 176 x 220 ফিক্সেলের মোবাইল আছে, তেমনি বড় রেজুলুশনের 2560 x 1440 ফিক্সেলের ডেক্সটপ এবং এর চেয়ে বড় মনিটর রয়েছে। এছাড়াও বর্তমানে অনেক বড় রেজুলুশনের টিভি রয়েছে যার সাথে উইন্ডো ব্যবহৃত হচ্ছে। কিন্তু ওয়েবসাইটের জন্য এগুলো তেমন ব্যবহার করা হয় না, তাই আপাতত এসব নিয়ে মাথা না ঘমালে ও চলবে। তাছাড়া সিএসএস ফ্রেমওয়ার্কে ছোট বড় সকল রেজুলুশনের জন্য সিএসএস কিউরী করা থাকে।
এখন জানব, মোবাইল ফ্রেন্ডলী ওয়েবসাইট কেন করব ? পৃথিবীতে বর্তমানে অর্থাৎ ২০১৯ সালের জরিপ অনুযায়ী প্রায় ৬৪% মানুষ মোবাইল ব্যবহার করছে। তার মধ্য প্রায় ৬০% পারসেন্টই হচ্ছে এন্ড্রয়েড ব্যবহারকারী। সুতারাং এত বড় সংখ্যক জেনারেশনকে আপনি আপনার ওয়েবসাইট ভিজিট করা থেকে বিরত রাখা বোকামী ছাড়া আর কিছুই নয়। এছাড়াও সাম্প্রতি গোগল থেকে, মোবাইল ফ্রেন্ডলী ওয়েবসাইটকে রেঙ্কিং পয়েন্টে উপরে রাখার ঘোষনা দিয়েছে। তাহলে বুঝতেই পারছেন, এখন ওয়েবসাইট ডিজাইন করতে হলে তা অবশ্যই মোবাইল ফ্রেন্ডলী হতে হবে।
এখন আসি জেনে নিই, মোবাইল ফ্রেন্ডলী ওয়েবসাইট কিভাবে করব ? প্রথমতঃ- সিএসএস কিউরী ব্যবহার করে ওয়েবসাইটকে রেস্পন্সিভ করতে পারেন। তবে, সেটা কিছুটা সময় বেশি লাগবে। সময় বেশি লাগলেও আপনি নিজে কোড লিখে করলে লে-আউটকে যেমন ইচ্ছে তেমন করতে পারেন। নিজে কোড লিখে কোন একটি ডিজাইন করার মজাই আলাদা। তবে, আজ আমি এখানে বাছাই করা এমন তিনটি সিএসএস ফ্রেমওয়ার্ক নিয়ে আলোচনা করব। যা ব্যবহার করে খুবই সহজে আপনি আপনার ওয়েবসাইটকে রেস্পন্সিভ করতে পারবেন।
| ১ BootStrap |
|---|
|
বর্তমান সময়ে বুটস্ট্রাপকে সিএসএস ফ্রেমওয়ার্কের রাজা বলা যায়। কারণ এটা এমন একটি ওপেন সোর্স সিএসএস ফ্রেমওয়ার্ক যা রাজাদের মত বিখ্যাত। বুটস্ট্রাপকে টুইটার বুটস্ট্রাপ ও বলা হয়। গিটহাবের পপুলার প্রজেক্ট গুলোর মধ্য বুটস্ট্র্যাপ অন্যতম একটি প্রজেক্ট। পৃথিবীর অধিকাংশ ওয়েব ডিজাইনার তাদের ডিজাইনে বুটস্ট্রাপ ব্যবহার করেছে এবং করছে। বুটস্ট্রাপের গ্রিড সিস্টেম ডিজাইন এবং ডকুমেন্টেশন খুবই ভাল। তবে, বুটস্ট্র্যাপের কোন নিজস্ব কম্পোনেন্ট নেই। বুটস্ট্রাপ-4 ভার্শনে তাদের নিজস্ব বেশ কিছু এলিমেন্ট যুক্ত হয়েছে। এছাড়াও থার্ড পার্টি প্লাগিন যেমন গ্লিফাইকন, ফন্ট অসাম ইত্যাদি বুটস্ট্রাপের সাথে ব্যবহৃত হয়। সবচেয়ে বড় বিষয় যেটা, সেটা হচ্ছে- বুটস্ট্রাপের জন্য ইন্টারনেটে প্রচুর টিউটোরিয়াল এবং ডেমু পাওয়া যায়। |
|
| Demo | More information And Download |
| ২ foundation |
|---|
|
বুটস্ট্রাপের মত ফাউন্ডেশন এত পপুলার না হলেও ওপেন সোর্স এই ফ্রেমওয়ার্কটি বুটস্ট্রাপের চেয়ে কোন দিকে কম নয়। বর্তমান সময়ের ফ্রেমওয়ার্ক গুলোর মধ্য ফাউন্ডেশন অনেক সহজ এবং শক্তিশালী একটি ফ্রেমওয়ার্ক। এছাড়াও ফাউন্ডেশনের নিজস্ব কিছু কম্পোনেন্ট রয়েছে, যেমনঃ- কি-স্ট্রোক, জয়-রাইড, ফ্লেক্স, ভিডিও ইত্যাদি। ইদানিং ওয়েব টেমপ্লেট, ইমেইল টেমপ্লেট, মোবাইল অ্যাপ ডিজাইন ইত্যাদিতে ফাউন্ডেশন অনেক ব্যবহার হচ্ছে, যার কারণে অতি দ্রুত এই ফ্রেমওয়ার্কটি জনপ্রিয় হয়ে উঠছে। ফাউন্ডেশনের অফিসিয়াল সাইটে তাদের অনেক ভিডিও টিউটোরিয়াল রয়েছে। শিখতে আগ্রহী হলে ভিডিও গুলো দেখে সহজে শিখে নিতে পারেন। |
|
| Demo | More information And Download |
| ৩ BULMA |
|---|
|
বুটস্ট্রাপ এবং ফাউন্ডেশনের মত বালমাও একটি ওপেন সোর্স সিএসএস ফ্রেমওয়ার্ক। বালমা ফ্রেমওয়ার্ক শিখতে সহজ বলে এটি ওয়েব ডিজানারদের কাছে দিন দিন পপুলার হয়ে উঠছে। ফাউন্ডেশনের মত বালমারও বেশ কিছু নিজস্ব কম্পোনেন্ট রয়েছে, যেমনঃ- বক্স প্যানেল, ট্যাব, নেভিগেশন বার ইত্যাদি। বালমার সবচেয়ে অসাধারণ দিক হচ্ছে, বালমা একটি মডিউলার ফ্রেমওয়ার্ক। অর্থাৎ বালমা ব্যবহার করার জন্য সম্পূর্ণ কোড ডাউনলোড করার প্রয়োজন হয় না। আপনি আপনার ওয়েবসাইটে যে অংশটুকু ব্যবহার করবেন, শুধুমাত্র সেই অংশটুকু ডাউনলোড করে ব্যবহার করতে পারবেন। ফলে পেজের উপর লোড কম হয়। এছাড়াও বালমার ক্লাসগুলো যতেষ্ট রিডেবল, যার কারণে এগুলো মডিফাই করাও বেশ সহজ হয়। আমার কাছে বালমা ফ্রেমওয়ার্কটি সবচেয়ে বেশি ভাল লেগেছে। আপনি চাইলে যাচায় করে দেখতে পারেন। |
|
| Demo | More information And Download |
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন