Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Responsive Web Design
Business

২৫ টি সেরা রেস্পন্সিভ ওয়েবসাইট ডিজাইন এর উদাহরণ

by
Length:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
12 Important Advantages of Responsive Web Design
How to Make Responsive WordPress Websites (With Themes)

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

রেস্পন্সিভ ওয়েবসাইট এখন সব ধরনের মনোযোগের কেন্দ্রবিন্দুতে পরিণত হয়েছে। যখন আপনি কোন ওয়েবসাইটের মালিকের কাছে এর সুবিধাগুলো তুলে ধরবেন, তখন মানুষ এ সম্পর্কে কথা বলা কিছুতেই থামাবে না, এটাই স্বাভাবিক।

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

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

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

একটি অসাধারণ রেস্পন্সিভ ওয়েব সাইটের জন্য কি থাকা প্রয়োজন?

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

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

২৫ টি রেস্পন্সিভ বিজনেস ওয়েবসাইট

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

১। অ্যান্ডারসন ওয়াইজ আর্কিটেক্ট

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

Andersson Wise Architects Responsive Web Design Example

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

Andersson Wise Architects Mobile

২। স্টিফেন কেভার

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

Stephen Caver

এছাড়াও তিনি সুন্দর এবং পরিচ্ছন্ন টাইপোগ্রাফি এবং পর্যাপ্ত পরিমাণে ফাঁকা জায়গা রেখেছেন যাতে ডিজাইনটি যথেষ্ট প্রানবন্ত মনে হয়।

Stephen Caver mobile

৩। ফুড সেন্স

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

Food Sense

বামদিকের সাইডবারে থাকা লোগো এবং মেনু স্ক্রিনের উপরের দিকে উঠে গেছে যার ফলে লিংকে ক্লিক করা খুব সহজ এবং কোন হ্যামবার্গার মেনুর প্রয়োজন হয়নি।

Food Sense mobile

৪। মেড বাই হ্যান্ড

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

Made By Hand Responsive Website Example

ইমেজ এবং ভিডিও দুটোই ডেক্সটপ এবং মোবাইল ডিভাইসে ভালোভাবে দেখা যায় এবং চমৎকার সেরিফ ফন্ট এর কারণে পড়তেও ভালো লাগে।

Made By Hand mobile

৫। স্কিনি টাইস

স্কিনি টাইস হচ্ছে একটি ই কমার্স সাইট, তাই রেস্পন্সিভ ডিজাইন এ ক্ষেত্রে বেশ জটিল।

Skinny Ties Responsive Design Example

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

Skinny Ties mobile

৬। হোয়াইট লোটাস অ্যারোমেটিক্স

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

White Lotus Aromatics

মোবাইল ডিভাইসের ভিজিটররা ও এই দুটোই খুব সহজে অ্যাক্সেস করতে পারে যা লোগোর উপরে এবং নিচে দেখা যাবে।

White Lotus Aromatics mobile

৭। দি বোস্টন গ্লোব

যদি আপনার ওয়েবসাইটে অনেক কনটেন্ট শেয়ার করতে চান, তাহলে  দি বোস্টন গ্লোব থেকে ধারণা নিতে পারেন।

The Boston Globe

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

The Boston Globe mobile

৮। স্টারবাকস

স্টারবাকস এ ড্রপ ডাউন মেনু চমৎকার ব্যবহার করা হয়েছে এবং একটি লুকানো মোবাইল মেনু্র কারণে কনটেন্টের উপর মনোযোগ দেয়া সহজ যদিও একইসাথে ভিজিটররা সহজেই তাদের সাইট ন্যাভিগেট করতে পারে।

Starbucks

তাদের বাটনগুলো ছোট স্ক্রিনে চমৎকার ভাবে কাজ করে যার ফলে সহজেই দেখা ও ক্লিক করা সম্ভব।

Starbucks mobile

৯। সাস্কোয়্যাচ!

সাস্কোয়াচ মিউজিক ফেস্টিভেলের রেস্পন্সিভ ওয়েবসাইটটি রেস্পন্সিভ স্লাইডারের একটি চমৎকার উদাহরণ।

Sasquatch Responsive Website Example

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

Sasquatch mobile

১০। টেট্টি

টেম্পোরারি ট্যাটু বিক্রির এই ওয়েবসাইটটি মোবাইল ডিভাইস থেকে চেকআউট প্রক্রিয়াটি খুব সহজ করে একটি দারুণ কাজ করেছে।

Tattly

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

Tattly mobile

১১। ক্যান্টিনা ভ্যালপলিসেলা নেগ্রার

এই ইতালিয়ান ওয়েবসাইটটিতে এমন একটি ভিডিও ব্যবহার করা হয়েছে, যা একেবারে ছোট স্ক্রিনেও চালানো সহজ। এজন্য সহজে লক্ষ্যণীয় প্লে বাটনটিকে ধন্যবাদ।

Cantina Valpolicella Negrar

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

Cantina Valpolicella Negrar mobile

১২। মোর হেজার্ডস মোর হিরোস

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

More Hazards More Heroes

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

More Hazards More Heroes mobile

১৩। ইল্লি ইটালিয়ান কফি

ডেস্কটপ অথবা ল্যাপটপ থেকে ইল্লির ওয়েবসাইটে ভিজিট করলে, আপনি কেবল ১৫% ডিসকাউন্ট কোডসহ একটি নিউজলেটার পপআপ মেনু দেখতে পাবেন।

Illy Italian Coffee

তবে, মোবাইল ডিভাইসে পপ-আপটি একটি টপ বার ও নিখুঁত সাইড বাটনে রুপান্তরিত হয় যা মূল বিষয়বস্তু দেখার ক্ষেত্রে কোনও অন্তরায় সৃষ্টি করে না।

Illy Italian Coffee mobile

১৪। সুইট হ্যাট ক্লাব

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

Sweet Hat Club

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

Sweet Hat Club mobile

১৫। আলেসান্দ্রো ডি'এগনানো

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

Alessandro Dagnano

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

Alessandro Dagnano mobile

১৬। আথেন্টিক জবস

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

Authentic Jobs

মোবাইল ডিভাইস থেকে দেখলে আপনি দেখবেন ফিল্টার অপশনটি সাইডবার থেকে মূল কন্টেন্টের আগে ড্রপ-ডাউন মেনু হিসেবে দেখা যাচ্ছে।

Authentic Jobs mobile

১৭। দি ডু লেকচারস

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

The DO Lectures

মোবাইল ডিভাইসে, একটি বোল্ড টাইপের মেনু ব্যবহার করা হয়েছে এবং ভিডিও ও কন্টেণ্টগুলো দুই কলামে দেখানো হচ্ছে।

The DO Lectures mobile

১৮। সেইন্ট পল স্কুল

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

St Pauls School

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

St Pauls School mobile

১৯। এএসইউ অনলাইন

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

ASU Online

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

ASU Online mobile

২০। র‍্যালি ইন্টারেকটিভ

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

Rally Interactive

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

Rally Interactive mobile

২১। ব্রাউনস কোর্ট বেকারী

ব্রাউনস কোর্ট বেকারী মিনিমালিস্ট ওয়েবসাইটের আরো একটি উদাহরণ যা সব ধরনের স্ক্রিনেই সুন্দরভাবে দেখা যায়।

Browns Court Bakery

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

Browns Court Bakery mobile

২২। লাইফসিজনস

এই ওয়েবসাইটে উজ্জ্বল কল টু অ্যাকশন বাটনের পাশাপাশি বড় টাইপোগ্রাফি এবং রঙ ব্যবহার করা হয়েছে যা লাইফসিজন্স ওয়েবসাইটের মূল বৈশিষ্ট্য।

LifeSeasons

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

LifeSeasons mobile

২৩। ওপেন ওয়্যার

ওপেন ওয়্যারের ওয়েবসাইটটি কেবল রেস্পন্সিভই নয়, এতে আপনি যখন মেনু আইটেমে আপনার মাউস নিয়ে যাবেন তখন মাইক্রোইন্টারেকশন ও এনিমেশন দেখতে পাবেন। 

Open Wear

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

Open Wear mobile

২৪। ফিলাডেলফিয়া ক্রিমিনাল ডিফেন্স ল'ইয়ার

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

Philadelphia Criminal Defense Lawyer

ইনকোয়েরি ফিল্ডটি বড় ইনপুট ফিল্ডের মতই কাজ করে যাতে একটি বড় সহজে ক্লিকযোগ্য বাটনও দেখতে পাবেন।

Philadelphia Criminal Defense Lawyer mobile

২৫। রাইভাল ফিটনেস

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

Rival Fitness

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

Rival Fitness mobile

রেসপনসিভ ওয়েব ডিজাইন এর আরো কিছু উদাহরণ

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

এই রেস্পন্সিভ বিজনেস ওয়েবসাইট এর উদাহরণ গুলো দিয়ে অনুপ্রাণিত হতে পারেন

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.