রেসপন্সিভ ভিউয়ার বর্তমান ওয়েবপেজটিকে ভিডিও সাইড-বাই-সাইড একাধিক ডিভাইসের ভিউপোর্ট সাইজে রেন্ডার করে দেখায় — সব এক স্ক্রিনেই। আপনার ডিজাইনটি আইফোন, আইপ্যাড, অ্যান্ড্রয়েড ফোন, ল্যাপটপ এবং ডেক্সটপে একসাথে কেমন দেখায় তা দেখুন। একটি ভিউপোর্ট স্ক্রল করলে অন্যগুলোও সাথে সাথে স্ক্রল হয়, ফলে প্রতিটি ডিভাইস সাইজে একই কন্টেন্ট সেকশন তুলনা করা সহজ হয়।
প্রথাগতভাবে রেসপন্সিভ ডিজাইন টেস্ট করার অর্থ হলো ব্রাউজারের উইন্ডো রিসাইজ করা অথবা DevTools-এর ডিভাইস টুলবার ব্যবহার করে একে একে ভিউপোর্ট সাইজ পরিবর্তন করা। এটি কাজ করে ঠিকই, তবে আপনি একবারে কেবল একটি সাইজই দেখতে পারেন — ফলে মোবাইল বনাম ডেস্কটপে একটি সেকশন কেমন দেখায় তা একসাথে তুলনা করা অসম্ভব হয়ে পড়ে। রেসপন্সিভ ভিউয়ার একসাথে আপনার স্ক্রিনে সাইড-বাই-সাইড একাধিক ভিউপোর্টে পেজটি রেন্ডার করে এই সমস্যার সমাধান করে। প্রিসেট ডিভাইস প্রোফাইল (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) থেকে বেছে নিন অথবা কাস্টম ডাইমেনশন ইনপুট দিন। প্রতিটি ভিউপোর্ট পেজটির একটি পূর্ণাঙ্গ রেন্ডার করা ইনস্ট্যান্স, কোনো স্ট্যাটিক স্ক্রিনশট নয় — একটি স্ক্রল করলে অন্যগুলোও একই পজিশনে স্ক্রল হয়। এই সিনক্রোনাইজড স্ক্রলিং আপনাকে এক নজরে সব ডিভাইস সাইজে একই কন্টেন্ট এরিয়া তুলনা করতে সাহায্য করে। রেসপন্সিভ সমস্যাগুলো শনাক্ত করার এটি দ্রুততম উপায়: যেমন ন্যাভিগেশন ভুলভাবে র্যাপ হওয়া, কন্টেইনারের বাইরে ইমেজ চলে যাওয়া, ছোট স্ক্রিনে টেক্সট অপাঠ্য হয়ে যাওয়া অথবা স্পেসিং এলোমেলো হয়ে যাওয়া।
আপনার স্ক্রিনে সাইড-বাই-সাইড একাধিক ভিউপোর্ট সাইজে বর্তমান পেজটিকে একসাথে রেন্ডার হতে দেখুন। ভিউ পাল্টানো ছাড়াই এক নজরে মোবাইল, ট্যাবলেট এবং ডেস্কটপ লেআউট তুলনা করুন। প্রতিটি ভিউপোর্ট পেজের একটি সম্পূর্ণ কার্যকর রেন্ডার।
জনপ্রিয় ডিভাইস প্রিসেটগুলোর একটি লাইব্রেরি থেকে বেছে নিন: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) এবং Full HD Desktop (1920×1080)। প্রিসেটগুলো বর্তমান ডিভাইসের ডাইমেনশন অনুযায়ী আপডেট করা থাকে।
নন-স্ট্যান্ডার্ড ভিউপোর্ট সাইজ টেস্ট করতে যেকোনো কাস্টম উইডথ এবং হাইট ইনপুট দিন। পেজটি ঠিক ৭৬৮px চওড়া (সাধারণ ট্যাবলেটের ব্রেকপয়েন্ট) অবস্থায় কেমন দেখায় তা চেক করতে হবে? শুধু এটি টাইপ করুন। প্রিসেটগুলোর পাশাপাশি একাধিক কাস্টম ভিউপোর্ট যোগ করা যেতে পারে।
একটি ভিউপোর্ট স্ক্রল করুন এবং অন্যগুলোও একই ভার্টিক্যাল পজিশনে স্ক্রল হবে। এটি আপনাকে একসাথে সব ডিভাইস সাইজে একই কন্টেন্ট সেকশন তুলনা করতে দেয় — দেখুন হিরো এরিয়া, প্রাইসিং টেবিল বা ফুটার মোবাইল, ট্যাবলেট এবং ডেস্কটপে কেমন দেখায়।
প্রতিটি ভিউপোর্ট একটি বাস্তবসম্মত ডিভাইস ফ্রেমের ভেতরে প্রদর্শিত হয় — যেমন ফোনের বেজেল, ট্যাবলেটের বর্ডার, ল্যাপটপের ক্রোম। এই ভিজ্যুয়াল কনটেক্সট রিভিউ এবং প্রেজেন্টেশনের সময় স্টেকহোল্ডারদের বুঝতে সাহায্য করে যে কোন ভিউপোর্টটি কোন ডিভাইসের প্রতিনিধিত্ব করছে।
নির্দিষ্ট কোনো সাইজ তুলনার ওপর ফোকাস করতে একক ডিভাইসগুলো অন বা অফ করুন। কেবল মোবাইল এবং ডেস্কটপ তুলনা করছেন? ট্যাবলেটের প্রিসেটগুলো ডিসেলেক্ট করুন। শুধু আইফোন দেখতে চান? অন্য সব ডিসেলেক্ট করুন। কোন ভিউপোর্টগুলো দৃশ্যমান হবে তার ওপর আপনার পূর্ণ নিয়ন্ত্রণ থাকবে।
একটি রেসপন্সিভ ডিজাইন ইমপ্লিমেন্ট করার পর, সব টার্গেট ডিভাইস সাইজে প্রতিটি সেকশন ঠিক আছে কিনা তা যাচাই করতে রেসপন্সিভ ভিউয়ার ব্যবহার করুন। টেক্সট ওভারফ্লো, ইমেজ স্কেলিং সমস্যা, ন্যাভিগেশন কলাপস সমস্যা এবং স্পেসিংয়ের অসামঞ্জস্যতা — সবই এক ভিউতে শনাক্ত করুন।
রিভিউ মিটিংয়ের সময় ক্লায়েন্টদের দেখান যে তাদের ওয়েবসাইটটি বিভিন্ন ডিভাইসে কেমন দেখায়। সাইড-বাই-সাইড ভিউটি বোঝা খুব সহজ — আলাদাভাবে ভিউপোর্ট কনসেপ্ট ব্যাখ্যা করার প্রয়োজন নেই। ক্লায়েন্টরা একসাথে মোবাইল, ট্যাবলেট এবং ডেস্কটপ ভিউ দেখতে পারবেন।
কোনো নির্দিষ্ট উইডথ-এ লেআউট ভেঙে যাচ্ছে? যে পিক্সেল উইডথ-এ সমস্যাটি ঘটছে ঠিক সেখানে একটি কাস্টম ভিউপোর্ট যোগ করুন এবং সামান্য বেশি ও কম চওড়া ভিউপোর্টগুলোর সাথে তুলনা করে শনাক্ত করুন কোন CSS ব্রেকপয়েন্টটি সমস্যা তৈরি করছে।
লম্বা হেডিংগুলো মোবাইলে সঠিকভাবে র্যাপ হচ্ছে কিনা, ডেটা টেবিলগুলো ছোট স্ক্রিনে স্ক্রলযোগ্য হচ্ছে কিনা, ফর্ম ইনপুটগুলো ট্যাপ করার জন্য যথেষ্ট বড় কিনা এবং CTA-গুলো সব ডিভাইস সাইজে দৃশ্যমান এবং অ্যাক্সেসযোগ্য আছে কিনা তা পরীক্ষা করুন।
আকর্ষণীয় রেসপন্সিভ ডিজাইন শোকেস ইমেজ তৈরি করতে মাল্টি-ডিভাইস ভিউটি ব্যবহার করুন। পোর্টফোলিও প্রেজেন্টেশনের জন্য ৩-৪টি ডিভাইস সাইজে আপনার ডিজাইনটি রেসপন্সিভ ভিউয়ারে দেখা যাচ্ছে এমন একটি স্ক্রিনশট নিন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং রেসপন্সিভ ভিউয়ার আইকনে ক্লিক করুন। পেজটি মাল্টি-ভিউপোর্ট মোডে চলে যাবে যেখানে ডিভাইস ফ্রেমগুলো সাইড-বাই-সাইড দেখা যাবে।
ওপরের ডিভাইস বারটি উপলব্ধ প্রিসেটগুলো দেখায় (iPhone, iPad, Pixel, MacBook, Desktop)। ডিভাইসগুলো অন/অফ করতে সেগুলোতে ক্লিক করুন। নির্বাচিত ডিভাইসগুলো নিচে ভিউপোর্ট হিসেবে প্রদর্শিত হবে।
"Custom" বাটনে ক্লিক করুন এবং একটি কাস্টম ভিউপোর্ট যোগ করতে নির্দিষ্ট উইডথ × হাইট ডাইমেনশন দিন। সুনির্দিষ্ট ব্রেকপয়েন্ট ভ্যালু যেমন ৭৬৮px, ১০২৪px বা ১২৮০px টেস্ট করার জন্য এটি দরকারী।
যেকোনো একটি ভিউপোর্ট স্ক্রল করুন — অন্যগুলোও একই পজিশনে স্ক্রল হবে। একসাথে সব নির্বাচিত ডিভাইস সাইজে একই সেকশন কেমন দেখায় তা তুলনা করুন।
মাল্টি-ভিউপোর্ট মোড থেকে বের হতে এবং স্বাভাবিক সিঙ্গেল-পেজ ভিউতে ফিরতে পুনরায় রেসপন্সিভ ভিউয়ার আইকন অথবা ক্লোজ বাটনে ক্লিক করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
