প্রতিক্রিয়াশীল ওয়েব ডিজাইন: এটি কি প্রতিটি ডিভাইসে একই পরিমাণের ডেটা ডাউনলোড করে?


11

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

আমি প্রতিক্রিয়াশীল নকশা সম্পর্কে শুনছি। আমি জানতে চাই একটি প্রতিক্রিয়াশীল ওয়েব ডিজাইন কি কোনও কম্পিউটার স্ক্রিনে একই পরিমাণে ডেটা ডাউনলোড করে পাশাপাশি একটি মোবাইল ডিভাইস?

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

উত্তর:


8

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

এই মডেলটিতে, আপনি পর্দাটি ছোট বা বড় কিনা ক্লায়েন্টকে ঠিক একই HTML পাঠান । যাইহোক, যদি সম্পদ (চিত্র প্রাথমিকভাবে) সিএসএস উল্লেখ নির্দিষ্ট স্ক্রিন রেজুলেশন জন্য প্রদর্শিত হয় না, তারা পারে ডাউনলোড করা। উদাহরণস্বরূপ, বড় পর্দার জন্য high-res.pngআপনি আপনার সিএসএসে এবং ছোট পর্দার জন্য ব্যবহার করতে পারেন low-res.png- ওয়েব ক্লায়েন্ট কেবলমাত্র সক্রিয় শৈলীতে চিত্র ডাউনলোড করতে বেছে নিতে পারে। (বর্তমানে কমপক্ষে একটি গুরুত্বপূর্ণ ক্লায়েন্ট উভয়ই ডাউনলোড করেছেন তার জন্য @ ডিবিইউকের মন্তব্য দেখুন! আশা করি ক্লায়েন্টরা স্মার্ট হয়ে উঠবে!)

এই কৌশলটি আপনার ক্ষেত্রে বোধগম্য হতে পারে, বা একটি পৃথক মোবাইল সাইট তৈরি করতে এটি আরও অর্থবোধ করতে পারে।

বিভিন্ন ডিভাইস বিভিন্ন ব্যবহারের প্রসঙ্গ বোঝাতে পারে। মোবাইল ফোনগুলি সর্বদা আপনার পকেটে থাকে - ব্যবহারকারী মুদি লাইনে আপনার সাইটটি কীভাবে ব্যবহার করবেন? আপনি কি তাদের পুরো সাইটটি প্রেরণ করতে চান? নাকি মাত্র কয়েকটি বৈশিষ্ট্য? না সম্পূর্ণ ভিন্ন বৈশিষ্ট্য? যদি তারা টিভিতে সোজা হয়ে তাদের আইপ্যাডটি আকস্মিকভাবে ব্যবহার করেন?

মোবাইল ডিভাইসে ধীর প্রসেসর, কম মেমরি এবং ধীরে সংযোগের হার থাকে (এই সমস্ত "সত্য" প্রতি বছর কম সত্য হয়ে যায়, বিটিডাব্লু) - পারফরম্যান্সের কারণে আপনি পৃথক মোবাইল সাইট কঠোরভাবে প্রেরণ করতে চাইতে পারেন।

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

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


আমি মনে করি, বিরক্তিজনকভাবে চিত্রগুলি এখনও ডাউনলোড হবে। ক্লাউডফোরের দ্বারা পরীক্ষাগুলি উদাহরণ হিসাবে রয়েছে - ক্লাউডফাউর :: উদাহরণস্বরূপ / মিডিয়া কুইরিস / আইমেজ- টেস্ট
DBUK

@ ডিবিইউকে সংশোধনের জন্য ধন্যবাদ - আমি এই পোস্টটিতে পূর্ববর্তী সম্পাদনাগুলিতে "বনাম" ডাউনলোড করতে পারি না "এই স্ট্যাটিংয়ের উপর ঝাঁপিয়ে পড়েছিলাম। আরও সঠিক হতে আমার উত্তর আপডেট।
peteorpeter

এটি আমার কাছে নতুন তাই নিশ্চিত না এটি কেবল আইফোন কিনা। ওয়েবের সাথে কেন কখনও সহজ নয় :(
DBUK

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

সুতরাং কোনও মোবাইল প্রথম পদ্ধতির মাধ্যমে এই সমস্যাটি ঘুরে দেখা যাবে যেমন সর্বনিম্ন রেজোলিউশনের জন্য ডিফল্ট স্টাইল এবং সমস্ত বৃহত্তর প্লাস ডেস্কটপের মিডিয়া প্রশ্নগুলি ব্যবহার করে?
ডিবিইউকে

1

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

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


1

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

উপরোক্ত পোস্টারটি উল্লিখিত হিসাবে, আপনি আপনার মোবাইল ফোন / লোয়ার রেজোলিউশন ডিভাইসের জন্য লো-রেজো ইমেজ ব্যবহার করা উচিত। মিডিয়া ক্যোয়ারীগুলি আপনাকে সমস্ত নিম্ন রেজোলিউশনগুলিকে লক্ষ্য করতে সহায়তা করবে। তবে, শুনেছি মোবাইল সাফারি প্রদর্শনটিকে উপেক্ষা করবে: কোনওটিই নিয়ম করে না এবং চিত্রগুলির ডেস্কটপ সংস্করণও ডাউনলোড করে। এছাড়াও, যদি আপনি প্রতিক্রিয়াশীল চিত্রের রুটে যান তবে এটি মোবাইল প্রসেসরের উপর প্রচুর চাপ ফেলে - 1 পিক্সেল প্রতি 3 বাইটস ... আমার মনে হয়। অতিরিক্ত সামগ্রী ডাউনলোড হওয়ার আশেপাশে অনেকগুলি সমাধান রয়েছে - কিছু বেশ হ্যাকি - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0

প্রতিক্রিয়াশীল ওয়েব ডিজাইনের ডাউনসাইড সম্পর্কে কিছু তথ্যের জন্য http://www.webdesignshock.com/responsive-design-problems/ দেখুন । যদিও ব্লগ পোস্টটি আপনাকে ছাড়তে দেবেন না। একটি বুক অ্যাপার্টমেন্ট এই বিষয়ে একটি দুর্দান্ত বই লিখেছিল - http://www.abookapart.com/products/responsive-web-design । এটি অবশ্যই ই-বুক সংস্করণ দখল করার উপযুক্ত।


আপনি কি 1 পিএক্স স্টেটমেন্ট প্রতি 3 কেবি উপর বিশদ বর্ণনা করতে পারেন? আমি দেখতে পাচ্ছি না যে জাভা স্ক্রিপ্টটি কীভাবে পূর্ণ আকারের চিত্রটি আনতে কেবল যদি স্ক্রিনের রেজোলিউশন 480px এর চেয়ে বেশি হয় তবে তার প্রভাব পড়ে। এছাড়াও, আপনার display: noneমোবাইল ব্যবহারকারীদের থেকে চিত্রগুলি লুকানোর জন্য কখনও ব্যবহার করা উচিত নয় । এটা ঠিক খারাপ অভ্যাস।
লস ম্যাজেস্টে

"উদাহরণস্বরূপ, কিছু নেটওয়ার্ক অপারেটর মোবাইল ডিভাইসে বাতাসের উপর দিয়ে যাওয়ার আগে চিত্রগুলি সংকুচিত করে" - w3.org/TR/mobile-bp এর অর্থ হবে মোবাইলটি 3 বাইটস ব্যয়ে তাদের (?) সঙ্কুচিত করতে হবে? প্রতি পিক্সেল (24 বিট আরজিবি যেমন একটি জেপিজি)? ওফস আমি উপরে কেবি উপরে রাখি, অভিশাপ। এটি খালি সিএসএসের দৃষ্টিকোণ থেকে, মোবাইল সমস্ত চিত্র..মোবাইল এবং ডেস্কটপ ডাউনলোড করে এবং জাভাস্ক্রিপ্ট সমাধানগুলিকে বিবেচনা না করে with
DBUK
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.