डिजाइनरों के लिए 50 उपयोगी उत्तरदायी वेब डिज़ाइन उपकरण

यह लेख हमारा हिस्सा है "वेब उत्तरदायी डिज़ाइन श्रृंखला" - सभी प्लेटफार्मों के उपयोगकर्ताओं के लिए वेबसाइट बनाने में आपकी सहायता करने के लिए टूल, संसाधन और ट्यूटोरियल शामिल हैं. यहां क्लिक करे एक ही श्रृंखला से अधिक लेख देखने के लिए.

पिछले कुछ दिनों से, हमने आपको कुछ बेहतरीन वर्डप्रेस और जूमला उत्तरदायी विषय दिखाए हैं जिन्हें आप अपनी साइट पर डाउनलोड और उपयोग कर सकते हैं। आज, हम आपको देने जा रहे हैं उपकरण. फ्रेमवर्क, सेवाओं, और डाउनलोड स्क्रिप्ट्स का संकलन, हमें लगता है कि जब यह उत्तरदायी वेब विकास के लिए आते हैं तो उन्हें बहुत मदद मिलेगी।.

टूल की पूरी सूची को नीचे जाना आसान बनाने के लिए, हमने उन्हें निम्न वर्गों में वर्गीकृत किया है:

• ग्रिड और रूपरेखा
• स्केच शीट्स और वायरफ्रेम
• जावास्क्रिप्ट और jQuery प्लगइन्स
• परीक्षण और पूर्वावलोकन
• स्लाइडर्स
• अन्य लोग

ग्रिड और रूपरेखा

[शीर्ष पर वापस जाएं]

Columnal

स्तंभ एक पल्प + पिक्सेल परियोजना है, जिसे cssgrid.net से उधार लिया गया है जबकि कुछ कोड प्रेरणा 960.gs से ली गई है। ब्राउज़र विंडो के आकार बदलने पर गतिशील रूप से बदलने के लिए अपने ग्रिड को लचीला बनाकर, स्तंभकार आपकी उत्तरदायी वेब डिज़ाइन में आपकी बहुत मदद करता है.

कंकाल

कंकाल एक सरल और शक्तिशाली सीएसएस फ्रेमवर्क है, जो मुख्य रूप से डेवलपर्स और डिजाइनरों द्वारा अपनी सादगी और दक्षता के कारण पसंद किया जाता है। यहां जावास्क्रिप्ट के साथ कोई भारी-भरकम लिफ्टिंग नहीं है, केवल अच्छे और शुद्ध सीएसएस ही साफ-सुथरे दस्तावेज के साथ.

पाठक्रम 4

इसके निर्माता के नाम पर कम फ्रेमवर्क कमोबेश एक फ्रेमवर्क है। यह इनलाइन CSS मीडिया क्वेरी का उपयोग करने पर आधारित एक अनुकूली CSS ग्रिड सिस्टम है, जो उत्तरदायी वेबसाइटों के विकास को बहुत आसान बनाता है.

सिमेंटिक ग्रिड सिस्टम

सिमेंटिक ग्रिड सिस्टम का उपयोग उत्तरदायी ग्रिड लेआउट डिजाइन करने के लिए किया जाता है। यह अधिकतम दक्षता देने के लिए LESS, SCSS या स्टाइलस जैसे पूर्व-संसाधित सीएसएस एक्सटेंशन का उपयोग करता है। आप कॉलम और गटर की चौड़ाई का चयन कर सकते हैं, कॉलम की संख्या चुन सकते हैं और पिक्सेल और प्रतिशत के बीच स्विच कर सकते हैं.

गोल्डन ग्रिड सिस्टम

गोल्डन ग्रिड सिस्टम एक द्रव-ग्रिड प्रणाली है जो आपके उत्तरदायी वेब डिज़ाइन के शुरुआती बिंदु के रूप में कार्य करता है। यह वेबसाइट को 240 से 2560px से लेकर अच्छे दिखने वाले पृष्ठों की सेवा करने में सक्षम बनाता है.

320 और ऊपर

320 और ऊपर एक CSS मीडिया क्वेश्चन बॉयलरप्लेट है, जो आपके उत्तरदायी डिजाइन के लिए शुरुआती टेम्पलेट है। यह उपलब्ध कई अन्य बॉयलर की तुलना में पूरी तरह से रिवर्स दृष्टिकोण का अनुसरण करता है.

Inuit.css

Inuit.css एक सीएसएस फ्रेमवर्क है, जिसका उपयोग करना बेहद आसान है, यहां तक ​​कि नौसिखियों के लिए भी। इसका एक न्यूनतम दृष्टिकोण है, इस प्रकार आपको केवल उन चीजों से निपटना होगा जो आवश्यक हैं, लेकिन यदि आवश्यक हो, तो यह उपलब्ध मुट्ठी भर प्लग के साथ भी बढ़ाया जा सकता है।.

gridless

ग्रिड टाइपलेस सुंदर टाइपोग्राफी के साथ उत्तरदायी और क्रॉस-ब्राउज़र वेबसाइट बनाने के लिए एक बॉयलरप्लेट है। यह उपकरण किसी परियोजना के प्रगतिशील विकास पर केंद्रित है, और यह किसी भी डिजाइन के शुरुआती बिंदु के रूप में कार्य करता है.

1140 सीएसएस ग्रिड

1140 सीएसएस ग्रिड एक महान सीएसएस ग्रिड प्रणाली है जिसे मेलबोर्न डिजाइनर एंडी टेलर द्वारा डिज़ाइन किया गया है, जो आपके डिज़ाइन को बड़े मॉनिटरों के लिए 1140px पर पूरी तरह से फिट होने देता है और आपका द्रव लेआउट बहुत कम अतिरिक्त काम के साथ अन्य छोटे प्रस्तावों के लिए मूल रूप से अनुकूल होगा.

1KBCSSGrid

टायलर टेट द्वारा डिजाइन 1KB सीएसएस ग्रिड, एक सरल और हल्का सीएसएस ग्रिड जनरेटर है। यह आपको कॉलम की संख्या, कॉलम की चौड़ाई और नाली की चौड़ाई निर्धारित करने की अनुमति देगा, और आप अपनी वेबसाइटों के लिए डाउनलोड करने योग्य सीएसएस प्राप्त कर सकते हैं.

बूटस्ट्रैप

ट्विटर पर मार्क ओटो और जैकब थॉर्नटन द्वारा बूटस्ट्रैप, बनाया और बनाए रखा, उपयोगकर्ता इंटरफ़ेस तत्वों, लेआउट और जावास्क्रिप्ट टूल का एक उत्कृष्ट सेट है, जो आपके वेब डिज़ाइन प्रोजेक्ट में डाउनलोड करने और उपयोग करने के लिए स्वतंत्र रूप से उपलब्ध है।.

द्रव ग्रिड कैलकुलेटर

यह सरल उपकरण आपको अपने द्रव ग्रिड वेबसाइट डिजाइन के सीएसएस को जल्दी से हथियाने में मदद करेगा.

तरल पदार्थ

द्रव ग्रिड एक सरल लेकिन उपयोगी द्रव ग्रिड ढांचा है, जो 6, 7, 8, 9, 10, 12 और 16 कॉलम के आधार पर उत्तरदायी लेआउट बनाता है।.

Flurid

Flurid 16 स्तंभों के साथ एक सरल और बहुत उपयोगी क्रॉस-ब्राउज़र CSS ग्रिड फ्रेमवर्क है। और इसके अलावा यह हाशिये में पिक्सेल को छिपाता नहीं है.

Gridset

ग्रिडसेट किसी भी प्रकार के ग्रिड बनाने का एक उपकरण है, जैसे, स्तंभ, विषम, निश्चित, अनुपात, यौगिक, उत्तरदायी और अधिक। मार्क बोल्टन का यह उपकरण अभी भी बीटा में है, लेकिन होनहार साबित होता है। और क्या मैंने उल्लेख किया है, इसका उपयोग करना लिंक को एम्बेड करने जितना आसान है.

Gridpak

ग्रिडपैक एक ऑनलाइन उत्तरदायी ग्रिड जनरेटर है, जहां कॉलम, पैडिंग और गटर की संख्या को बदला जा सकता है, और कस्टम ब्रेकप्वाइंट को जोड़ा जा सकता है। CSS टूल द्वारा उत्पन्न होता है और डाउनलोड के लिए तैयार किया जाता है। यह पीएनजी ग्रिड टेम्प्लेट भी प्रदान करता है, जिसका उपयोग फ़ोटोशॉप में डिजाइनिंग उद्देश्यों के लिए किया जा सकता है.

SimpleGrid

सिंपलग्रिड, माइकल कुह्न द्वारा विकसित, अनंत ग्रिड-आधारित लेआउट बनाने के लिए एक बहुत ही सरल और सीधा सीएसएस फ्रेमवर्क है। डिफ़ॉल्ट रूप से, SimpleGrid स्क्रीन आकार के 4 अलग-अलग रेंज के लिए तैयार किया जाता है.

Susy

ओडबर्ड द्वारा सूसी, सिमेंटिक ग्रिड सिस्टम की कार्रवाई के समान है। यह बिना किसी अतिरिक्त मार्कअप या किसी अन्य विशेष वर्गों का उपयोग करता है, लेकिन यह केवल सास और इसके विस्तार कम्पास के उपयोगकर्ताओं के लिए लक्षित है.

टिनी द्रव ग्रिड

टाइनी फ्लुइड ग्रिड एक भयानक वेब ऐप है, जो आपकी वेबसाइट के ग्रिड सिस्टम को इंटरैक्टिव तरीके से निर्धारित करने में आपकी मदद कर सकता है। आप अपनी वेबसाइट के लेआउट में कॉलम, गटर प्रतिशत, न्यूनतम और अधिकतम चौड़ाई की संख्या निर्धारित कर सकते हैं और इसके लिए एक डाउनलोड करने योग्य सीएसएस प्राप्त कर सकते हैं।.

चर ग्रिड सिस्टम

वैरिएबल ग्रिड सिस्टम को SprySoft द्वारा डिजाइन और विकसित किया गया है और यह 960 ग्रिड सिस्टम पर आधारित है। यह डेवलपर्स और डिजाइनरों को कस्टम ग्रिड उत्पन्न करने की अनुमति देता है और फिर उस ग्रिड पर आधारित सीएसएस फ़ाइल डाउनलोड करता है.

स्केच शीट्स और वायरफ्रेम

[शीर्ष पर वापस जाएं]

उत्तरदायी वेब डिज़ाइन स्केच शीट्स

यह उपकरण विभिन्न उपकरणों में आपकी वेबसाइट लेआउट में विभिन्न तत्वों के प्लेसमेंट को मैप करने में उपयोगी है। इस डिवाइस की मदद से, आप एक विचार बना सकते हैं कि विभिन्न स्क्रीन आकारों और प्रस्तावों के लिए वेबसाइट के आवश्यक तत्वों को कहाँ रखा जाए.

उत्तरदायी वायरफ्रेम

उत्तरदायी वायरफ्रेम एडोब के जेम्स मेलर्स द्वारा बनाया गया एक प्रायोगिक उपकरण है। यह केवल HTML और सीएसएस के साथ बनाया गया है (कोई चित्र या जेएस का उपयोग नहीं किया गया था) जिसका उपयोग आप कल्पना कर सकते हैं कि विभिन्न डेस्कटॉप और मोबाइल उपकरणों के वास्तविक ब्राउज़रों पर आपका उत्तरदायी डिज़ाइन कैसा दिखेगा।.

StyleTiles

स्टाइल टाइलें आपको एक विचार विकसित करने का एक तरीका देती हैं कि एक वेबसाइट कैसे दिखेगी, जो जटिल शैलियों से स्वतंत्र है जो खेल में आती है। यह आपको एक सही उत्तरदायी डिज़ाइन वर्कफ़्लो और क्लाइंट फीडबैक को एकीकृत करने की क्षमता प्रदान करने का अवसर देता है.

जावास्क्रिप्ट और jQuery प्लगइन्स

[शीर्ष पर वापस जाएं]

Adapt.Js

Adapt.js एक जावास्क्रिप्ट समाधान है और CSS मीडिया प्रश्नों का एक उत्कृष्ट विकल्प है। @मीडिया दृष्टिकोण का उपयोग करना अच्छा अभ्यास है, लेकिन यह सभी ब्राउज़रों के लिए काम नहीं करता है। 960 ग्रिड सिस्टम के निर्माता नाथन स्मिथ ने इस समस्या को दूर करने के लिए Adapt.js, एक बहुत ही हल्के जावास्क्रिप्ट पुस्तकालय का विमोचन किया।.

आइसोटोप

आइसोटोप एक अद्भुत jQuery प्लगइन है, जो एक उत्तरदायी डिजाइन तैयार करते समय बहुत उपयोगी साबित होता है। यह न केवल ब्राउज़र विंडो के आकार बदलने या स्क्रीन का आकार छोटा होने पर किसी पृष्ठ के तत्वों को पुनर्व्यवस्थित करने में मदद करता है, बल्कि यह उन तत्वों को फ़िल्टर करने में भी मदद करता है.

चिनाई

चिनाई एक उत्कृष्ट jQuery प्लगइन है, जिसका उपयोग गतिशील और अनुकूली लेआउट बनाने के लिए किया जाता है। यह प्लगइन आपके उत्तरदायी डिजाइन में तत्वों को फिर से व्यवस्थित करने में मदद करता है, इसलिए वे ग्रिड पर खुले स्थानों में बेहतर फिट हो सकते हैं.

Respond.js

Respond.js एक तेज़ और हल्की (3 Kb मिनिफ़ाइड और 1 Kb gzipped) स्क्रिप्ट है, जिसका मुख्य उद्देश्य उन IE वेब ब्राउज़र की तरह CSS3 मीडिया क्वेरी का समर्थन नहीं करने वालों में उत्तरदायी वेब डिज़ाइन को सक्षम करना है।.

TinyNav.js

TinyNav.js एक छोटा और हल्का jQuery प्लगइन है, केवल 362 बाइट्स, जो बड़े नेविगेशन सूचियों को छोटे स्क्रीन के लिए छोटे ड्रॉपडाउन मेनू में परिवर्तित करता है।.

वूकमार्क jQuery प्लगइन

Wookmark एक jQuery प्लगइन है जो ब्राउज़र विंडो आकार का पता लगाता है और स्वचालित रूप से पृष्ठ के तत्वों को कॉलम में व्यवस्थित करता है। आप पेज के नीचे एक लाइव पूर्वावलोकन भी देख सकते हैं.

परीक्षण और पूर्वावलोकन

[शीर्ष पर वापस जाएं]

ProtoFluid

ProtoFluid एक वेब-आधारित प्रोटोटाइप टूल है, जो आपको विभिन्न स्क्रीन साइज़ और रिज़ॉल्यूशन में अपनी वेबसाइट के प्रोटोटाइप का परीक्षण करने देता है। बस URL में टाइप करें, डिवाइस (या किसी भी कस्टम आयाम) का चयन करें और लॉन्च लॉन्च करें। चूंकि यह एक वेब-आधारित उपकरण है, यह आपको फायरबग जैसे अन्य एक्सटेंशन का उपयोग करने की भी सुविधा देता है.

Responsive.Is

Responsive.s एक अन्य ब्राउज़र एमुलेटर टूल टाइपस्टैस्ट द्वारा बनाया गया है, जिसका उपयोग आप अपने उत्तरदायी डिजाइन का परीक्षण करने के लिए कर सकते हैं। बस एक URL टाइप करें, और यह आपके द्वारा चुने गए डिवाइस के आधार पर अपने आकार को स्वचालित रूप से बदल देगा.

Responsivepx.Com

ResponsivePx आपके उत्तरदायी वेबसाइट डिज़ाइन के परीक्षण के लिए एक बढ़िया उपकरण है। मुख्य विशेषता जो इसे दूसरों से अलग करती है, वेबसाइट पिक्सेल-बाय-पिक्सेल का आकार बदलने की इसकी क्षमता है। यह भयानक विशेषता, आपको ब्रेकप्वाइंट की पहचान करने और यह भी जांचने देगी कि आपकी साइट में सीएसएस मीडिया क्वेरी कैसे काम कर रही है.

उत्तरदायी वेब डिज़ाइन परीक्षण उपकरण

एक भयानक परीक्षण उपकरण, जो आपको अपनी उत्तरदायी वेबसाइट को विभिन्न स्क्रीन आकारों में एक साथ एक स्क्रीन में देखने की अनुमति दे सकता है, जबकि आप उन्हें बनाते या डिज़ाइन करते हैं। मुझे यह टूल मुख्य रूप से पसंद है क्योंकि यह सभी स्क्रीन रिज़ॉल्यूशन को साथ-साथ दिखाता है जो डीबगिंग के लिए आसान बनाता है.

ReView.Js

ReView एक गतिशील व्यूपोर्ट सिस्टम है, जिसे शुद्ध जावास्क्रिप्ट में विकसित किया गया है, जो आपको अपने उत्तरदायी वेब डिज़ाइन के लिए शानदार दृश्य अनुभव प्रदान करता है.

Screenfly

क्विकरटूल द्वारा स्क्रीनफ्लाइ, एक अद्भुत उपकरण है जो आपको विभिन्न प्रकार के उपकरणों: डेस्कटॉप, टैबलेट, मोबाइल और टीवी में अपनी उत्तरदायी वेबसाइट को देखने में सक्षम करेगा। इसमें स्क्रॉलिंग को सक्षम या अक्षम करने या डिस्प्ले को घुमाने के विकल्प भी हैं.

Screenqueri.es

Screenqueri.es एक पिक्सेल-सही उत्तरदायी डिज़ाइन परीक्षण उपकरण है। बस किसी भी वेबसाइट पते को दर्ज करें जिसे आप जांचना चाहते हैं, और यह उपकरण प्रदर्शन करता है वेबसाइट को डिवाइस के अनुसार विभिन्न स्क्रीन आकारों में दिखाया जाएगा। आप ब्रेकपॉइंट्स की पहचान करने के लिए आकार पिक्सेल-बाय-पिक्सेल का मैन्युअल रूप से आकार बदल सकते हैं.

उत्तर देने वाला

IPhone और iPad से विभिन्न उपकरणों में अपनी साइट का परीक्षण करें, एक जलाने के लिए और Android पर Responsinator पर। यह आपकी साइट को पोर्ट्रेट और लैंडस्केप मोड दोनों में दिखाता है। पेज पर प्रदर्शित उपकरणों की रूपरेखा के कारण मुझे यह टूल बहुत अधिक पसंद है, जो पूरी प्रक्रिया के लिए अधिक अर्थ लाता है.

स्लाइडर्स

[शीर्ष पर वापस जाएं]

ब्लूबेरी

ब्लूबेरी एक शानदार ओपन सोर्स jQuery इमेज स्लाइडर है, जो विशेष रूप से तरल या उत्तरदायी लेआउट के लिए काम करने के लिए लिखा गया है.

Elastislide

एक हिंडोला चाहते हैं जो स्वचालित रूप से स्क्रीन के आकार को समायोजित करेगा जब ब्राउज़र विंडो को आकार दिया जाता है या जब आप एक छोटी स्क्रीन में होते हैं? Elastislide आपकी आवश्यकताओं के लिए सबसे उपयुक्त jQuery प्लगइन है.

उत्तरदायी CSS3 स्लाइडर

यह एक शुद्ध उत्तरदायी CSS3 स्लाइडर है जो आसानी से किसी भी स्क्रीन आकार और स्क्रीन रिज़ॉल्यूशन को अनुकूलित कर सकता है। इस स्लाइडर के बारे में अच्छी बात यह है कि, तीर स्क्रीन के अंदर जाते हैं जब डिवाइस स्क्रीन का आकार काफी छोटा होता है। कोई जावास्क्रिप्ट की जरूरत है.

ResponsiveSlides.Js

ResponsiveSlides.Js एक बहुत ही सरल और बेहद हल्का (केवल 1Kb) jQuery प्लगइन है, जो बिना किसी सूची के एक उत्तरदायी स्लाइडर बनाता है। यह ब्राउज़रों की एक विस्तृत श्रृंखला पर काम करता है, वह भी IE6 और ऊपर पर.

अन्य लोग

[शीर्ष पर वापस जाएं]

अनुकूली छवियाँ

अनुकूली छवियां उत्तरदायी वेब डिज़ाइन के लिए एक ऑनलाइन उपकरण है, जो आगंतुकों के स्क्रीन आकार का पता लगाता है और स्क्रीन आकार और रिज़ॉल्यूशन के आधार पर, rescaled छवियों को बनाता है, बचाता है।.

FitText.Js

FitText.js एक छोटा जावास्क्रिप्ट उपकरण है, जो ब्राउज़र विंडो के आकार बदलने पर पाठ और हेडलाइंस के स्वचालित आकार बदलने की अनुमति देता है। इस टूल के साथ टेक्स्ट साइज़ की कोई चिंता नहीं है.

FitVid.Js

ब्राउज़र विंडो के आकार बदलने या डिवाइस के छोटे रिज़ॉल्यूशन का होने पर एम्बेडेड वीडियो को फिर से बेचना चाहते हैं? FitVid.Js आपको इसे हासिल करने में मदद कर सकता है। यह एक हल्का, सरल, आसानी से उपयोग किया जाने वाला jQuery प्लगइन है जिसका उपयोग द्रव चौड़ाई एम्बेडेड वीडियो को प्राप्त करने के लिए किया जाता है.

रेटिना छवियाँ

रेटिना इमेजेज एक भयानक जावास्क्रिप्ट सॉल्यूशन है, जो रेटिना डिस्प्ले पर देखने पर स्वचालित रूप से @ 2X बड़ी, उच्च-रिज़ॉल्यूशन की छवियों की सेवा देगा। आपको केवल एक और एक-एक छवि का उच्च-रिज़ॉल्यूशन संस्करण डालने की आवश्यकता है, और यह बाकी का प्रबंधन करेगा.

निर्बाध उत्तरदायी फोटो ग्रिड

सीमलेस रेस्पॉन्सिव फोटो ग्रिड ब्राउज़र पर एज-टू-एज प्रदर्शित करता है, छवियों के बीच कोई अंतराल के बिना। तस्वीरें टाइल की जाती हैं और वे कॉलम में पूरे पृष्ठ पर बाएं से दाएं प्रवाहित होती हैं। ब्राउज़र विंडो के आकार बदलने के अनुसार कॉलम की संख्या समायोजित होती है.

SlabText

SlabText एक jQuery प्लगइन या ब्रायन McAllister द्वारा स्लैबटाइप एल्गोरिथ्म पर आधारित टूल है, जो उपलब्ध स्थान को भरने के लिए प्रत्येक पंक्ति को आकार देने से पहले पंक्तियों में सुर्खियों को विभाजित करता है। यह कार्रवाई में FitText.Js प्लगइन के समान है.

Zurb - ResponsiveTables

क्या आपने कभी सोचा है कि उत्तरदायी डिजाइन में बड़े डेटा तालिकाओं के साथ कैसे व्यवहार करें? Zurb, एक CSS / JS कॉम्बो आपको जवाब देता है; यह डेटा टेबल लेता है और उन्हें संशोधित करता है ताकि वे छोटे स्क्रीन उपकरणों पर उत्तरदायी लेआउट को न तोड़ें.

Categorizr

श्रेणीबद्ध एक बहुत छोटी PHP स्क्रिप्ट है, आपके आगंतुकों को अधिक लक्षित वेब अनुभव प्रदान करती है। यह टैबलेट, टीवी, मोबाइल या डेस्कटॉप के लिए डिवाइस-विशिष्ट डिज़ाइन देने में आपकी सहायता करेगा.

मीडिया क्वेरी बुकमार्कलेट

मीडिया क्वेरी बुकमार्कलेट आपको दिखाता है कि वर्तमान व्यूपोर्ट का आकार क्या है और किस मीडिया क्वेरी को इसके लिए निकाल दिया गया था.

उत्तरदायी कैलकुलेटर

उत्तरदायी कैलकुलेटर एक बहुत ही सरल ऑनलाइन उपकरण है जो आपकी उत्तरदायी वेबसाइट को डिज़ाइन करते समय पिक्सेल को प्रतिशत में बदलने में आपकी सहायता कर सकता है.

अगले हफ्ते तक

इस श्रृंखला के दूसरे सप्ताह में, हम आपको ऐसे ट्यूटोरियल प्रदान करेंगे, जो वास्तव में आपको उत्तरदायी वेब डिज़ाइन (RWD) में मिलेंगे.

इसे याद मत करो.