কন্টেন্ট
গত কয়েক বছর ধরে প্রতিক্রিয়াশীল ওয়েব ডিজাইন একটি আলোচিত বিষয় been এবং কেন না? নমনীয় গ্রিড, নমনীয় চিত্র এবং মিডিয়া ক্যোয়ারির উপাদানগুলি আমাদের বিভিন্ন আকারের স্ক্রিনে ওয়েবসাইট পরিবেশন করতে সহায়তা করার একটি শক্তিশালী রেসিপি।
তবে আমাদের সেখানে থামানো উচিত নয়। সত্যই হতে প্রতিক্রিয়াশীল, আমাদের ব্যবহারকারীদের তারা যেখানে আছে আমাদের অবশ্যই তাদের সাথে দেখা করতে হবে। সত্যিকারের প্রতিক্রিয়াশীল সাইটগুলি কেবল কোনও ডিভাইসের স্ক্রিন আকারের সাথেই নয়, এর বিস্তৃত ক্ষমতা এবং সেটিংসেও নিজেকে খাপ খায়। আমাদের সাইটের কোনও আকারের পর্দা পরিচালনা করা উচিত। তবে তাদের একাধিক স্ক্রিন বা কোনও পর্দাও হ্যান্ডেল করা উচিত। এবং তাদের আরও আরও পরিচালনা করা প্রয়োজন। কালো এবং সাদা প্রদর্শন? এনে দাও। অডিও নেই? সমস্যা নেই. কোনও জাভাস্ক্রিপ্ট, সিএসএস, বা এমনকি চিত্র সমর্থন নেই? ঠিক. ধীর মোবাইল সংযোগ? সাইটের একটি হালকা ভার্সন পরিবেশন করুন। অস্বাভাবিক ইনপুট ডিভাইসগুলি? আমাদের কাছে সব একই।
আমরা সেখানে কিভাবে যেতে পারি? আমি পাঁচটি বেসিক বিল্ডিং ব্লক দেখতে পাচ্ছি: শব্দার্থক শব্দ, অ্যাক্সেসযোগ্যতা, ফোকাস, মিডিয়া ক্যোয়ারী এবং দক্ষতা।
1. শব্দার্থবিজ্ঞান
আমরা ব্যবহারকারীদের মাথায় রেখে ওয়েবসাইটগুলি ডিজাইন করি তবে তাদের ব্যবহারকারীর অভিজ্ঞতা তাদের ব্রাউজারগুলি কী বোঝে তার উপর নির্ভর করে। অবিশ্বাস্য দক্ষতার ডিভাইসগুলি আমাদের নথি এবং অ্যাপ্লিকেশনগুলি বোঝাতে সক্ষম হয়েছে তা নিশ্চিত হওয়ার জন্য, আমাদের এগুলিকে একটি দৃ se় অর্থেবাদী ভিত্তি সরবরাহ করতে হবে। অর্থপূর্ণ এইচটিএমএল হ'ল এটি হ'ল এটি এবং এটি সবচেয়ে বেসিক ব্রাউজারগুলি দ্বারা বোঝা যায়। এইচটিএমএল 5 এর মতো উপাদান সহ সাম্প্রতিক ব্রাউজারগুলির জন্য অতিরিক্ত শব্দার্থক অর্থ যুক্ত করে নিবন্ধ এবং সময়। এআরআইএর ভূমিকা এবং ল্যান্ডমার্কস, প্রাথমিকভাবে অ্যাক্সেসযোগ্যতার জন্য তৈরি করা হয়েছে, ডিভাইসগুলির জন্য অতিরিক্ত প্রসঙ্গ এবং অর্থ যুক্ত করুন। এই কাঠামোটি ডিভাইসগুলি ওয়েব বুঝতে এবং সঠিকভাবে রেন্ডার করতে সহায়তা করে।
শব্দার্থকগুলির আরও একটি দিক রয়েছে, যদিও। আমাদের সাবধানে আমাদের কন্টেন্ট ম্যানেজমেন্ট সিস্টেমগুলি পরীক্ষা করতে হবে এবং তারা তাদের উদ্দেশ্যটি সম্পাদন করছে কিনা তা মূল্যায়ন করতে হবে। পাঠ্য এবং মিডিয়াকে অবিচ্ছিন্ন ব্লক হিসাবে সামগ্রীর চিকিত্সা করা কার্যকর হবে না কারণ আমরা এটিকে ডিভাইস এবং ডিভাইস ক্ষমতার বিস্তৃত পরিসরে পরিবেশন করি। পরিবর্তে, আমাদের উচিত বিষয়বস্তু তৈরির প্রক্রিয়াতে শব্দার্থ নির্মাণ করা, সাংবাদিকতা এবং এনপিআরের "একবার তৈরি করুন, সর্বত্র প্রকাশ করুন" মডেল থেকে ধার নেওয়া। আমরা বিষয়বস্তু প্রকাশের জন্য যে সিস্টেমগুলি ব্যবহার করি সেগুলি সিনেমিক স্ট্রাকচারকে শক্তিশালী না করে, এটি টিকতে পারে না। কোনও শব্দার্থবিজ্ঞান যদি কোনও সাইটের জীবন ধরে থাকে তবেই প্রতিক্রিয়াশীলতা সফল হতে পারে।
2. অ্যাক্সেসযোগ্যতা
অ্যাক্সেসিবিলিটি প্রায়শই চেক করা বাক্সের মতো আচরণ করা হয় বা কোনও বিষয় কেবলমাত্র "করণীয় সঠিক জিনিস" বলে মনোযোগ দেয়। তবে অ্যাক্সেসযোগ্যতার কৌশলগুলি সাইটগুলিকে প্রত্যেকের জন্য আরও ব্যবহারযোগ্য এবং ডিভাইসের বিস্তৃত পরিসরে আরও বেশি খাপ খাইয়ে নিতে সক্ষম করে।
বধির ব্যবহারকারীদের জন্য তৈরি গাইডলাইনস সাইটগুলিতে তাদের ডিভাইস নিঃশব্দ করা ব্যবহারকারীদের জন্য আরও ভাল কাজ করে। রঙিন দৃষ্টিহীনতার কথা মাথায় রেখে কনট্রাস্ট সেটিংসটি সুনির্দিষ্টভাবে নিশ্চিত করে যে সাইটগুলি সীমিত বা কোনও রঙের ক্ষমতা ছাড়াই পঠনযোগ্য। ভয়েস নিয়ন্ত্রণ এবং অডিও আউটপুট মূলধারার দিকে চলে যাওয়ায় পর্দার পাঠকদের সাথে অন্ধ ব্যবহারকারীদের জন্য সাইটগুলিকে কাজ করার কৌশলগুলি সেগুলি ব্যবহারযোগ্য করে তোলে। স্পষ্ট ভাষায় সামগ্রী উপস্থাপন করা এবং স্বচ্ছতার জন্য ডিজাইন করা প্রত্যেকের পক্ষে ভাল।
এআরআইএর লাইভ অঞ্চলগুলি, যা ব্রাউজারগুলি কীভাবে এবং কখন পৃষ্ঠার অংশে পরিবর্তনগুলি সম্পর্কে ব্যবহারকারীকে অবহিত করবে তা আমাদের নিয়ন্ত্রণ করতে দেয়, এখানে একটি বিশেষ ভূমিকা আছে। লাইভ অঞ্চলগুলির পর্দার পাঠক এবং কেবলমাত্র অডিও-কেবল প্রসঙ্গের জন্য সুস্পষ্ট প্রভাব রয়েছে, তবে গুগল গ্লাসের মতো এইচইউডি চালিত ডিভাইসগুলিতে এবং আরও কম স্ক্রিনযুক্ত ডিভাইসগুলিতে একটি ভাল ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করা তাদের পক্ষে গুরুত্বপূর্ণ। ইন্টারেক্টিভ, ডেটা-চালিত, রিয়েলটাইম ওয়েবসাইটগুলি ক্রমবর্ধমান সাধারণ; যেগুলি ডিভাইসের একটি ব্যাপ্তির জন্য প্রস্তুত হয় না সেগুলি বক্ররেখার পিছনে থাকবে।
3. ফোকাস
ব্যবহারকারীরা ওয়েবসাইটগুলিকে সামগ্রিকভাবে বিবেচনা করে তবে ব্রাউজারগুলি একসাথে কেবলমাত্র একটি উপাদানকে কেন্দ্র করে। মনোযোগের যত্ন সহকারে পরিচালনার অভিজ্ঞতা অভিজ্ঞতার পক্ষে গুরুত্বপূর্ণ। ছোট স্ক্রিনযুক্ত ডিভাইসগুলিতে এটি নিশ্চিত করে যে ব্যবহারকারী কোনও পদক্ষেপ নেওয়ার পরে পর্দার সঠিক অংশটি প্রদর্শিত হবে। অডিও-কেবলমাত্র ডিভাইস বা অ-মাউস, অ-টাচ ইনপুট সহ ডিভাইসগুলিতে, এটি কেবলমাত্র এমন জিনিস যা অভিজ্ঞতাটিকে মোটেই ব্যবহারযোগ্য করে তোলে।
4. মিডিয়া প্রশ্নসমূহ
মিডিয়া ক্যোয়ারীগুলি ইতিমধ্যে একটি উদীয়মান তারা, তবে এই মুহূর্তে আমরা সবে পৃষ্ঠতলের স্ক্র্যাচ করছি। স্ক্রিন এবং ভিউপোর্টের আকার ছাড়াও, মিডিয়া ক্যোয়ারী আমাদের কোনও ডিভাইসের দিক অনুপাত, রঙ ক্ষমতা, ওরিয়েন্টেশন (প্রতিকৃতি বনাম ল্যান্ডস্কেপ) বলতে পারে, এটি প্রগতিশীল স্ক্যান বা ইন্টারলেসড এবং আরও অনেক কিছু। এগুলি তাদের সম্পূর্ণ সম্ভাবনার সাথে ব্যবহার করে কেবল মোবাইল, ট্যাবলেট এবং ডেস্কটপ ছাড়িয়েও অনেকগুলি ডিভাইসের অভিজ্ঞতা নিয়ন্ত্রণ করতে সহায়তা করতে পারে।
5. দক্ষতা
এই সমস্ত কৌশল তাদের ব্যবহারকারীদের আরও কোড এবং বৃহত্তর সম্পদ পরিবেশন করার প্রলোভন নিয়ে আসে এবং তাদের ব্রাউজারগুলি এটিকে বের করে দেয়। তবে সম্পদ এবং কোডের প্রতিটি সম্ভাব্য সংমিশ্রণ পরিবেশন করা ধীর বা মিটারযুক্ত সংযোগযুক্ত ব্যবহারকারীদের জন্য কাজ করবে না। ব্যবহারকারীদের কেবল প্রয়োজনীয়গুলি পেতে আপনার সাইটের প্রতিটি টুকরো ডাউনলোড করতে হবে না।
সম্পূর্ণরূপে প্রতিক্রিয়াশীল ডিজাইনের অনুশীলন করার অর্থ ব্যবহারকারী কী কোড এবং সম্পদগুলি ডাউনলোড করে তা নিয়ন্ত্রণ করার জন্য একটি প্রগতিশীল-বর্ধন করার মতো কৌশল নিয়োগ করে। যদি জাভাস্ক্রিপ্ট লাইব্রেরি বা কোড ক্ষমতা-নির্দিষ্ট হয় তবে কেবলমাত্র সেটিকে ডিভাইসের সক্ষমতার জন্য পরীক্ষার পরে লোড করুন। একটি বড় ফাইলে সমস্ত মিডিয়া-ক্যোয়ারী সিএসএস লোড করার পরিবর্তে মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে কেবল প্রয়োজনীয় সিএসএস লোড করুন। ব্যবহারকারীর সংযোগের পাশাপাশি তাদের ডিভাইসের প্রতিক্রিয়াশীল এমন চিত্র এবং কোড পরিবেশন করতে আমাদের সহায়তা করার জন্য আমাদের প্রযুক্তিগুলিতেও কাজ করা উচিত।
এটা কঠিন হবে। পুরো দলগুলি - সামগ্রী স্রষ্টা, ডিজাইনার, ফ্রন্ট-এন্ড এবং সার্ভার-সাইড বিকাশকারীদের - সহযোগিতা এবং সহযোগিতা প্রয়োজন। তবে শেষ লক্ষ্য (সত্যিকারের প্রতিক্রিয়াশীল ওয়েব ডিজাইন) এর অর্থ হ'ল আমাদের সাইটগুলি সমস্ত ব্যবহারকারীদের জন্য কাজ করবে, তারা কোথায়, কখন বা কোন ডিভাইস নিয়ে যায় তা বিবেচনা করে না।
প্রতিক্রিয়াশীল ওয়েব ডিজাইন নিয়ে আরও এগিয়ে যাওয়ার জন্য, কীভাবে এক সপ্তাহে প্রতিক্রিয়াশীল সাইট তৈরি করবেন সে সম্পর্কে পল রবার্ট লয়েডের টিউটোরিয়ালটির শেষ অংশটি দেখুন।
