প্রতিক্রিয়াশীল ওয়েব ডিজাইন: আশ্চর্যজনক মনে হয় এমন ওয়েব অ্যাপ্লিকেশন তৈরির গোপনীয়তা

গত বছরে আমি কয়েকটি বিকাশকারী দ্বারা ব্যবহৃত দুটি সূক্ষ্ম কৌশল পর্যবেক্ষণ করেছি যা একটি ওয়েব অ্যাপ্লিকেশনটিকে ধীর এবং ঝাঁকুনির থেকে অত্যন্ত প্রতিক্রিয়াশীল এবং পালিশে বোধ করে take

আমি বিশ্বাস করি যে এই কৌশলগুলি যথেষ্ট গুরুত্বপূর্ণ যেগুলির একটি নাম প্রয়োজন: প্রতিক্রিয়াশীল ওয়েব ডিজাইন।

সংক্ষেপে, প্রতিক্রিয়াশীল ওয়েব ডিজাইন এমন কৌশলগুলির একটি সেট যা এমন সাইট তৈরিতে ব্যবহার করা যেতে পারে যা নেটওয়ার্কের গতি বা বিলম্বকে নির্বিশেষে ব্যবহারকারীদের ইনপুটটিতে সর্বদা দ্রুত এবং প্রতিক্রিয়া বোধ করে।

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

কৌশল 1: কঙ্কাল স্ক্রিন সহ তাত্ক্ষণিক লোড

যখন ভালভাবে ব্যবহার করা হয় তখন এই কৌশলটি প্রায়শই লক্ষ্য করা যায় না, তবে এটি কোনও সাইটের অনুভূত পারফরম্যান্সে বিশাল প্রভাব ফেলে।

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

সুযোগ এইভাবে মিথ্যা!

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

ফেসবুক যখন আপনি প্রথম এটি খুলবেন তখন অনুভূত কর্মক্ষমতা উন্নত করতে একটি কঙ্কাল স্ক্রীন ব্যবহার করছে

স্কেলটন স্ক্রিনগুলি একটি মূল উপলব্ধিযোগ্য পারফরম্যান্স কৌশল কারণ তারা অ্যাপ্লিকেশনগুলিকে আরও দ্রুত বোধ করে এবং নাটকীয়ভাবে মুহুর্তের সংখ্যা হ্রাস করে যেখানে ব্যবহারকারী অবাক হয়ে যান:

কি হচ্ছে? এটি এমনকি লোড হয়? আমি কি ঠিক এটি ট্যাপ করেছি?

ফ্লিপকার্ট.কম একটি ওয়েবসাইটের বিরল উদাহরণ যা এই পদ্ধতির ব্যবহার করে। বিভাগগুলির মাধ্যমে ব্রাউজ করা বা পণ্যগুলিতে আলতো চাপতে বজ্রপাত দ্রুত বোধ হয়, এমনকি প্রকৃত ফলাফলগুলি লোড হতে কয়েক সেকেন্ড সময় নেয়:

হোম স্ক্রিন থেকে অ্যান্ড্রয়েডের স্ট্যান্ডেলোন মোডে ফ্লিপকার্ট ডটকমের একটি স্ক্রিনক্যাপচার চালু হয়েছে

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

app.jalantikus.com স্কেলটন স্ক্রিন প্যাটার্ন ব্যবহার করে এবং স্থানান্তর জুড়ে শিরোনাম এবং থাম্বনেল পুনরায় ব্যবহার করে

কঙ্কাল স্ক্রিন সহ সাইটগুলি পরীক্ষা করা

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

ক্রোম নেটওয়ার্ক অনুকরণে স্বল্পতম গতি সমর্থিত

কৌশল 2: উপাদানগুলিতে পূর্বনির্ধারিত আকারের মাধ্যমে "স্থিতিশীল লোডগুলি"

আপনি যখন অনুভব করছেন যে কোনও ওয়েবসাইটটি যখন আপনি এটি ব্যবহারের চেষ্টা করছেন তখন চারপাশে ঝাঁপিয়ে পড়েছে? আপনি কেবল একটি নিবন্ধ পড়ার চেষ্টা করছেন এবং পাঠ্যটি চলাফেরা করে চলেছে? এটিকে আমরা "অস্থির বোঝা" বলি এবং আমাদের এটি আগুনে পোড়াতে হবে

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

অস্থির লোড ওয়েবসাইটগুলিকে সাথে ইন্টারঅ্যাক্ট করতে শক্ত করে এবং তাদের অনুভূতি দেয় ... ভাল ... অস্থির!

অস্থির সাইট ব্রাউজ করা সবসময় আমাকে মনে করিয়ে দেয় যে আমি কীভাবে ভুমিকম্পের সময় ঘুরে বেড়াতে অনুভব করব তা কল্পনা করি

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

এটি প্রতিরোধ করতে, একটি পৃষ্ঠার সমস্ত ট্যাগগুলিতে অবশ্যই সেগুলি থাকা চিত্রটির মাত্রাগুলি সক্রিয়ভাবে অন্তর্ভুক্ত করতে হবে।

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


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

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

সবগুলোকে একত্রে রাখ

প্রচলিত এবং প্রতিক্রিয়াশীল ওয়েব ডিজাইনের মধ্যে পার্থক্য প্রদর্শনের জন্য আমি প্রতিক্রিয়াশীল.সার্জ.শ এ একটি ছোট ডেমো সাইট তৈরি করেছি।

প্রচলিত নিবন্ধ লোড হচ্ছে

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

প্রতিক্রিয়াশীল ওয়েব ডিজাইন সহ একটি নিবন্ধ লোড হচ্ছে

প্রতিক্রিয়াশীল ডিজাইনের সাহায্যে লোড তাত্ক্ষণিকভাবে অনুভূত হয় এবং ব্যাক আইকন এবং নিবন্ধের শিরোনামটি একাধিকবার আলতো চাপলে সাইটটি প্রতিক্রিয়াশীল থাকে

মোড়ক উম্মচন

নেটওয়ার্কটি যত ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে নেটওয়ার্কে পৃষ্ঠার স্থানান্তর অবরুদ্ধ হয় এবং পৃষ্ঠাগুলি প্রসারিত সময়কালের জন্য ঝাঁপিয়ে পড়ে যখন ব্যবহারকারী অভিজ্ঞতা তত খারাপ হয়।

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

এনপিআই এবং আয়ের মতো কেপিআইগুলিতে অনুভূত পারফরম্যান্সের প্রভাব সম্পর্কে সম্প্রদায়ের কাছ থেকে ডেটা শুনতে ভাল লাগবে!

অতিরিক্ত হিসাবে, আমি কীভাবে কঙ্কালের স্ক্রিন এবং স্থিতিশীল লোডগুলি ডিফল্টরূপে সাফল্যের গর্ত হিসাবে পরিচিত তা কীভাবে তৈরি করতে হয় তা বিবেচনা করতে ফ্রেমওয়ার্ক এবং গ্রন্থাগার লেখকদের উত্সাহিত করব।

যদি আপনার এই সম্পর্কে চিন্তাভাবনা থাকে তবে দয়া করে আমাকে @ ওয়ানএমটি টুইট করুন, এবং আপনি যদি এটি উপভোগ করেন তবে দয়া করে এটি একটি give দিন!

পুনশ্চ এটি সম্পূর্ণ গৌরব অর্জনের জন্য একটি মোবাইল ডিভাইসে ডেমো সাইটটি রিঅ্যাকটিভ.সুরগ.শাক পরীক্ষা করে দেখুন!