কিভাবে মোবাইল-প্রথম ডিজাইন অনুশীলনে কাজ করে?

মোবাইল-প্রথম ডিজাইন প্রথমে মোবাইলের জন্য একটি ওয়েবসাইট তৈরি করার কাজকে বোঝায় এবং তারপরে ট্যাবলেট থেকে ডেস্কটপ পর্যন্ত আপনার ওয়েবসাইটটি বড় স্ক্রীনের আকারে কীভাবে দেখা উচিত তা নিয়ন্ত্রণ করতে CSS মিডিয়া ক্যোয়ারী ব্যবহার করে। অন্য কথায়, আপনি আপনার ওয়েবসাইটকে প্রতিক্রিয়াশীল করতে (বিভিন্ন স্ক্রীন আকারে অভিযোজিত) করতে মিডিয়া প্রশ্ন ব্যবহার করেন।

যখন আমরা মিডিয়া প্রশ্নগুলি ব্যবহার করি, তখন আমরা সেগুলিকে ব্রেকপয়েন্ট হিসাবে উল্লেখ করি৷ তাই আপনি যদি সিদ্ধান্ত নেন যে আপনার ওয়েবসাইটের লেআউটটি মোবাইল লেআউট থেকে 800px স্ক্রীন প্রস্থে ট্যাবলেট লেআউটে পরিবর্তন করা উচিত, তাহলে আপনি এই ধরনের একটি মিডিয়া কোয়েরি তৈরি করুন:

@media screen and (min-width: 800px) {
  /* Add Tablet styles here */
}

এবং এখন 800px হল আপনার প্রথম ব্রেকপয়েন্ট।

ধরা যাক যে আমরা সিদ্ধান্ত নিই যে আমাদের ডেস্কটপ ব্রেকপয়েন্ট 1200px হওয়া উচিত, যেমন:

@media screen and (min-width: 1200px) {
  /* Add Desktop styles here */
}

এটি আপনার ২য় ব্রেকপয়েন্ট, এখন আপনার মোট দুটি ব্রেকপয়েন্ট আছে।

উপরে দেখানো ব্রেকপয়েন্ট মডেলটি ব্যবহার করে একটি লেআউটের দ্রুত ডেমো এখানে:

https://codepen.io/StrengthandFreedom/pen/abzywPd

আপনি দেখতে পাচ্ছেন, মোবাইল:0-800px, ট্যাবলেট:800-1200px, ডেস্কটপ:1200-এন্ড-আপের মধ্যে কাজ করার জন্য আমাদের কাছে এখন তিনটি ভিন্ন স্ক্রীন সাইজ রেঞ্জ রয়েছে, যার জন্য আমাদের CSS মিডিয়ার সাথে মোট দুটি ব্রেকপয়েন্ট তৈরি করতে হবে প্রশ্ন

উপরের উদাহরণটি একটি সাধারণ, তবে এটির পয়েন্টটি পাওয়া উচিত। আপনি ব্রেকপয়েন্টের মধ্যে ফন্টের আকার থেকে লেআউট প্রস্থ পর্যন্ত সবকিছু সামঞ্জস্য করতে পারেন।

আপনার যদি দুটির বেশি ব্রেকপয়েন্টের প্রয়োজন হয়?

কিছু পরিস্থিতিতে আরও সূক্ষ্ম পদ্ধতির প্রয়োজন হয়, যেখানে আপনি কয়েকটি ব্রেকপয়েন্ট ব্যবহার করে উপরে যান। আমি কিছু ওয়েবসাইট দেখেছি 10টি ব্যবহার করছে, প্রতি 100 থেকে 200px বা তার বেশি একটি ব্রেকপয়েন্ট ব্যবহার করছে।

বেশিরভাগ ব্যবহারের ক্ষেত্রে এটি সম্ভবত এটিকে অতিরিক্ত করছে।

একটি ওয়েবসাইটের জন্য ব্রেকপয়েন্টের আদর্শ সংখ্যা কত?

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

একটি সাধারণ নিয়ম হিসাবে, আমার অভিজ্ঞতায়, বেশিরভাগ বেস কভার করার জন্য গড় ওয়েবসাইটটির 2 থেকে 4টি ব্রেকপয়েন্ট প্রয়োজন। আমি 4 সঙ্গে যেতে ঝোঁক.

আপনি ইতিমধ্যে 2টি ব্রেকপয়েন্ট ব্যবহার করার একটি উদাহরণ দেখেছেন, এখন আসুন আরেকটি উদাহরণ দেখি যেখানে আমরা 4টি ব্যবহার করছি৷

4টি ব্রেকপয়েন্ট সহ একটি প্রতিক্রিয়াশীল লেআউট

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

কারণ হল যদিও আমরা যে ফন্টের আকারগুলি ব্যবহার করি তা বড় হ্যান্ডহেল্ড ডিভাইসগুলিতে ভাল কাজ করে, h1 (শিরোনাম) কিছুটা শক্তিশালী। একই সময়ে, আমরা 500px প্রস্থ বিন্দুর উপরে উঠলে বিষয়বস্তুর প্রস্থ একটু বেশি প্রশস্ত হয়, যা আমাদের পরিমাপকে (লাইন-দৈর্ঘ্য) খুব দীর্ঘ করে তোলে এবং প্রতি লাইনে অনেকগুলি অক্ষর সহ পাঠক-বান্ধব নয়। আদর্শভাবে, সর্বোত্তম পড়ার জন্য, আমরা চাই আমাদের লাইন-দৈর্ঘ্য প্রতি লাইনে প্রায় 40 থেকে 80 অক্ষর হোক।

এই সমস্যাটি কাটিয়ে উঠতে, আসুন আমাদের প্রথম ব্রেকপয়েন্ট 480px এ যোগ করি এবং তারপরে 1200px কে আমাদের ডেস্কটপ এবং আপ ব্রেকপয়েন্ট হিসেবে ব্যবহার না করে, 1900px এ আরেকটি যুক্ত করা যাক (সত্যিই বড় পর্দার জন্য)।

এখানে 4 ব্রেকপয়েন্ট ডেমো দেখুন:

https://codepen.io/StrengthandFreedom/pen/mdyMMeL

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

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

আপনি কি একটি ওয়েবসাইটে শুধুমাত্র একটি ব্রেকপয়েন্ট ব্যবহার করে দূরে থাকতে পারেন ?

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

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

1. একটি মোবাইল লেআউট
2. একটি ডেস্কটপ লেআউট

একটি ব্রেকপয়েন্ট তখন সাধারণত 600-960px স্ক্রীন প্রস্থের পরিসীমার চারপাশে সংজ্ঞায়িত করা হবে।

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

আপনি যদি ব্যবহারকারীদের বিস্তৃত পরিসরে (বিভিন্ন ডিভাইস/স্ক্রিন আকার সহ) একটি ভাল ব্যবহারকারীর অভিজ্ঞতা দেওয়ার বিষয়ে যত্নবান হন, তাহলে আপনার সাধারণত একাধিক ব্রেকপয়েন্ট প্রয়োজন।

আমি আগে যা বলেছি তা পুনরাবৃত্তি করার জন্য:প্রসঙ্গ আপনার ডিজাইনের সিদ্ধান্তগুলিকে গাইড করতে দিন৷৷