ওয়েব সাইট ডিজাইনের ৪টি টেকনিক্যাল বিষয়

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

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

তাই সাইট ডিজাইনের জন্য উল্লেখিত বিষয়গুলো সম্বন্ধে ধারণা রাখতে হবে। অন্যথায় আপনার সাইটের ডিজাইন ইউজার ফ্রেন্ডলি হবে না। সার্চ ইঞ্জিন ক্রাউলিং ফ্রেন্ডলি হবে না। মনিটাইজেশন গাইডলাইন ফ্রেন্ডলি হবে না। ফলে গুগল সার্চে র‌্যাংক করবে না। এডভারটাইজাররা পাবলিশার হিসেবে এপ্রুভ করবে না। তাই ওয়েব সাইট ডিজাইনে গুরুত্বপূর্ণ ৪টি বিষয় সতর্কতার ফলো করতে হবে।

রেসপনসিভ ডিজাইন | Responsive Design

রেসপনসিভ মানে হলো আপনার সাইটটি সকল ডিভাইসে ফিট/এডজাস্ট হবে। ভিউয়াররা ডেস্কটপ, ল্যাপটপ, বড় স্ক্রিন, ট্যাব বা মোবাইলে দেখতে গিয়ে কোন সমস্যায় যেন না পড়েন। সব ডিভাইসে ফিট হয়। সাইটের লেআউট, টেক্সট, ছবি, ভিডিও এবং অন্যান্য ইলিমেন্টগুলো ডিভাইসের স্ক্রিনের রেজুলেশনের সাথে স্বয়ংক্রিয়ভাবে এডজাস্ট হয়। এটাই রেসপনসিভনেস (Responsiveness), সহজ বাংলায়। তবে এখানে অনেকগুলো টেকনিক্যাল টার্ম রয়েছে। সেগুলো যারা ডিজাইনার-ডেভেলপার তাদের জন্য। সহজ ভাষায় এটাই হচ্ছে ওয়েব সাইট রেসপনসিভ হওয়ার সংজ্ঞা।

২০১০ সালের আগে তৈরি হওয়া ওয়েবসাইটগুলোর লেআউট রেসপনসিভ ছিল না। তখনকার ওয়েবসাইটগুলো একেক ডাইমেনশনে একেক রকম দেখাতো। অনেক সময় স্ক্রিনের রেজুলেশন ভিন্নতা এবং ব্রাউজারের ভিন্নকার কারণে ডিজাইন ঠিক থাকতো না। ওই সময়ের দিকে ফেসবুক সাইটই রেসপনসিভ ছিল না।

তাই সাইট যেন রেসপনসিভ হয় সে দিকে নজর দিতে হবে। বিশেষ করে মোবাইল লেআউটকে প্রাধান্য দিতে হবে। বিশ্বের প্রায় ৫২% ওয়েব সাইট ভিজিট হয় মোবাইল থেকে। প্রতিদিনই এই সংখ্যা বাড়ছে। ব্যবহারকারী যেন মোবাইলে আপনার সাইট দেখতে গিয়ে কোন সমস্যায় না পড়েন। বিরক্ত না হন। বর্তমানে সব ডিজাইনাররাই রেসপনসিভ ডিজাইন করেন। তারপরও আপনি কাজ দেয়ার আগেই কথা বলে নিবেন এবং পরে চেক করে নিবেন রেসপনসিভ হয়েছে কিনা। আপনার সাইটটি রেসপনসিভ কিনা সহজেই তা দেখে নিতে পারেন, এখান থেকে। এছাড়াও খুব সহজেই ক্রোম ব্রাউজার থেকেও দেখে নিতে পারেন সাইটটি রেসপনসিভ কিনা। ক্রোমে সাইটটি ওপেন করে ইন্সপেক্ট ইলিমেন্ট (Inspect Element) থেকে দেখে নিতে পারবেন কোন ডিভাইসে কেমন দেখাবে।

হোম পেজ ও সাইট নেভিগেশন | Homepage & Site Navigation

হোম পেজ ডিজাইনকে যতটুকু সম্ভব সিম্পল রাখুন। অনেকেই ডিজাইনকে আকর্ষণীয় করার জন্য অনেক কিছু ব্যবহার করেন। ইমেজ, ভিডিও এবং অনেক কিছু। এতো কিছুর ব্যবহার আপনার সাইট স্পিড (Website loading speed) কে কমিয়ে দিবে। সাইট লোডিং স্পিড যত কম হবে ইউজার ততবেশি আগ্রহী হবে সাইট ভিজিটের জন্য। স্পিড বেশি হলে ইউজার ধৈর্য্য হারিয়ে অন্য সাইটে চলে যায়। কারণ যে কনটেন্টের জন্য ইউজার আপনার সাইটে এসেছে সেই কনটেন্ট যে শুধুমাত্র আপনার সাইটেই আছে এরকম না। ইউজার গুগল করলে এরকম অনেক সাইট পেয়ে যাবে। তাই ডিজাইনের ক্ষেত্রে সাইটলোডিং স্পিড অনেক গুরুত্বপুর্ণ। সেই সাথে গুগল র‌্যাংকিং এর জন্য সাইটস্পিড খুবই জরুরী একটি বিষয়। আপনার সাইটের স্পিড চেক করে নিতে পারেন, এখানে। সাইট লোডিং স্পিড ০-২.৫ হলে ভালো। এর চেয়ে বেশি হলে অবশ্যই কমাতে হবে।

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

অনেকেই আবার ফ্রিতে পাওয়া অনেক স্ক্রিপ্ট (Script) বা কোড ব্যবহার করেন। যেগুলো সাইটের বিভিন্ন ইলিমেন্টে ব্যবহার করা হয়। গুগল থেকে সংগ্রহ করা হয়। এসব ফ্রি স্ক্রিপ্টের ব্যাপারে সতর্ক থাকতে হবে।

হোম পেজের মেন্যুগুলোকে ছোট রাখুন। যথাসম্ভব মেন্যুর সংখ্যা কম রাখুন। অযথা অতিরিক্ত মেন্যু তৈরি করবেন না। এতে ইউজারের অনীহা চলে আসবে। সাইটের নেভিগেশন ইউজার ফ্রেন্ডলি রাখুন। যেকোন পেজ থেকে যেন সহজেই হোম পেজে ফিরে আসতে পারে সে দিকে খেয়াল রাখুন। পেজের নিচে থেকে যেন সহজেই উপরে বা হোম পেজে ফিরে আসতে পারে সে ব্যবস্থা রাখুন। সাইটে স্ক্রলিং কনটেন্ট রাখুন। এটা লিংক এর চেয়ে বেশি ইউজার ফ্রেন্ডলি (User friendly)। একজন ইউজার একটি কনটেন্ট যখন পড়ছে তখন রিলেটেড অন্য কোন কনটেন্ট দেখতে গিয়ে যদি লিংকের মাধ্যমে তা পায় তাহলে যতটুকু আগ্রহী হয়। সেটা যদি স্ক্রলিং এর মাধ্যমে পায় তাহলে তার চেয়ে বেশি আগ্রহী হয়। বর্তমানে অনেক সাইটেই দেখবেন এই স্ক্রলিং কনটেন্ট (Scrolling content)।

টাইপোগ্রাফি এবং পাঠযোগ্যতা | Typography & Readability

সাইটের লেখার ফন্ট (Font) এমন হতে হবে যেন ভিউয়ার পড়তে গিয়ে অস্বস্তি বোধ না করে। গ্রাফিক্যাল ইমেজ এবং ইনফোগ্রাফিক্সগুলো (Infographics) নান্দনিক ফন্ট দিয়ে করতে পারেন। কিন্তু মূল লেখাটি অবশ্যই সাধারণ ফন্ট দিয়ে হতে হবে। ফন্টের কালারের ক্ষেত্রে কালোই সবচেয়ে ভালো। এক্ষেত্রে ১০০% কালো ব্যবহার না করে ৯৫% কালো কালার ব্যবহার করবেন।

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

হেডিং, সাব-হেডিং, টপিকগুলোতে ফন্টের সাইজ বড় করতে হেডিং ট্যাগ (H1, H2, H3, H4, H5, and H6) ব্যবহার করুন। ফন্টের সাইজের সিএসএস ব্যবহার করার সুযোগ রয়েছে। আগে সিএসএস এর মাধ্যমে টেক্সট এর ফন্টের সাইজ বড়-ছোট করা হতো। এটাও রেসপনসিভ ডিজাইন চালু হওয়ার আগে প্রচলন। আগের ওয়েবসাইটগুলোতে সিএসএস এর মাধ্যমে ফন্টের আকার কন্ট্রোল করা হতো। বর্তমানে হেডিং ট্যাগ (HTML heading tags) এর মাধ্যমে ফন্টের সাইজ কন্ট্রোল করা হয়। এটা এসইও ফ্রেন্ডলি। কনটেন্ট গুগলে র‌্যাংকিং এর জন্য এটা গুরুত্বপূর্ণ একটা ফ্যাক্ট।

কালার ও ইমেজ | Color & Image

আপনার সাইটের জন্য নির্দিষ্ট একটি বা দুটি কালার (color) ব্যবহার করুন। আগে থেকেই ঠিক করে নিন কোন কালার ব্যবহার করবেন। একেক সময়ে একেক কালার ব্যবহার করবেন না। চেষ্টা করুন সবসময় নিজের সাইটের নির্দিষ্ট কালার ব্যবহার করতে।

সাইটে গ্রাফিক্স ইলিমেন্টগুলোতে (Graphical element) নির্দিষ্ট কালারের ব্যবহার রাখুন। হেডিং, সাব-হেডিংগুলোতে নির্দিষ্ট কালার ব্যবহার করুন। আর বডির লেখা বা মূল লেখায় কালো কালার ব্যবহার করবেন। যেমনটা টাইপোগ্রাফিতে বলা হয়েছে। গুগল, ফেসবুক এবং আরো কয়েকটি ওয়েবসাইট দেখলেই সহজে বুঝতে পারবেন। তারা কিভাবে তাদের লোগোর কালার এবং নিজস্ব কালার বিভিন্ন জায়গায় ব্যবহার করেছে।

ইমেজ ব্যবহার সাইট লোডিং স্পিডের এক বড় ফ্যাক্ট আগেই বলা হয়েছে। সাইটে ব্যবহৃত ইমেজগুলো যথাসম্ভব হালকা (Low weight) রাখতে চেষ্টা করুন। অনেকেই বেশি ডাইমেনশনের ছবি ব্যবহার করেন। এতে করে সাইটের লোডিং স্পিড বেড়ে যাচ্ছে সেদিকে খেয়াল রাখতে হবে। আর ডিজাইনের ক্ষেত্রে সতর্ক থাকুন। ইমেজগুলো যেন আইক্যাচিং (Eye catching) হয়। যেন ইউজারকে বিরক্ত না করে, সেদিকেও খেয়াল রাখুন।

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