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

প্রতিক্রিয়াশীল ওয়েব ডিজাইন হল এক ধরনের সেট-আপ যেটির মাধ্যমে কোনও সার্ভার সব ডিভাইসে একই 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 Mobile Safari-র মতো আধুনিক ব্রাউজারে আপনার সাইট কাজ করলে, সেটি আমাদের অ্যালগরিদমের সাথেও কাজ করবে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Send feedback about...

সার্চ
সার্চ