যেমনটি আপনি জানেন, রেসপনসিভ ওয়েব ডিজাইন হল পেজ পজিশনিং এর অন্যতম চাবিকাঠি এবং Google এই দিকটিকে আরও বেশি গুরুত্ব দিচ্ছে। কিন্তু আপনি কি জানেন যে নয়টি মৌলিক ধারণা আপনার মনে রাখা উচিত?
আপনি যদি নিশ্চিতভাবে না জানেন যে প্রতিক্রিয়াশীল ওয়েব ডিজাইন কী এবং এটির সবচেয়ে গুরুত্বপূর্ণ ধারণাগুলি রয়েছে, আমরা সুপারিশ করি যে আপনি এই নিবন্ধটি পড়া চালিয়ে যান যেখানে আপনি সবকিছু খুঁজে পাবেন। আমরা কি শুরু করতে পারি?
প্রতিক্রিয়াশীল ওয়েব ডিজাইন কি
রেসপন্সিভ ওয়েব ডিজাইন, যা রেস্পন্সিভ নামেও পরিচিত, ওয়েব ডিজাইনের জন্য সেরা সমাধানগুলির মধ্যে একটি। এবং জিনিসটি হল, আগে, আপনি যখন একটি ওয়েবসাইট তৈরি করেছিলেন, তখন আপনার সমস্যা ছিল যে এটি মোবাইল ফোন, একটি ট্যাবলেট বা এমনকি বিভিন্ন ওয়েব রেজোলিউশনের উপর নির্ভর করে ভিন্ন দেখায়। যাইহোক, এই বিকল্পের সাথে আপনার ওয়েবসাইটটিকে ডিভাইসের সাথে মানিয়ে নেওয়ার সম্ভাবনা রয়েছে। এখানে আমরা আর স্থির পৃষ্ঠা, সেন্টিমিটার, আকার ইত্যাদি সম্পর্কে কথা বলছি না। কিন্তু বরং এটি তৈরি করা হয়েছে যে পরে, বিভিন্ন ডিভাইস পরিবর্তন করার সময়, এটি মানিয়ে নেবে (অবশ্যই, কখনও কখনও আপনাকে কিছু ন্যূনতম পরিবর্তন করতে হবে)।
অন্য কথায়, আমরা একটি প্রোগ্রামিং বিন্যাস সম্পর্কে কথা বলছি. এটির সাহায্যে, আমরা একটি ওয়েবসাইটকে ব্যবহারকারীর ডিভাইসের সাথে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে পারি, সেটি মোবাইল ফোন, ট্যাবলেট বা একটি কম্পিউটার যা এটির জন্য ডিজাইন করা হয়েছে তার থেকে ভিন্ন রেজোলিউশন সহ।
এটি ওয়েবসাইটটিকে সমস্ত দিক থেকে ভাল দেখতে দেয়।
মৌলিক নীতি
এখন যেহেতু প্রতিক্রিয়াশীল ওয়েব ডিজাইন কী তা আপনার কাছে পরিষ্কার, এই ফর্ম্যাটের মূল নীতিগুলি এবং এটি কীভাবে ওয়েবসাইটগুলিকে আরও ভাল দেখতে সাহায্য করে সে সম্পর্কে আপনার সাথে কথা বলার সময় এসেছে৷ এই নিম্নলিখিত হবে:
উপাদান প্রবাহ
আমরা উল্লেখ করছি যখন ওয়েব পৃষ্ঠাটি প্রদর্শিত হবে সেই স্ক্রীনটি ছোট থেকে ছোট হয়ে গেলে কী ঘটে। উদাহরণস্বরূপ, একটি মোবাইল ফোনের ক্ষেত্রে। স্ক্রীন যত ছোট হবে, ফর্ম্যাটটি টেমপ্লেটের অংশ এমন সমস্ত তথ্য সংগঠিত করতে থাকে।
এবং এটি একটি উল্লম্ব উপায়ে করে, অনুভূমিকভাবে নয়। এইভাবে, ব্যবহারকারীকে ওয়েবের জন্য উপরে এবং নীচে ছাড়াও পুরো পৃষ্ঠাটি দেখতে বাম এবং ডানদিকে স্ক্রোল করতে বাধ্য করা হয় না।
এটি বিষয়বস্তুকে ওভারল্যাপ করা থেকেও বাধা দেয়, বরং সবসময় একটি উল্লম্ব বিন্যাসে সংগঠিত হওয়া থেকে।
এবং আপনি জিজ্ঞাসা করার আগে, হ্যাঁ, অনেক টেমপ্লেট টেমপ্লেটের প্রতিটি অংশের জন্য একটি নির্দিষ্ট ক্রম সেট করতে পারে, বা এমনকি অদৃশ্য হয়ে যেতে পারে, যখন স্ক্রীন একটি নির্দিষ্ট আকারে পৌঁছে যায়। এটি তথ্যকে অগ্রাধিকার দেওয়ার লক্ষ্যে করা হয়েছে এবং ডিজাইনটি হালকা করার জন্য যাতে এটি কী বলে তা খুঁজে বের করার জন্য আপনাকে অনেক স্ক্রোল করতে হবে না।
ডেস্কটপ বনাম মোবাইল
মোবাইল ডিজাইন ক্রমবর্ধমান গুরুত্বপূর্ণ হয়ে উঠছে কারণ এটি কম্পিউটারকে স্থানচ্যুত করছে। কিন্তু যখন ওয়েব ডিজাইন করার কথা আসে, বাস্তবে, এটি প্রথমে ওয়েবসাইট এবং তারপরে কম্পিউটার সংস্করণ, বা অন্য উপায়ে ডিজাইন করার ক্ষেত্রে একটি বড় পার্থক্য বোঝায় না। বাস্তবে, কম্পিউটারে যেকোনো প্রতিক্রিয়াশীল ওয়েব ডিজাইন মোবাইলে প্রতিফলিত হয় এবং এর বিপরীতে।
এখন, এটা সত্য যে প্রতিটি ডিজাইনে কিছু বিশদ বিবেচনা করতে হবে যা এটিকে ব্যক্তিগতকৃত করে তুলবে। প্রকৃতপক্ষে, কিছু কোম্পানি কম্পিউটারের জন্য একটি অনন্য ওয়েব ডিজাইন এবং মোবাইল ফোনের জন্য আরেকটি বিশেষ ওয়েব ডিজাইন তৈরি করতে বেছে নেয়, যদিও এটি তাদের কার্যকারিতা হারাতে পারে বা ব্যবহারকারীদের একটি থেকে অন্যটির মধ্যে নেভিগেট করার সময় হারিয়ে যেতে পারে, বিশেষ করে যদি সেগুলি ব্যবহার করা হয় একজন লোকের কাছে।
ফন্ট, ওয়েব বা সিস্টেম?
ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ দিক হল টাইপোগ্রাফি ব্যবহার করা। অর্থাৎ যে ধরনের উৎস ব্যবহার করতে হবে। এবং, আপনি জানেন, আপনি ব্যবহার করতে পারেন লক্ষ লক্ষ আছে. কিন্তু সবসময় সুপাঠ্য, লোড করা সহজ এবং দ্রুত লোড হয় সেগুলি ব্যবহার করার পরামর্শ দেওয়া হয়৷
আপনার মনে রাখা উচিত যে ফন্টগুলি একটি আধুনিক শৈলী বা একটি সাধারণ শৈলী প্রতিফলিত করতে পারে। আগেরটি লোড হতে বেশি সময় নিতে পারে; যদিও পরেরটি, যদিও আরও ক্লাসিক, ওয়েবসাইটের আরও ভাল কাজ করার অনুমতি দেয়।
এবং যা ভাল হবে? ঠিক আছে, এটি সেই প্রকল্পের চাহিদার উপর নির্ভর করবে। আপনার পৃষ্ঠায় প্রভাব অবশ্যই প্রাধান্য পাবে, এমনকি এটি লোড হতে বেশি সময় লাগলেও, এটি সাধারণ ডিজাইনগুলির তুলনায় একটি ভাল পছন্দ হতে পারে যেগুলি খুব বেশি আলাদা নয়৷
অবশ্যই, আপনার মনে রাখা উচিত যে ফন্টগুলি ব্যবহার করা ভাল যা নিশ্চিত করে যে ব্যবহারকারীরা সেগুলি ইনস্টল করেছেন; অন্যথায় আপনি সেই প্রভাব পাবেন না।
আপেক্ষিক ইউনিট
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের আরেকটি নীতি হল "আপেক্ষিক ইউনিট" বলা হয় তা ব্যবহার করা। তাদের মধ্যে, শতাংশ সেরা।
এটা কি কাজে লাগে? আপনি দেখুন, কল্পনা করুন যে আপনার কাছে কম্পিউটার, একটি ট্যাবলেট এবং একটি মোবাইল ফোনের জন্য একটি ওয়েব ডিজাইন আছে। প্রতিটির জন্য নির্দিষ্ট পরিমাপ প্রদানের পরিবর্তে, শতাংশ ব্যবহার করা হবে যাতে স্ক্রিনগুলির আকার হ্রাস হওয়ার সাথে সাথে বিভিন্ন স্কেল তৈরি করার পরে বিন্যাসটি যত্ন নেয়।
স্থির পরিমাপ ব্যবহার করা হলে, এই পর্দাগুলি কমানোর সময় এটি ভাল নাও লাগতে পারে।
ব্রেকপয়েন্ট
ব্রেকপয়েন্ট বলতে আপনার কম্পিউটার এবং মোবাইল ফোনে কাজ করার জন্য যে স্থানটি রয়েছে তা বোঝায়। প্রথমটিতে আপনার কাছে মূলত তিনটি কলাম থাকতে পারে, মোবাইলের ক্ষেত্রে আপনার কেবল একটি কলাম থাকতে পারে। এটা তৈরি করে যখন নকশাটি ছোট পর্দায় পরিবর্তিত হয়, তখন এটি স্বাভাবিকভাবে সাজানো হয়; যখন, আপনার যদি ব্রেকপয়েন্ট না থাকে, তবে এটি একই ডিজাইন বজায় রেখে সমস্ত সামগ্রীকে ছোট করে দেবে।
মান
একটি প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন করার সময়, একটি মৌলিক কী যা হতে হবে অ্যাকাউন্টে সর্বনিম্ন এবং সর্বোচ্চ মান রয়েছে ওয়েবসাইটের প্রস্থ এবং উচ্চতা এবং উপাদানগুলি সম্পর্কে।
একটি এবং অন্যটির মধ্যে বড় পার্থক্য হল, যদি সর্বাধিক প্রস্থ না থাকে তবে এটি যা করে তা হল বিষয়বস্তু প্রস্থে প্রসারিত হয়, যা এটিকে আরও বিকৃত দেখাতে পারে।
নেস্টেড অবজেক্ট
আপনার ওয়েবসাইটে অনেক উপাদান আছে কল্পনা করুন. এবং মোবাইল সংস্করণে আপনি সিদ্ধান্ত নিয়েছেন যে আপনি তাদের আরও মনোযোগী করতে যাচ্ছেন। নেস্টেড অবজেক্ট থাকার ফলে আপনি একই সময়ে একটি ইউনিটের অংশ এমন একাধিক বস্তু সরাতে পারবেন।, এইভাবে অনেক সময় সাশ্রয়. উপরন্তু, এটি একটি পরিষ্কার এবং পরিপাটি নকশা জন্য অনুমতি দেয়.
শুধু তাই নয়, উপাদানগুলিকে "সব একের মধ্যে" তৈরি করে, তারা ছোট পর্দায় দ্রুত মানিয়ে নিতে পারে।
ছবি বনাম ভেক্টর
এই ক্ষেত্রে আমরা ওয়েব আইকনগুলিতে ফোকাস করি। এগুলি বিটম্যাপ ইমেজ বা ভেক্টর দিয়ে তৈরি করা যেতে পারে। এবং কি সেরা হবে? ভেক্টর, সন্দেহ নেই। এই কারণ এগুলিকে বড় বা ছোট করে, সেগুলি পিক্সেলেড বা ঝাপসা দেখাবে না৷
অভিযোজিত বনাম প্রতিক্রিয়াশীল ডিজাইন
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের নীতিগুলির সাথে শেষ করার জন্য, আপনার জানা উচিত যে অনেকে এটিকে অভিযোজিত ডিজাইনের সাথে বিভ্রান্ত করে, যখন বাস্তবে তাদের মধ্যে একটি বড় পার্থক্য থাকে।
কি প্রতিক্রিয়াশীল নকশা করে যে কাঠামোটি ব্যবহার করা ডিভাইসের সাথে তরল এবং স্বাভাবিকভাবে সামঞ্জস্য করে। এবং প্রতিক্রিয়াশীল নকশা সম্পর্কে কি? এই ক্ষেত্রে অভিযোজন ফিট এবং শুরু হয় এবং ব্যবহৃত ব্রাউজার এবং ডিভাইসের উপর নির্ভর করে ভিন্ন কিছু দেখায়। অন্য কথায়, এটি আপনাকে প্রতিটি ডিভাইসের জন্য আলাদা ডিজাইন দেখাবে।
আপনি কি প্রতিক্রিয়াশীল ওয়েব ডিজাইনের এই মৌলিক নীতিগুলি জানেন?