২০১৮ এর জন্য ১৩ টি কুইক রেস্পন্সিভ ওয়েব ডিজাইন টিপস এবং ট্রিকস

আজকাল রেস্পন্সিভ ওয়েব ডিজাইন একটি অপরিহার্য বিষয়। যেহেতু কোন জিনিস কেনার আগে বেশিরভাগ লোকজন মোবাইল ডিভাইসের মাধ্যমে রিসার্চ করে থাকে ও সাম্প্রতিক খবরাখবর নিয়ে থাকে, তাই আপনার ওয়েবসাইটটি নন-রেস্পন্সিভ ওয়েবসাইট হলে তারা আপনাকে খুঁজে পাবেনা।

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

কিভাবে রেস্পন্সিভ ওয়েব ডিজাইন বাস্তবায়ন করবেন

মোবাইল ওয়েবসাইট ডিজাইন এবং রেস্পন্সিভ ডিজাইনের জন্য নিন্মলিখিত টিপসগুলো আপনার ওয়েবসাইটটি রেস্পন্সিভ এবং মোবাইল বান্ধব কিনা দুটোই নিশ্চিত করবে। এখানে রেস্পন্সিভ ওয়েব ডিজাইনের জন্য সেরা কিছু টিপস দেয়া হলো:

১। আপনার ভিজিটর কিভাবে মোবাইল ব্যবহার করেন তা জানুন

মানুষ সাধারণত ডেক্সটপ কম্পিউটারের চেয়ে আলাদা ভাবে মোবাইল ডিভাইসে ওয়েবসাইট ব্যবহার করে থাকে। এই বিষয়টি আপনাকে বুঝতে হবে। আপনার ওয়েবসাইট ভিজিটরদের উপর সার্ভে করে অথবা এনালাইটিক ব্যবহার করে বের করুন কেন তারা মোবাইল ডিভাইস থেকে আপনার সাইট ব্যবহার করে এবং কোন পেইজ ও এলিমেন্ট সমূহ তারা সবচেয়ে বেশি এক্সেস করে থাকে। এই তথ্যগুলো আপনাকে বুঝতে সাহায্য করবে যে আপনার ওয়েবসাইটের কোন কোন পেইজ এবং এলিমেন্টগুলো ছোট স্ক্রিনের জন্য বিশেষভাবে তৈরি করা প্রয়োজন।

যেমন, যদি তারা আপনার সাথে দ্রুত যোগাযোগের জন্য আপনার সাইটে ভিজিট করে থাকে, তাহলে আপনাকে নিশ্চিত হতে হবে যে, আপনার কন্টাক্ট পেজটি যাতে মোবাইল নেভিগেশনে ভালোভাবে দেখা যায়।

২। প্রথমে ডিজাইনের পরিকল্পনা তৈরি করুন

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

আপনার ওয়েবসাইটের জন্য বেশকিছু প্রোটোটাইপ তৈরি করুন এবং এগুলোকে ভিন্ন ভিন্ন স্ক্রিনে টেস্ট করে দেখুন যাতে ফলাফল হিসেবে পাওয়া ডিজাইনটি রেস্পন্সিভ হয়। এখানে বেশ কিছু টুলস দেয়া হলো যা দিয়ে আপনি রেস্পন্সিভ প্রোটোটাইপ তৈরি করতে পারবেন:

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

• ওয়্যারফাই। এই টুলটি আপনার কাজে লাগবে যদি আপনি ডিজাইনটি আপনার ওয়েবসাইটের বিষয়বস্তু বা কন্টেন্টের উপর নির্ভর করে তৈরি করতে চান। এটা দিয়ে আপনি একটি রেস্পন্সিভ গ্রিড ব্যবহার করে আপনার সাইটের ওয়্যারফ্রেমটি প্রস্থ এবং শতাংশ গণনা না করেই তৈরি করতে পারবেন।

৩। নেভিগেশনের ক্ষেত্রে সতর্ক হোন

যেকোন ওয়েবসাইটের জন্য নেভিগেশন হচ্ছে সবচেয়ে গুরুত্বপূর্ণ অংশ। এটা আপনার ভিজিটরদের জন্য একটি রোডম্যাপ হিসেবে কাজ করে এবং তাদেরকে আপনার সাইটের অন্যান্য পাতায় সহজ ভাবে যাওয়ার সুযোগ করে দেয়। কোনও সাইটের ডেক্সটপ সংস্করণের নেভিগেশনে সাধারণত সব ধরনের গুরুত্বপূর্ণ পাতার লিংক দেখা যায়। আর মোবাইল ডিভাইসে এইসব লিংক সমূহ সাধারনত হ্যামবার্গার আইকন ব্যবহার করে এর পিছনে লুকিয়ে রাখা হয়।

তবে এটা সব সময় ভাল পদ্ধতি নাও হতে পারে। কারণ কোন কোন ব্যবহারকারীরা বুঝতে পারে না যে, এই আইকনে তাদেরকে ক্লিক করে মেনু প্রকাশ করতে হবে এবং তারা কোনো পেইজে ভিজিট করতে না পেরে এক সময় হতাশ হয়ে ওয়েবসাইটটি ছেড়ে চলে যায়। সবচেয়ে ভালো পদ্ধতি হচ্ছে গুরুত্বপূর্ণ মেনু আইটেমগুলো ছোট স্ক্রিনেও দৃশ্যমান করে রাখা এবং অন্যান্য লিংকের জন্য হ্যামবার্গার মেনু ব্যবহার করা। নেভিগেশন আরও সহজতর করতে আপনার হোম পেইজের অন্যান্য টেক্সটে আপনি আপনার গুরুত্বপূর্ণ লিংকসমূহ যুক্ত করতে পারেন।

৪। ইমেজ বা চিত্র অপটিমাইজ করুন

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

এর মানে হলো ইমেজগুলো সঠিক ফরমেটে সংরক্ষণ করতে হবে - ফটোগ্রাফি বা দৃশ্যের ইমেজের জন্য JPG এবং আইকন ও স্বচ্ছ পটভূমির লোগো এর জন্য PNG-8। এছাড়াও আপনাকে TinyJPG এর মত টুল ব্যবহার করে ইমেজ এর সাইজ কমাতে হবে এবং এমন ইমেজসমূহ ব্যবহার করতে হবে যা বিভিন্ন ধরনের মোবাইলের ব্রেক পয়েন্টের জন্য অপ্টিমাইজ করা যায় এবং স্কেলিং করা সহজ ও ব্যান্ডউইথ সমস্যা কমাতে পারে।

৫। মোবাইল ফার্স্ট পদ্ধতির কথা বিবেচনা করুন

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

৬। কিভাবে মিডিয়া কুয়েরি সমূহ ব্যবহার করতে হয় তা জানুন

শুরুর দিকে মিডিয়া কোয়েরি সিএসএসএর প্রাথমিক প্রস্তাবনার অংশ হিসেবে ব্যবহার করা হতো, কিন্তু 2012 সালে ব্রাউজারসমূহে এগুলোর জন্য অফিশিয়াল সাপোর্ট যুক্ত করার আগ পর্যন্ত এগুলো ব্যবহার করা বাস্তবে সম্ভব ছিল না। মিডিয়া কোয়েরির মূল ভূমিকা হচ্ছে, এগুলো আপনার ওয়েবসাইট লেআউটটিকে বিভিন্ন ধরনের স্ক্রিনের সাইজ অনুযায়ী অপটিমাইজ করতে দেয়।

যখন আপনি মিডিয়া কোয়েরি ব্যবহার করবেন তখন ওয়েবসাইট এর বিষয়বস্তু বিভিন্ন শর্তসাপেক্ষে নির্দিষ্ট কিছু ডিভাইসে একেক ভাবে প্রদর্শিত হবে। সংক্ষেপে, একটি মিডিয়া কুয়েরি রেজুলেশন, প্রস্থ এবং ডিভাইসের স্বাভাবিক প্রবণতা চেক করে এবং এর জন্য উপযোগী ১ সেট সিএসএস রুল প্রদর্শন করে। মিডিয়া কোয়েরির একটি উদাহরণ নিচে দেয়া হলো:

@media screen and (min-width:500px) {
    
    your CSS rules here

}

৭। ফরমের মধ্যে কিবোর্ড ট্রিগার যুক্ত করুন

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

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

৮। বাটনগুলো যাতে ছোট স্ক্রিনে সহজেই ক্লিক করা যায় তা নিশ্চিত করুন

আপনার ওয়েব সাইটের বাটন সমূহের দিকে বাড়তি মনোযোগ দিতে ভুলবেন না। কারণ স্ক্রিনের জায়গাগুলো খুব মূল্যবান, এর ফলে স্ক্রিনের সাইজ এর সাথে ফিট হওয়ার জন্য আপনার বাটন গুলো সহজেই ছোট থেকে ছোট হয়ে যেতে পারে‌। যদিও, এই প্রক্রিয়ার কারণে এগুলো ক্লিক করা বেশ কঠিন মনে হবে।

আপনার বাটনগুলো যাতে সহজে চেনা যায় তা নিশ্চিত করুন:

• রং ব্যবহার করে এগুলোকে পেইজের অন্যান্য অংশ থেকে আলাদা করুন।
• বাটন হিসেবে উপস্থাপনের জন্য একটি আয়তক্ষেত্র অথবা বৃত্ত ব্যবহার করুন।

আকার পরিবর্তনের সাথে সাথে, আপনার বাটনের ক্লিক যোগ্য অঞ্চল বাড়ানোর জন্য প্যাডিং যুক্ত করুন। এছাড়াও আপনি বাটন অ্যাকসেসিবিলিটি এর জন্য ম্যাটেরিয়াল ডিজাইনের সুপারিশ অনুসরণ করতে পারেন এবং নিশ্চিত করুন এগুলো যাতে 36 ডিপি উচ্চতা সম্পন্ন হয়(1dp = 1px)।

৯। টাইপোগ্রাফি অপটিমাইজ করুন

টেক্সট এর ক্ষেত্রে আপনাকে নিশ্চিত করতে হবে টেক্সটটি যাতে ছোট স্ক্রিনে পাঠযোগ্য হয়। ওয়েবসাইট এর মূল অংশের জন্য একটি সঠিক সাইজ হচ্ছে 16px অথবা 1em এবং তারপর এই অনুসারে আপনার শিরোনাম বা হেডিংয়ের সাইজ সমন্বয় করে নিন। একই সাথে আপনাকে আপনার টেক্সট এর লাইনের উচ্চতাও 1.5em অনুযায়ী সমন্বয় করে নিতে হবে, যাতে আপনার প্যারাগ্রাফের লাইনগুলোতেও যথেষ্ট ফাঁকা জায়গা থাকে।

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

১০। মাইক্রো ইন্টারেকশন ব্যবহার করুন

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

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

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

মাইক্রো ইন্টারেকশন এর আরেকটি অসাধারণ উদাহরণ হচ্ছে লি ক্যাফে নয়ের স্টুডিও এর ওয়েবসাইট। তাদের অনলাইন স্টোরে একটি এনিমেটেড হার্ট আছে যা আপনি আপনার কার্টে কোন আইটেম যুক্ত করলে আপনার স্ক্রিনটি অতিক্রম করবে, এতে আপনার গ্রাহকগণ কেনার সময় তাৎক্ষণিকভাবে আনন্দ পাবেন:

১১। ফ্রেমওয়ার্ক যুক্ত করুন

আপনি যদি একটি রেস্পন্সিভ ওয়েবসাইট ডিজাইন এর সময়ে কোনও রেস্পন্সিভ ফ্রেমওয়ার্ক যুক্ত করেন, তাহলে ডিজাইনের জন্য অনেক সময় বেঁচে যাবে। যদি আপনি একটি সিম্পল স্ট্যাটিক ওয়েবসাইট ডিজাইন করতে চান, তাহলে বুটস্ট্রাপের মত কোনও এইচটিএমএল ফ্রেমওয়ার্ক আপনার এইচটিএমএল টেমপ্লেটে ব্যবহার করতে পারেন।

এছাড়াও আপনি প্রাক-নির্মিত কোন রেসপন্সিভ ওয়ার্ডপ্রেস থিমের সুবিধা নিতে পারেন, যদি আপনি আরও জটিল ওয়েবসাইট এবং আপনার মার্কেটিং কৌশল এর সাথে একটি ব্লগও রাখতে চান। যদি আপনি একজন অভিজ্ঞ কোডার না হোন, কিন্তু সব কিছু নিজে নিজেই করতে চান, তাহলে এই ধরনের একটি ফ্রেমওয়ার্ক বেছে নেয়াই সবচেয়ে ভালো।

১২। ডিজাইনটি সংক্ষিপ্ত রাখুন

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

১৩। আপনার শেয়ার বাটন গুলো যাতে আপনার কনটেন্ট ব্লক না করে তা নিশ্চিত হোন

আপনার ওয়েবসাইটে শেয়ার বাটন সমূহ যুক্ত করলে আপনার কন্টেন্টগুলো আরো বেশি দৃশ্যমান হবে এবং আরো বেশি ট্রাফিক নিয়ে আসবে। তবে শেয়ার বাটন সময় অনেক সময় আপনার কন্টেন্ট ব্লক করতে পারে, যার ফলে এটা ছোট স্ক্রিনে পড়া খুব কঠিন মনে হতে পারে: একটি মোবাইল ডিভাইসে টেস্ট করার মাধ্যমে আপনাকে নিশ্চিত হতে হবে যাতে শেয়ার বাটনগুলো ছোট ডিভাইসে সুন্দর ভাবে স্কেল হয়ে যায় অথবা 768px স্ক্রীন এর চেয়ে ছোট স্ক্রিনে এগুলোকে ডিজেবল করে রাখুন।

আপনার ওয়েবসাইটি রেস্পন্সিভ কিনা তা কিভাবে চেক করবেন

উপরের রেস্পন্সিভ ওয়েব ডিজাইন টিপস গুলো ইম্প্লেমেন্ট করার পর এখন আপনাকে চেক করে দেখতে হবে যে, আপনার ওয়েবসাইটটি রেস্পন্সিভ হয়েছে কিনা। অনলাইনে এমন অনেক টুল আছে যা দিয়ে আপনি আপনার সাইটের রেস্পন্সিভনেস টেস্ট করতে পারেন। এখানে শীর্ষ তিনটি টুল দেয়া হলো যা আমরা আপনাকে ব্যবহার করার পরামর্শ দিবো:

১। গুগলের মোবাইল ফ্রেন্ডলি টেস্ট

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

২। স্ক্রীনফ্লাই

কোয়ার্ক টুলের স্ক্রীনফ্লাই আপনাকে দেখাবে কিভাবে আপনার ওয়েবসাইট বিভিন্ন ধরনের স্ক্রীন সাইজে ভিন্ন ভিন্নভাবে দেখা যায়। এই টুলটি আপনাকে কেবল সহায়ক নির্দেশনা ও পরামর্শ দিবে না, একই সাথে আপনি দেখতে পাবেন আপনার ওয়েবসাইটটি স্মার্ট ফোন, ডেক্সটপ, এমনকি বড় টিভি স্ক্রিনে কিভাবে দেখাচ্ছে।

৩। মোবাইল টেস্ট

সবশেষে, MobileTest.me আপনাকে একটি নির্দিষ্ট মোবাইল ডিভাইস বেছে নিতে সাহায্য করবে, আপনার ইউ আর এল প্রবেশ করান, এবং নির্দিষ্ট ডিভাইসে আপনার ওয়েবসাইটটি পরিচালনা করে দেখুন। এই টুলটি সত্যিই একটি সহায়ক টুল। কারণ এখানে আপনি দেখতে পাবেন কিভাবে আপনার ওয়েবসাইট মোবাইল ডিভাইসে কাজ করে। ফরম এবং বাটনসমূহ টেস্ট করতে পারবেন এবং বুঝতে পারবেন আপনার ভিজিটররা ভালো ইউজার এক্সপেরিয়েন্স পাচ্ছে কিনা।  আপনি এটা এককভাবে অথবা উপরে বর্ণিত দুটি টুলের সংযোগসহ ব্যবহার করতে পারেন যাতে নিশ্চিত হতে পারেন যে আপনার ওয়েবসাইটটি সত্যিকারভাবেই রেস্পন্সিভ কিনা।

এই রেস্পন্সিভ ওয়েব ডিজাইন ট্রিক্স এবং টিপস নিয়ে অগ্রসর হোন

একটি রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করা এখন আর কোন ঐচ্ছিক কাজ নয়। রেস্পন্সিভ ওয়েব ডিজাইনের ফলে আপনার ওয়েবসাইটটি যে কেউ কোন সমস্যা ছাড়াই দেখতে পাবে এবং এটা আপনার ব্র্যান্ড এর খ্যাতির পাশাপাশি আপনার কনভার্শন রেট এর উপর প্রভাব ফেলবে। উপরের রেস্পন্সিভ ওয়েব ডিজাইন টিপস এবং ট্রিকস ব্যবহার করে ওয়েবসাইট তৈরি করলে আপনার ভিজিটররা আপনার ওয়েবসাইটটিকে যেকোন ডিভাইস থেকে সুন্দরভাবে দেখতে সক্ষম হবে এবং একই সাথে তারা একটি সুন্দর ইউজার এক্সপেরিয়েন্স পাবে।