প্রোগ্রামাররা অনেক সময় খেয়াল করেন না যে, কিভাবে একটা বাটন, ছবি বা ভিডিও স্ক্রিনে পৌছায় সে ব্যাপারে জানতে ৯৯.৯৯% ব্যবহারকারী আগ্রহী নয়। ব্যবহারকারী শুধু দেখবে কত দ্রুত, কত সহজে তারা তাদের প্রয়োজনীয় তথ্য পাচ্ছে। আর এর ব্যত্যয় ঘটলে তারা বিরক্ত হয় – অভিযোগ জানায়। আর তাই এখানে দেয়া হল তিনটি ভুল যা প্রোগ্রামাররা সাধারণত করে থাকেন এবং সাথে থাকছে এর সমাধান।
১. সাধারণ নিয়মগুলোতে ভুল করা:
ইন্টারনেট ব্যবহার শেখার সাথে সাথে একজন ব্যবহারকারী জেনে যায় কিভাবে ওয়েবসাইটে কাজ করতে হয়। আর তাই কোন কারণে যদি কোন ওয়েবসাইট ব্যবহারকারীর প্রত্যাশা পূরণ করতে ব্যর্থ হয় তাহলে তারা বিরক্ত বোধ করে। যেমন,
- তারা একটা অবজেক্টের উপর যখন মাউস নিয়ে আসে এই ভেবে যে একে ক্লিক করা যাবে, কিন্তু দ্বিধায় পরে যায় যখন দেখে হ্যান্ড পয়েন্টারের স্থলে অ্যারো (Arrow) চলে এসেছে।
- তারা নীল রঙের লেখার উপর ক্লিক করে যখন দেখে সেটা কোন লিঙ্ক নয়;
- পেজের উপরের লোগোতে যখন চাপ দেয় এই ভেবে যে এটি তাদেরকে হোম পেজে নিয়ে যাবে, কিন্তু দেখা যায় সেই তাদেরকে একটা সাদা পেজে নিয়ে এসেছে, অথবা কোন কিছুই ঘটেনা।
ওয়েব ডেভেলপাররা অনেক সময় আমাদের প্রত্যাশা পূরণ করতে পারেন না, কিন্তু তাদের উচিত নির্দিষ্ট কিছু নিয়ম সবসময় মেনে চলা। এখানে সেরকম তিনটি নিয়ম দেয়া হল:
a) যা কিছু ক্লিক করা যাবে সেখানে অ্যারোর স্থলে হ্যান্ড পয়েন্টার আসবে। এই কাজটি করুন এই সিএসএস-টি ব্যবহারের মাধ্যমে:
div:hover { cursor: pointer; }
b) যে সকল টেক্সটের মাধ্যমে লিঙ্ক দেয়া হয়েছে সেগুলোর আকার, ধরণ এবং রঙ অন্যান্য টেক্সটের চাইতে একটু ভিন্ন করুন। আন্তর্জাতিক নিয়ম মেনে সেগুলোকে নীল রাখুন। অন্য টেক্সটে নীল রঙ ব্যবহারে বিরত থাকুন।
c) আপনার ওয়েবসাইটের হেডারে যে লোগো রয়েছে তা ক্লিকেবল করুন, এবং সবসময় ব্যবহারকারীকে হোমপেজে নিয়ে যায় সে ব্যাপারে নিশ্চিত করুন।
কাজটি খুব সহজ এ ভাবে করুন:
<a href=”http://www.example.com“>
<img src=”logo.gif” alt=”Example Company” title=”Example Company Logo” height=”100″ width=”100″ />
</a>
২. স্লো-লোডিং ওয়েবসাইট:
ব্যবহারকারীরা ধীরে লোড হয় এমন ওয়েবসাইটগুলোকে ঘৃণা করে। ৪০ ভাগ ব্যবহারকারী লোড হতে তিন সেকেন্ডের বেশি সময় লাগে এমন ওয়েব সাইটে থাকবার ব্যাপারে আগ্রহ হারিয়ে ফেলে। এখানে দেয়া হল কিভাবে আপনার ওয়েব সাইটটিকে গতিশীল রাখবেন:
ক) ছবিগুলোকে ছোট রাখুন। আপনার ওয়েবসাইটের ছবিগুলো যত বড় হবে তত বেশি লোড হতে সময় নিবে। আর তাই ছবিগুলো ফটোশপ বা গিম্প ব্যবহার করে রিসাইজ এবং কমপ্রেস করুন এবং তারপর পোস্ট করুন। এবার দেখুন আপনার ওয়েব সাইট কত ফাস্ট লোড হচ্ছে।
খ) জাভাস্ক্রিপ্ট হেডট্যাগে লোড না করে ফুটারে লোড করুন, এতে অনেক কম সময় নষ্ট হবে। এতে জাভাস্ক্রিপ্ট লোড হবার আগে পুরো পাতা খুব দ্রুত লোড হয়ে ব্যবহারকারী সামনে চলে আসবে। এই কোডটি ব্যবহার করে দেখতে পারেন:
<script type=”text/javascript” src=”js/scripts.js”></script>
</body>
</html>
গ) মাঝে মাঝে নতুন প্রোগ্রামাররা ইনলাইন স্টাইল অথবা ইন্টারনাল স্টাইলশিট ব্যবহারের মাধ্যমে প্রতি পেজের জন্য আলাদা আলাদা ভাবে সিএসএস লোড করে থাকে। কোডগুলো সাধারণত এরকম হয়ে থাকে:
<p style=”margin-top: 50px;”>Hi Mom!</p>
অথবা ইন্টারনাল স্টাইলশিটের ক্ষেত্রে এ ধরণের কোড:
<style type=”text/css”>
p { margin-top: 50px; }
</style>
কিন্তু যে সকল পেজ আপনার এইচটিমিএল কোডগুলো ধারণ করে সেই পেজগুলোতে এই ধরনের সিএসএস কখনো ব্যবহার করবেন না। এই ধরণের কোডগুলোকে এক্সটার্নালভাবে সংরক্ষণ করুন এভাবে:
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
এভাবে সিএসএস সংরক্ষণ করলে দুটি বিশেষ সুবিধা পাওয়া যায়: (এক) ব্যবহারকারীর কম্পিউটার এই এক্সটারনাল স্টাইলশিটটি সেভ করে ফেলবে এবং প্রতি পেজের সাথে ব্যবহার করবে। যার ফলে লোডিং এর সময় অনেকটা কমে যাবে। (দুই) এক্সটারনাল স্টাইলশিট মেইনটেন করা খুব সহজ। আপনাকে যদি কোন কারণে ফন্টের আকার পরিবর্তন করতে হয় তাহলে শুধু মাত্র এক স্থানের পরিবর্তনের মাধ্যমে পাচ্ছেন সকল পেজে পরিবর্তনের সুবিধা।
৩. ভবিষ্যতে সম্ভাব্য পরিবর্তনের কথা চিন্তা করছেন না:
আজকাল বেশির ভাগ প্রোগ্রামাররা তাদের ওয়েবসাইট তৈরি করছে কনটেন্ট ম্যানেজমেন্ট সিস্টেম ওয়ার্ডপ্রেস, জুমলা অথবা ড্রুপাল ব্যবহারের মাধ্যমে। এ ধরনের ম্যানেজমেন্ট সিস্টেমের সবচেয়ে বড় সুবিধা হচ্ছে ওয়েবসাইটের গ্রাহকেরা নিজেরাই সাইটটি আপডেট এবং পরিবর্তন করতে পারে।
কিন্তু সমস্যা হচ্ছে বেশির ভাগ ডেভেলপার ওয়েবসাইট কনটেন্ট তৈরি করে অবসর সময়ে। ধরুন একজন ডেভেলপার একটি সাইট লঞ্চ করবার সময় সিএসএস স্টাইল তৈরি করলো হেডিংয় ১,২ এবং ৩ এর জন্য। কিন্তু কয়েকমাস পর কেউ হেডিং ৬ এ কাজ করবার সিদ্ধান্ত নিল, যেহেতু এই অপশনটি ওয়ার্ডপ্রেসে রয়েছে। আর তার ফলে যেহেতু ডেভেলপার প্রথমদিকে এভাবে চিন্তা করে স্টাইলটিকে তৈরি করেন নি সেহেতু ডিফল্ট স্টাইলটির মাঝে পরিবর্তন ঘটে যাবে। এখানে দেয়া হল কিভাবে এ সমস্যার সমাধান করবেন:
কমন ট্যাগগুলোকে স্টাইলের অন্তর্ভুক্ত করুন:
Body (<body>)
Heading 1, 2, 3, 4, 5, 6 (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
Link (<a>)
Paragraph (<p>)
Address (<address>)
Preformatted (<pre>)
Strong (<strong>)
Unordered list (<ul>)
Ordered list (<ol>)
Quotes (<blockquote>)
শুধুমাত্র সাধারণ স্টাইল আপনার ওয়েবসাইটটি ভেঙ্গে ফেলার জন্য দায়ী নয়, বিশাল আকারের ছবি এবং ওয়ার্ড থেকে কপি/পেস্টও এই ব্যাপারে বেশ পারদর্শী। আপনার গ্রাহককে কিভাবে সাইটে কনটেন্ট আপডেট করতে হবে এ ব্যাপারে প্রশিক্ষণ দেয়াটাকেও বিবেচনায় রাখতে পারেন।
