ট্যাবলেট এবং মোবাইল ফোনের মাধ্যমে ইন্টারনেট ব্যবহারকারীর সংখ্যা বাড়ছে। এটি, যেমন আপনি ইতিমধ্যে জানেন, এর অর্থ হ'ল আমাদের কম্পিউটারে কেবল ভাল ওয়েব পেজ ডিজাইন করা যথেষ্ট নয়: এটি প্রতিটি মোবাইল ডিভাইসেও দেখতে হবে। সমস্যাটি? বিভিন্ন পর্দার আকার এবং রেজোলিউশন। এজন্য এমন একটি নকশা তৈরি করা এত কঠিন যে সমস্ত মাধ্যমের সাথে সঠিকভাবে মানিয়ে যায় (বিখ্যাত famous প্রতিক্রিয়াশীল নকশাহিসাবে অনুবাদ করা অভিযোজিত নকশা).
এই বৈশিষ্ট্যগুলির সাথে একটি নকশা তৈরি করার সময় মনে রাখার জন্য কয়েকটি টিপস এই রইল। মনোযোগ দিন!
অভিযোজিত ডিজাইনের জন্য টিপস
- একটি সাধারণ টেম্পলেট তৈরি করুনসহজ বলতে আমি বোঝাতে চাই না আমি কথা বলছি গঠন আপনার ওয়েবসাইটের এইচটিএমএল: এটি আরও পরিষ্কার, আরও ভাল। মনে রাখবেন যে একটি কম্পিউটার স্ক্রিন তিনটি উল্লম্ব কলামে ফিট করতে পারে; একটি মোবাইলের স্ক্রিনে, আপনি কেবল একটি ফিট করতে পারেন। এটি সম্পর্কে চিন্তা করুন এবং কীভাবে আপনি উপাদানগুলি প্রতিস্থাপন করবেন।
- অপ্রয়োজনীয় সবকিছু বাদ দিনJQuery প্রভাব, ফ্ল্যাশ অ্যানিমেশন এবং অন্য কোনও কোড এড়িয়ে চলুন যা আপনার পৃষ্ঠার লোডিংকে কমিয়ে দেয়। এই ধরণের কম কন্টেন্ট আপনার তত দ্রুত ওয়েব লোড হবে।
- একটি শৈলী সংজ্ঞায়িত করুন প্রতিটি "আকার" এর জন্য সিএসএসএকটি tiny.css, small.css এবং big.css (উদাহরণস্বরূপ) তৈরি করুন যা এটি দেখেছে এমন ডিভাইসের উপর ভিত্তি করে চলে। উদাহরণ স্বরূপ:
@ ইমপোর্ট ইউআরএল (tiny.css) (ন্যূনতম প্রস্থ: 300px);
@ ইমপোর্ট ইউআরএল (ছোট.css) (ন্যূনতম প্রস্থ: 600px);
@ ইমপোর্ট ইউআরএল (বিগ কোডএসএস) (ন্যূনতম প্রস্থ: 900px);
- সর্বাধিক ব্যবহৃত রেজোলিউশন320px/480px/720px/768px/900px/1024px
- আপনার টেম্পলেটটি নমনীয় করুনআপনি যখনই পারবেন, স্থির পরিমাণের পরিবর্তে শতাংশের সাথে কাজ করুন। এখানে কিছু রেফারেন্স সমতুল্য: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- টাইপোগ্রাফি এটি আগের চেয়ে বেশি গুরুত্বপূর্ণ কখনও কখনও আপনার ডিভাইসের স্ক্রিনটি এত ছোট হতে পারে যে এতে আপনি যা দেখেন তা হ'ল পাঠ্য। এজন্য আমাদের সাইটের সেরা ফন্টগুলি খুব যত্ন সহকারে আমাদের নির্বাচন করতে হবে, যাতে সেগুলি আকারে হ্রাস পেলে তারা স্বীকৃতি হারাতে না পারে। তদ্ব্যতীত, আমাদের কীভাবে আরও নিরপেক্ষ ফন্টগুলি অন্যের সাথে সংযুক্ত করতে হয় তা ব্যক্তিত্বের সাথে কীভাবে ওয়েবকে প্রয়োজনীয় চরিত্র দেয় তার সাথে যুক্ত করতে হয়। অতএব, প্রথম টিপটি হ'ল আপনি যে ফন্টগুলি ব্যবহার করতে যাচ্ছেন তা নির্বাচন করতে আপনি সময় ব্যয় করেন।
- আমেরিকা উচ্চ মানের ইমেজস্থান হ্রাস হওয়ায় চিত্রগুলি এর সাথে থাকবে। যেগুলি হ্রাস করার সময় গুণমান হারাবে না এবং তাদেরকে ছোট করে দেওয়ার সময় একই কাজ করুন তা নির্বাচন করুন। একটি নিম্ন মানের চিত্র আপনার ওয়েবসাইটকে খারাপ দেখায়।
- আপনার চিত্রগুলি সর্বদা দেখা যায় সম্পূর্ণআপনার CSS এ img (প্রস্থ: 100%;) কোড যুক্ত করে আপনার ফটোগুলি কেটে ফেলা থেকে বিরত করুন। এইভাবে, আপনি ডিভাইসটিকে উচ্চতাটি পুনরায় গণনা করতে বলছেন যাতে এটি চিত্রটি দেওয়া উচিত যাতে এর প্রস্থটি একশ শতাংশ দেখা যায়।
- সব কম একই ইউআরএলWww.mysite.com / মোবাইলের মতো সাবডোমেনগুলি সম্পর্কে ভুলে যান, যেহেতু মূল ফোল্ডারে একই সূচক html ফাইলটি সমস্ত ডিভাইসের জন্য কাজ করবে (যদি আপনি সঠিকভাবে অভিযোজিত নকশাটি করেন)। আপনি ইতিমধ্যে সুবিধাটি জানেন: কম সাবডোমেনগুলি, পৃষ্ঠা লোডটি তত দ্রুত হবে।
- সমর্থন সুবিধা নিন: কল্পনাপ্রসূত হন আইপ্যাড বা মোবাইল ফোন থেকে ডেস্কটপ কম্পিউটার থেকে কোনও ওয়েবসাইট অ্যাক্সেস করা এক নয়। প্রথমটি দিয়ে, আপনি শান্ত এবং শান্ত উপায়ে নেভিগেট করবেন। পরেরটির সাথে, আপনি এটি অলস সময়গুলিতে করবেন এবং বিরক্ত হওয়ার সাথে সাথে উইন্ডোটি বন্ধ করবেন। ব্যবহারকারীর মনোরঞ্জনের জন্য এই শর্তগুলির সদ্ব্যবহার করুন এবং সেই কয়েক মিনিটের মধ্যে তাঁকে মজা করুন যে তিনি আপনাকে উত্সর্গ করতে চলেছে। সম্ভবত সে বাড়িতে এলে তিনি আরও স্বচ্ছন্দ উপায়ে আপনাকে দেখার সিদ্ধান্ত নেবেন।
- অনুপ্রাণিত হও ডিজিটাল প্রকাশনাগুলিতে আপনি অবাক হবেন কেন এই পরামর্শ। খুব সহজ: ডিজিটাল পত্রিকা (ভাল) সমর্থন কীভাবে নিতে হয় তা জানেন এবং তাদের নকশাটি খুব বুদ্ধিমান। তাদের দ্বারা অনুপ্রাণিত হন এবং ছেড়ে যাওয়া কঠিন এমন একটি ওয়েবসাইট তৈরি করুন।
অধিক তথ্য - ডিজিটাল পত্রিকা
উৎস - স্প্লিও960 XNUMX.gs, কলামাল
এমন কিছু জিনিস রয়েছে যা আমি খুব একটা মানি না।
5 পয়েন্টে ... 200px = 15,38% এবং নিম্নলিখিতগুলি থেকে ... এই রেফারেন্স তুলনাটি কোনও পিতামাতার পরিমাপ ছাড়াই করা যায় না, পিক্সেলের জন্য আকারটি শতাংশের মতো আপেক্ষিক পরিমাপ নয়!
প্রস্থ সহ চিত্রগুলি উল্লেখ করুন: 100% ভুল, আমি মনে করি এটির প্রস্তাবনা হওয়া উচিত। চিত্রগুলি তাদের প্রস্থ এবং উচ্চতা দিয়ে আরও ভালভাবে সংজ্ঞা দেয়, সুতরাং সার্ভার তথ্য প্রসেস করতে কম সময় নেয় (এটির আকারটি গণনা করতে হবে না) এবং আমরা পৃষ্ঠার লোডিং গতি উন্নত করি (যা অভিযোজক বা প্রতিক্রিয়াশীল ওয়েবের জন্য খুব গুরুত্বপূর্ণ) ডিজাইন)।
আমি ইতিমধ্যে অন্তর্ভুক্ত করব, যদিও এটি নাকের কাজ ... রেটিনা পর্দার জন্য চিত্রগুলি। যদি আমরা প্রতিক্রিয়াশীল ওয়েব ডিজাইন করতে চাই, তবে রেটিনা প্রদর্শনের জন্য চিত্রগুলি ব্যবহার করা বাধ্যতামূলক, যেহেতু উচ্চতর মোবাইল এবং ট্যাবলেট ভিউ এই স্ক্রিনগুলি ব্যবহার করে। সুতরাং অর্ধ থ্রোটলে তাদের জন্য নকশার জন্য চেষ্টা করার কোনও অর্থ নেই।
বাকি জন্য ভাল
পঞ্চম বিন্দুতে, তারা আপনাকে প্রসঙ্গে রাখে এবং 5, 1300 এবং 3 এর মধ্যে একটি, 200 টি কলাম সহ 300px মোট লেআউট সম্পর্কে আপনাকে জানায়।
যদি আপনি এটি শতাংশে পাস করেন তবে তাদের ক্ষেত্রে আপনি যেমন বলছেন ঠিক তেমন, 15,38% ((200 * 100) / 1300) (দশমিক নীচে, আন্তর্জাতিক ব্যবস্থা: পি)
তবে যদি আমরা 500px লেআউটটির কথা বলি এবং আমাদের 3 টি কলাম রয়েছে, 200 এর মধ্যে একটি, 200 এর একটি এবং 100px এর আরেকটি, শতাংশ এখন আর আগের মতো নেই, এই ক্ষেত্রে 200px = 40% ((200 * 100) / 500)
সেগুলি হবে: 200px = 40% এবং 100px = 10%
আসুন, যেমনটি আমি বলেছিলাম, সেগুলি আপনি যে নির্দেশিত তা কোনও রেফারেন্স নয়, তারা কেবলমাত্র 1300px লেআউটে একটি রেফারেন্স।
শুভেচ্ছা
কি ব্যর্থতা, আপনি বিশ্বের একদম ঠিক! আবার ধন্যবাদ ;)