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

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

রেসপন্সিভ ডিজাইন সমস্ত ডিভাইসকে একই কোড দিয়ে থাকে যাতে পৃষ্ঠাটিকে স্ক্রিনের সাইজ অনুযায়ী অ্যাডজাস্ট করে দেখানো যায়।

TL;DR

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

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

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

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

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

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

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

রেসপন্সিভ ছবির জন্য, <picture>-এর উপাদানটি যোগ করুন।

সাধারণভাবে, Google Chrome বা Apple Mobile Safari-এর মতো আধুনিক ব্রাউজারে আপনার সাইট কাজ করলে, সেটি আমাদের অ্যালগরিদমের সাথেও কাজ করবে।

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

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

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

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

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

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

জাভাস্ক্রিপ্ট ব্যবহার করার বিভিন্ন পদ্ধতি ও প্রতিক্রিয়াশীল ওয়েব ডিজাইন ব্যবহার করার ব্যাপারে Google-এর সাজেশনের সাথে সেগুলির সম্পর্ক এই বিভাগ থেকে জানা যাবে।

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

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

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

প্রতিটি কনফিগারেশন সম্পর্কে বিস্তারিত জানুন।

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

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

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

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

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

সম্মিলিত শনাক্তকরণ সেট-আপে ডিভাইসের ক্ষমতা শনাক্ত করা ও পরিবেশিত কন্টেন্ট পরিবর্তন করার জন্য ক্লায়েন্টের জাভাস্ক্রিপ্টের সাথে সার্ভার একযোগে কাজ করে।

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

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

ডায়নামিক পদ্ধতিতে দেখানো জাভাস্ক্রিপ্ট

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

এই ক্ষেত্রে, "Vary: User-agent" HTTP হেডার সহ জাভাস্ক্রিপ্ট ফাইল পাঠালে ভাল হয়। এটি আলাদা ইউজার-এজেন্টের জন্য জাভাস্ক্রিপ্ট যে আলাদা হতে পারে সেই বিষয়ে ইন্টারনেট ক্যাশে ও Googlebot-কে ইঙ্গিত দেয় এবং আলাদা Googlebot ইউজার-এজেন্ট ব্যবহার করে জাভাস্ক্রিপ্ট ফাইলকে ক্রল করার কথাও Googlebot-কে জানানো হয়।