ওয়েবসাইট ডেভেলপমেন্ট প্রযুক্তি একটি বহুমুখী প্রক্রিয়া। কিন্তু তবুও, এর সমস্ত পর্যায় দুটি প্রধান উপাদানে বিভক্ত করা যেতে পারে - কার্যকরী এবং বাইরের শেল। অথবা, যথাক্রমে ওয়েবমাস্টারদের মধ্যে প্রচলিত, ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড। যারা ওয়েব ডেভেলপমেন্ট স্টুডিও থেকে তাদের ওয়েবসাইট অর্ডার করে তারা প্রায়শই নির্বোধভাবে বিশ্বাস করে যে এটি শুধুমাত্র কার্যকারিতার উপর ফোকাস করা মূল্যবান, এবং এটি সঠিক সিদ্ধান্ত হবে। কিন্তু এটি খুব, খুব বিরল ক্ষেত্রে সত্য, সাধারণত বিটা টেস্টিং পর্যায়ে স্টার্টআপ প্রকল্পের জন্য। অন্যথায়, গ্রাফিক ডিজাইন এবং ইউজার ইন্টারফেস শুধুমাত্র ওয়েব ডেভেলপমেন্ট মান মেনে চলতে এবং সুবিধাজনক হতে হবে।
ইন্টারফেস ডিজাইনার বা ডিজাইনার যে প্রথম ভিত্তির মুখোমুখি হন সেটি হল সাইট লেআউটের প্রস্থ। সর্বোপরি, এটির জন্য ইন্টারফেসগুলি আঁকতে হবে। সম্পূর্ণ স্বজ্ঞাতভাবে, দুটি পদ্ধতির উদ্ভব হয় - হয় প্রতিটি জনপ্রিয় স্ক্রীন রেজোলিউশনের জন্য আলাদা লেআউট তৈরি করুন, অথবা সমস্ত প্রদর্শনের জন্য সাইটের একটি সংস্করণ তৈরি করুন৷ এবং উভয় বিকল্প ভুল হবে, কিন্তু প্রথম জিনিস আগে.
পিক্সেলে স্ট্যান্ডার্ড ওয়েবসাইট প্রস্থRunet এর জন্য
অ্যাডাপ্টিভ লেআউটের বিকাশের আগে, হাজার পিক্সেল প্রস্থের একটি সাইটের বিকাশ একটি ব্যাপক ঘটনা ছিল। এই চিত্রটি একটি সাধারণ কারণে বেছে নেওয়া হয়েছিল - যাতে সাইটটি যেকোনো পর্দায় ফিট করে। এবং এটির নিজস্ব যুক্তি আছে, তবে আসুন ধরে নিই যে একজন ব্যক্তির এখনও একটি ডেস্কটপে কমপক্ষে একটি এইচডি মনিটর রয়েছে। এই ক্ষেত্রে, আপনার লেআউটটি স্ক্রিনের মাঝখানে একটি ছোট স্ট্রিপের মতো মনে হবে, যেখানে সবকিছু একসাথে এক স্তূপে আটকে আছে এবং পাশে একটি বিশাল অব্যবহৃত স্থান রয়েছে। এখন ধরা যাক যে একজন ব্যক্তি 800px প্রশস্ত স্ক্রীন সহ একটি ট্যাবলেটে আপনার ওয়েবসাইট অ্যাক্সেস করেন এবং সেটিংসে "সম্পূর্ণ ওয়েবসাইট দেখান" চেক করা হয়েছে৷ এই ক্ষেত্রে, আপনার সাইটটিও ভুলভাবে প্রদর্শিত হবে, কারণ এটি কেবল স্ক্রিনে ফিট হবে না।
এই বিবেচনাগুলি থেকে, আমরা উপসংহারে আসতে পারি যে লেআউটের জন্য একটি নির্দিষ্ট প্রস্থ অবশ্যই আমাদের জন্য উপযুক্ত নয় এবং আমাদের অন্য উপায় খুঁজতে হবে। আসুন প্রতিটি স্ক্রিনের প্রস্থের জন্য একটি পৃথক লেআউটের ধারণাটি বিশ্লেষণ করা যাক।
সব অনুষ্ঠানের জন্য লেআউট
আপনি যদি বাজারে সমস্ত স্ক্রীন আকারের জন্য লেআউট তৈরি করার কৌশল হিসেবে বেছে নেন, তাহলে আপনার সাইটটি হবে সমগ্র ইন্টারনেটে সবচেয়ে অনন্য। সর্বোপরি, প্রতিটি বিকল্পের জন্য সূক্ষ্ম-টিউন করার চেষ্টা করে, ডিভাইসগুলির সম্পূর্ণ পরিসীমা কভার করা আজ কেবল অসম্ভব। কিন্তু আপনি যদি মনিটর এবং ডিভাইসের পর্দার সর্বাধিক জনপ্রিয় রেজোলিউশনগুলিতে ফোকাস করেন তবে ধারণাটি খারাপ নয়। এর একমাত্র অসুবিধা হল আর্থিক খরচ। সর্বোপরি, যখন একজন ইন্টারফেস ডিজাইনার, একজন ডিজাইনার এবং একজন কোডারকে একই কাজ 5 বা 6 বার করতে বাধ্য করা হয়, তখন প্রকল্পের খরচ হবেমূল বাজেটের মূল্যের তুলনায় অসামঞ্জস্যপূর্ণভাবে বেশি।
অতএব, শুধুমাত্র এক-পৃষ্ঠার সাইটগুলি বিভিন্ন স্ক্রিনের জন্য প্রচুর সংস্করণ নিয়ে গর্ব করতে পারে, যার উদ্দেশ্য হল একটি পণ্য বিক্রি করা এবং এটি ভালভাবে করতে ভুলবেন না। ঠিক আছে, আপনার যদি এই ল্যান্ডিংগুলির মধ্যে একটি না থাকে, তবে একটি বহু-পৃষ্ঠা সাইট, তাহলে আপনার আরও চিন্তা করা উচিত।
সবচেয়ে জনপ্রিয় সাইট সাইজ
দুটি চরমের মধ্যে একটি সমঝোতা তিন বা চারটি পর্দার আকারের জন্য লেআউট রেন্ডার করছে। তাদের মধ্যে, মোবাইল ডিভাইসের জন্য একটি লেআউট হতে হবে। বাকিগুলো ছোট, মাঝারি এবং বড় ডেস্কটপ স্ক্রিনের জন্য মানিয়ে নেওয়া উচিত। সাইটের প্রস্থ কিভাবে নির্বাচন করবেন? নীচে আমরা মে 2017-এর HotLog পরিষেবার পরিসংখ্যান উপস্থাপন করছি, যা আমাদেরকে বিভিন্ন ডিভাইসের স্ক্রীন রেজোলিউশনের জনপ্রিয়তার বিতরণের পাশাপাশি এই নির্দেশকের গতিশীলতা দেখায়।
টেবিল থেকে আপনি যে সাইটটি ব্যবহার করতে চান তার আকার কীভাবে নির্ধারণ করবেন তা জানতে পারবেন। উপরন্তু, আমরা উপসংহার করতে পারি যে আজকের সবচেয়ে সাধারণ বিন্যাস হল 1366 বাই 768 পিক্সেলের একটি স্ক্রীন। এই ধরনের পর্দা বাজেট ল্যাপটপে ইনস্টল করা হয়, তাই তাদের জনপ্রিয়তা স্বাভাবিক। পরবর্তী সবচেয়ে জনপ্রিয় হল ফুল এইচডি মনিটর, যা ভিডিও, গেমস এবং তাই ওয়েবসাইট লেআউট তৈরির জন্য সোনার মান। আরও সারণীতে আমরা মোবাইল ডিভাইসের রেজোলিউশন 360 বাই 640 পিক্সেল, সেইসাথে ডেস্কটপ এবং মোবাইল স্ক্রিনের জন্য বিভিন্ন বিকল্প দেখতে পাই।
ডিজাইনিং লেআউট
তাইপরিসংখ্যান বিশ্লেষণ করার পরে, আমরা উপসংহারে আসতে পারি যে সর্বোত্তম সাইটের প্রস্থের 4টি বৈচিত্র রয়েছে:
- 1366px প্রস্থের ল্যাপটপ সংস্করণ।
- পূর্ণ HD সংস্করণ।
- ছোট ডেস্কটপ মনিটরে প্রদর্শনের জন্য 800px চওড়া লেআউট।
- সাইটের মোবাইল সংস্করণ - ৩৬০ পিক্সেল চওড়া৷
আসুন আমরা সিদ্ধান্ত নিয়েছি যে সাইটের জন্য উত্পন্ন উৎসের জন্য কোন আকার ব্যবহার করতে হবে। কিন্তু এই ধরনের একটি প্রকল্প এখনও ব্যয়বহুল হবে। তাহলে চলুন, এইবার একটি নির্দিষ্ট প্রস্থ ব্যবহার না করে আরও অপশন দেখি।
লেআউটটিকে নমনীয় করা
একটি বিকল্প পদ্ধতি রয়েছে, যখন এটি শুধুমাত্র ন্যূনতম স্ক্রীনের আকারের সাথে মানিয়ে নেওয়ার জন্য উপযুক্ত, এবং সাইটের আকারগুলি নিজেরাই শতাংশ দ্বারা সেট করা হবে৷ একই সময়ে, মেনু, বোতাম এবং লোগোর মতো ইন্টারফেস উপাদানগুলি পরম মানগুলিতে সেট করা যেতে পারে, পিক্সেলে স্ক্রিনের প্রস্থের ন্যূনতম আকারের উপর ফোকাস করে। বিষয়বস্তু সহ ব্লক, বিপরীতভাবে, পর্দা এলাকার প্রস্থের নির্দিষ্ট শতাংশ অনুযায়ী প্রসারিত করা হবে। এই পদ্ধতিটি আপনাকে ডিজাইনারের জন্য একটি সীমাবদ্ধতা হিসাবে সাইটগুলির আকার বোঝা বন্ধ করতে এবং দক্ষতার সাথে এই সূক্ষ্মতাকে হারাতে দেয়৷
গোল্ডেন রেশিও কী এবং কীভাবে এটি ওয়েব পেজ লেআউটে প্রয়োগ করা যেতে পারে?
এমনকি রেনেসাঁর সময়েও, অনেক স্থপতি এবং শিল্পী তাদের সৃষ্টিকে নিখুঁত আকার এবং অনুপাত দেওয়ার চেষ্টা করেছিলেন। এই জাতীয় অনুপাতের মান সম্পর্কে প্রশ্নের উত্তরের জন্য, তারা সমস্ত বিজ্ঞানের রাণী - গণিতের দিকে ফিরেছিল।
প্রাচীনকাল থেকে, একটি অনুপাত উদ্ভাবিত হয়েছে যা আমাদের চোখ সবচেয়ে প্রাকৃতিক এবং মার্জিত হিসাবে উপলব্ধি করে,কারণ এটি প্রকৃতিতে সর্বব্যাপী। এই ধরনের অনুপাতের সূত্রের আবিষ্কারক ছিলেন ফিডিয়াস নামে একজন প্রতিভাবান প্রাচীন গ্রীক স্থপতি। তিনি গণনা করেছিলেন যে অনুপাতের বৃহত্তর অংশটি যদি ছোট অংশের সাথে সম্পর্কিত হয় যেমন পুরোটি বৃহত্তর অংশের সাথে সম্পর্কিত, তবে এই অনুপাতটি সবচেয়ে ভাল দেখাবে। কিন্তু যদি আপনি বস্তুটিকে অসমমিতভাবে ভাগ করতে চান তবে এটি হয়। এই অনুপাতটিকে পরে সোনালী বিভাগ বলা হয়, যা এখনও সংস্কৃতির বিশ্ব ইতিহাসের জন্য এর গুরুত্বকে অত্যধিক মূল্যায়ন করে না।
ওয়েব ডিজাইনে ফিরে যান
এটি খুবই সহজ - সোনালী অনুপাত ব্যবহার করে, আপনি এমন পৃষ্ঠাগুলি ডিজাইন করতে পারেন যা মানুষের চোখে যতটা সম্ভব আনন্দদায়ক হবে। গোল্ডেন রেশিও সূত্রের সংজ্ঞা অনুসারে গণনা করলে, আমরা পাই অযৌক্তিক সংখ্যা 1, 6180339887 …, তবে সুবিধার জন্য, আমরা 1, 62 এর বৃত্তাকার মান ব্যবহার করতে পারি। এর মানে হবে যে আমাদের পৃষ্ঠার ব্লকগুলি 62 হওয়া উচিত। % এবং 38% সমগ্র, আপনি যে সাইটটি ব্যবহার করছেন তার জন্য উৎপন্ন উৎস যে আকারই হোক না কেন। আপনি এই চিত্রটিতে একটি উদাহরণ দেখতে পারেন:
নতুন প্রযুক্তি ব্যবহার করুন
আধুনিক ওয়েবসাইট লেআউট প্রযুক্তিগুলি একজন পরিকল্পক এবং ডিজাইনারের ধারণাকে সঠিকভাবে প্রকাশ করা সম্ভব করে তোলে, তাই এখন আপনি ইন্টারনেট প্রযুক্তির ভোরের তুলনায় আরও সাহসী ধারণাগুলি বাস্তবায়নের সামর্থ্য রাখতে পারেন৷ সাইটের আকার কেমন হওয়া উচিত তা নিয়ে আপনাকে আর কঠিন চিন্তা করার দরকার নেই। ব্লক অ্যাডাপটিভ লেআউট, বিষয়বস্তু এবং ফন্টের গতিশীল লোডিং এর মতো জিনিসগুলির আবির্ভাবের সাথে, ওয়েবসাইট বিকাশ অনেক বেশি আনন্দদায়ক হয়ে উঠেছে। সব পরে, এই প্রযুক্তি হয়কম নিষেধাজ্ঞা, যদিও তারা এখনও আছে. কিন্তু আপনি জানেন, সীমা ছাড়া কোন শিল্প হবে না। আমরা আপনাকে একটি সত্যিকারের সৃজনশীল নকশা পদ্ধতি ব্যবহার করার পরামর্শ দিই - সুবর্ণ অনুপাত। এটির সাহায্যে, আপনি আপনার টেমপ্লেটে যে সাইট সাইজ সেট করুন না কেন, আপনি কার্যকরীভাবে এবং সুন্দরভাবে ওয়ার্কস্পেস পূরণ করতে পারেন।
কিভাবে সাইটের কাজের জায়গা বাড়াবেন
একটি ছোট লেআউটে সমস্ত UI উপাদানগুলিকে ফিট করার জন্য আপনার কাছে পর্যাপ্ত জায়গা না থাকার একটি ভাল সুযোগ রয়েছে৷ এই ক্ষেত্রে, আপনাকে আগের চেয়ে সৃজনশীল বা আরও বেশি সৃজনশীলভাবে চিন্তা করা শুরু করতে হবে।
পপ-আপ মেনুতে নেভিগেশন লুকিয়ে সাইটে সর্বাধিক স্থান খালি করুন৷ এই পদ্ধতিটি কেবল মোবাইল ডিভাইসেই নয়, ডেস্কটপেও ব্যবহার করা যৌক্তিক। সর্বোপরি, ব্যবহারকারীকে আপনার সাইটে কী শিরোনাম রয়েছে তা সব সময় দেখার দরকার নেই - তিনি সামগ্রীর জন্য এসেছেন। এবং ব্যবহারকারীর ইচ্ছাকে অবশ্যই সম্মান করতে হবে।
মেনুটি লুকানোর একটি ভাল উপায়ের একটি উদাহরণ হল নিম্নলিখিত লেআউটটি (নিচের ছবি)।
লাল এলাকার উপরের কোণে, আপনি একটি ক্রস দেখতে পাবেন, যার উপর ক্লিক করলে মেনুটি একটি ছোট আইকনে লুকিয়ে থাকবে, ব্যবহারকারীকে ওয়েবসাইটের বিষয়বস্তু সহ একা রেখে যাবে।
তবে, এটি ঐচ্ছিক, আপনি নেভিগেশন ছেড়ে যেতে পারেন, যা সর্বদা দৃষ্টিতে থাকবে। তবে আপনি এটিকে একটি সুন্দর ডিজাইনের উপাদান করতে পারেন, এবং শুধুমাত্র সাইটে জনপ্রিয় লিঙ্কগুলির একটি তালিকা নয়। টেক্সট লিঙ্ক ছাড়াও বা এমনকি পরিবর্তে স্বজ্ঞাত আইকন ব্যবহার করুন। এটা একইআপনার সাইটটিকে ব্যবহারকারীর ডিভাইসে স্ক্রীনের স্থানের আরও দক্ষ ব্যবহার করার অনুমতি দেবে৷
সেরা ওয়েবসাইট হল প্রতিক্রিয়াশীল
আপনি যদি না জানেন যে সাইটের জন্য কোন লেআউট বেছে নেবেন, তাহলে সবকিছুই আপনার জন্য সহজ। ডেভেলপমেন্ট খরচ বাঁচাতে এবং একই সাথে কিছু ডিভাইসের দুর্বল লেআউটের কারণে আপনার শ্রোতা না হারাতে, প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করুন।
প্রতিক্রিয়াশীল ডিজাইন এমন একটি ডিজাইন যা বিভিন্ন ডিভাইসে সমানভাবে ভালো দেখায়। এই পদ্ধতিটি আপনার সাইটটিকে এমনকি ল্যাপটপে, এমনকি একটি ট্যাবলেটে, এমনকি একটি স্মার্টফোনেও বোধগম্য এবং সুবিধাজনক হতে দেয়৷ এই প্রভাবটি স্বয়ংক্রিয়ভাবে পর্দার কার্যক্ষেত্রের প্রস্থ পরিবর্তন করে অর্জন করা হয়। আপনার সাইটের জন্য প্রতিক্রিয়াশীল স্টাইল শীট ব্যবহার করে, আপনি সম্ভাব্য সর্বোত্তম সিদ্ধান্ত নিচ্ছেন।
প্রতিক্রিয়াশীল ডিজাইন এবং ওয়েবসাইট সংস্করণের মধ্যে পার্থক্য কী
প্রতিক্রিয়াশীল ডিজাইন সাইটের মোবাইল সংস্করণ থেকে আলাদা যে পরবর্তী ক্ষেত্রে, ব্যবহারকারী একটি HTML কোড পায় যা ডেস্কটপের থেকে আলাদা। সার্ভার পারফরম্যান্স অপ্টিমাইজেশনের পাশাপাশি সার্চ ইঞ্জিন অপ্টিমাইজেশনের ক্ষেত্রে এটি একটি অসুবিধা। উপরন্তু, সাইটের বিভিন্ন সংস্করণের পরিসংখ্যান গণনা করা আরও কঠিন হয়ে পড়ে। অভিযোজিত পদ্ধতির এই অসুবিধা নেই।
বিভিন্ন ডিভাইসের জন্য প্রতিক্রিয়াশীলতা নির্দিষ্ট প্রস্থের শতাংশ সহ একটি লেআউটের মাধ্যমে বা উপলব্ধ স্থানে ব্লক স্থানান্তর করার মাধ্যমে অর্জন করা হয় (এর পরিবর্তে একটি স্মার্টফোনে উল্লম্ব সমতলেডেস্কটপে অনুভূমিক), অথবা বিভিন্ন স্ক্রিনের জন্য পৃথক লেআউট তৈরি করা।
আমাদের টিউটোরিয়ালগুলিতে প্রতিক্রিয়াশীল ডিজাইন এবং বিকাশ সম্পর্কে আরও জানুন।
