ক্রোম ডেভ সামিট - মোবাইল সারাংশ

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

পল কিনলানের মোবাইল ওয়েব অ্যাপের জন্য সেরা UX প্যাটার্ন

শীর্ষ 1000টি সাইটের মোবাইল-বন্ধুত্বের বিশ্লেষণের পরে আমরা কিছু সমস্যাযুক্ত ক্ষেত্র খুঁজে পেয়েছি: 53% এখনও শুধুমাত্র একটি ডেস্কটপ-অভিজ্ঞতা প্রদান করে, 82% সাইটের মোবাইল ডিভাইসে ইন্টারঅ্যাক্টিভিটি নিয়ে সমস্যা রয়েছে এবং 64% সাইটের পাঠ্য রয়েছে ব্যবহারকারীদের পড়তে সমস্যা হবে।

আপনার মোবাইল ওয়েব অভিজ্ঞতাকে নাটকীয়ভাবে উন্নত করতে দ্রুত হিট

  • সর্বদা একটি ভিউপোর্ট সংজ্ঞায়িত করুন
  • ভিউপোর্টের ভিতরে বিষয়বস্তু ফিট করুন
  • পাঠযোগ্য স্তরে ফন্টের আকার রাখুন
  • ওয়েব ফন্টের ব্যবহার সীমিত করুন
  • সঠিকভাবে লক্ষ্য ট্যাপ আউট আকার এবং স্থান
  • ইনপুট উপাদানগুলির জন্য শব্দার্থিক প্রকারগুলি ব্যবহার করুন

আপনার সাইট কতটা মোবাইল-ফ্রেন্ডলি তা নির্ধারণের জন্য পেজস্পিড ইনসাইটস এইমাত্র একটি UX বিশ্লেষণ চালু করেছে। এটি আপনাকে আপনার সাইট মোবাইল UX এর সাথে সাধারণ সমস্যাগুলি খুঁজে পেতে সহায়তা করবে৷ চেষ্টা কর!

স্লাইড: মোবাইল ওয়েব অ্যাপের জন্য সেরা UX প্যাটার্ন

অ্যালিস বক্সহল দ্বারা মাল্টি-ডিভাইস অ্যাক্সেসিবিলিটি

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

স্লাইড: মাল্টি-ডিভাইস অ্যাক্সেসিবিলিটি

A11y সমস্যাগুলি বোঝার এবং সমাধান করার মূল উপায়

  • নিশ্চিত করুন যে আপনার একটি ভাল কীবোর্ড-শুধু ব্যবহারকারীর অভিজ্ঞতা আছে
  • সঠিক উপাদান পছন্দ এবং ARIA দিয়ে আপনার ইন্টারফেসের শব্দার্থ প্রকাশ করুন
  • টেস্ট করতে ডেস্কটপে ChromeVox এবং Android-এ TalkBack ব্যবহার করুন।
  • অ্যাক্সেসিবিলিটি ডেভেলপার টুলস ক্রোম এক্সটেনশন ব্যবহার করে দেখুন
  • আরও বৈচিত্র্যময় শ্রোতা অনলাইনে আসছে, যা আপনার সাইটগুলিকে অ্যাক্সেসযোগ্য করে তোলার প্রয়োজনীয়তাকে আরও প্রসারিত করে৷

ম্যাট গুয়ান্টের Chrome WebView ব্যবহার করে মোবাইল অ্যাপ তৈরি করুন

ওয়েবভিউ-এর জন্য অতীতের বিল্ডিংয়ে ডেভেলপারদের যে সমস্যাগুলি হয়েছিল তা আমরা সবাই জানি: সীমিত HTML5 বৈশিষ্ট্য, কোনও ডিবাগিং সরঞ্জাম নেই, কোনও বিল্ড সরঞ্জাম নেই৷ Android 4.4 (KitKat)-এ একটি Chromium চালিত ওয়েবভিউ প্রবর্তনের মাধ্যমে ডেভেলপারদের কাছে এখন WebView ব্যবহার করে দুর্দান্ত নেটিভ অ্যাপ তৈরি করার জন্য তাদের হাতে অনেক নতুন টুল রয়েছে।

WebView আপনি Chrome এর জন্য যে সরঞ্জামগুলি ব্যবহার করেন সেই একই সরঞ্জামগুলির সাথে সম্পূর্ণ দূরবর্তী ডিবাগিং সমর্থন করে৷ আপনি Grunt-এর সাথে আপনার বিশ্বস্ত ওয়েব ডেভেলপমেন্ট ওয়ার্কফ্লো নিতে পারেন এবং Gradle-এর মাধ্যমে আপনার নেটিভ স্ট্যাক টুলিং-এ একীভূত করতে পারেন। আরও একত্রিত বিশ্ব, জাভাস্ক্রিপ্ট থেকে আপনার নেটিভ কোড পরীক্ষা করার জন্য Chrome DevTools ব্যবহার করার একটি চতুর কৌশল রয়েছে৷

স্লাইড: Chrome WebView ব্যবহার করে মোবাইল অ্যাপ তৈরি করুন

কার্যকর WebView বিকাশের উপায়

  • এটি নতুন বৈশিষ্ট্যগুলি নয় যা গুরুত্বপূর্ণ, এটি টুলিং যা আপনি এখন আপনার কর্মপ্রবাহের গতি বাড়াতে ব্যবহার করতে পারেন
  • নেটিভ UI অনুকরণ করার চেষ্টা করবেন না। তবে নিশ্চিত করুন যে এটি ওয়েব বিষয়বস্তু বলে কিছু মুছে ফেলার জন্য।
  • উপযুক্ত হলে বৈশিষ্ট্যের স্থানীয় বাস্তবায়ন ব্যবহার করুন। অর্থাৎ, বড় ফাইলের জন্য XHR এর পরিবর্তে DownloadManager ব্যবহার করুন।

Matt Gaunt দ্বারা ক্রস-ডিভাইস বিশ্বের জন্য আপনার কর্মপ্রবাহকে অপ্টিমাইজ করা

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

স্লাইডস: একটি ক্রস-ডিভাইস বিশ্বের জন্য আপনার কর্মপ্রবাহ অপ্টিমাইজ করা

গুরুত্বপূর্ণ দিক

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

নেটওয়ার্ক সংযোগ: জ্যাক আর্চিবাল্ড দ্বারা ঐচ্ছিক

এই আলোচনা থেকে আমরা অনেক কিছু শিখেছি: জেক উপস্থাপনার সময় জুতা পরেন না; বিজনেস কিনলানের একটি নতুন বই শীঘ্রই আসছে; ব্রাউজার বিক্রেতারা অফলাইনকে গুরুত্ব সহকারে গ্রহণ করছেন এবং শীঘ্রই আপনার হাতে এমন সরঞ্জাম থাকবে যা আপনাকে দুর্দান্ত অভিজ্ঞতা তৈরি করতে সাহায্য করবে যা আপনি অফলাইনে থাকলে ভালভাবে কাজ করে৷

ServiceWorker আমাদের সেই নমনীয়তা দেবে যা আমাদের সহজে বাধ্যতামূলক অফলাইন প্রথম অভিজ্ঞতা তৈরি করতে হবে এবং AppCache দ্বারা সৃষ্ট যন্ত্রণা ভোগ করতে হবে না। এমনকি আপনি একটি Polyfill ব্যবহার করে API নিয়ে পরীক্ষা করতে পারেন।

স্লাইড: নেটওয়ার্ক সংযোগ: ঐচ্ছিক

উদ্ধারকারী সেবাকর্মী

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