विषय
- शुरू करने के लिए उपकरण
- 01. उत्तरदायी वेब डिज़ाइन स्केच शीट
- 02. उत्तरदायी डिजाइन स्केचबुक
- 03. उत्तरदायी वायरफ्रेम
- 04. मल्टी-डिवाइस लेआउट पैटर्न
- 05. स्टाइल टाइलें
- लचीले/द्रव ग्रिड के लिए उपकरण
- 06. गोल्डन ग्रिड सिस्टम
- 07. फोल्डी960
- 08. सरल ग्रिड
- 09. 1140px सीएसएस ग्रिड
- 10. कॉलमल सीएसएस ग्रिड सिस्टम
- 11. सिमेंटिक ग्रिड सिस्टम
- 12. सूसी
- 13. ग्रिडपाकी
- 14. ग्रिडसेट
- 15. RWD के लिए एक बेहतर फोटोशॉप ग्रिड
- 16. द्रव ग्रिड
- 17. उत्तरदायी कैलकुलेटर
- प्रतिक्रियाशील छवियों के लिए उपकरण (और पाठ)
- 18. उत्तरदायी छवियां
- 19. अनुकूली छवियां
- 20. Sencha.io Src (पूर्व में Tinysrc)
- 21. फिटटेक्स्ट
- 22. स्लैबटेक्स्ट
- मीडिया प्रश्नों के लिए उपकरण
- 23. उत्तर दें।जेएस
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. श्रेणीबद्ध करना
- उत्तरदायी डिजाइन (और मोबाइल) बॉयलरप्लेट
- 27. 320 और ऊपर
- 28. ग्रिडलेस
- 29. कंकाल
- 30. बूटस्ट्रैप
- प्लगइन्स, शिम और पॉलीफिल्स
- 31. उत्तरदायी प्लगइन
- 32. उखाड़ फेंकना
- 33. मीडियाटेबल
- "परीक्षण, परीक्षण: 1-2-3 ..."
- 34. माई ब्राउजर का आकार बदलें
- 35. उत्तरदायी पीएक्स
- 36. उत्तरदायी डिजाइन परीक्षण
- 37. उत्तरदाता
- 38. उत्तरदायी.is
- 39. Screenqueri.es
- ४०. आप्टूस
- 41. उत्तरदायी डिजाइन बुकमार्कलेट
- 42. उत्तरदायी डिजाइन टेस्ट बुकमार्कलेट
- 43. स्क्रीनफ्लाई
- 44. मीडिया क्वेरी संकेतक
- 45. शिमो
- 46. ड्राइव-इन
- 47. एडोब छाया
- 48. ओपेरा मोबाइल एमुलेटर + रिमोट डीबग
- आगे की प्रेरणा
- 49. MediaQueri.es
- 50. @आरडब्ल्यूडी
- ये पसंद आया? ये पढ़ सकते हैं!
जैसा कि एथन मार्कोटे ने अपने लेख "रिस्पॉन्सिव वेब डिज़ाइन" के साथ-साथ अपनी सबसे अधिक बिकने वाली पुस्तक दोनों में पेश/गढ़ा है, साइट को उत्तरदायी बनाने के लिए तीन तत्वों की आवश्यकता होती है:
- एक लचीला/द्रव ग्रिड
- उत्तरदायी चित्र
- मीडिया के प्रश्नों
ऐसे बहुत से अन्य बेहतरीन लेख हैं जो प्रतिक्रियाशील वेब डिज़ाइन से संबंधित उद्देश्यों, अवधारणाओं और तकनीकों को कवर करते हैं, इसलिए हम इस लेख का ध्यान कुछ शीर्ष टूल पर रखेंगे जो आपको जिम्मेदारी से उत्तरदायी बनने में मदद करेंगे।
शुरू करने के लिए उपकरण
इससे पहले कि आप अपनी साइट का निर्माण शुरू करें, यह स्केच करना सबसे अच्छा है कि पृष्ठ के तत्व विभिन्न उपकरणों के विभिन्न ब्राउज़र आकारों में फिट होने के लिए कैसे अनुकूल होंगे, और उस डिस्कनेक्ट से बचने के लिए जो अक्सर मुख्य रूप से सोचने से आता है। डेस्कटॉप डिज़ाइन और बाकी उत्तरदायी पुनरावृत्तियों को बाद के विचार के रूप में देखें (विशेष रूप से स्टेफ़नी (सुलिवन) रेविस की टिप्पणी देखें)।
01. उत्तरदायी वेब डिज़ाइन स्केच शीट
जेरेमी पी अल्फोर्ड द्वारा उत्तरदायी स्केच शीट का यह सेट, विभिन्न प्रस्तावों में पृष्ठ अनुभागों को कैसे स्थानांतरित करेगा, इसकी मैपिंग शुरू करने के लिए एक महान प्रारंभिक बिंदु है।
02. उत्तरदायी डिजाइन स्केचबुक
यदि आप अपने सभी रेखाचित्रों को एक ही स्थान पर रखना पसंद करते हैं, तो आप ऐप स्केचबुक कंपनी द्वारा 50 उत्तरदायी स्केच शीट की इस तार-बद्ध पुस्तक पर विचार कर सकते हैं।
03. उत्तरदायी वायरफ्रेम
उत्तरदायी वेबसाइटों के निर्माण की कठिनाइयों में से एक यह दिखाने के लिए वायरफ्रेम का उपयोग कर रहा है कि उत्तरदायी डिज़ाइन कैसे काम करेगा। Adobe के James Mellers ने इस प्रायोगिक उपकरण को यह दिखाने के लिए एक साथ रखा है कि जटिल लेआउट की प्रतिक्रियाशील वायरफ़्रेमिंग कैसे काम कर सकती है।
04. मल्टी-डिवाइस लेआउट पैटर्न
उत्तरदायी डिज़ाइन की योजना बनाते समय यह देखना उपयोगी होता है कि अन्य लोगों ने आपके सामने उससे कैसे संपर्क किया है, इसलिए ल्यूक Wroblewski का मल्टी-डिवाइस लेआउट पैटर्न, जो उदाहरणों के लिंक के साथ लोकप्रिय पैटर्न सूचीबद्ध करता है, शुरू करने के लिए एक शानदार जगह है।
05. स्टाइल टाइलें
सामनाथ वारेन की स्टाइल टाइलें उत्तरदायी युग में डिजाइन के लिए एक नई तकनीक का प्रस्ताव करती हैं; निश्चित चौड़ाई वाले डिज़ाइन मॉकअप के बजाय, ये स्वैच या मूडबोर्ड की तरह होते हैं जो बारीक विवरण में जाए बिना सामान्य डिज़ाइन दृष्टिकोण दिखाते हैं।
लचीले/द्रव ग्रिड के लिए उपकरण
जैसा कि पहले कहा गया है, उत्तरदायी डिजाइन के लिए आवश्यक पहला घटक एक लचीला/द्रव ग्रिड है।निम्नलिखित पहले से ही पूर्व-निर्मित हैं: आपको बस उन्हें डाउनलोड करने की आवश्यकता है और आप जल्दी से एक अधिक प्रतिक्रियाशील साइट के रास्ते पर होंगे।
06. गोल्डन ग्रिड सिस्टम
जोनी कोरपी, जिन्होंने लेस फ्रेमवर्क भी विकसित किया है, ने हाल ही में उत्तरदायी डिजाइन के लिए एक विश्वसनीय ग्रिड सिस्टम का यह नया संस्करण जारी किया है। "फोल्डिंग" माना जाता है क्योंकि यह आसानी से 16 से आठ तक, चार कॉलम तक अनुकूलित हो जाता है, गोल्डन ग्रिड सिस्टम में एक छोटा ब्राउज़र ओवरले भी होता है जो परीक्षण के लिए आपके पृष्ठों पर ग्रिड को उजागर करता है।
07. फोल्डी960
Paravel, Inc. के प्रतिभाशाली पुरुषों ने संशोधित 960.gs ग्रिड जारी किया है जिसका उपयोग वे अपनी उत्तरदायी परियोजनाओं के लिए आधार के रूप में करते हैं।
08. सरल ग्रिड
कॉनर मुइरहेड द्वारा सिंपलग्रिड, बेक किए गए जवाबदेही के साथ बनाया गया था, इसलिए आपके उत्तरदायी वेबसाइट प्रोजेक्ट के साथ उठना और चलना आसान है।
09. 1140px सीएसएस ग्रिड
मेलबर्न डिज़ाइनर एंडी टेलर का 1140px CSS ग्रिड एक और बढ़िया रेस्पॉन्सिव ग्रिड सिस्टम है, जो एक विस्तृत डेस्कटॉप रिज़ॉल्यूशन से मोबाइल तक जाता है।
10. कॉलमल सीएसएस ग्रिड सिस्टम
पल्प+पिक्सेल उर्फ क्रिएटिव डायरेक्टर निक गोर्सलाइन द्वारा बनाई गई कॉलमनल ग्रिड सिस्टम 1140px ग्रिड सिस्टम पर आधारित है, लेकिन कुछ अतिरिक्त अच्छाइयों के साथ जैसे स्केचशीट और वायरफ्रेमिंग टेम्प्लेट के साथ एक डिज़ाइन किट, साथ ही सीएसएस डिबगिंग स्टाइल।
11. सिमेंटिक ग्रिड सिस्टम
Sass और LESS जैसे पूर्व-संसाधित CSS एक्सटेंशन अधिक से अधिक लोकप्रिय होते जा रहे हैं, और Tyler Tate का सिमेंटिक ग्रिड सिस्टम इस ग्रिड सिस्टम में अधिकतम प्रभाव के लिए उनका उपयोग करता है जो बिना किसी अनावश्यक वर्ग या तत्वों का उपयोग करने का दावा करता है। coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ पर और पढ़ें।
12. सूसी
सिमेंटिक ग्रिड सिस्टम की तरह ओडबर्ड के एसयूएसवाई ने एक ग्रिड सिस्टम बनाया जो अतिरिक्त मार्कअप या विशेष कक्षाओं का उपयोग नहीं करता है, लेकिन एसयूएसवाई का लक्ष्य केवल सैस (और इसके विस्तार, कम्पास) के उपयोगकर्ताओं के लिए है।
13. ग्रिडपाकी
ग्रिडपैक, एर्स्किन डिज़ाइन द्वारा, आसपास के नवीनतम उत्तरदायी ग्रिड जनरेटर में से एक है। यह आपको अपने कॉलम और गटर को कई ब्रेकपॉइंट्स पर सेट करने की अनुमति देता है, फिर सीएसएस, जावास्क्रिप्ट और पीएनजी फाइलों को आउटपुट करता है ताकि आपकी पूरी टीम एक ही शुरुआती बिंदु से काम कर रही हो।
14. ग्रिडसेट
ग्रिडसेट पर अभी भी रहस्य की थोड़ी हवा है, जब तक मैं इसे लिखता हूं, यह वास्तव में अभी तक जारी नहीं हुआ है। लेकिन मार्क बोल्टन डिज़ाइन का टूल बीस्पोक, नॉन-प्रिस्क्रिपटिव, ग्रिड सिस्टम और आपके ग्रिड को ऑनलाइन सहेजने और प्रबंधित करने का एक तरीका वादा करता है।
15. RWD के लिए एक बेहतर फोटोशॉप ग्रिड
इलियट जे स्टॉक्स पुराने 960px वास्तविक ग्रिड मानक को छोड़ने और इसके बजाय 1000px आधार से काम करने का प्रस्ताव करता है, जिससे सभी प्रतिशत गणनाओं के साथ काम करना आसान हो जाता है। यदि आप सहमत हैं, तो उसने आपके साथ काम करना शुरू करने के लिए एक PSD बनाया है।
16. द्रव ग्रिड
यदि आपका डिज़ाइन अत्यधिक विशिष्ट है और आपको अपना स्वयं का कस्टम ग्रिड बनाने की आवश्यकता है, तो आप .net अवार्ड्स के शानदार नवागंतुक नामांकित हैरी रॉबर्ट्स के फ्लुइड ग्रिड कैलकुलेटर के साथ ऐसा कर सकते हैं।
17. उत्तरदायी कैलकुलेटर
प्रतिशत कैलकुलेटर के लिए एक और पिक्सेल, लेकिन स्टू रॉबसन द्वारा यह एक आपके लिए सभी सीएसएस नियमों को बनाकर दूसरों की तुलना में एक कदम आगे जाता है, जिसका अर्थ है कि आप उन्हें अपनी स्टाइलशीट में कॉपी और पेस्ट कर सकते हैं।
प्रतिक्रियाशील छवियों के लिए उपकरण (और पाठ)
उत्तरदायी वेब डिज़ाइन का एक अन्य महत्वपूर्ण घटक द्रव चित्र है। जबकि तरल छवियों को प्राप्त करने की तकनीक सीधी है, विभिन्न उपकरणों के लिए प्रदर्शन और पेज लोड को अनुकूलित करना उत्तरदायी वेब डिज़ाइन में सबसे बड़ी चुनौतियों में से एक है। इस मुद्दे पर पहुंचने के लिए यहां कुछ संसाधन दिए गए हैं।
18. उत्तरदायी छवियां
फिलामेंट ग्रुप ने स्क्रीन रिज़ॉल्यूशन के आधार पर उचित आकार की छवि भेजने का एक तरीका तैयार किया। मोबाइल-प्रथम छवियों के साथ यह प्रयोग जो उत्तरदायी और जिम्मेदारी से स्केल करता है, संदर्भ के लिए विभिन्न आकारों की दो छवियों को रखने के लिए कहता है।
19. अनुकूली छवियां
मैट विलकॉक्स ने अनुकूली छवियां बनाने के लिए उत्तरदायी छवि उपकरण से प्रेरणा ली, जो बिना किसी अतिरिक्त मार्कअप की आवश्यकता के उपयोगकर्ता के डिवाइस पर उपयुक्त छवियों की सेवा के लिए PHP और थोड़ी जावास्क्रिप्ट का उपयोग करता है।
20. Sencha.io Src (पूर्व में Tinysrc)
सेन्चा एक क्लाउड सेवा प्रदान करता है जो उन्हें अनुरोध करने वाले डिवाइस के आकार के लिए होस्ट की गई छवियों के अनुकूलित संस्करण भेजता है। इसका उपयोग कैसे करें, यह जानने के लिए, docs.sencha.com/io/src/ देखें।
21. फिटटेक्स्ट
फिर भी Paravel, Inc का एक और रत्न FitText.js है, जो एक jQuery प्लग-इन है जो हेडलाइन वेब प्रकार को डिज़ाइन और डिवाइस के लिए उत्तरदायी बनाता है। विवरण के लिए देखें trentwalton.com/2011/05/10/fit-to-scale/।
22. स्लैबटेक्स्ट
फिटटेक्स्ट और स्लैबटाइप एल्गोरिथम से प्रेरित, ब्रायन मैकएलिस्टर का स्लैबटेक्स्ट एक jQuery प्लग-इन है जो टेक्स्ट के बोल्ड ब्लॉक बनाता है जो एक परिभाषित चौड़ाई को ध्यान में रखते हुए प्रतिक्रियात्मक रूप से आकार बदलता है।
मीडिया प्रश्नों के लिए उपकरण
अब जब आपको इस बात का अंदाजा हो गया है कि विभिन्न उपकरणों, एक फ्लुइड ग्रिड और फ्लुइड इमेज के लिए आपका लेआउट कैसे बदलने वाला है, तो आपको पृष्ठ के तत्वों को प्रतिक्रिया की स्थिति में स्थानांतरित करने के लिए मीडिया प्रश्नों की आवश्यकता है।
23. उत्तर दें।जेएस
उत्तरदायी डिज़ाइन के साथ एक समस्या यह है कि जो ब्राउज़र मीडिया प्रश्नों को नहीं पढ़ सकते हैं वे पीछे रह जाते हैं। यह आपके लक्षित दर्शकों के साथ कोई समस्या नहीं हो सकती है, लेकिन पुराने ब्राउज़र पर उपयोगकर्ताओं को समायोजित करना अभी भी एक अच्छा अभ्यास है। Respond.js, Scott Jehl द्वारा, केवल न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई गुणों का समर्थन करता है।
अधिक जानकारी के लिए filamentgroup.com/lab/responsejs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ देखें।
24. CSS3-Mediaqueries.js
Wouter van der Graaf द्वारा CSS3-Mediaqueries.js, IE और अन्य ब्राउज़रों के पुराने संस्करणों को प्रभावी ढंग से सभी प्रकार के मीडिया प्रश्नों का परीक्षण और लागू करने में सक्षम बनाता है।
25. Adapt.js
मूल 960.gs ग्रिड सिस्टम के लेखक नाथन स्मिथ ने Adapt.js लिखा है, एक स्क्रिप्ट जो ब्राउज़र आयामों का पता लगाती है और केवल आवश्यक स्टाइलशीट परोसती है - जैसे मीडिया क्वेरी लेकिन मीडिया प्रश्नों के बिना, जिसका अर्थ है कि यह पुराने ब्राउज़रों में भी काम करता है।
26. श्रेणीबद्ध करना
यह विपरीत कोण से डिवाइस का पता लगाना है - ब्रेट जेनकोर्ड की श्रेणीबद्ध स्क्रिप्ट मानती है कि डिवाइस मोबाइल हैं जब तक कि अन्यथा डेस्कटॉप या टैबलेट के रूप में पता नहीं लगाया जाता है, जिससे आप सहानुभूतिपूर्ण तरीके से ब्राउज़रों को संसाधनों की सेवा करने में सक्षम बनाते हैं।
उत्तरदायी डिजाइन (और मोबाइल) बॉयलरप्लेट
एक कुशल उत्तरदायी कार्यप्रवाह की भावना में, बॉयलरप्लेट्स डिजाइन को ब्राउज़र में जल्द से जल्द स्थानांतरित करने की प्रक्रिया की सुविधा प्रदान करते हैं। इनमें से अधिकांश बॉयलरप्लेट ऊपर बताए गए सर्वोत्तम उपकरणों को एक साफ पैकेज में मिलाते हैं: स्क्रिप्ट के साथ बढ़ाया गया एक लचीला ग्रिड, मोबाइल पहले, सामग्री-आउट दर्शन को लागू करते समय।
27. 320 और ऊपर
एंडी क्लार्क का 320 और अप एक मोबाइल-फर्स्ट बॉयलरप्लेट है जो कई अन्य आधुनिक वेब डिज़ाइन टूल, जैसे LESS और बूटस्ट्रैप (# 30 देखें) के साथ एकीकृत होता है। यह किसी साइट को जल्दी से चालू करने और चलाने का एक हल्का और फुर्तीला तरीका है। एंडी के साथ हमारा साक्षात्कार भी देखें, जिसमें वह हमें नए संस्करण के बारे में और बताता है।
28. ग्रिडलेस
ग्रिडलेस एक HTML5 और CSS3 बॉयलरप्लेट है जो टाइपोग्राफी और बेक-इन क्रॉस-ब्राउज़र संगतता पर ध्यान देने के साथ आपके उत्तरदायी डिज़ाइनों के आधार के रूप में काम कर सकता है।
29. कंकाल
पिछले दो बॉयलरप्लेट्स के विपरीत, जिसका शुरुआती बिंदु सबसे छोटे रिज़ॉल्यूशन के साथ है, डेव गामाचे द्वारा बनाई गई स्केलेटन डेवलपमेंट किट, 960.gs ग्रिड सिस्टम पर आधारित है और मोबाइल को स्केल करती है। कंकाल भी डेवलपर्स के लिए शीर्ष पर शैलियों का निर्माण करने के लिए एक महान शैली ढांचे का दावा करता है।
30. बूटस्ट्रैप
ट्विटर द्वारा निर्मित और अब ओपन-सोर्स किया गया, बूटस्ट्रैप एक साइट को जल्दी से ऑनलाइन प्राप्त करने के लिए एक ढांचा और घटकों की श्रृंखला है, और संस्करण दो के रूप में इसके सभी मुख्य भाग प्रतिक्रियात्मक रूप से काम करते हैं।
प्लगइन्स, शिम और पॉलीफिल्स
हालांकि आधुनिक ब्राउज़र और सॉफ़्टवेयर प्रतिक्रियाशीलता के लिए तैयार किए जाते हैं, कभी-कभी हमें एक सुसंगत अनुभव प्रदान करने के लिए अतिरिक्त टूल का उपयोग करना पड़ता है।
31. उत्तरदायी प्लगइन
मारियोस लुब्लिंस्की ने एक वर्डप्रेस प्लग-इन लिखा है जो किसी भी मौजूदा WP थीम को एक उत्तरदायी में बदलने का वादा करता है। यह कैसे काम करता है मुझे अभी तक पता नहीं है क्योंकि इसे इस लेखन के समय के रूप में जारी नहीं किया गया है, लेकिन अगर यह अपने वादे पर खरा उतरता है तो यह बहुत उपयोगी होना चाहिए।
32. उखाड़ फेंकना
सामग्री अतिप्रवाह प्रबंधन डेस्कटॉप ब्राउज़र पर अच्छी तरह से काम करता है, लेकिन पुराने मोबाइल ब्राउज़र इसे असंगत रूप से संभालते हैं। मेहनती फिलामेंट ग्रुप का ओवरथ्रो पॉलीफिल सभी उपकरणों में लगातार शानदार गिरावट जोड़ता है, यह सुनिश्चित करता है कि सभी मोबाइल उपयोगकर्ताओं को सर्वोत्तम संभव अनुभव मिले।
33. मीडियाटेबल
मार्को पेगोरारो का jQuery प्लगइन, MediaTable, Respond.js के साथ काम करता है ताकि आपको छोटे स्क्रीन उपकरणों पर बड़े डेटा टेबल को प्रदर्शित करने, प्रतिक्रियाशील कॉलम बनाने और जहां उपयुक्त हो वहां शो/छिपा टॉगल जोड़ने की समस्या को हल करने में मदद मिल सके।
"परीक्षण, परीक्षण: 1-2-3 ..."
रिस्पॉन्सिव वर्कफ्लो का एक अन्य पहलू अपने लक्षित उपकरणों और प्रस्तावों को जानना और फिर उनमें परीक्षण करना है।
34. माई ब्राउजर का आकार बदलें
resizeMyBrowser, फ्रंटएंड डेवलपर चेन लुओ द्वारा, आपकी ब्राउज़र विंडो के लिए उत्तरदायी रूप से डिज़ाइन किए गए पृष्ठों का परीक्षण करने या एक नया प्रीसेट बनाने के लिए कई प्रीसेट आयाम हैं यदि आपको वह नहीं मिल रहा है जो आपकी आवश्यकताओं के अनुरूप है।
35. उत्तरदायी पीएक्स
रेमी शार्प द्वारा निर्मित resizeMyBrowser, responsivepx की तरह, आपके पृष्ठों को एक विंडो में लोड करता है जहां आप यह निर्धारित करने के लिए चौड़ाई और ऊंचाई का परीक्षण कर सकते हैं कि आपकी मीडिया क्वेरी कितनी अच्छी तरह से सक्रिय हो रही है और डिज़ाइन में ब्रेकप्वाइंट कहां हैं।
36. उत्तरदायी डिजाइन परीक्षण
डिज़ाइनर और डेवलपर मैट केर्स्ली द्वारा एक अविश्वसनीय रूप से उपयोगी टूल: यह देखने के लिए कि यह विभिन्न ब्राउज़र आकारों में कैसे प्रस्तुत होता है, बस उत्तरदायी डिज़ाइन परीक्षण में अपनी प्रतिक्रियाशील साइट का URL दर्ज करें।
37. उत्तरदाता
एक यूआरएल दर्ज करें और रेस्पॉन्सेटर आपको दिखाएगा कि यह कई सामान्य डिवाइस आकारों में कैसे प्रदर्शित होता है - क्रूर रोबोटिक दक्षता के साथ। इसके लिए तमा पगस्ले और एंडी होवी जिम्मेदार हैं।
38. उत्तरदायी.is
एक अन्य इन-पेज डिवाइस एमुलेटर, Responsive.is आपको एक URL टाइप करने देता है और फिर विभिन्न प्रीसेट की एक श्रृंखला के बीच उसका आकार बदलता है। इसे आगामी टाइपकास्ट ऐप के पीछे की टीम ने बनाया है।
39. Screenqueri.es
एक और ब्राउज़र आयाम उपकरण, लेकिन मंदार शिर्के से Screenqueri.es मोबाइल और टैबलेट प्रीसेट के एक व्यापक सेट के साथ-साथ एक ग्रिड और शासकों के साथ खुद को अलग करता है जो ठीक माप को इतना आसान बनाते हैं।
४०. आप्टूस
एकाधिक परिभाषित आकारों में साइटों के परीक्षण के लिए एक अन्य ऐप, लेकिन एपटस मैक-नेटिव है। यह मैक ऐप स्टोर के माध्यम से उपलब्ध है, और देशी होने के कारण आसान स्क्रीनशॉट और ऑफलाइन समर्थन जैसी अतिरिक्त सुविधाएं मिलती हैं।
41. उत्तरदायी डिजाइन बुकमार्कलेट
विक्टर कूलन ने एक बहुत ही सरल लेकिन प्रभावी बुकमार्कलेट बनाया है; जब आप इसे किसी वेब पेज पर सक्रिय करते हैं तो यह एक टूलबार जोड़ता है जो आपको चार सामान्य स्क्रीन आयामों के बीच स्विच करने देता है ताकि आप देख सकें कि आपकी साइट विभिन्न आकारों में कैसे प्रस्तुत होती है।
42. उत्तरदायी डिजाइन टेस्ट बुकमार्कलेट
बेंजामिन कीन का यह बुकमार्कलेट आपको अपने स्वयं के डिवाइस आकार, और जितने चाहें उतने या कम को परिभाषित करके अधिक अनुकूलन की अनुमति देता है। सक्रिय होने पर यह आसान तुलना के लिए साइट को सभी चयनित आकारों में साथ-साथ दिखाता है।
43. स्क्रीनफ्लाई
QuirkTools द्वारा Screenfly, आपको डेस्कटॉप, टैबलेट, मोबाइल और टेलीविज़न पर विभिन्न प्रस्तावों पर एक साइट का परीक्षण करने की अनुमति देता है। डेस्कटॉप परीक्षण वर्तमान में सफारी तक सीमित है, जबकि टैबलेट और मोबाइल में डिवाइस और ब्राउज़र के लिए अधिक विकल्प हैं। टेलीविजन ओपेरा तक ही सीमित है।
44. मीडिया क्वेरी संकेतक
जब ब्राउज़र द्वारा मीडिया क्वेरी को ट्रिगर किया गया हो, तो जोहान ब्रुक परीक्षण करने के लिए एक शुद्ध सीएसएस तरीका प्रदान करता है। मीडिया क्वेरी इंडिकेटर डिज़ाइन ब्रेकिंग पॉइंट्स के साथ परीक्षण और खेलने के लिए एक और अच्छा टूल है।
45. शिमो
आरडब्ल्यूडी आंदोलन के पोस्टर बॉय, बोस्टन ग्लोब के रीडिज़ाइन में उपयोग किए जाने वाले टूल में से एक, शिम एक नोड.जेएस ऐप है जो एक ही वाईफाई नेटवर्क पर कई डिवाइसों में एक वेब पेज चलाता है, जिससे क्रॉस-डिवाइस परीक्षण बहुत आसान हो जाता है। .
46. ड्राइव-इन
यदि आपके पास शिम चलाने के लिए एक Node.js सर्वर नहीं है, तो स्कॉट जेहल ने ड्राइव-इन नामक एक सरल संस्करण बनाया है जो मूल रूप से उसी तरह काम करता है, लेकिन PHP, Apache और एक .htaccess फ़ाइल का उपयोग करता है।
47. एडोब छाया
Adobe इस दूरस्थ डिबगिंग टूल के साथ वेब तकनीकों में अपना प्रयास जारी रखे हुए है। मैक या विंडोज पर शैडो और क्रोम एक्सटेंशन इंस्टॉल करें, साथ ही एंड्रॉइड या आईफोन पर शैडो क्लाइंट, और आप कई अलग-अलग डिवाइसों के बीच वेब पेज साझा कर सकते हैं।
48. ओपेरा मोबाइल एमुलेटर + रिमोट डीबग
मोबाइल पेजों को डीबग करने का एक आसान तरीका ओपेरा और ओपेरा मोबाइल एमुलेटर को स्थापित करना और दोनों को उनके रिमोट डीबग विकल्प से जोड़ना है। सेटअप करने के लिए सरल और तेज़, और वेबकिट से अधिक पर परीक्षण का अतिरिक्त लाभ है।
आगे की प्रेरणा
इस बारे में एक विचार प्राप्त करना चाहते हैं कि दूसरे कैसे अपने डिजाइनों को उत्तरदायी बना रहे हैं?
49. MediaQueri.es
यदि आपने इसे पहले से नहीं देखा है, तो Mediaqueri.es साइट में उन साइटों की संख्या बढ़ती जा रही है जो उत्तरदायी पक्ष में आ गई हैं।
50. @आरडब्ल्यूडी
एथन मार्कोटे एक ट्विटर अकाउंट चलाता है जो आरडब्ल्यूडी की दुनिया से नवीनतम समाचार, टूल और शोकेस लाता है।
डेनिस जैकब्स एक वक्ता, लेखक, वेब डिज़ाइन ट्रेनर और रचनात्मकता इंजीलवादी होने के नाते पसंद करते हैं, जबकि पीटर गैस्टन द बुक ऑफ़ CSS3 के लेखक हैं और एक अनुभवी वेब डेवलपर हैं जो ब्रोकन लिंक्स पर ब्लॉग करते हैं।
ये पसंद आया? ये पढ़ सकते हैं!
- मोबाइल वेबसाइट बनाने के लिए प्रो टिप्स
- शीर्ष सीएसएस और जावास्क्रिप्ट तकनीक
- ऐप कैसे बनाएं
- डिजाइनरों के लिए सर्वश्रेष्ठ मुफ्त वेब फोंट
- जानें कि ऑगमेंटेड रियलिटी के लिए आगे क्या है Discover
- मुफ्त बनावट डाउनलोड करें: उच्च रिज़ॉल्यूशन और अभी उपयोग के लिए तैयार ready
