प्रतिसाद वेब डिझाइनसाठी 50 विलक्षण साधने

लेखक: Monica Porter
निर्मितीची तारीख: 17 मार्च 2021
अद्यतन तारीख: 17 मे 2024
Anonim
प्रतिसाद वेब डिझाइनसाठी 50 विलक्षण साधने - सर्जनशील
प्रतिसाद वेब डिझाइनसाठी 50 विलक्षण साधने - सर्जनशील

सामग्री

"रिस्पॉन्सिव्ह वेब डिझाईन" तसेच त्यांच्या सर्वाधिक विक्री-विक्री या पुस्तकात एथन मार्कोटे यांनी सादर केलेले / तयार केलेले, एखाद्याला साइटला प्रतिसाद देण्यासाठी तीन घटकांची आवश्यकता आहे:

  1. लवचिक / फ्लुइड ग्रिड
  2. प्रतिसादात्मक प्रतिमा
  3. मीडिया क्वेरी

असे बरेच इतर उत्तम लेख आहेत ज्यात हेतू, संकल्पना आणि प्रतिसादात्मक वेब डिझाइनशी संबंधित तंत्रांचा समावेश आहे, म्हणून आम्ही या लेखाचे लक्ष काही शीर्ष साधनांवर ठेवू जे आपल्याला जबाबदारीने उत्तरदायी होण्यासाठी मदत करेल.

प्रारंभ करण्यासाठी साधने

आपण आपली साइट तयार करण्यापूर्वी प्रारंभ करण्यापूर्वी पृष्ठावरील घटक वेगवेगळ्या ब्राउझरच्या आकारात असलेल्या विविध डिव्हाइसवर ते पाहिले जातील त्यानुसार कसे जुळतील हे शोधून काढणे चांगले आहे आणि मुख्यतः याबद्दल विचार करण्यामुळे डिस्कनेक्ट टाळणे चांगले आहे. डेस्कटॉप डिझाइन आणि उर्वरित प्रतिसाद पुनरावृत्ती नंतरचा विचार म्हणून पहा (विशेषत: स्टेफनी (सलिव्हन) र्विसची टिप्पणी पहा).

01. प्रतिक्रियाशील वेब डिझाइन स्केच पत्रके

जेरेमी पी अल्फोर्ड यांनी दिलेला प्रतिसादात्मक स्केच शीटचा हा सेट, पृष्ठ विभाग वेगवेगळ्या रेझोल्यूशनमध्ये कसे बदलतील याचा मॅपिंग सुरू करण्याचा एक चांगला प्रारंभ बिंदू आहे.


02. प्रतिक्रियाशील डिझाईन स्केचबुक

आपण आपले सर्व स्केचेस एकाच ठिकाणी ठेवण्यास प्राधान्य दिल्यास आपणास अ‍ॅप स्केचबुक कंपनीच्या 50 प्रतिसादी स्केच पत्रकांच्या या वायर-बाऊंड पुस्तकाचा विचार करावा लागेल.

03. प्रतिक्रियाशील वायरफ्रेम्स

प्रतिसाद देणारी वेबसाइट तयार करण्यातील अडचणींपैकी एक म्हणजे प्रतिक्रियाशील डिझाइन कसे कार्य करेल हे दर्शविण्यासाठी वायरफ्रेम्स वापरणे. जटिल लेआउट्सचे वायरफ्रेमिंग कसे कार्य करू शकते हे दर्शविण्यासाठी अ‍ॅडोबच्या जेम्स मेलर्स यांनी हे प्रायोगिक साधन एकत्र केले आहे.


04. मल्टी-डिव्हाइस लेआउट नमुने

आपल्याकडे आधी इतर लोकांनी याबद्दल कसा संपर्क साधला हे पाहणे उपयुक्त आहे, म्हणून ल्यूक व्रुब्लेवस्कीचे मल्टि-डिव्हाइस लेआउट पॅटर्न, जे उदाहरणांच्या दुव्यासह लोकप्रिय नमुन्यांची सूची दर्शविते, हे एक प्रारंभिक ठिकाण आहे.

05. शैली फरशा

समनाथा वॉरेनच्या स्टाईल टाईल्सने प्रतिक्रियाशील युगात डिझाइनसाठी एक नवीन तंत्र प्रस्तावित केले; निश्चित रूंदीच्या डिझाइन मॉकअपऐवजी हे स्विचेस किंवा मूडबोर्डसारखे आहेत जे दाणेदार तपशिलात न जाता सामान्य डिझाइन दृष्टीकोन दर्शवितात.

लवचिक / फ्लुइड ग्रिडची साधने

आधी सांगितल्याप्रमाणे, प्रतिसादात्मक डिझाइनसाठी आवश्यक असलेला पहिला घटक लवचिक / फ्लुइड ग्रिड आहे.खालील आधीपासून पूर्वनिर्मित आहेत: आपल्याला फक्त त्यांना डाउनलोड करण्याची आवश्यकता आहे आणि आपण द्रुतगतीने अधिक प्रतिसाद साइटवर जाल.


06. गोल्डन ग्रीड सिस्टम

कमी फ्रेमवर्क देखील विकसित करणा J्या जोनी कोरपीने अलीकडेच प्रतिक्रियाशील डिझाइनसाठी विश्वसनीय ग्रीड सिस्टमची ही नवीन आवृत्ती प्रकाशित केली आहे. "फोल्डिंग" मानले जाते कारण ते सहजतेने 16 ते आठ, चार ते चार स्तंभांमध्ये रुपांतर करते, गोल्डन ग्रीड सिस्टममध्ये एक लहान ब्राउझर आच्छादन देखील आढळते जे आपल्या पृष्ठांवर ग्रीड चाचणीसाठी उघड करते.

07. Foldy960

पारावेल, इंक. मधील प्रतिभावान जेंट्सने त्यांच्या प्रतिसादात्मक प्रकल्पांचा आधार म्हणून वापरलेली सुधारित 960.gs ग्रीड रीलीझ केली.

08. सिंपलग्रिड

कॉनोर मुइरहेड यांनी लिहिलेले सिम्पलग्रिड, प्रतिकृतीसह तयार केलेले होते, जेणेकरून आपल्या प्रतिसाद वेबसाइटवर चालणे आणि चालविणे सोपे आहे.

09. 1140px सीएसएस ग्रिड

मेलबर्न डिझायनर अ‍ॅन्डी टेलरची 1140 पीएक्स सीएसएस ग्रीड ही आणखी एक उत्तम प्रतिक्रिया ग्रिड प्रणाली आहे, जी विस्तृत डेस्कटॉप रेजोल्यूशनपासून मोबाईलपर्यंत जाते.

10. स्तंभ सीएसएस ग्रीड सिस्टम

पल्प + पिक्सल्स उर्फ ​​क्रिएटिव्ह डायरेक्टर निक गॉर्सलाइन यांनी बनवलेली कॉलमोनल ग्रिड सिस्टम 1140 पीएक्स ग्रिड सिस्टमवर आधारित आहे, परंतु स्केचशीट आणि वायरफ्रेमिंग टेम्पलेट्ससह डिझाइन किट तसेच सीएसएस डीबगिंग स्टाईल सारख्या काही अतिरिक्त वस्तूंसह आहे.

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

प्री-प्रोसेस्ड सीएसएस विस्तार जसे की सस आणि एलईएसई अधिक लोकप्रिय होत आहेत आणि टायलर टेटची सिमेंटिक ग्रिड सिस्टम त्यांचा वापर या ग्रीड सिस्टममध्ये जास्तीत जास्त प्रभावासाठी करते जे अनावश्यक वर्ग किंवा घटक वापरत नाही असा दावा करते. Coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout- for-ttt// येथे अधिक वाचा.

12. सुसी

सिमेंटिक ग्रिड सिस्टम प्रमाणेच ऑडबर्डच्या सुसीने एक ग्रीड सिस्टम तयार केली जी कोणतीही अतिरिक्त मार्कअप किंवा विशेष वर्ग वापरत नाही, परंतु सुसी केवळ सेसच्या वापरकर्त्यांकडे आहे (आणि त्याचे विस्तार, कंपास).

13. ग्रिडपाक

ग्रिडपाक, एर्स्काईन डिझाइनद्वारे, आजूबाजूच्या नवीनतम प्रतिसाद देणार्‍या ग्रीड जनरेटरपैकी एक आहे. हे आपल्याला अनेक ब्रेकपॉइंट्सवर आपले स्तंभ आणि गटारे सेट करण्याची परवानगी देते, त्यानंतर सीएसएस, जावास्क्रिप्ट आणि पीएनजी फायली आउटपुट करेल जेणेकरून आपली संपूर्ण टीम त्याच सुरूवातीपासून कार्यरत आहे.

14. ग्रिडसेट

ग्रिडसेटवर अजूनही गूढतेची थोडीशी हवा आहे, कारण मी हे लिहीत आहे, अद्याप ते रिलीझ झाले नाही. परंतु मार्क बाउल्टन डिझाइनचे साधन बीस्पोक, नॉन-प्रिस्क्रिप्टिव्ह, ग्रीड सिस्टम आणि आपले ग्रीड ऑनलाईन जतन आणि व्यवस्थापित करण्याचे मार्ग देते.

15. आरडब्ल्यूडीसाठी एक चांगले फोटोशॉप ग्रीड

इलियट जे स्टॉक्सने जुने 960 पीएक्स डी फॅक्टो ग्रिड मानक सोडून आणि त्याऐवजी सर्व प्रकारच्या टक्केवारीची गणना करणे सोपे करून 1000px बेस वरून काम करण्याचा प्रस्ताव ठेवला आहे. आपण सहमत असल्यास, त्याने आपल्याबरोबर कार्य करण्यास प्रारंभ करण्यासाठी त्याने एक PSD बनविला आहे.

16. द्रव ग्रीड

जर आपली रचना अत्यंत विशिष्ट असेल आणि आपणास आपला स्वतःचा सानुकूल ग्रिड तयार करण्याची आवश्यकता असेल तर आपण .नेट अवॉर्ड्समध्ये चमकदार नवागत नॉमिनी हॅरी रॉबर्ट्सच्या फ्लुईड ग्रिड कॅल्क्युलेटरद्वारे हे करू शकता.

17. उत्तरदायी कॅल्क्युलेटर

टक्केवारी कॅल्क्युलेटरचे आणखी एक पिक्सेल, परंतु स्टू रॉबसन यांनी लिहिलेले हे आपल्यासाठी सीएसएसचे सर्व नियम तयार करून इतरांपेक्षा एक पाऊल पुढे जाते, म्हणजे आपण त्या आपल्या स्टाईलशीटमध्ये कॉपी आणि पेस्ट करू शकता.

प्रतिसादात्मक प्रतिमांची साधने (आणि मजकूर)

प्रतिक्रियाशील वेब डिझाइनचा आणखी एक महत्त्वपूर्ण घटक म्हणजे फ्लूइड इमेजेस. द्रव प्रतिमा साध्य करण्याचे तंत्र सोपे असले तरी, कार्यक्षमता अनुकूलित करणे आणि भिन्न डिव्हाइससाठी पृष्ठ लोड अनुकूलित करणे वेब प्रतिसादातील प्रतिबद्धतातील सर्वात मोठे आव्हान आहे. समस्येपर्यंत पोहोचण्यासाठी येथे काही स्त्रोत आहेत.

18. प्रतिसादात्मक प्रतिमा

फिलामेंट ग्रुपने स्क्रीन रिझोल्यूशनवर आधारित योग्य आकाराची प्रतिमा पाठविण्याचा एक मार्ग तयार केला. मोबाइल-प्रथम प्रतिमांसह हा प्रयोग जे प्रतिसादात आणि जबाबदारीने स्केल करतात त्यांना संदर्भात वेगवेगळ्या आकाराच्या दोन प्रतिमा असणे आवश्यक आहे.

19. अनुकूली प्रतिमा

मॅट विल्कोक्सने अ‍ॅडॉप्टिव्ह इमेजेस तयार करण्यासाठी रिस्पॉन्सिव्ह इमेजेज टूलमधून प्रेरणा घेतली, जे अतिरिक्त मार्कअपची आवश्यकता न ठेवता वापरकर्त्याच्या डिव्हाइसवर योग्य प्रतिमा देण्यासाठी पीएचपी आणि थोडे जावास्क्रिप्ट वापरते.

20. Sencha.io Src (पूर्वीचे Tinysrc)

सेन्चा एक मेघ सेवा प्रदान करते जे होस्ट केलेल्या प्रतिमांच्या विनंतीकृत डिव्हाइसच्या आकारासाठी त्यांची अनुकूलित आवृत्ती पाठवते. ते कसे वापरायचे ते शोधण्यासाठी, डॉक्स.सेन्चा.com/io/src/ पहा.

21. फिट टेक्स्ट

पॅरावेल इंक मधील आणखी एक रत्न म्हणजे फिटटेक्स्ट.जेएस, डिझाइन आणि डिव्हाइसला हेडलाइन वेब प्रकार जबाबदार करण्यासाठी jQuery प्लग-इन आहे. तपशीलांसाठी ट्रेंटवाल्टन डॉट कॉम / २०१/0/०/10/२०१/ / सूट- ते- स्केल / पहा.

22. स्लॅब टेक्स्ट

फिट टेक्स्ट आणि स्लॅबटाइप अल्गोरिदमद्वारे प्रेरित, ब्रायन मॅकएलिस्टरचा स्लॅब टेक्स्ट एक jQuery प्लग-इन आहे जो परिभाषित रुंदी ठेवताना प्रतिसादात आकार देणार्‍या मजकुराचे ठळक ब्लॉक्स बनवितो.

मीडिया क्वेरीसाठी साधने

आता आपणास आपली लेआउट भिन्न डिव्हाइस, फ्लूइड ग्रिड आणि फ्लुइड प्रतिमांसाठी कशी बदलली जाईल याची कल्पना आहे, पृष्ठाच्या घटकांना प्रतिसादाच्या स्थितीत बदलण्यासाठी आपल्यास मीडिया क्वेरीची आवश्यकता आहे.

23. प्रतिसाद .js

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

अधिक जाणून घेण्यासाठी filamentgroup.com/lab/mittedjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. सीएसएस 3-मीडियाक्वेरीज.जे

वाऊटर व्हॅन डर ग्रॅफ द्वारे सीएसएस 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. स्क्रीनक्वेरी.इ.एस.

आणखी एक ब्राउझर परिमाण साधन, परंतु मंदार शिर्के मधील स्क्रीनक्वेरी.इसेस मोबाईल आणि टॅब्लेट प्रीसेटचा एक विस्तृत संच, तसेच एक ग्रीड आणि शासक जे दंड मोजमाप इतके सोपे करतात त्याद्वारे स्वत: ला वेगळे करते.

40. एप्टस

एकाधिक परिभाषित आकारात साइटच्या चाचणीसाठी दुसरा अॅप, परंतु Aप्टस मॅक-नेटिव्ह आहे. हे मॅक अॅप स्टोअरद्वारे उपलब्ध आहे आणि मूळ असल्याने सुलभ स्क्रीनशॉट्स आणि ऑफलाइन समर्थन यासारखे अतिरिक्त वैशिष्ट्ये आणली जातात.

41. उत्तरदायी डिझाईन बुकमार्कलेट

व्हिक्टर कौलॉनने एक अतिशय सोपी परंतु प्रभावी बुकमार्कलेट बनविली आहे; जेव्हा आपण त्यास कोणत्याही वेब पृष्ठावर सक्रिय करता तेव्हा हे एक टूलबार जोडते जे आपल्याला चार सामान्य स्क्रीन परिमाणांदरम्यान स्विच करू देते जेणेकरुन आपली साइट वेगवेगळ्या आकारात कशी प्रस्तुत करते ते आपण पाहू शकता.

42. प्रतिसाद देणारी डिझाइन चाचणी बुकमार्कलेट

बेंजामिन कीन यांनी लिहिलेले हे बुकमार्क आपल्याला आपल्या स्वतःच्या डिव्हाइसचे आकार आणि आपल्या आवडीनुसार किंवा कमीतकमी काही देऊन अधिक सानुकूलित करण्याची परवानगी देते. जेव्हा ते सक्रिय केले जाते तेव्हा सहज निवडण्याकरिता बाजूने निवडलेल्या सर्व आकारात साइट दर्शवते.

43. स्क्रीनफ्लाय

स्क्रिफ्लाय, क्विर्कटूल द्वारे, आपणास डेस्कटॉप, टॅब्लेट, मोबाईल आणि दूरदर्शनवरील भिन्न रिझोल्यूशनवर साइटची चाचणी घेण्यास परवानगी देते. डेस्कटॉप चाचणी सध्या सफारीपुरती मर्यादित आहे, तर टॅब्लेट आणि मोबाइलकडे डिव्हाइस आणि ब्राउझरसाठी अधिक पर्याय आहेत. दूरदर्शन फक्त ओपेरापुरते मर्यादित आहे.

44. मीडिया क्वेरी इंडिकेटर

जेव्हा ब्राउझरद्वारे मीडिया क्वेरी ट्रिगर केली जाते तेव्हा जोहान ब्रूक चाचणीसाठी शुद्ध सीएसएस मार्ग प्रदान करते. डिझाइन ब्रेकिंग पॉइंट्ससह चाचणी आणि खेळण्यासाठी मीडिया क्वेरी इंडिकेटर हे आणखी एक चांगले साधन आहे.

45. शिम

बोस्टन ग्लोब, आरडब्ल्यूडी चळवळीचा पोस्टर बॉय, पुन्हा डिझाइन करण्यासाठी वापरल्या गेलेल्या साधनांपैकी एक, शिम हा एक नोड.जेएस अ‍ॅप आहे जो एकाच वायफाय नेटवर्कवर एकाधिक डिव्हाइसवर वेबपृष्ठ चालवितो, यामुळे क्रॉस-डिव्हाइस चाचणी करणे खूप सोपे आहे .

46. ​​ड्राइव्ह-इन

शिम चालविण्यासाठी आपल्याकडे नोड.जेएस सर्व्हर नसल्यास, स्कॉट जेहलने ड्राइव्ह-इन नावाची एक सोपी आवृत्ती तयार केली आहे जी मूलभूतपणे त्याच प्रकारे कार्य करते, परंतु पीएचपी, अपाचे आणि एक .htaccess फाइल वापरते.

47. अ‍ॅडोब सावली

या दूरस्थ डीबगिंग साधनासह अ‍ॅडोब वेब तंत्रज्ञानामध्ये त्यांचे पुश चालू ठेवतो. मॅक किंवा विंडोजवर छाया आणि Chrome विस्तार तसेच Android किंवा आयफोनवर छाया क्लायंट स्थापित करा आणि आपण बर्‍याच भिन्न डिव्हाइसमध्ये वेब पृष्ठे सामायिक करू शकता.

48. ऑपेरा मोबाइल एमुलेटर + रिमोट डीबग

मोबाइल पृष्ठे डीबग करण्याचा एक सोपा मार्ग म्हणजे ऑपेरा आणि ऑपेरा मोबाइल एमुलेटर स्थापित करणे आणि त्यास त्यांच्या रिमोट डीबग पर्यायासह कनेक्ट करणे. सेटअप सोपा आणि वेगवान आहे आणि त्यात वेबकिटपेक्षा अधिक चाचणी घेण्याचा अतिरिक्त फायदा आहे.

पुढील प्रेरणा

इतर त्यांच्या डिझाईन्सला उत्तरदायी कसे बनवतात याबद्दल कल्पना मिळवू इच्छिता?

49. MediaQueri.es

जर आपण ते आधीपासून पाहिले नसेल तर, मीडियाक्वेरी साइटला साइटच्या उत्तरोत्तर वाढणार्‍या साइटची संख्या सतत वाढत आहे.

50. @RWD

इथन मार्कोटे एक ट्विटर खाते चालविते जे आरडब्ल्यूडीच्या जगातील ताज्या बातम्या, साधने आणि शोकेस आणते.

डेनिस जेकब्स एक स्पीकर, लेखक, वेब डिझाइन प्रशिक्षक आणि सर्जनशीलता लेखक म्हणून आवर्जून आहेत, तर पीटर गॅस्स्टन द बुक ऑफ सीएस 3 चे लेखक आणि ब्रोकन लिंकवर ब्लॉग करणारे एक अनुभवी वेब डेव्हलपर आहेत.

हे आवडले? हे वाचा!

  • मोबाइल वेबसाइट तयार करण्यासाठी प्रो
  • शीर्ष सीएसएस आणि जावास्क्रिप्ट तंत्र
  • अ‍ॅप कसा तयार करायचा
  • डिझाइनरसाठी सर्वोत्तम विनामूल्य वेब फॉन्ट
  • संवर्धित वास्तवासाठी पुढे काय आहे ते शोधा
  • विनामूल्य पोत डाउनलोड करा: उच्च रिझोल्यूशन आणि आता वापरण्यास सज्ज
मागील लेख

आपल्याला आवश्यक असलेल्या डिझाइनची 4 साधने आपल्याला कधीच माहित नाहीत
पुढील लेख

आयफोन 11 वि आयफोन 8 प्लस: आपल्यासाठी कोणते आहे?
पोर्टलचे लेख
आपले यूएक्स डिझाइन सुधारण्याचे 5 मार्ग
शोधा

आपले यूएक्स डिझाइन सुधारण्याचे 5 मार्ग

मे 2024
डिजिटल इनोव्हेन्शन म्हणजे नियम पुस्तक फाटलेला असावा असे नाही - यात आपल्या आतड्यावर विश्वास ठेवणे आणि आवश्यक गोष्टी परत ठेवणे समाविष्ट आहे.अ‍ॅडोब क्रिएटिव्ह क्लाऊड मिळवायेथे, हॅलोचे तंत्रज्ञान दिग्दर्श...
कल्पनारम्य पशू रंगविण्यासाठी कसे
शोधा

कल्पनारम्य पशू रंगविण्यासाठी कसे

मे 2024
एकदा आपण कल्पनारम्य प्राण्यांसाठी कल्पना आणल्यानंतर, पुढील चरण म्हणजे विश्वासार्ह रंग आणि पोत सह रंगवून ती पुन्हा जीवनात आणणे होय. पेन्सिल आणि वॉटर कलरमधील जीव रंगविण्यासाठी आमच्या वर्कफ्लो टीपा येथे ...
ऑक्टोबर 2017 साठी 10 नवीन वेब डिझाइन साधने
शोधा

ऑक्टोबर 2017 साठी 10 नवीन वेब डिझाइन साधने

मे 2024
इनव्हीशन स्टुडिओच्या घोषणा करून आम्ही या महिन्यात उत्सुक आहोत - स्क्रीन डिझाइन टूलने इनव्हिजन पद्धतीने केले - जी आपण सामान्य रीलिझ करण्यापूर्वी प्रवेश करण्यासाठी साइन अप करू शकता. क्रोम in१ मधील वेब श...