অভিযোজিত নকশা (প্রতিক্রিয়াশীল নকশা)

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

এই বৈশিষ্ট্যগুলির সাথে একটি নকশা তৈরি করার সময় মনে রাখার জন্য কয়েকটি টিপস এই রইল। মনোযোগ দিন!

অভিযোজিত ডিজাইনের জন্য টিপস

1. একটি সাধারণ টেম্পলেট তৈরি করুনসহজ বলতে আমি বোঝাতে চাই না আমি কথা বলছি গঠন আপনার ওয়েবসাইটের এইচটিএমএল: এটি আরও পরিষ্কার, আরও ভাল। মনে রাখবেন যে একটি কম্পিউটার স্ক্রিন তিনটি উল্লম্ব কলামে ফিট করতে পারে; একটি মোবাইলের স্ক্রিনে, আপনি কেবল একটি ফিট করতে পারেন। এটি সম্পর্কে চিন্তা করুন এবং কীভাবে আপনি উপাদানগুলি প্রতিস্থাপন করবেন।
2. অপ্রয়োজনীয় সবকিছু বাদ দিনJQuery প্রভাব, ফ্ল্যাশ অ্যানিমেশন এবং অন্য কোনও কোড এড়িয়ে চলুন যা আপনার পৃষ্ঠার লোডিংকে কমিয়ে দেয়। এই ধরণের কম কন্টেন্ট আপনার তত দ্রুত ওয়েব লোড হবে।
3. একটি শৈলী সংজ্ঞায়িত করুন প্রতিটি "আকার" এর জন্য সিএসএসএকটি tiny.css, small.css এবং big.css (উদাহরণস্বরূপ) তৈরি করুন যা এটি দেখেছে এমন ডিভাইসের উপর ভিত্তি করে চলে। উদাহরণ স্বরূপ:
   

   @ ইমপোর্ট ইউআরএল (tiny.css) (ন্যূনতম প্রস্থ: 300px);

   @ ইমপোর্ট ইউআরএল (ছোট.css) (ন্যূনতম প্রস্থ: 600px);

   @ ইমপোর্ট ইউআরএল (বিগ কোডএসএস) (ন্যূনতম প্রস্থ: 900px);

4. সর্বাধিক ব্যবহৃত রেজোলিউশন320px/480px/720px/768px/900px/1024px
5. আপনার টেম্পলেটটি নমনীয় করুনআপনি যখনই পারবেন, স্থির পরিমাণের পরিবর্তে শতাংশের সাথে কাজ করুন। এখানে কিছু রেফারেন্স সমতুল্য: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. টাইপোগ্রাফি এটি আগের চেয়ে বেশি গুরুত্বপূর্ণ কখনও কখনও আপনার ডিভাইসের স্ক্রিনটি এত ছোট হতে পারে যে এতে আপনি যা দেখেন তা হ'ল পাঠ্য। এজন্য আমাদের সাইটের সেরা ফন্টগুলি খুব যত্ন সহকারে আমাদের নির্বাচন করতে হবে, যাতে সেগুলি আকারে হ্রাস পেলে তারা স্বীকৃতি হারাতে না পারে। তদ্ব্যতীত, আমাদের কীভাবে আরও নিরপেক্ষ ফন্টগুলি অন্যের সাথে সংযুক্ত করতে হয় তা ব্যক্তিত্বের সাথে কীভাবে ওয়েবকে প্রয়োজনীয় চরিত্র দেয় তার সাথে যুক্ত করতে হয়। অতএব, প্রথম টিপটি হ'ল আপনি যে ফন্টগুলি ব্যবহার করতে যাচ্ছেন তা নির্বাচন করতে আপনি সময় ব্যয় করেন।
7. আমেরিকা উচ্চ মানের ইমেজস্থান হ্রাস হওয়ায় চিত্রগুলি এর সাথে থাকবে। যেগুলি হ্রাস করার সময় গুণমান হারাবে না এবং তাদেরকে ছোট করে দেওয়ার সময় একই কাজ করুন তা নির্বাচন করুন। একটি নিম্ন মানের চিত্র আপনার ওয়েবসাইটকে খারাপ দেখায়।
8. আপনার চিত্রগুলি সর্বদা দেখা যায় সম্পূর্ণআপনার CSS এ img (প্রস্থ: 100%;) কোড যুক্ত করে আপনার ফটোগুলি কেটে ফেলা থেকে বিরত করুন। এইভাবে, আপনি ডিভাইসটিকে উচ্চতাটি পুনরায় গণনা করতে বলছেন যাতে এটি চিত্রটি দেওয়া উচিত যাতে এর প্রস্থটি একশ শতাংশ দেখা যায়।
9. সব কম একই ইউআরএলWww.mysite.com / মোবাইলের মতো সাবডোমেনগুলি সম্পর্কে ভুলে যান, যেহেতু মূল ফোল্ডারে একই সূচক html ফাইলটি সমস্ত ডিভাইসের জন্য কাজ করবে (যদি আপনি সঠিকভাবে অভিযোজিত নকশাটি করেন)। আপনি ইতিমধ্যে সুবিধাটি জানেন: কম সাবডোমেনগুলি, পৃষ্ঠা লোডটি তত দ্রুত হবে।
10. সমর্থন সুবিধা নিন: কল্পনাপ্রসূত হন আইপ্যাড বা মোবাইল ফোন থেকে ডেস্কটপ কম্পিউটার থেকে কোনও ওয়েবসাইট অ্যাক্সেস করা এক নয়। প্রথমটি দিয়ে, আপনি শান্ত এবং শান্ত উপায়ে নেভিগেট করবেন। পরেরটির সাথে, আপনি এটি অলস সময়গুলিতে করবেন এবং বিরক্ত হওয়ার সাথে সাথে উইন্ডোটি বন্ধ করবেন। ব্যবহারকারীর মনোরঞ্জনের জন্য এই শর্তগুলির সদ্ব্যবহার করুন এবং সেই কয়েক মিনিটের মধ্যে তাঁকে মজা করুন যে তিনি আপনাকে উত্সর্গ করতে চলেছে। সম্ভবত সে বাড়িতে এলে তিনি আরও স্বচ্ছন্দ উপায়ে আপনাকে দেখার সিদ্ধান্ত নেবেন।
11. অনুপ্রাণিত হও ডিজিটাল প্রকাশনাগুলিতে আপনি অবাক হবেন কেন এই পরামর্শ। খুব সহজ: ডিজিটাল পত্রিকা (ভাল) সমর্থন কীভাবে নিতে হয় তা জানেন এবং তাদের নকশাটি খুব বুদ্ধিমান। তাদের দ্বারা অনুপ্রাণিত হন এবং ছেড়ে যাওয়া কঠিন এমন একটি ওয়েবসাইট তৈরি করুন।

আরও তথ্য – ডিজিটাল ম্যাগাজিন

উৎস – স্প্লিও , 960.gs, স্তম্ভাকার