ওয়েবসাইট ডিজাইন করতে আমার ব্রাউজারের প্রস্থটি কী ব্যবহার করা উচিত?


9

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


সম্পূর্ণ অন্য একটি প্রশ্ন তারপর অন্য এক। এটি অন্যটি সেই ওয়েবসাইটের মধ্যে গ্রাফিক্সের জন্য জিজ্ঞাসা করে যে কোনও সম্পূর্ণ ওয়েবসাইট মকআপ ইমেজের ডিফল্ট রেজোলিউশনটি কী হতে পারে তা জিজ্ঞাসা করে।
Xitcod13

2
কেন এটি বন্ধ ছিল তা নিশ্চিত নন, এটি অন্যান্য থ্রেডের সদৃশ নয়। (আমি আবার খুলতে ভোট দিয়েছি) এছাড়াও শিরোনামটি আরও কিছুটা নির্ভুল হিসাবে পরিবর্তিত করেছি। - বেশিরভাগ ব্যবহারকারী এখন 1024 x 768 বা আরও বড় ব্রাউজার সেট করে সার্ফ করেন। সর্বাধিক প্রস্থ হিসাবে 1000 পিক্সেল ব্যবহার করা এটি সাধারণত গ্রহণযোগ্য। এই কারণেই 960 গ্রিড, বুটস্ট্র্যাপ এবং অন্যান্য হিসাবে সূত্রগুলি জনপ্রিয়তা পাচ্ছে।
স্কট

দুঃখিত বন্ধুরা, আমি প্রায় শিরোনামে শিরোনাম পেয়েছি। পুনরায় খোলা ...
ফেরে

এটি কি সাইটের জন্য একটি নির্দিষ্ট-প্রস্থের বিন্যাস অনুমান করে? অথবা "যদি কোনও ব্যবহারকারী 640x480 এর রেজোলিউশন ব্যবহার করেন না কারণ তাদের দৃষ্টি কম থাকে, তবে সাইটটি এটির মতো দেখাবে ..." এবং কীভাবে লেআউটটি ফুটে উঠছে তা দেখানো হবে? (ঠিক আছে, আপনি এর পরিবর্তে 800x600 ব্যবহার করতে পারেন)
অ্যান্ড্রু লেচ

উত্তর:


7

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

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

মিডিয়া ক্যোয়ারী হ'ল বিভিন্ন ভিউ পোর্ট মাপের জন্য সিএসএস নিয়মের বিভিন্ন সেট। মিডিয়া ক্যোয়ারীগুলি আপনার ব্রাউজারের প্রস্থ পরিবর্তনশীল হিসাবে সাড়া দেয়। আপনার ব্রাউজারটি ছোট করার সাথে সাথে পৃষ্ঠাটি ভাসমানগুলি ফেলে বা 12 টি কলাম থেকে 1 বা 2 এ গিয়ে প্রতিক্রিয়া জানায় যখন তারা প্রতিকৃতি থেকে ল্যান্ডস্কেপ বা versল্যে পরিবর্তিত করে মোবাইল ডিভাইস এবং টেবিলগুলিতে ব্যবহারকারীদের প্রতিক্রিয়া জানায়।

লক্ষ্যযুক্ত আকার:

  • প্রতিকৃতি মোডে 320 x 480 মোবাইল ডিভাইস
  • 480 x 640 ছোট ট্যাবলেট বা ল্যান্ডস্কেপ মোডে একটি আইফোন
  • প্রতিকৃতি মোডে 768 x 1024 ট্যাবলেট
  • ল্যান্ডস্কেপ মোডে 1024 x 768 ট্যাবলেট
  • 1200 + ডেস্কটপ ব্রাউজারগুলি
  • 2900 ++ বৃহত্তর মিডিয়া প্রদর্শন বা সম্মেলন (এটি কোনও প্রয়োজন নয় তবে যদি কেউ আপনার সাইটটি খুব বড় ডিসপ্লেতে দেখছে তবে কী হবে।

এটি ক্রিয়াতে দেখতে ফ্রেমলেস গ্রিডটি একবার দেখুন । এটি আসলে তরল নয় তবে আপনি আপনার ব্রাউজারটি সামঞ্জস্য করার সাথে সাথে এটি 14 টি কলাম থেকে পুরো 1 পর্যন্ত চলে গেছে

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

আপনি যে অ্যাকাউন্টটির জন্য অ্যাকাউন্ট করতে চাইতে পারেন তা হ'ল পিক্সেল ঘনত্ব । আইফোন 4 এবং নতুন আইপ্যাডে রেটিনা প্রদর্শন রয়েছে যা সাধারণ স্ক্রিনের চেয়ে 2x তীক্ষ্ণ। এটি প্রায় অপ্রচলিত পাঠ্যের পরিবর্তে স্প্রাইট এবং চিত্র পরিবেশন করার অনুশীলনকে পরিণত করে। টেক্সট সহ একটি আইপ্যাড ছবিতে ভয়ঙ্কর চেহারা।

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


আপনার ফ্রেমলেস গ্রিড লিঙ্কটি এখন মারা গেছে।
রুস্লান

6

অনেক লেআউট টেম্পলেট 960px প্রস্থ ব্যবহার করে যেহেতু এটি সাধারণ 1024px প্রশস্ত স্ক্রিন রেজোলিউশনে ফিট করে, স্ক্রোল বারের জন্য কিছু জায়গা দেয় এবং সহজেই 2, 3, 4, 5, 6, 8, 10, 12 এবং 16 দ্বারা বিভাজ্য - কলামাইজিংয়ের জন্য আদর্শ বিন্যাস.

উদাহরণের জন্য http://960.gs দেখুন ।

বুটস্ট্র্যাপের মতো অন্যান্য ফ্রেমওয়ার্কগুলি কলামগুলির মধ্যে কিছু মার্জিনের জন্য অ্যাকাউন্ট করতে 940px ব্যবহার করে।


960gs সাইটে দুর্দান্ত রেফারেন্স। @ আপনাকে সাহায্যের জন্য তাদের পিএসডি টেম্পলেটগুলি ব্যবহার করা উচিত।
skids89

6

আপনি যদি ডেস্কটপ ব্রাউজারগুলি লক্ষ্য করে থাকেন তবে আপনার প্রয়োজন হলে আপনি সহজেই প্রায় 1000 পিক্সেল প্রশস্ত করতে পারেন।

স্ট্যাটকাউন্টারের স্ক্রিন রেজোলিউশন

স্ট্যাটকাউন্টারের স্ক্রিন রেজোলিউশন

যখন সর্বাধিক সাধারণ প্রদর্শনগুলি 1024 পিক্সেল বা বড় হয় তখন কেন প্রায় 1000 পিক্সেল? কারণ আপনাকে স্ক্রোল বার এবং উইন্ডো ক্রোমের অনুমতি দিতে হবে।

আপনি যদি বিশেষত মোবাইল ব্রাউজারগুলিকে লক্ষ্য করে থাকেন তবে 320 পিক্সেল প্রশস্ত হওয়া ভাল পছন্দ হতে পারে, যদিও মোবাইল ব্রাউজারগুলি সাধারণত প্রস্থের প্রস্থের মাপসই সামগ্রীতে স্কেল করে, তাই 950 বা 960 পিক্সেল প্রশস্ত দুর্দান্ত হতে পারে। দয়া করে নোট করুন যে 320 সিএসএস / এইচটিএমএল পিক্সেল আইফোনের মতো উচ্চ ডিপিআই ডিভাইসে 640 ডিভাইস পিক্সেলের সমান।

স্টেটকাউন্টারের মোবাইল স্ক্রিন রেজোলিউশন

স্টেটকাউন্টারের মোবাইল স্ক্রিন রেজোলিউশন

আপনার লক্ষ্য বাজারও জিনিসগুলি পরিবর্তন করতে পারে। আপনি যদি কারিগরি জ্ঞান দর্শকদের লক্ষ্য করে নিচ্ছেন তবে আপনি আরও আধুনিক ডিভাইসগুলিতে জিনিসগুলি স্কুড হওয়ার আশা করতে পারেন। আপনি যদি কোনও সরকারী সাইট বানাচ্ছেন তবে আপনাকে আরও বিস্তৃত পরিসর সরবরাহ করতে হবে।

এছাড়াও, আপনি কীভাবে সাইটটি তৈরি করছেন? আপনি যদি গ্রিড সিস্টেম ব্যবহার করেন যেমন ব্লুপ্রিন্ট সিএসএস বা 960 গ্রিড সিস্টেম, তবে এটি আকারটিও নির্ধারণ করতে পারে (বেশিরভাগ গ্রিড সিস্টেমগুলিও অন্যান্য আকারে পরিবর্তন করা যেতে পারে)।

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


4
আমি 960 গ্রিড সিস্টেম দ্বিতীয়। খুব নমনীয় এবং আপনার দর্শকদের বেশিরভাগের জন্য কাজ করবে।
লরেন-ক্লিয়ার-মনিকা-ইপসম

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

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

এটি খুব পুরানো উত্তর। স্ক্রিনগুলিতে আরও বেশি বৈচিত্র্য রয়েছে, বিশেষত উপরের প্রান্তে যেখানে টিভি এবং 4 কে স্ক্রিন ব্যবহার করা হয়
জ্যাচ সাউসিয়ার

-3

এই সময়ে ওয়ার্ল্ড ওয়াইড অপরিশোধিত ডেস্কটপ আকার 1024x768 হয় 1003px আকারে একটি ওয়েবসাইট তৈরি করা ভাল ...


3
1003px কেন ....?
e100

কারণ স্ট্র্যান্ডড আকারটি বিশ্বের প্রশস্ত 1024 প্রস্থ এবং 768 উচ্চতা সহ 1024px প্রস্থ 11px স্ক্রোল বারের জন্য প্রয়োজন এবং ডান এবং বাম পাশের মার্জিনের জন্য 5px প্রয়োজন
গ্রাফিক ডিজাইন গায়

2
আমি আশা করি আমি একটি মন্তব্য কম ভোট দিতে পারলাম ... :( তবে কেবল এফওয়াইআই @ রিজওয়ানবাবাসী: বিভিন্ন সিস্টেমে স্ক্রোলবারগুলির বিভিন্ন প্রস্থ রয়েছে (টাচ ডিভাইসগুলিও তাদের নেই) এবং এমনকি এই সিস্টেমে স্ক্রোলবারগুলিও পরিবর্তন করা যেতে পারে (গুগল করছে এটি GMail অন এর অ্যাপ্লিকেশনগুলিতে উদাহরণস্বরূপ)
রবার্ট কোরিতনিক ২ik

অবশ্যই টাইপো
লওল
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.