আমাদের নিজস্ব পল লুইস দ্বারা ইন-হাউস তৈরি করা, সিডিএস ওয়েবসাইট দেখিয়েছে কিভাবে কনফারেন্স দর্শকদের জন্য একটি দুর্দান্ত মোবাইল ওয়েব অভিজ্ঞতা তৈরি করা যায়।
দৃশ্যের অন্তরালে
বিভিন্ন মোবাইল ব্রাউজারে সাইটটি যে মসৃণতায় চলে তা উল্লেখযোগ্য। এটি ব্রাউজারের লেআউট এবং পেইন্ট চক্রকে সর্বোত্তম উপায়ে ব্যবহার করছে।
নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য ব্যবহৃত
- সেবা কর্মী
- উদ্ভাসিত
- থিম রঙ
নিদর্শন
- ব্যয়িত কার্ড
- প্রতিক্রিয়াশীল গ্রিড
- মেটেরিয়াল ডিজাইন
সোর্স কোড
সাক্ষাৎকারটি
উন্নয়ন
পল যখন সাইটটি তৈরি করতে বের হন, তখন একটি মূল অগ্রাধিকার ছিল প্রগতিশীল বর্ধনকে আলিঙ্গন করা। ডেস্কটপের জন্য ডিজাইন করার পরিবর্তে, তিনি প্রথমে ছোট পর্দার জন্য এটি তৈরি করেন, তারপরে বড় পর্দায় তৈরি করেন – ক্রমান্বয়ে অবনতি না করে ক্রমান্বয়ে উন্নত করা হয়। এটির জন্য একগুচ্ছ মিডিয়া প্রশ্নের প্রয়োজন ছিল, তবে মূল ব্রেকপয়েন্টগুলির মধ্যে ছোট ছোট পরিবর্তনগুলিকে নজরে রাখার জন্য একটি মোটামুটি স্বাধীনতাও প্রয়োজন। স্ক্রীনের মাপের মধ্যে সামনে পিছনে ট্র্যাক করা তাকে একটি ধারনা দেয় যে সামগ্রীটি কোথায় ভেঙে যাবে, যাতে তিনি দ্রুত এটি ঠিক করতে পারেন।
PE এর আরেকটি গুরুত্বপূর্ণ দিক হল যতটা সম্ভব পিছনের দিকে সামঞ্জস্যপূর্ণ হওয়া। পল ফ্লেক্সবক্সের উপর ফ্লোট ব্যবহার করা বেছে নিয়েছিলেন কারণ তিনি অনুভব করেছিলেন যে এটি ব্রাউজারের সংখ্যা বাড়াবে যে সাইটটিতে কাজ করবে। সাইটের নির্দিষ্ট লেআউটের জন্য, এটি কোনও সমস্যা নয় বলে প্রমাণিত হয়েছে। যদি তার ফ্লেক্সবক্সের প্রয়োজন হয় তবে তিনি এটি যুক্ত করতে PE ব্যবহার করতেন।
সাইটের একটি বড় চ্যালেঞ্জ ছিল কার্ড প্রসারিত এবং পতন বৈশিষ্ট্য, যা অ্যানিমেশন কাজ করার জন্য একটি সম্পূর্ণ নতুন উপায় চিন্তা করা প্রয়োজন। পল একটি কৌশল নিয়ে এসেছিলেন যাকে তিনি FLIP বলে, যার মধ্যে অ্যানিমেটিং উপাদানগুলিকে তাদের চূড়ান্ত অবস্থায় সেট করা জড়িত। সেখান থেকে, আপনি পরিবর্তনগুলিকে উল্টাতে এবং উপাদানটিকে তার প্রারম্ভিক অবস্থানে ফিরিয়ে আনতে রূপান্তর এবং অস্বচ্ছতার মতো কম্পোজিটর-বান্ধব বৈশিষ্ট্যগুলি প্রয়োগ করেন। অবশেষে, এটি সম্পন্ন করার সাথে, রূপান্তর এবং অস্বচ্ছতার পরিবর্তনগুলি সক্ষম করুন এবং সেই পরিবর্তনগুলি সরিয়ে দিন। এটি উপাদানগুলিকে আরও একবার তাদের চূড়ান্ত অবস্থানে নিয়ে যায়! পল স্বীকার করেছেন যে এটি কিছুটা অপ্রত্যাশিত, তবে এটি খুব ভাল কাজ করে এবং আপনাকে কার্যক্ষমতা বৃদ্ধি করে।
কর্মক্ষমতা
পল লুইসকে পারফরম্যান্সের গুরু হিসাবে জেনে, আমি অবাক হইনি যে সাইটটি তৈরি করার সময় পাওয়ারফর্মেন্স একটি অত্যন্ত গুরুত্বপূর্ণ বিবেচনা ছিল। তিনি যতটা সম্ভব কম গতির সূচক মান পেতে ওয়েবপেজটেস্টের উপর খুব বেশি নির্ভর করেছিলেন। ইউটিউব এম্বেড ছাড়াই, পল একটি কেবল সংযোগে এটিকে 1,000-এর কম করতে সক্ষম হয়েছিল, যার অর্থ হল যে বেশিরভাগ ব্যবহারকারী এক সেকেন্ডের মধ্যে প্রাথমিক রেন্ডার পাবেন৷
এটি অর্জনের জন্য বেশিরভাগ কাজ করা হয়েছিল গ্রান্ট টাস্কে যতটা সম্ভব ছবিগুলিকে সংযুক্ত করা, ছোট করা এবং সংকুচিত করার জন্য। সাইটটি অপ্রয়োজনীয় ছবিগুলিকে পৃষ্ঠা লোডের পরেও স্থগিত করে যাতে প্রকৃত বিষয়বস্তু আরও দ্রুত স্ক্রীনে রেন্ডার করা হয়।
পৃষ্ঠা লোডের সময় আরও ভাল করার জন্য, পল একজন পরিষেবা কর্মীকে নামিয়েছিলেন। এটির সাথে, আপনি অনলাইনে থাকুন বা না থাকুন, ক্যাশে থেকে একটি পৃষ্ঠা পরিদর্শন করা যেতে পারে, এটি নিশ্চিত করে যে আপনি দাগযুক্ত সংযোগের ক্ষেত্রেও বিষয়বস্তুতে পৌঁছান (কনফারেন্স ওয়াইফাইতে থাকাকালীন অত্যন্ত গুরুত্বপূর্ণ!)। সিডিএস সাইটটি নতুন বৈশিষ্ট্যটি ব্যবহার করার জন্য প্রথম প্রোডাকশন সাইটগুলির মধ্যে একটি, যা পলকে "প্রাথমিক গ্রহণকারী সমস্যাগুলির" একটি গুচ্ছের মধ্যে পড়েছিল, কিন্তু তিনি আমাকে বলেছিলেন যে বিশাল কর্মক্ষমতা বৃদ্ধি, এটির জন্য তৈরি। প্রকৃতপক্ষে, তিনি এখন এটিকে তার তৈরি করা প্রতিটি সাইটে নিয়ে যাচ্ছেন!
পারফরম্যান্স, অবশ্যই, একটি সাইট কতটা ভালভাবে লোড হয় তা নয়, এটি কতটা ভালভাবে চলে তাও। পল জানতেন অ্যানিমেশনগুলি একটি চ্যালেঞ্জ হতে চলেছে, তাই তিনি FLIP নিয়ে এসেছিলেন। তা ছাড়া, স্পর্শ ইনপুট বা স্ক্রোলিং এর পথে কিছুই যাতে না আসে তা নিশ্চিত করার জন্য তিনি তার পথের বাইরে চলে গিয়েছিলেন। সাইটটি খুব জটিল না হওয়া সত্ত্বেও, তিনি নির্মাণের জন্য একটি পরিবর্তিত RAIL পদ্ধতি গ্রহণ করেছিলেন (তার সত্যিই খুব বেশি অলস সময়ের প্রয়োজন ছিল না), এবং এটি একটি গুচ্ছকে সাহায্য করেছিল!
ডিজাইন
যেহেতু সাইটটি একজন একক ব্যক্তির দ্বারা জাল করা হয়েছিল, এর অর্থ হল যে পল প্রকল্পের ডিজাইনার এবং বিকাশকারী উভয়ই ছিলেন, যার ফলে দুটি 'টিমে' একে অপরের উদ্বেগের বিষয়ে অভূতপূর্ব স্তরের বোঝাপড়া হয়েছে৷ তিনি ডেস্কটপ ডাউন ডিজাইন করতে পছন্দ করেন (প্রগতিশীল বর্ধনের বিপরীত, যা তিনি বিকাশের সময় ব্যবহার করেছিলেন), কারণ এটি তাকে প্রকল্পে যেতে কী প্রয়োজন তা বোঝায়। পরে পল মোবাইল ভিউতে নেমে আসে, যা তাকে জিনিসগুলিকে উল্লেখযোগ্যভাবে পরিমার্জন করতে দেয় এবং নিশ্চিত করে যে সবচেয়ে গুরুত্বপূর্ণ জিনিসগুলি সর্বাধিক মনোযোগ পাচ্ছে৷ এটি তারপর ডেস্কটপ সংস্করণকে অবহিত করে, কারণ সবসময় তথ্য আর্কিটেকচার এবং অগ্রাধিকার আপডেট করার প্রয়োজন হবে।
এটা সব সহজে গিয়েছিলাম না. সেই সময়ে মেটেরিয়াল ডিজাইনের নির্দেশিকাগুলি কীভাবে একটি বিষয়বস্তু সাইট তৈরি করতে হয় সে সম্পর্কে পরিষ্কার ছিল না, তাই এমন কিছু জায়গা ছিল যেখানে তিনি কম পড়েছিলেন। নকশাটি সময়সূচী এবং সেশনের তথ্য সম্পর্কিত হওয়ার জন্যও অ্যাকাউন্টে ব্যর্থ হয়েছে এবং শেষ পর্যন্ত, UX এর অর্থ হল যে লোকেরা সময়সূচীতে যাবে এবং হতাশ হবে যে তারা সরাসরি সেশনের তথ্য পেতে পারেনি।
বলা হচ্ছে, আমি মনে করি পল একটি বিষয়বস্তু সাইটে মেটেরিয়াল ডিজাইন স্পেক পরিবহনের জন্য একটি অসাধারণ কাজ করেছেন। এবং আমি চাক্ষুষ এবং গতি সঙ্গে সত্যিই সন্তুষ্ট. এটিতে অনন্য উপাদান ডিজাইনের অনুভূতি রয়েছে এবং তথ্য এবং চেহারা মিথস্ক্রিয়া এবং শ্রেণিবিন্যাসকে উত্সাহিত করে।
সফলতা
- বয়লারপ্লেট এবং ওয়েব ডেভেলপারদের অনুপ্রেরণা হিসাবে পরিবেশন করার জন্য Github ( > 200 স্টার ) এ সম্পূর্ণ সাইটটি সফলভাবে প্রকাশ করা হয়েছে।
- ওয়েব প্ল্যাটফর্মের সর্বশেষ এবং সর্বশ্রেষ্ঠ অন্তর্ভুক্ত: পরিষেবা কর্মী, ওয়েব ম্যানিফেস্ট এবং গতিশীল থিম রঙ । নেট ইফেক্ট এমন কিছু যা অ্যান্ড্রয়েড ডিভাইসে চালানোর সময় প্ল্যাটফর্মের সাথে সত্যিই একত্রিত হয়। ব্যবহারকারীর হোম স্ক্রিনে যোগ করা হলে, এটি একটি অ্যাপের মতো মনে হয় যা তারা ব্যবহার করবে এবং এটি সত্যিই দুর্দান্ত।
- ~73.7k পেজ ভিউ, সাইটের সাবসেকশনে 180k ক্লিকের মানে হল যে লোকেরা প্রকৃতপক্ষে এটি ব্যবহার করেছে এবং এর সাথে জড়িত, প্রত্যাশার চেয়ে অনেক বেশি।
সর্বোপরি, আজকের ওয়েব ডেভেলপারদের জন্য একটি দুর্দান্ত অনুপ্রেরণা এবং একটি অত্যন্ত সফল সম্মেলন ওয়েবসাইট।