মোবাইলের উপযোগী ওয়েবসাইট তৈরির ক্ষেত্রে যা যা লক্ষ্য রাখবেন

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

  • বর্তমান ও ভবিষ্যত উদ্দেশ্য নির্ধারণ:

আমরা এমন এক সময়ে আছি যেখানে প্রতিনিয়ত প্রযুক্তিগত উন্নয়ন ঘটছে। আর মোবাইল ওয়েবসাইট ডিজাইনের ক্ষেত্রে উন্নয়নের মাত্রা আরও বেশি।আমরা চিন্তা করতে পারি ২০১০ সালের প্রথম iPad‘র কথা আর বর্তমান iPad এর।দুটোর মাঝে বৈচিত্রগত পার্থ্যক্য যথেষ্ট।আর আমরা এটা সহজেই অনুমান করতে পারি যে, এখন থেকে ৩ বছর পর এই ধরনের পার্থ্যক্য আরও বৃদ্ধি পাবে।সুতরাং আপনাকে এমনভাবে আপনার মোবাইল সাইটটি ডিজাইন করতে হবে যাতে করে বর্তমানের সাথে সাথে আগামী ২-৩ বছর কোনপ্রকার রি-ডিজাইন ছাড়াই যেন সেবা প্রদান সম্ভব হয়।

  • আপনার টার্গেট কাষ্টমার এবং তারা কি ব্যবহার করে সে সম্পর্কে জানুন:

আপনার মোবাইল ওয়েবসাইটটি দেখতে মানুষজন কি ধরনের ডিভাইস ব্যবহার করে তা জানা আপনার সাইটের ডিজাইন ও কেীশল নির্ধারণের জন্য একটি গুরুত্বপূণ বিষয়। অনেক মানুষই স্মার্টফোন ব্যবহার করেন।কিন্তু এর অর্থ এই নয় যে সকলেই করেন বা সকলেরই iPhone/Android রয়েছে।কাজেই আপনার টার্গেট কাষ্টমার কি ডিভাইস ব্যবহার করেন তা analytics/research এর মাধ্যমে বের করে আপনাকে সাইটটি সেই অনুপাতে ডিজাইন করতে হবে।

  • মোবাইল ওয়েবসাইটের ব্যবহার ও আচরণের ধরণ সম্পর্কে জানুন:

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

  • মূল কন্টেন্ট একই রাখুন

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

  • গ্রিড ও ব্রেকপয়েন্ট নির্ধারণ করুন

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

  • কন্টেন্ট ডেলিভারি তড়িৎ করুনঃ

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

  • ব্যবহারকারীর দৃষ্টিকোন থেকে ডিজাইন করুনঃ

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

  • সঠিক ফন্ট ব্যবহার করুনঃ

এমন ফন্ট ব্যবহার করুন যাতে করে তা পরিষ্কার দেখায় ও সহজেই পড়া যায়।যদি এক্ষেত্রে সমস্যা হয় তাহলে serif font ব্যবহার করতে পারেন। আর বর্তমানে মোবাইল সাইটগুলোতে নতুন নতুন ফন্ট ব্যবহারের সুবিধা রয়েছে।আপনি আপনার সাইটের জন্য embed fonts ও ব্যবহার করতে পারেন।সাইটের ব্যবহারকারীদের জন্য সহজেই বোধগম্য হয় এমন ফন্ট ব্যবহার করায় উত্তম।

  • ব্যাটারী লাইফ বিবেচনায় রাখুনঃ

মোবাইল ওয়েবসাইট ডিজাইনে ব্যাটারী লাইফ বিবেচনায় রাখতেই হবে এমনটি নয়, তবে যদি আপনি বিবেচনায় রাখেন তাহলে ব্যবহারকারীরা উপকৃত হবেন।স্মার্টফোন ও ট্যাবলেটস এ ব্যাটারী সাইজ অপেক্ষাকৃত ছোট হয় কিন্তু প্রসেসর শক্তিশালী হয়। প্রসেসর যতবেশি কাজ করবে ব্যাটারীও তত কমবে। বিশেষতঃ HTML5 feature এর ক্ষেত্রে এমনটি ঘটে থাকে। কাজেই বিষয়টি ডিজাইনারদের বিবেচনায় রাখা উচিৎ।

মোবাইল ওয়েবসাইটের একটি উদাহরণ এখানে দেই। আমাদের নিজেদের প্রতিষ্ঠান ক্রিয়েটিভ আইটি লিঃ এর করা বাংলাদেশ ইকোনোমিকস সাইটটির মোবাইল ভার্সন রয়েছে। এড্রেসটি হলোঃ http://beza.gov.bd/ । এ ওয়েবসাইটে মোবাইল ও ডেস্কটপে আলাদাভাবে প্রবেশ করে দেখুন, তাহলে সবার কাছে পুরো ব্যাপারটি অনেক বেশি পরিস্কার হয়ে যাবে।  এ পোস্টটি লিখতে সহযোগিতা করার জন্য  আমাদের ট্রেনিং সেন্টারের ছাত্র কবির ভাইকে ধন্যবাদ যদি না জানাই তাহলে ব্যপারটি ভাল দেখায়না।

ফেসবুক গ্রুপঃ http://www.facebook.com/groups/creativeit/

Level 0

আমি মোঃ ইকরাম। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 103 টি টিউন ও 130 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 4 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

নিজেকে অনলাইন ব্রান্ড এক্সপার্ট হিসেবে পরিচয় দিতে গর্ববোধ করলেও গ্রাফিকস, ওয়েবডিজাইন এবং অ্যানিমেশন বিষয়েও প্রচুর কাজের অভিজ্ঞতা রয়েছে। লার্নিং এন্ড আর্নিং ডেভেলপমেন্ট প্রজেক্টের চট্টগ্রাম ও সিলেট বিভাগের প্রধান সমন্বয়ক হিসেবে দায়িত্ব পালন করছি। ব্লগিংটা নেশার কারনে করি। নিজের ব্লগের লিংকঃ http://genesisblogs.com/


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

এই সম্পর্কে Resoponsive Desinger এর জনক Ethan Marcotte এর Responsive Design বইটি দেখতে পারেন। শুরু থেকে শেষ পর্যন্ত সব আছে। আমি চাইলে ডাউনলোড লিংক দিতে পারি।