প্রতিক্রিয়াশীল ওয়েব ডিজাইন

প্রতিক্রিয়াশীল ওয়েব ডিজাইন (RWD) এমন একটি সেট-আপ যেখানে সার্ভার সব ডিভাইসে একই HTML কোড পাঠায় এবং ডিভাইসে কোনও পৃষ্ঠার রেন্ডারিং পরিবর্তন করতে CSS ব্যবহার করা হয়। যদি সব Googlebot ইউজার এজেন্ট এই পৃষ্ঠা এবং এটির অ্যাসেট (CSS, জাভাস্ক্রিপ্ট এবং ছবি) ক্রল করার অনুমতি থাকে তাহলে Google এর অ্যালগরিদম নিজে থেকে এই সেট-আপ শনাক্ত করতে পারবে।

প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করলে যে ডিভাইগুলিতে স্ক্রিন সাইজ অনুযায়ী ডিসপ্লে অ্যাডজাস্ট করা হয়, সেগুলিতে একই কোড পাঠানো হয়।

TL;DR

  • কন্টেন্ট কিভাবে অ্যাডজাস্ট করবে সেটি ব্রাউজারকে বোঝাতে meta name="viewport" ট্যাগ ব্যবহার করুন।
  • আরও ডকুমেন্টেশন জন্য আমাদের ওয়েব ফান্ডামেনটাল সাইট দেখুন।

meta name="viewport" ব্যবহার করে

সব ডিভাইসে আপনার পৃষ্ঠা সঠিকভাবে কাজ করার জন্য ব্রাউজারে সিগন্যাল দেওয়া হয়, ডকুমেন্টের উপরে একটি মেটা ট্যাগ যোগ করতে:

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

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

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

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

প্রতিক্রিয়াশীল ছবির জন্য <picture> এলিমেন্টটি ব্যবহার করুন।

সাধারণত, যদি আপনার সাইট সম্প্রতি ব্রাউজার Google Chrome অথবা Apple মোবাইল Safari এ চলে, তাহলে এটি আমাদের অ্যালগরিদমে কাজ করবে৷

কেন প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করবেন

আমরা প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করা সুপারিশ কারণ:

  • একটিমাত্র ইউআরএলের মাধ্যমে আপনার কন্টেন্ট লিঙ্ক এবং শেয়ার করার কাজটি ব্যবহারকারীদের কাছে সহজ হয়ে ওঠে।
  • Google-এর অ্যালগরিদমকে সংশ্লিষ্ট ডেস্কটপ/মোবাইল পৃষ্ঠার উপস্থিতি জানানোর প্রয়োজনীয়তার পরিবর্তে পৃষ্ঠাতে সঠিকভাবে ইন্ডেক্সিং প্রপার্টি নির্দেশ করতে সাহায্য করে।
  • একই কন্টেন্টের জন্য একাধিক পৃষ্ঠা বজায় রাখার কাজে ইঞ্জিনিয়ারিংয়ের জন্য কম সময় লাগে।
  • মোবাইল সাইটে প্রভাব ফেলে এমন সাধারণ ভুলগুলির সম্ভবনা কম করে।
  • ডিভাইসের জন্য অপ্টিমাইজ করে দেখার জন্য ব্যবহারকারীদের রিডাইরেক্ট করার প্রয়োজন হয় না, যার ফলে পৃষ্ঠা দ্রুত লোড করা যায়। এছাড়াও, ইউজার এজেন্টের ভিত্তিতে করা রিডাইরেক্টে সমস্যা বেশিরভাগ ক্ষেত্রেই সমস্যা হয়, যার ফলে আপনার সাইটে ব্যবহারকারীর অভিজ্ঞতা খারাপ হতে পারে (আরও বিশদে জানতে ইউজার এজেন্ট শনাক্ত করার সময় হওয়া ভুল" বিভাগটি দেখুন)।
  • Googlebot আপনার সাইট ক্রল করার সময় বেশি রিসোর্স ব্যবহার করা হয় না। কন্টেন্টের সবকটি ভার্সন খুঁজে পেতে একাধিক Googlebot ইউজার এজেন্টের মাধ্যমে বারবার ক্রল করার পরিবর্তে, প্রতিক্রিয়াশীল ওয়েব ডিজাইন করা পৃষ্ঠাগুলিকে একটিমাত্র Googlebot ইউজার এজেন্ট একবার ক্রল করলেই চলে। এইভাবে ক্রল করার কাজটি সহজ হয়ে ওঠার কারণে Google পরোক্ষভাবে আপনার সাইটের আরও বেশি কন্টেন্ট ইন্ডেক্স করতে এবং সাম্প্রতিক পরিবর্তন অনুযায়ী ইন্ডেক্স আপডেট করতে পারে।

প্রতিক্রিয়াশীল ওয়েব ডিজাইনের বিষয়ে জানতে আগ্রহী হলে ওয়েবমাস্টার সেন্ট্রাল-এ আমাদের ব্লগ পোস্ট এবং ওয়েবের মূল নীতি পড়ুন।

জাভাস্ক্রিপ্ট

মোবাইল-ফ্রেন্ডলি সাইট তৈরির জন্য রেন্ডার করার বিকল্প হিসাবে জাভাস্ক্রিপ্ট ব্যবহার করে এবং বিভিন্ন ডিভাইসে আলাদা আচরণ করে৷ সাধারণত পৃষ্ঠাতে কোন বিজ্ঞাপন বা ছবির রেজোলিউশন ভিন্নতা দেখার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা হয়৷

এখানে জাভাস্ক্রিপ্টের বিভিন্ন ব্যবহারের পদ্ধতি এবং কিভাবে Google এর সুপারিশ করা প্রতিক্রিয়াশীল ওয়েব ডিজাইন ব্যবহার করা হয় দেখানো হয়৷

সাধারণ কনফিগারেশন

মোবাইল-ফ্রেন্ডলি সাইটের জন্য জাভাস্ক্রিপ্টের তিনটি জনপ্রিয় বাস্তবায়ন হল:

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

এই কনফিগারেশন সম্পর্কে বিশদে জানুন।

জাভাস্ক্রিপ্ট-অ্যাডাপটিভ

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

যেমন, একটি পৃষ্ঠা যেটি সব ডিভাইসে একই HTML যেটি জাভাস্ক্রিপ্ট দেখানোর জন্য <script> উপাদান সহ এক্সটার্নাল URL এর অনুরোধ করে৷ সব ডিভাইসে জাভাস্ক্রিপ্ট URL এর অনুরোধ করলে একই কোড পাবে৷ ব্যবহার করার সময়, জাভাস্ক্রিপ্ট ডিভাইস শনাক্ত করে এবং পৃষ্ঠা সম্পর্কে কিছু পরিবর্তন করার সিদ্ধান্ত নেয়,যেমন ডেস্কটপ বিকল্পের পরিবর্তে স্মার্টফোন-ফ্রেন্ডলি ছবি বা বিজ্ঞাপন কোড ব্যবহার করা৷

এই কনফিগারেশনটি প্রতিক্রিয়াশীল ওয়েব ডিজাইনের সাথে সম্পর্কিত এবং আমাদের অ্যালগরিদম এই সেট-আপটিকে নিজে থেকেই শনাক্ত করতে পারে। এছাড়া, এই কনফিগারেশনে Vary HTTP হেডারের প্রয়োজন নেই কারণ পৃষ্ঠার URL এবং এটির অ্যাসেট ডায়নামিকভাবে কন্টেন্ট দেখায় না৷ এই সুবিধার কারণে, যদি আপনার ওয়েবসাইটের যদি জাভাস্ক্রিপ্ট ব্যবহার করার প্রয়োজন হয়, তাহলে এই কনফিগারেশন আমরা সুপারিশ করি৷

সম্মিলিত শনাক্তকরণ

সম্মিলিত শনাক্তকরণ এমন একটি সেট-আপ যেখানে সার্ভার জাভাস্ক্রিপ্টে ট্যানদম হিসাবে ক্লায়েন্ট হয়ে ডিভাইসের অবস্থা অনুযায়ী কন্টেন্ট দেখানো হয়ে থাকে৷

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

যেহেতু সার্ভার আলাদা ইউজার এজেন্টের জন্য আলাদা HTML দেখায়, তাই সম্মিলিত শনাক্তকরণকে এক ধরনের ডায়নামিক সার্ভিং কনফিগারেশন হিসেবে বিবেচনা করা হয়। ডায়নামিক সার্ভিং বিভাগে বিষয়টি বিশদে ব্যাখা করা রয়েছে। সংক্ষেপে বলতে গেলে, যদি এমন কোনও ইউআরএলের অনুরোধ করা হয় যেটি বিভিন্ন ইউজার এজেন্টকে আলাদা আলাদা HTML কন্টেন্ট পাঠায়, তাহলে সেই ওয়েবসাইটে “Vary: User-agent” HTTP প্রতিক্রিয়া হেডার ব্যবহার করতে হবে।

ডাইন্যামিকভাবে-জাভাস্ক্রিপ্ট দেখানো

এই কনফিগারেশনে সব ডিভাইসে একই HTML দেখানো হয়। কোন ইউজার এজেন্টের কাছ থেকে অনুরোধটি এসেছে, সেই অনুযায়ী আলাদা কন্টেন্ট দেখানোর জন্য এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করার জন্য একটি <script> এলিমেন্ট এই HTML-এ অন্তর্ভুক্ত থাকে। এটি জাভাস্ক্রিপ্ট কোড ডায়নামিক পদ্ধতিতে দেখানো হয়।

এই ক্ষেত্রে আমরা “Vary: User-agent" HTTP হেডারে জাভাস্ক্রিপ্ট ফাইল দেখানোর সুপারিশ করি। আলাদা ইউজার এজেন্টের জন্য জাভাস্ক্রিপ্ট যে আলাদা হতে পারে সেটি জানাতে এবং Googlebot-কে আলাদা Googlebot ইউজার এজেন্টের মাধ্যমে জাভাস্ক্রিপ্ট ফাইল ক্রল করতে বলার জন্য এটি হল ইন্টারনেট ক্যাশ এবং Googlebot-কে দেওয়া একটি নির্দেশ।

Send feedback about...

সার্চ
সার্চ