কন্টেন্ট
- শুরু করার জন্য সরঞ্জামগুলি
- 01. প্রতিক্রিয়াশীল ওয়েব ডিজাইন স্কেচ শীট
- 02. প্রতিক্রিয়াশীল নকশার স্কেচবুক
- 03. প্রতিক্রিয়াশীল ওয়্যারফ্রেমস
- 04. মাল্টি-ডিভাইস লেআউট প্যাটার্নস
- 05. স্টাইল টাইলস
- নমনীয় / তরল গ্রিডের সরঞ্জাম
- 06. গোল্ডেন গ্রিড সিস্টেম
- 07. Foldy960
- 08. সিম্পলগ্রিড
- 09. 1140px সিএসএস গ্রিড
- 10. কলামোনাল সিএসএস গ্রিড সিস্টেম
- ১১. সিনার্থিক গ্রিড সিস্টেম
- 12. সুস
- 13. গ্রিডপাক
- 14. গ্রিডেট
- 15. আরডাব্লুডির জন্য আরও ভাল ফটোশপ গ্রিড
- 16. তরল গ্রিড
- 17. প্রতিক্রিয়াশীল ক্যালকুলেটর
- প্রতিক্রিয়াশীল চিত্রগুলির জন্য সরঞ্জাম (এবং পাঠ্য)
- 18. প্রতিক্রিয়াশীল চিত্র
- 19. অভিযোজিত চিত্র
- 20. Sencha.io Src (পূর্বে টিনিস্ক্র)
- 21. ফিটটেক্সট
- 22. স্ল্যাব টেক্সট
- মিডিয়া প্রশ্নের জন্য সরঞ্জাম
- 23. প্রতিক্রিয়া.জেএস
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. শ্রেণীবদ্ধ
- প্রতিক্রিয়াশীল নকশা (এবং মোবাইল) বয়লারপ্লেট
- 27. 320 এবং উপরে
- 28. গ্রিডলেস
- 29. কঙ্কাল
- 30. বুটস্ট্র্যাপ
- প্লাগইনস, শিমস এবং পলিফিলস
- 31. প্রতিক্রিয়াশীল প্লাগইন
- 32. উচ্ছেদ করা
- 33. মিডিয়া টেবিল
- "পরীক্ষা, পরীক্ষা: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. প্রতিক্রিয়াশীল
- 36. প্রতিক্রিয়াশীল নকশা পরীক্ষা
- 37. দায়ী
- 38. প্রতিক্রিয়াশীল
- 39. Screenqueri.es
- 40. অ্যাপটাস
- 41. প্রতিক্রিয়াশীল নকশা বুকমার্কলেট
- 42. প্রতিক্রিয়াশীল নকশা পরীক্ষা বুকমার্কলেট
- 43. স্ক্রিনফ্লাই
- 44. মিডিয়া অনুসন্ধান সূচক
- 45. শিম
- 46. ড্রাইভ-ইন
- 47. অ্যাডোব ছায়া
- 48. অপেরা মোবাইল এমুলেটর + রিমোট ডিবাগ
- আরও অনুপ্রেরণা
- 49. MediaQueri.es
- 50. @RWD
- এই পছন্দ? এগুলো পড়াে!
যেমন ইথান মার্কোটি তাঁর "রিসপন্সাল ওয়েব ডিজাইন" প্রবন্ধের পাশাপাশি তাঁর সেরা বিক্রয়কেন্দ্রের উভয় প্রবন্ধে পরিচয় / সজ্জিত, কোনও সাইটকে প্রতিক্রিয়াশীল করতে একজনকে তিনটি উপাদান প্রয়োজন:
- একটি নমনীয় / তরল গ্রিড
- প্রতিক্রিয়াশীল চিত্র
- মিডিয়া প্রশ্নের
প্রচুর অন্যান্য দুর্দান্ত নিবন্ধ রয়েছে যা প্রতিক্রিয়াশীল ওয়েব ডিজাইন সম্পর্কিত উদ্দেশ্যগুলি, ধারণাগুলি এবং কৌশলগুলি কভার করে, তাই আমরা এই নিবন্ধটির ফোকাস কিছু শীর্ষ সরঞ্জামগুলিতে রাখব যা আপনাকে দায়বদ্ধভাবে প্রতিক্রিয়াশীল হতে সহায়তা করবে।
শুরু করার জন্য সরঞ্জামগুলি
আপনি নিজের সাইটটি নির্মাণ শুরু করার আগে, পৃষ্ঠার উপাদানগুলি যে ব্রাউজারের বিভিন্ন ধরণের ডিভাইসগুলির উপরে সেগুলি দেখা যাবে তার বিভিন্ন ব্রাউজারের আকারের সাথে কীভাবে খাপ খাইয়ে নেওয়া যায় এবং প্রাথমিকভাবে সম্পর্কে চিন্তাভাবনা থেকে যে সংযোগ বিচ্ছিন্ন হয় তা এড়িয়ে চলা ভাল best ডেস্কটপ ডিজাইন এবং অবশিষ্ট প্রতিক্রিয়াশীল পুনরাবৃত্তিগুলি পরবর্তী চিন্তাভাবনা হিসাবে (বিশেষত স্টেফানি (সুলিভান) রুইসের মন্তব্য দেখুন)।
01. প্রতিক্রিয়াশীল ওয়েব ডিজাইন স্কেচ শীট
জেরেমি পি অ্যালফোর্ডের প্রতিক্রিয়াশীল স্কেচ শিটগুলির এই সেটটি পৃষ্ঠা বিভাগগুলি কীভাবে বিভিন্ন রেজোলিউশনে স্থানান্তরিত করবে তা ম্যাপিং শুরু করার জন্য একটি দুর্দান্ত সূচনা পয়েন্ট।
02. প্রতিক্রিয়াশীল নকশার স্কেচবুক
আপনি যদি সমস্ত স্কেচ এক জায়গায় রাখতে পছন্দ করেন তবে অ্যাপ স্কেচবুক সংস্থাটি 50 টি প্রতিক্রিয়াশীল স্কেচ শিটের তারযুক্ত বেঁধে দেওয়া বইটি বিবেচনা করতে পারে।
03. প্রতিক্রিয়াশীল ওয়্যারফ্রেমস
প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির অন্যতম অসুবিধা তারের ফ্রেম ব্যবহার করে প্রতিক্রিয়াশীল নকশা কীভাবে কাজ করবে তা দেখানোর জন্য। জটিল লেআউটের প্রতিক্রিয়াশীল ওয়্যারফ্রেমিং কীভাবে কাজ করতে পারে তা দেখানোর জন্য অ্যাডোবের জেমস মেলার্স এই পরীক্ষামূলক সরঞ্জামটি একত্রিত করেছেন।
04. মাল্টি-ডিভাইস লেআউট প্যাটার্নস
কোনও প্রতিক্রিয়াশীল ডিজাইনের পরিকল্পনা করার সময় এটি কীভাবে আপনার সামনে অন্যান্য লোকেরা এসেছিল তা দেখতে দরকারী, সুতরাং লূক র্রবলেউসকির মাল্টি-ডিভাইস লেআউট প্যাটার্নস, যা উদাহরণগুলির লিঙ্কগুলির সাথে জনপ্রিয় নিদর্শনগুলি তালিকাভুক্ত করে, এটি শুরু করার জন্য দুর্দান্ত জায়গা।
05. স্টাইল টাইলস
সামনাথ ওয়ারেনের স্টাইল টাইলস প্রতিক্রিয়াশীল যুগে নকশার জন্য একটি নতুন কৌশল প্রস্তাব করেছে; স্থির প্রস্থের নকশা মকআপগুলির পরিবর্তে এগুলি স্য্যাচগুলি বা মুডবোর্ডগুলির মতো যা দানাদার বিশদে না গিয়ে সাধারণ নকশা পদ্ধতির দেখায়।
নমনীয় / তরল গ্রিডের সরঞ্জাম
যেমন আগেই বলা হয়েছে, প্রতিক্রিয়াশীল ডিজাইনের জন্য প্রয়োজনীয় প্রথম উপাদানটি নমনীয় / তরল গ্রিড।নিম্নলিখিতগুলি ইতিমধ্যে প্রাক-অন্তর্নির্মিত: আপনার কেবল সেগুলি ডাউনলোড করা দরকার এবং আপনি দ্রুত কোনও প্রতিক্রিয়াশীল সাইটের পথে যাবেন।
06. গোল্ডেন গ্রিড সিস্টেম
জোনি করপি, যিনি কম ফ্রেমওয়ার্কও বিকাশ করেছেন, সম্প্রতি প্রতিক্রিয়াশীল ডিজাইনের জন্য একটি নির্ভরযোগ্য গ্রিড সিস্টেমের এই নতুন সংস্করণটি প্রকাশ করেছে। "ভাঁজ" হিসাবে বিবেচিত যেমন এটি 16 থেকে আট, চার থেকে চারটি কলাম পর্যন্ত সহজেই রূপান্তরিত হয়, সোনার গ্রিড সিস্টেমটিতে একটি ছোট ব্রাউজার ওভারলেও রয়েছে যা পরীক্ষার জন্য আপনার পৃষ্ঠাগুলিতে গ্রিডকে প্রকাশ করে।
07. Foldy960
প্যারাভেল, ইনক। এর প্রতিভাবান জেনেটগুলি তাদের প্রতিক্রিয়াশীল প্রকল্পগুলির ভিত্তি হিসাবে ব্যবহার করে যে 960.gs গ্রিডটি পরিবর্তিত হয়েছে তা প্রকাশ করেছে।
08. সিম্পলগ্রিড
কনর মুয়ারহেডের দ্বারা নির্মিত সিম্পলগ্রিডটি সাড়া জাগানো দিয়ে তৈরি করা হয়েছিল, সুতরাং আপনার প্রতিক্রিয়াশীল ওয়েবসাইট প্রকল্পের সাথে উঠে আসা এবং চালানো সহজ।
09. 1140px সিএসএস গ্রিড
মেলবোর্নের ডিজাইনার অ্যান্ডি টেইলারের 1140px সিএসএস গ্রিড, আর একটি দুর্দান্ত প্রতিক্রিয়াশীল গ্রিড সিস্টেমটি একটি বিস্তৃত ডেস্কটপ রেজুলেশন থেকে মোবাইলে যায়।
10. কলামোনাল সিএসএস গ্রিড সিস্টেম
পাল্প + পিক্সেল ওরফে ক্রিয়েটিভ ডিরেক্টর নিক গর্সলাইন দ্বারা নির্মিত কলামোনাল গ্রিড সিস্টেম 1140px গ্রিড সিস্টেমের উপর ভিত্তি করে নির্মিত হয়েছে, তবে স্কেচশিট এবং ওয়্যারফ্রেমিং টেম্পলেটগুলির সাথে ডিজাইন কিট, পাশাপাশি সিএসএস ডিবাগিং শৈলীর মতো কিছু অতিরিক্ত গুডিজ রয়েছে।
১১. সিনার্থিক গ্রিড সিস্টেম
প্রসেসড প্রসেসড সিএসএস এক্সটেনশনগুলি যেমন সাস এবং এলইএসএস আরও জনপ্রিয় হয়ে উঠছে এবং টাইলার টেটের সিমেটিক গ্রিড সিস্টেম এগুলি গ্রিড সিস্টেমে সর্বাধিক কার্যকারিতা হিসাবে ব্যবহার করে যা কোনও অযৌক্তিক শ্রেণি বা উপাদান ব্যবহার করার দাবি করে না। কোডিং.সমাশিংমাগাজাইন.কম / ২০১৮ / ২০১৮ / ২৩/ তে- সিমান্টিক- গ্রিড- সিস্টেম- পৃষ্ঠা-layout- জন্য- আগামীকাল / এ আরও পড়ুন।
12. সুস
সিমেন্টিক গ্রিড সিস্টেমের মতোই ওড্ডবার্ডের SUSY একটি গ্রিড সিস্টেম তৈরি করেছে যা কোনও অতিরিক্ত মার্কআপ বা বিশেষ ক্লাস ব্যবহার করে না, তবে সাসি কেবল সাস (এবং এর সম্প্রসারণ, কম্পাস) ব্যবহারকারীদের লক্ষ্য করে।
13. গ্রিডপাক
গ্রিডপাক, এরস্কাইন ডিজাইনের দ্বারা তৈরি, চারপাশে থাকা নতুন প্রতিক্রিয়াশীল গ্রিড জেনারেটরগুলির মধ্যে একটি। এটি আপনাকে অনেকগুলি ব্রেকপয়েন্টে আপনার কলাম এবং জলের সেট করার অনুমতি দেয়, তারপরে সিএসএস, জাভাস্ক্রিপ্ট এবং পিএনজি ফাইলগুলি আউটপুট দেয় যাতে আপনার পুরো দল একই সূচনা পয়েন্ট থেকে কাজ করে।
14. গ্রিডেট
গ্রিডসেটের উপরে এখনও রহস্যের কিছুটা বাতাস রয়েছে কারণ আমি এটি লেখার সময় এটি এখনও প্রকাশিত হয়নি। তবে মার্ক বোল্টন ডিজাইনের সরঞ্জামটি হ'ল বিসপোক, অ-প্রেসক্রিপটিভ, গ্রিড সিস্টেম এবং অনলাইনে আপনার গ্রিডগুলি সংরক্ষণ এবং পরিচালনা করার উপায়।
15. আরডাব্লুডির জন্য আরও ভাল ফটোশপ গ্রিড
এলিয়ট জে স্টকস পুরানো 960px ডি ফ্যাক্টো গ্রিড স্ট্যান্ডার্ডকে ত্যাগ করার পরিবর্তে এবং 1000px বেস থেকে কাজ করার প্রস্তাব দেয়, যার সাথে সমস্ত শতাংশের গণনা কাজ করা সহজ করে দেয়। আপনি যদি সম্মত হন তবে তিনি আপনার সাথে কাজ শুরু করার জন্য একটি পিএসডি তৈরি করেছেন।
16. তরল গ্রিড
যদি আপনার নকশাটি উচ্চতর বিশেষায়িত হয় এবং আপনার নিজের নিজস্ব কাস্টম গ্রিড তৈরি করতে হবে, আপনি। নেট পুরষ্কার উজ্জ্বল নবাগত নমিনি হ্যারি রবার্টসের ফ্লুইড গ্রিড ক্যালকুলেটর দিয়ে এটি করতে পারেন।
17. প্রতিক্রিয়াশীল ক্যালকুলেটর
শতকরা ক্যালকুলেটরের কাছে অন্য পিক্সেল, তবে স্টু রবসনের এটি আপনার জন্য সিএসএসের সমস্ত বিধি তৈরি করে অন্যদের থেকে আরও এক ধাপ এগিয়ে যায়, যার অর্থ আপনি কেবল সেগুলি আপনার স্টাইলশিটে অনুলিপি করে আটকে দিতে পারবেন।
প্রতিক্রিয়াশীল চিত্রগুলির জন্য সরঞ্জাম (এবং পাঠ্য)
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের আরেকটি গুরুত্বপূর্ণ উপাদান হ'ল তরল চিত্র। তরল চিত্রগুলি অর্জনের কৌশলটি সোজা হলেও, বিভিন্ন ডিভাইসগুলির জন্য পারফরম্যান্সের কার্য সম্পাদন এবং পৃষ্ঠা লোড প্রতিক্রিয়াশীল ওয়েব ডিজাইনের অন্যতম বড় চ্যালেঞ্জ বলে মনে হয়। সমস্যাটি কাছে আসার জন্য এখানে কিছু সংস্থান রয়েছে।
18. প্রতিক্রিয়াশীল চিত্র
ফিলামেন্ট গ্রুপ স্ক্রিন রেজোলিউশনের উপর ভিত্তি করে উপযুক্ত আকারের চিত্র পাঠানোর জন্য একটি উপায় তৈরি করেছিল। মোবাইল-প্রথম চিত্রগুলির সাথে এই পরীক্ষা যা প্রতিক্রিয়াশীল এবং দায়বদ্ধতার সাথে স্কেল করে বিভিন্ন আকারের দুটি চিত্রের রেফারেন্সের জন্য ডাকে।
19. অভিযোজিত চিত্র
ম্যাট উইলকক্স অ্যাডাপটিভ ইমেজগুলি তৈরি করতে প্রতিক্রিয়াশীল চিত্রগুলির সরঞ্জাম থেকে অনুপ্রেরণা নিয়েছেন, যা কোনও অতিরিক্ত মার্কআপের প্রয়োজন ছাড়াই ব্যবহারকারীর ডিভাইসে উপযুক্ত চিত্রগুলি সরবরাহ করতে পিএইচপি এবং কিছুটা জাভাস্ক্রিপ্ট ব্যবহার করে।
20. Sencha.io Src (পূর্বে টিনিস্ক্র)
সেনচা একটি ক্লাউড পরিষেবা সরবরাহ করে যা তাদের অনুরোধ করা ডিভাইসের আকারের জন্য হোস্ট করা চিত্রগুলির অনুকূলিত সংস্করণগুলি প্রেরণ করে। এটি কীভাবে ব্যবহার করতে হয় তা জানতে, docs.sencha.com/io/src/ দেখুন।
21. ফিটটেক্সট
প্যারাভেল, ইনক এর আরও একটি রত্ন হ'ল ফিটটেক্সট.জেএস, ডিজাইন এবং ডিভাইসটিতে শিরোনাম ওয়েব টাইপের প্রতিক্রিয়াশীল করতে একটি jQuery প্লাগ-ইন। বিশদর জন্য দেখুন ট্রেন্টওয়ালটন.কম / ২০১৮ / ২০১/10 / ফিট- টু-স্কেল /।
22. স্ল্যাব টেক্সট
ফিটটেক্সট এবং স্ল্যাবটাইপ অ্যালগরিদম দ্বারা অনুপ্রাণিত, ব্রায়ান ম্যাকএলিসারের স্ল্যাব টেক্সট একটি jQuery প্লাগ-ইন যা পাঠ্যের গা bold় ব্লকগুলি তৈরি করে যা একটি সংজ্ঞায়িত প্রস্থের সাথে রেখে প্রতিক্রিয়ার সাথে পুনরায় আকার দেয়।
মিডিয়া প্রশ্নের জন্য সরঞ্জাম
আপনার লেআউটটি কীভাবে বিভিন্ন ডিভাইস, তরল গ্রিড এবং তরল ইমেজগুলির জন্য পরিবর্তন করতে চলেছে সে সম্পর্কে এখন আপনার ধারণা রয়েছে, পৃষ্ঠাটির উপাদানগুলিকে প্রতিক্রিয়াশীল অবস্থায় সরিয়ে দেওয়ার জন্য আপনার মিডিয়া প্রশ্নগুলির প্রয়োজন।
23. প্রতিক্রিয়া.জেএস
প্রতিক্রিয়াশীল ডিজাইনের একটি সমস্যা হ'ল মিডিয়া কোয়েরিগুলি পড়তে পারে না এমন ব্রাউজারগুলি পিছনে ফেলে যায়। এটি আপনার টার্গেট শ্রোতার কাছে সমস্যা নাও হতে পারে তবে পুরানো ব্রাউজারগুলিতে ব্যবহারকারীদের থাকার জন্য এটি এখনও একটি ভাল অনুশীলন। স্কট জেহেলের লেখা জবাব, কেবলমাত্র ন্যূনতম প্রস্থ এবং সর্বোচ্চ-প্রস্থের বৈশিষ্ট্যগুলিকে সমর্থন করে।
আরও তথ্যের জন্য filamentgroup.com/lab/mittedjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ দেখুন।
24. CSS3-Mediaqueries.js
ওয়াউটার ভ্যান ডের গ্রাফের সিএসএস 3-মিডিয়াকিউরিজ.জেজে, আইই এবং অন্যান্য ব্রাউজারগুলির পুরানো সংস্করণগুলি কার্যকরভাবে পরীক্ষা করতে এবং সমস্ত ধরণের মিডিয়া প্রশ্নের প্রয়োগ করতে সক্ষম করে।
25. Adapt.js
আসল 960.gs গ্রিড সিস্টেমের লেখক নাথন স্মিথ অ্যাডাপ্ট.জেএস লিখেছেন, এটি একটি স্ক্রিপ্ট যা ব্রাউজারের মাত্রা সনাক্ত করে এবং কেবল প্রয়োজনীয় স্টাইলশিটগুলি পরিবেশন করে - মিডিয়া ক্যোয়ারির মতো তবে মিডিয়া কোয়েরি ছাড়াই, মানে এটি পুরানো ব্রাউজারগুলিতেও কাজ করে।
26. শ্রেণীবদ্ধ
এটি হ'ল বিপরীত কোণ থেকে ডিভাইস সনাক্তকরণ - ব্রেট জ্যানকর্ডের শ্রেণীবদ্ধ স্ক্রিপ্ট অনুমান করে যে ডিভাইসগুলি মোবাইল হয় যদি না অন্যথায় ডেস্কটপ বা ট্যাবলেট হিসাবে সনাক্ত হয়, তবে আপনাকে ব্রাউজারগুলিতে সহানুভূতিপূর্ণ উপায়ে সংস্থানগুলি সরবরাহ করতে সক্ষম করে।
প্রতিক্রিয়াশীল নকশা (এবং মোবাইল) বয়লারপ্লেট
দক্ষ প্রতিক্রিয়াশীল কর্মপ্রবাহের অনুভূতিতে, বয়লারপ্লেটগুলি ব্রাউজারে ডিজাইন স্থানান্তরিত করার প্রক্রিয়াটি শীঘ্রই আরও সহজ করে দেয়। এগুলির বেশিরভাগ বয়লারপ্লেটগুলি একটি ঝরঝরে প্যাকেজের সাথে উপরোক্ত উল্লিখিত সরঞ্জামগুলির মধ্যে সবচেয়ে ভাল সংমিশ্রণ ঘটে: মোবাইলটিকে প্রথমে কন্টেন্ট আউট দর্শনের বাস্তবায়নের সময় স্ক্রিপ্টগুলির সাহায্যে বাড়ানো নমনীয় গ্রিড।
27. 320 এবং উপরে
অ্যান্ডি ক্লার্কের 320 এবং উপরে একটি মোবাইল-প্রথম বয়লারপ্লেট যা অন্যান্য অনেক আধুনিক ওয়েব ডিজাইন সরঞ্জামগুলির সাথে সংহত করে যেমন কম এবং বুটস্ট্র্যাপ (দেখুন # 30)। কোনও সাইট আপ এবং দ্রুত চলমান এটি হালকা এবং চটজলদি উপায়। অ্যান্ডির সাথে আমাদের সাক্ষাত্কারটিও দেখুন, যাতে তিনি আমাদের নতুন সংস্করণ সম্পর্কে আরও জানান।
28. গ্রিডলেস
গ্রিডলেস একটি এইচটিএমএল 5 এবং সিএসএস 3 বয়লারপ্লেট যা আপনার প্রতিক্রিয়াশীল ডিজাইনের ভিত্তি হিসাবে টাইপোগ্রাফি এবং বেকড-ইন ক্রস-ব্রাউজারের সামঞ্জস্যের উপর ফোকাস দিয়ে পরিবেশন করতে পারে।
29. কঙ্কাল
আগের দুটি বয়লারপ্লেটগুলির বিপরীতে, যার সূচনা বিন্দু সবচেয়ে ছোট রেজোলিউশনের সাথে রয়েছে, ডেভ গামাচের তৈরি স্কেলটন ডেভলপমেন্ট কিটটি 960.gs গ্রিড সিস্টেমের উপর ভিত্তি করে মোবাইলে স্কেল করে। কঙ্কাল বিকাশকারীদের উপরে শৈলী তৈরির জন্য দুর্দান্ত স্টাইলের কাঠামোটিও দান করে।
30. বুটস্ট্র্যাপ
টুইটার দ্বারা নির্মিত এবং এখন ওপেন সোর্সযুক্ত, বুটস্ট্র্যাপ দ্রুত একটি সাইট অনলাইনে পাওয়ার জন্য কাঠামো এবং উপাদানগুলির একটি সিরিজ এবং সংস্করণ অনুসারে এর মূল দুটি অংশই প্রতিক্রিয়া সহ কাজ করে।
প্লাগইনস, শিমস এবং পলিফিলস
যদিও আধুনিক ব্রাউজারগুলি এবং সফ্টওয়্যার প্রতিক্রিয়াশীল হওয়ার জন্য তত্পর হয়, কখনও কখনও আমাদের একটি সামঞ্জস্যপূর্ণ অভিজ্ঞতা সরবরাহ করার জন্য অতিরিক্ত সরঞ্জাম ব্যবহার করতে হয়।
31. প্রতিক্রিয়াশীল প্লাগইন
মারিওস লুবলিনস্কি একটি ওয়ার্ডপ্রেস প্লাগ-ইন লিখেছেন যা বর্তমান যে কোনও ডাব্লুপি থিমকে একটি প্রতিক্রিয়াশীল হিসাবে পরিণত করার প্রতিশ্রুতি দিয়েছে। এটি কীভাবে কাজ করে তা আমি এখনও জানি না কারণ এটি এই লেখার সময় হিসাবে প্রকাশিত হয়নি, তবে এটি যদি তার প্রতিশ্রুতি অনুসারে বেঁচে থাকে তবে এটি খুব কার্যকর হওয়া উচিত।
32. উচ্ছেদ করা
সামগ্রী ওভারফ্লো হ্যান্ডলিং ডেস্কটপ ব্রাউজারগুলিতে ভাল কাজ করে তবে পুরানো মোবাইল ব্রাউজারগুলি এটিকে বেমানানভাবে পরিচালনা করে। পরিশ্রমী ফিলামেন্ট গ্রুপের ওভারথ্রো পলফিল সমস্ত ডিভাইস ব্যবহারকারীদের সর্বোত্তম সম্ভাব্য অভিজ্ঞতা পেয়েছে তা নিশ্চিত করে ডিভাইসগুলিতে ধারাবাহিক ক্রেফুল অবক্ষয় যুক্ত করেছে।
33. মিডিয়া টেবিল
মার্কো পেগোোরোর jQuery প্লাগইন, মিডিয়া টেবিল, ছোট পর্দার ডিভাইসে বড় ডেটা টেবিলগুলি কীভাবে প্রদর্শন করতে হবে, প্রতিক্রিয়াযুক্ত কলাম তৈরি করতে এবং উপযুক্ত যেখানে শো / লুকিয়ে টগল যুক্ত করতে পারে সেই সমস্যাটি পেতে আপনাকে সহায়তা করতে রেসপন্ড.জেএস এর সাথে কাজ করে।
"পরীক্ষা, পরীক্ষা: 1-2-3 ..."
প্রতিক্রিয়াশীল কর্মপ্রবাহের আরেকটি দিক হ'ল আপনার টার্গেট ডিভাইস এবং রেজোলিউশনগুলি জানা এবং তারপরে সেগুলি পরীক্ষা করা।
34. resizeMyBrowser
ফ্রন্টএন্ড বিকাশকারী চেন লুও রাইজ মাই ব্রাউজারের, আপনার ব্রাউজার উইন্ডোটির প্রতিক্রিয়াশীলভাবে ডিজাইন করা পৃষ্ঠাগুলি পরীক্ষা করতে বা যদি আপনার প্রয়োজনীয়তার সাথে মানানসই একটি সন্ধান না পান তবে একটি নতুন প্রিসেট তৈরি করতে বেশ কয়েকটি প্রিসেট মাত্রা রয়েছে।
35. প্রতিক্রিয়াশীল
অনেকটা রেজাইজ মাই ব্রাউজার, রেসপন্টপেক্সের মতো, রেমি শার্প দ্বারা নির্মিত, আপনার পৃষ্ঠাগুলিকে একটি উইন্ডোতে লোড করে যেখানে আপনার মিডিয়া প্রশ্নগুলি কতটা ভাল চালাচ্ছে এবং কোথায় নকশাগুলিতে ব্রেকপয়েন্ট রয়েছে তা নির্ধারণ করতে আপনি প্রস্থ এবং উচ্চতা পরীক্ষা করতে পারবেন।
36. প্রতিক্রিয়াশীল নকশা পরীক্ষা
ডিজাইনার এবং বিকাশকারী ম্যাট কার্সলে একটি অবিশ্বাস্যভাবে কার্যকর সরঞ্জাম: এটি বিভিন্ন ব্রাউজারের আকারে কীভাবে রেন্ডার হয় তা দেখতে কেবল প্রতিক্রিয়াশীল ডিজাইন পরীক্ষায় আপনার প্রতিক্রিয়াশীল সাইটের URL টি প্রবেশ করান।
37. দায়ী
একটি ইউআরএল প্রবেশ করুন এবং দায়বদ্ধকারী আপনাকে নির্ধারণ করবে যে এটি নির্ধারিত রোবোটিক দক্ষতার সাথে কীভাবে অনেকগুলি সাধারণ ডিভাইসের আকারে প্রদর্শিত হয়। তমা পাগসলে এবং অ্যান্ডি হোভে এর জন্য দায়বদ্ধ।
38. প্রতিক্রিয়াশীল
আর একটি ইন-পেজ ডিভাইস এমুলেটর, রেসপন্স.আইস আপনাকে একটি ইউআরএল টাইপ করতে দেয় তারপরে দ্রুত বিভিন্ন প্রিসেটের মধ্যে এটির আকার পরিবর্তন করে। এটি আসন্ন টাইপকাস্ট অ্যাপের পিছনে দলটি তৈরি করেছে।
39. Screenqueri.es
ব্রাউজারের আরও একটি মাত্রার সরঞ্জাম, তবে মন্দার শির্কে থেকে স্ক্রিনকিয়ারিগুলি মোবাইল এবং ট্যাবলেট প্রিসেটের বিস্তৃত সেট, সেইসাথে একটি গ্রিড এবং শাসক যা সূক্ষ্ম পরিমাপকে এত সহজ করে তোলে তার দ্বারা আলাদা হয়।
40. অ্যাপটাস
একাধিক সংজ্ঞায়িত আকারে সাইটগুলি পরীক্ষা করার জন্য অন্য অ্যাপ্লিকেশন, তবে অ্যাপটাস হ'ল ম্যাক-নেটিভ। এটি ম্যাক অ্যাপ স্টোরের মাধ্যমে উপলভ্যতা এবং নেটিভ হওয়া সহজ স্ক্রিনশট এবং অফলাইন সমর্থন হিসাবে অতিরিক্ত বৈশিষ্ট্য নিয়ে আসে।
41. প্রতিক্রিয়াশীল নকশা বুকমার্কলেট
ভিক্টর কুলন একটি খুব সাধারণ তবে কার্যকর বুকমার্কলেট তৈরি করেছেন; আপনি যখন এটি কোনও ওয়েব পৃষ্ঠায় সক্রিয় করেন তখন এটি একটি সরঞ্জামদণ্ড যুক্ত করে যা আপনাকে চারটি সাধারণ স্ক্রিন মাত্রার মধ্যে স্যুইচ করতে দেয় যাতে আপনি দেখতে পান যে কীভাবে আপনার সাইটটি বিভিন্ন আকারে রেন্ডার করে।
42. প্রতিক্রিয়াশীল নকশা পরীক্ষা বুকমার্কলেট
বেঞ্জামিন কেনের এই বুকমার্কলেটটি আপনাকে নিজের ডিভাইসের আকারগুলি এবং আপনার পছন্দমতো বা কম সংখ্যক সংজ্ঞায়িত করার মাধ্যমে আরও স্বনির্ধারণের অনুমতি দেয়। যখন সক্রিয় হয় এটি সহজেই তুলনা করার জন্য পাশাপাশি সমস্ত নির্বাচিত আকারে সাইটটি দেখায়।
43. স্ক্রিনফ্লাই
স্ক্রিনফ্লাই, কুইর্কটুলস দ্বারা, আপনাকে ডেস্কটপ, ট্যাবলেট, মোবাইল এবং টেলিভিশনে বিভিন্ন রেজোলিউশনে একটি সাইট পরীক্ষা করতে দেয়। ডেস্কটপ টেস্টিংটি বর্তমানে সাফারিতেই সীমাবদ্ধ রয়েছে, যখন ট্যাবলেট এবং মোবাইলের ডিভাইস এবং ব্রাউজারগুলির জন্য আরও বিকল্প রয়েছে। টেলিভিশন কেবল অপেরাতেই সীমাবদ্ধ।
44. মিডিয়া অনুসন্ধান সূচক
ব্রাউজার দ্বারা কোনও মিডিয়া ক্যোয়ারী ট্রিগার করা হলে জোহান ব্রুক পরীক্ষার জন্য খাঁটি সিএসএস উপায় সরবরাহ করে offers ডিজাইন ব্রেকিং পয়েন্টগুলির সাথে টেস্টিং এবং খেলার জন্য মিডিয়া ক্যোয়ারী ইন্ডিকেটর আরেকটি ভাল সরঞ্জাম।
45. শিম
বোস্টন গ্লোবের নতুন ডিজাইনে ব্যবহৃত একটি সরঞ্জাম, আরডাব্লুডি মুভমেন্টের পোস্টার বয়, শিম একটি নোড.জেএস অ্যাপ্লিকেশন যা একই ওয়াইফাই নেটওয়ার্কের একাধিক ডিভাইস জুড়ে একটি ওয়েব পৃষ্ঠা চালায়, ক্রস-ডিভাইস পরীক্ষাকে এত সহজ করে তোলে ।
46. ড্রাইভ-ইন
যদি আপনার কাছে শিম চালানোর জন্য কোনও নোড.জেএস সার্ভার না থাকে, স্কট জেহেল ড্রাইভ-ইন নামে একটি সহজ সংস্করণ তৈরি করেছে যা মূলত একইভাবে কাজ করে তবে পিএইচপি, অ্যাপাচি এবং একটি .htaccess ফাইল ব্যবহার করে।
47. অ্যাডোব ছায়া
অ্যাডোব এই দূরবর্তী ডিবাগিং সরঞ্জামটির সাহায্যে ওয়েব প্রযুক্তিতে তাদের ধাক্কা চালিয়ে যায়। ম্যাক বা উইন্ডোতে শ্যাডো এবং ক্রোম এক্সটেনশন ইনস্টল করুন, এবং অ্যান্ড্রয়েড বা আইফোনে শ্যাডো ক্লায়েন্ট, এবং আপনি বিভিন্ন ডিভাইসের মধ্যে ওয়েব পৃষ্ঠাগুলি ভাগ করতে পারেন।
48. অপেরা মোবাইল এমুলেটর + রিমোট ডিবাগ
মোবাইল পৃষ্ঠাগুলি ডিবাগ করার একটি সহজ উপায় হ'ল অপেরা এবং অপেরা মোবাইল এমুলেটর ইনস্টল করা এবং তাদের রিমোট ডিবাগ বিকল্পের সাথে দুটিকে সংযুক্ত করা। সেটআপ করা সহজ এবং দ্রুত এবং ওয়েবকিটের চেয়েও বেশি পরীক্ষার অতিরিক্ত সুবিধা রয়েছে।
আরও অনুপ্রেরণা
অন্যরা কীভাবে তাদের ডিজাইনগুলিকে প্রতিক্রিয়াশীল করে তুলছে সে সম্পর্কে একটি ধারণা পেতে চান?
49. MediaQueri.es
আপনি যদি এটি ইতিমধ্যে না দেখে থাকেন তবে সাইট মিডিয়াউয়েরি.স সাইটগুলির ক্রমবর্ধমান সংখ্যক সাইট রয়েছে যা প্রতিক্রিয়াশীল দিকটি অতিক্রম করেছে।
50. @RWD
ইথান মার্কোটি একটি টুইটার অ্যাকাউন্ট চালান যা আরডাব্লুডির বিশ্ব থেকে সর্বশেষ সংবাদ, সরঞ্জাম এবং শোকেস নিয়ে আসে।
ডেনিস জ্যাকবস একজন স্পিকার, লেখক, ওয়েব ডিজাইন প্রশিক্ষক এবং সৃজনশীলতার প্রচারক হিসাবে পছন্দ করেন, পিটার গ্যাসস্টন দ্য বুক অফ সিএসএস 3 এর লেখক এবং ব্রুকেন লিংকগুলিতে ব্লগ করেছেন এমন একজন অভিজ্ঞ ওয়েব ডেভেলপার।
এই পছন্দ? এগুলো পড়াে!
- একটি মোবাইল ওয়েবসাইট তৈরির জন্য প্রো টিপস
- শীর্ষস্থানীয় সিএসএস এবং জাভাস্ক্রিপ্ট কৌশলগুলি
- কীভাবে একটি অ্যাপ তৈরি করতে হয়
- ডিজাইনারদের জন্য সেরা ফ্রি ওয়েব ফন্ট
- অগমেন্টেড রিয়েলিটির জন্য পরবর্তীটি আবিষ্কার করুন
- বিনামূল্যে টেক্সচার ডাউনলোড করুন: উচ্চ রেজোলিউশন এবং এখন ব্যবহারের জন্য প্রস্তুত
