मेन्यू

उत्तरदायी वेब डिज़ाइन परीक्षण: पूर्ण शुरुआत गाइड

responsive web design testing

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

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

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

पारंपरिक सॉफ्टवेयर उत्पाद अनिवार्य रूप से किसी भी उपकरण पर समान रूप से प्रस्तुत करते हैं।

माइक्रोसॉफ्ट ऑफिस, उदाहरण के लिए , हर पर्सनल कंप्यूटर पर समान दिखता है। Microsoft Word को ठीक वैसे ही लेने की कल्पना करें, जैसे यह आपके डेस्कटॉप पर चलता है, और इसे iPhone4 पर देख रहा है। या तो मेनू और बटन छोटे दिखाई देंगे, या फिर आप केवल स्क्रीन के एक कोने को देखेंगे, और व्यापक स्क्रॉलबार का उपयोग करने की आवश्यकता होगी। किसी भी तरह से, आवेदन अनिवार्य रूप से अनुपयोगी हो जाता है।

उत्तरदायी-वेब-परीक्षण

यह निराशाजनक अनुभव ठीक वैसा ही है जैसा कि हर डिज़ाइनर तब होता है जब वे वेब के लिए डिज़ाइन करने की कोशिश करते हैं।

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

इसका मतलब है कि एक परीक्षण रणनीति (और एक स्वचालन रणनीति) जो विभिन्न प्रस्तावों पर 'सही लगती है' और जो कुछ भी प्रयोग नहीं करती है, उसे सीखने और सीखने में सक्षम होने की आवश्यकता है।

आप क्या सीखेंगे:

शुरुआत करने के लिए उत्तरदायी वेबसाइट डिजाइन की मार्गदर्शिका

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

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

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

हमारी सिफारिश

(1) एलटी ब्राउज़र

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

बस अपना वेबसाइट URL दर्ज करें, अपनी वेबसाइट का परीक्षण करने के लिए डिवाइस का चयन करें। आप एक साथ दो डिवाइस को साइड व्यू की तुलना के लिए चुन सकते हैं।

लैम्बडाटेस्ट

न केवल परीक्षण, बल्कि एलटी ब्राउज़र द्वारा प्रस्तुत इनबिल्ट DevTools की मदद से उपयोगकर्ता अपनी वेबसाइट पर डिबग भी कर सकते हैं।

एलटी ब्राउज़र

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

=> LT Browser पर जाएं

उत्तरदायी वेब डिज़ाइन क्या है?

RWDवेबसाइटों के लिए लक्ष्य अपने डिवाइस, रिज़ॉल्यूशन पर प्रतिक्रिया करने और सही तरीके से प्रस्तुत करने और अनुकूलित करने में सक्षम होने के लिए। उदाहरण के लिए, यदि उपयोगकर्ता डेस्कटॉप / लैपटॉप से ​​iPad पर स्विच करता है, तो वेबसाइट को स्वचालित रूप से संबंधित डिवाइस क्षमताओं के अनुसार छवि के आकार आदि जैसे संकल्प परिवर्तनों को अनुकूलित करना चाहिए।

संक्षेप में,उत्तरदायी आकारहै 'हर स्क्रीन के लिए एक वेबसाइट' ।

नीचे स्क्रीन एक हैउदाहरणआरडब्ल्यूडी का:

RWD का उदाहरण

ध्यान दें: रियल टाइमउदाहरणएक उत्तरदायी वेबसाइट है www.fpl.com

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

  • उत्तरदायी वेबसाइटों को PHP, .Net, जावा, CQ5 (एडोब एक्सपीरियंस मैनेजर - एईएम) और कई नए फ्रेमवर्क में कोडित किया गया है जो उत्तरदायी डिजाइन विकसित करने के लिए बहुत उपयोगी हैं।
  • सीएसएस और HTML सुविधाओं को स्क्रीन रिज़ॉल्यूशन बनाने के लिए लीवरेज किया जाता है और छवियों को स्वचालित रूप से आकार दिया जाता है।
  • आरडब्ल्यू डिजाइन किसी साइट के लेआउट की पहचान करने के लिए ब्रेकप्वाइंट का उपयोग करता है। प्रत्येक डिज़ाइन का उपयोग विभिन्न ब्रेकप्वाइंट पर किया जाता है। एक डिज़ाइन एक ब्रेकपॉइंट पर लगाया जाता है जबकि दूसरा डिज़ाइन ब्रेकपॉइंट के नीचे उपयोग किया जाता है। ये ब्रेकप्वाइंट आमतौर पर ब्राउज़रों की चौड़ाई पर आधारित होते हैं।
  • एक उत्तरदायी वेबसाइट डिजाइन करते समय, डेवलपर्स सभी डिवाइस पर साइट की सामग्री, डिज़ाइन और प्रदर्शन पर विचार करते हैं प्रयोज्यता सुनिश्चित करें ।

आरेख एक सटीक उपमा है कि सामग्री पर्यावरण और उपकरण के व्यवहार के लिए कैसे अनुकूल है।

उदाहरण के लिए कैसे सामग्री डिवाइस के लिए adapts

ध्यान दें : आरडब्ल्यूडी के अलावा एक और दृष्टिकोण है जिसे कहा जाता है अनुकूली वेब डिज़ाइन ( AWD ) । AWD दृष्टिकोण में, प्रत्येक डिवाइस के लिए एक विशिष्ट डिजाइन होगा। हालांकि, AWD हर समय उपयुक्त नहीं हो सकता है। इसके अलावा, आरडब्ल्यूडी साइटों को डिजाइन करने में आरडब्ल्यूडी साइटों की तुलना में अधिक समय और पैसा लगता है।

उत्तरदायी डिजाइन के लाभ:

# 1) प्रयोगकर्ता का अनुभव: जिस डिवाइस से हम एक आरडब्ल्यू तक पहुंचते हैं, उसके आधार पर, यह असामान्य तत्वों को छुपाता है और उपयोगकर्ताओं को तेजी से अपने लक्ष्यों को प्राप्त करने में मदद करता है।उदाहरण के लिए:अगर हम मोबाइल से एक आरडब्ल्यू खोलते हैं तो यह महत्वहीन तत्वों को छुपाता है और वेब पेजों को लोड करने में तेजी लाता है।

#दो) साझा करना या लिंक करना: RW के लिए विभिन्न उपकरणों के लिए केवल एक URL का उपयोग किया जाता है। जैसा कि केवल एक URL विभिन्न उपकरणों से सभी डेटा और जानकारी जमा कर रहा है, यह उपयोगकर्ताओं के लिए बेहतर UX देता है।

# 3) आरडब्ल्यू के लिए आवश्यक कम या न्यूनतम रखरखाव।

# 4) आरडब्ल्यू लेआउट तरल पदार्थ हैं।

उत्तरदायी वेब डिजाइन और अनुकूली वेब डिजाइन के बीच अंतर:

RWD और AWD एक दूसरे के साथ निकटता से संबंधित हैं।

  • RWD परिवर्तनों के लिए जल्दी और सकारात्मक रूप से प्रतिक्रिया करता है जबकि AWD को एक नए उद्देश्य के लिए आसानी से संशोधित किया जा सकता है।
  • RWD में कई द्रव ग्रिड लेआउट हैं और AWD में कई निश्चित चौड़ाई के लेआउट हैं।
  • RWD में छवियों को संदर्भ-जागरूक कहा जाता है।

उत्तरदायी वेबसाइट डिजाइन के मुख्य घटक:

उत्तरदायी वेब डिज़ाइन के तीन मुख्य घटक हैं:

# 1) लचीले लेआउट: एक लचीली ग्रिड के साथ एक वेबसाइट का निर्माण करना, जिसे गतिशील रूप से किसी भी चौड़ाई में आसानी से आकार दिया जा सकता है।

#दो) मीडिया के प्रश्नों: संदर्भ के आधार पर ब्राउज़रों और उपकरणों के लिए विभिन्न शैलियों को प्रदान करें, जैसे डिवाइस, व्यूपोर्ट, आदि का उन्मुखीकरण।

# 3)लचीला माध्यम: जैसे-जैसे व्यूपोर्ट का आकार बदलता है, मीडिया (चित्र, वीडियो आदि) को भी आवश्यकता के अनुसार अपना आकार या रिज़ॉल्यूशन बदलना पड़ता है।

ध्यान दें : 'व्यूपोर्ट' ब्राउज़र का वह क्षेत्र है जहाँ वेबसाइट की वास्तविक सामग्री प्रदर्शित होती है। व्यूपोर्ट में टूलबार, टैब आदि शामिल नहीं हैं।

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

उदाहरण 1)

लिंक खोलें www.fpl.com विभिन्न उपकरणों से और URL का निरीक्षण करें। एक उत्तरदायी वेबसाइट का URL सभी उपकरणों के लिए समान रहता है।

सेवा मेरे) डेस्कटॉप या लैपटॉप से ​​RW का दृश्य (बड़े स्क्रीन का आकार)

rwd-fpl-laptop

बी) टैबलेट (मध्यम स्क्रीन आकार) से आरडब्ल्यू का दृश्य

rwd-fpl-tablet

सी) मोबाइल से RW का दृश्य (छोटे स्क्रीन का आकार)

rwd-fpl-mobile

उदाहरण # 2)

साइट खोलें www.yepme.com लैपटॉप से ​​और मोबाइल से भी और यूआरएल से तुलना करें। इस yepme.com लिंक एक उत्तरदायी लिंक नहीं है।

सेवा मेरे) एक डेस्कटॉप या लैपटॉप से ​​एक गैर-उत्तरदायी वेबसाइट का दृश्य

गैर-आरडब्ल्यूडी-लैपटॉप

कैसे कलम एक वेबसाइट का परीक्षण करने के लिए

बी) एक मोबाइल से एक गैर-उत्तरदायी वेबसाइट देखें

गैर-आरडब्ल्यूडी-मोबाइल

कैसे एक उत्तरदायी वेबसाइट का परीक्षण करने के लिए

उत्तरदायी डिजाइन परीक्षण का मतलब है वेबसाइट का परीक्षण या विभिन्न उपकरणों से URL। व्यावहारिक रूप से, उत्तरदायी वेबसाइट का पूरी तरह से परीक्षण करना संभव नहीं है क्योंकि ऐसा करने के लिए हमें विभिन्न स्क्रीन आकारों के लिए विभिन्न सिस्टम स्थापित करने की आवश्यकता है।

उत्तरदायी परीक्षण के लिए एक संभावित तरीका ब्राउज़र विंडो का आकार परीक्षण परिदृश्य के अनुसार आकार है।

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

क्रोम जैसे अन्य ब्राउज़र सॉफ्टवेयर या प्रोग्राम प्रदान करते हैं 'एमुलेटर' जो परीक्षण के लिए आवश्यक वांछित उपकरण के अनुसार स्क्रीन सुविधाओं और वातावरण को बदलने में मदद करेगा।

ध्यान दें: 'एमुलेटर' वह सॉफ़्टवेयर या प्रोग्राम है जो ब्राउज़र के भीतर प्रदान किया जाता है जो होस्ट सिस्टम (वर्तमान ब्राउज़र) को अतिथि सिस्टम की तरह व्यवहार करता है (वांछित डिवाइस का ब्राउज़र जिसे स्क्रीन आकार के लिए परीक्षण किया जाना है)।

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

उत्तरदायी वेबसाइट परीक्षण के लिए नमूना परीक्षण परिदृश्य:

उत्तरदायी वेब डिज़ाइन परीक्षक को यह सुनिश्चित करना चाहिए कि उत्तरदायी डिज़ाइन नीचे दिए गए सभी को संतुष्ट कर रहा है परिक्षण परिदृश्य यह सुनिश्चित करने के लिए कि यह बग रहित उत्तरदायी डिज़ाइन है।

# 1) उत्तरदायी वेबसाइट लिंक या URL स्क्रीन रिज़ॉल्यूशन की परवाह किए बिना प्रत्येक डिवाइस के सभी ब्राउज़रों के लिए समान होना चाहिए।

मान लीजिए www.abc.com एक उत्तरदायी वेबसाइट है। यदि हम इसे लैपटॉप और मोबाइल फोन पर खोलते हैं, तो URL दोनों डिवाइसों पर समान होना चाहिए। मोबाइल ब्राउज़र में खोली गई वेबसाइट से शुरू नहीं होना चाहिए www.m.abc.com या www.mobile.abc.com

उदाहरण: वेबसाइट खोलें www.kotak.com एक लैपटॉप से ​​और एक ही मोबाइल से भी खोलें और दोनों डिवाइस में URL देखें। URL दोनों डिवाइस के लिए समान नहीं है।

नीचे स्नैपशॉट दिखाता है कि URL किस तरह से बदलता है विभिन्न उपकरणों में गैर-उत्तरदायी वेबसाइट जैसे कि लैपटॉप और मोबाइल।

विभिन्न उपकरणों में गैर-उत्तरदायी वेबसाइट

वेबसाइट खोलें www.w3schools.com लैपटॉप से ​​और मोबाइल से और यूआरएल की जाँच करें। यह दोनों उपकरणों के लिए समान होना चाहिए।

नीचे स्नैपशॉट दिखाता है कि URL विभिन्न उपकरणों में उत्तरदायी वेबसाइट के लिए समान है:

आरडब्ल्यूडी के लिए टेस्ट परिदृश्य 2

#दो) एक उत्तरदायी वेबसाइट की सामग्री (चित्र, उप-लिंक, मेनू, आदि) का प्रदर्शन स्थान स्क्रीन रिज़ॉल्यूशन में परिवर्तन के अनुसार गतिशील रूप से बदलना चाहिए। यही है, अगर हम लैपटॉप के आकार से स्क्रीन रिज़ॉल्यूशन को मोबाइल में बदलते हैं तो मेनू विकल्पों का प्रदर्शन गतिशील रूप से बदलना चाहिए।

उदाहरण: लिंक खोलें www.fpl.com लैपटॉप से ​​और विंडो के दाहिने शीर्ष कोने पर स्थित मेनू पर क्लिक करें। मेनू विकल्प नीचे दिखाए गए अनुसार दिखाए गए हैं:

अनुभवी के लिए sql सर्वर साक्षात्कार प्रश्न

RWD मेनू परीक्षण 1

खुला हुआ www.fpl.com मोबाइल से और विंडो के दाहिने शीर्ष कोने पर स्थित मेनू पर क्लिक करें। मेनू विकल्प नीचे दिए गए हैं:

RWD मेनू परीक्षण मोबाइल

ध्यान दें: इस परिदृश्य को ब्राउज़र एमुलेटर का उपयोग करके भी परीक्षण किया जा सकता है (पूर्व:क्रोम)।

वेबसाइट खोलें www.fpl.com एक डेस्कटॉप के माध्यम से और निरीक्षण करें कि मेनू विकल्प कैसे दिखाए जाते हैं। नीचे स्नैपशॉट देखें:

उत्तरदायी डिजाइन का परीक्षण करने के लिए क्रोम एमुलेटर

अब ब्राउजर विंडो को मोबाइल स्क्रीन साइज के आकार का आकार दें और फिर मेनू विकल्पों के प्रदर्शन की जांच करें। नीचे स्नैपशॉट देखें:

उत्तरदायी डिजाइन-आकार का परीक्षण करने के लिए क्रोम एमुलेटर

# 3) उत्तरदायी वेबसाइट के URL भी रिज़ॉल्यूशन विशिष्ट होने चाहिए।

इस परिदृश्य का परीक्षण करने के लिए पूर्व-आवश्यकता: डेवलपर से किसी भी उप-लिंक को उत्तरदायी परीक्षण वेबसाइट में डालने के लिए कहें जहां उप-लिंक उत्तरदायी नहीं है।

उदाहरण के लिए, डेवलपर लिंक डाल सकते हैं www.snapdeal.com हमारे परीक्षण वेबसाइट के लिए।

अब, एक मोबाइल से उत्तरदायी परीक्षण वेबसाइट खोलें और पूर्व-अपेक्षित में उप-लिंक पर क्लिक करें। फिर उप-लिंक का URL बदलना चाहिए https://m.snapdeal.com ।

# 4) इसी परिदृश्य को लैपटॉप से ​​भी परखा जा सकता है। डेस्कटॉप या लैपटॉप से ​​आरडब्ल्यू खोलें और उप-लिंक (टेस्ट परिदृश्य तीन के पूर्व-अपेक्षित में उल्लिखित) पर क्लिक करें जो कि उत्तरदायी नहीं है। उप लिंक का URL नहीं बदलना चाहिए (जैसा कि हम लैपटॉप से ​​इस परिदृश्य का परीक्षण कर रहे हैं URL को समान रहना चाहिए)।

# 5) इस परिदृश्य का परीक्षण करने के लिए पूर्व-आवश्यकता: किसी भी उप-लिंक को सम्मिलित करने के लिए डेवलपर से पूछें,उदाहरण के लिए, www.paytm.com परीक्षण स्थल में। जिस मोबाइल उपकरण में आप इस परिदृश्य को निष्पादित करने जा रहे हैं, उसमें मोबाइल में पेटीएम का संबंधित अनुप्रयोग होना चाहिए।

अब एक मोबाइल से हमारी परीक्षण उत्तरदायी वेबसाइट खोलें और 'पेटीएम' उप-लिंक पर क्लिक करें। फिर मोबाइल में जो पेटीएम एप्लिकेशन इंस्टॉल किया गया है, उसे खोला जाना चाहिए। (उपयोगकर्ता को ब्राउज़र या किसी अन्य विंडो में वेबसाइट पर पुनर्निर्देशित नहीं किया जाना चाहिए; केवल ऐप खुला होना चाहिए।)

# 6) उत्तरदायी वेबसाइट में चित्र विशिष्ट संकल्प हैं। इसका मतलब है कि मोबाइल संगतता के लिए डिज़ाइन की गई उत्तरदायी वेबसाइट के कोड में डाली गई छवि का रिज़ॉल्यूशन डेस्कटॉप या टैबलेट से अलग है। प्रत्येक स्क्रीन आकार की डिजाइन में अपनी विशिष्ट छवि होनी चाहिए।

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

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

(या

डेस्कटॉप से ​​परीक्षण आरडब्ल्यू खोलें और वेब पेज पर छवि की जांच करें। अब विंडो को टैबलेट के आकार का आकार दें और छवि की जांच करें। यह डेस्कटॉप स्क्रीन आकार के लिए दिखाई गई छवि से अलग होना चाहिए। अब आप विंडो को मोबाइल स्क्रीन आकार में बदल सकते हैं और छवि की जांच कर सकते हैं। यह छवि भी उपरोक्त दो छवियों से अलग होनी चाहिए।

उदाहरण: उत्तरदायी साइट खोलें www.fpl.com एक डेस्कटॉप से; पर छवि पर राइट क्लिक करें होम पेज -> 'निरीक्षण' का चयन करें मेनू से। कोड से छवि रिज़ॉल्यूशन (छवि फ़ाइल नाम एक्सटेंशन .jpg की जाँच करें) की जाँच करें। नीचे स्क्रीनशॉट देखें:

उत्तरदायी जाले डिजाइन लैपटॉप के लिए छवि परीक्षण

अब टैबलेट विंडो के आकार के समान विंडो को आकार दें और छवि रिज़ॉल्यूशन की जांच करें। (छवि नाम विस्तार मध्यम है। जेपीजी)

उत्तरदायी जाले डिजाइन गोली के लिए छवि परीक्षण

अंत में, विंडो का आकार मोबाइल स्क्रीन के आकार से आकार बदलें और छवि की जांच करें। (छवि नाम एक्सटेंशन छोटा है। जेपीजी)

उत्तरदायी जाले डिजाइन मोबाइल के लिए छवि परीक्षण

# 7) वेब पेज पर कहीं भी बेतरतीब ढंग से क्लिक करें और जांचें कि क्या कोई डेटा या टेक्स्ट जो हाइपरलिंक नहीं है, किसी अन्य पेज या सामग्री पर आरंभ और पुनर्निर्देशित हो जाता है। यह परीक्षण करता है कि कोई शब्द या पाठ हाइपरलिंक के रूप में चिह्नित है या नहीं वापस अंत ।

ध्यान दें : कुछ परियोजनाओं में, पिक्सेल विशेष रूप से उपकरणों के लिए स्क्रीन के पिक्सेल आकार और रिज़ॉल्यूशन के बारे में बात करते हैं। ()उदाहरण के लिए, उनके आरडब्ल्यू के लिए एक टैबलेट दृश्य 15:15 पिक्सेल और एक मोबाइल के लिए होना चाहिए, यह 10:10 आदि पर होना चाहिए)

जब हम पिक्सेल आकार बदलते हैं तो RW डिस्प्ले के लिए होने वाले गतिशील परिवर्तनों का परीक्षण मुख्य परिदृश्य है।

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

एक उत्तरदायी वेबसाइट का परीक्षण करने के लिए उपकरण

कुछ उपकरण (वेबसाइट) हैं जो आपको हमारी उत्तरदायी वेबसाइट के वेब पृष्ठों का पूर्वावलोकन करने देंगे।

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

कुछ उपकरण उत्तरदायी स्क्रीनशॉट को कैप्चर करने की एक महत्वपूर्ण विशेषता भी प्रदान करते हैं जो हमें उत्तरदायी वेबसाइट के वेबसाइट डिज़ाइन, HTML, लेआउट, CSS आदि का परीक्षण करने में मदद कर सकते हैं।

जब वास्तविक उपकरण उपलब्ध नहीं होते हैं या तैयार नहीं होते हैं तो ये उपकरण बड़े विकल्प होते हैं।

यहाँ एक त्वरित उपकरण सूची है:

# 1) उत्तरदायी डिजाइन चेकर

उत्तरदायी डिजाइन चेकर

उस उत्तरदायी वेबसाइट का URL दर्ज करें जिसे ऊपर 'यहाँ अपना URL दर्ज करें' फ़ील्ड में परीक्षण करने की आवश्यकता है और 'GO' पर क्लिक करें। आप उस डिवाइस और रिज़ॉल्यूशन का भी चयन कर सकते हैं जिस पर आप उत्तरदायी साइट देखना चाहते हैं।

अब एंटर करें www.fpl.com फ़ील्ड में, 'Nexus 7 PORTRAIT' लेआउट का चयन करें और GO पर क्लिक करें। साइट चयनित प्रारूप के संकल्प में प्रदर्शित होती है।

उपकरण 1-2

#दो) पटकथा

स्क्रीनप्ले RWD परीक्षण उपकरण 2

परीक्षण स्थल दर्ज करें www.fpl.com और GO पर क्लिक करें।

पटकथा २

लेआउट को डेस्कटॉप, टैबलेट, मोबाइल आदि में बदलें और साइट का परीक्षण करें। इस उपकरण के साथ, आप संकल्प को अनुकूलित भी कर सकते हैं।

उदाहरण के लिए, स्क्रीन रिज़ॉल्यूशन को 512 x 256 पर सेट करें और साइट का परीक्षण करें।

पटकथा ३

ध्यान दें : इस उपकरण के साथ, आप परीक्षण भी कर सकते हैं परिदृश्य 6 आसानी से प्रस्तावों को बदलने और छवि के नामकरण की पुष्टि करके।

# 3) Designmodo

Designmodo 1

कोई भी URL दर्ज करें, www.makemytrip.com और Enter पर क्लिक करें।

Designmodo 2

ब्राउज़र के दाईं ओर, आपके पास वेबसाइट के लेआउट को किसी भी विशिष्ट मोबाइल मॉडल या डिवाइस आदि में बदलने का विकल्प है।

ध्यान दें : इस टूल में एक और विशेषता है जैसे स्क्रीन को खींचना और रिज़ॉल्यूशन को हमारे इच्छित रिज़ॉल्यूशन में बदलना।

# 4) गैर जिम्मेदार है

isResponsive 1

परीक्षण URL दर्ज करें, www.fpl.com फ़ील्ड में और 'टेस्ट' बटन पर क्लिक करें।

isResponsive 2

ध्यान दें: इस उपकरण में केवल कुछ निश्चित लेआउट विकल्प हैं, जिस पर हमारी साइट का परीक्षण किया जा सकता है।

# 5) मटकोले

यदि आप एक बार में कई स्क्रीन साइज़ पर अपने आरडब्ल्यू का दृश्य देखना चाहते हैं तो यह टूल मटकोले आपको क्या चाहिए

मटकोले १

अब एड्रेस बार में अपना टेस्टिंग यूआरएल डालें और एंटर पर क्लिक करें। आप एक समय में कई स्क्रीन आकारों पर आरडब्ल्यू देख सकते हैं।

मटकोले २

# 6) डिफ़ॉल्ट रूप से, क्रोम में कुछ देव उपकरण हैं जिसके माध्यम से हम डिवाइस मोड और उनकी क्षमताओं का अनुकरण कर सकते हैं।

क्रोम की इस सुविधा का उपयोग करने के लिए, किसी भी परीक्षण उत्तरदायी डिज़ाइन वेबसाइट को खोलें www.fpl.com क्रोम में और वेबपेज पर राइट-क्लिक करें और मेनू से 'निरीक्षण' विकल्प चुनें या Ctrl + Shift + I दबाएं। नीचे की विंडो वेब पेज के निचले भाग में खुलती है।

क्रोम देव उपकरण 1

अब निचे स्क्रीनशॉट में दिखाए अनुसार आइकॉन पर क्लिक करें।

क्रोम देव उपकरण 2

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

क्रोम देव उपकरण 3

ध्यान दें: हम वेब पेज को पोर्ट्रेट या लैंडस्केप व्यू में भी बदल सकते हैं।

क्रोम देव उपकरण 4

उत्तरदायी डिजाइन का परीक्षण करने के लिए अन्य अच्छे उपकरण:

7) उत्तरदायी आकार
8) BrowserStack
9) ट्रॉय
10) AmiresponsiveDesign
ग्यारह) उत्तर देनेवाला
12) स्टडीओप्रेस
13) उत्तरदायी
14) मैक मशीनों के लिए हमारे पास एक अलग एप्लिकेशन है जिसे 'कहा जाता है' फिट 'एक आरडब्ल्यू का परीक्षण करने के लिए। यह एप्लिकेशन आपको परीक्षण के लिए विभिन्न उपकरणों पर विभिन्न ब्रेकप्वाइंट सेट करने की अनुमति देता है। APTUS एक मुफ्त एप्लिकेशन नहीं है और हमें इसे मैक ऐप स्टोर से खरीदना होगा।

परीक्षण उत्तरदायी डिजाइन और संभावित समाधान की चुनौतियां

डायनेमिक टेस्ट रणनीति

320 × 480 (आईफोन 4 का रिज़ॉल्यूशन) से 2048 × 2048 (एक बड़ा मॉनिटर) से बढ़ते हुए 4 मिलियन से अधिक संभावित ब्राउज़र आकार छोड़ देता है। अधिकांश परीक्षण समूह एक मुट्ठी भर परीक्षण उपकरणों की सूची को कम कर देंगे। फिर भी, मैन्युअल परीक्षण की समस्या का सामना करना कठिन या असंभव है।

डेवलपर्स संभवतः प्लेटफ़ॉर्म की सभी समस्याओं का अनुमान नहीं लगा सकते हैं, और रिलीज़ होने से पहले परीक्षक उन्हें पकड़ नहीं सकते हैं। इस वजह से, हम उत्पादन में सामयिक उपयोगकर्ता इंटरफ़ेस समस्या पाते हैं।

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

आइए एक नज़र डालते हैंयथार्थवादी उदाहरणसमस्या का वर्णन करने के लिए।

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

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

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

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

कठिन परिस्थितियों से कैसे निपटा जाए

वैकल्पिक रूप से, आप लेआउट और सामग्री में भिन्न होने वाले वेब पृष्ठों पर परीक्षणों को स्वचालित करने में मदद करने के लिए दृश्य परीक्षण तकनीक का उपयोग कर सकते हैं। इस टूलिंग का उपयोग करके, आप अपने परीक्षण वातावरण में कोई बदलाव किए बिना, और अपने परीक्षण समूह के बाहर के लोगों से किसी भी कौशल सेट की आवश्यकता के बिना परीक्षण बना सकते हैं।

आइए एक उदाहरण देखें।

ट्विटर मोबाइल ऐप पर विचार करें।

यह उत्पाद उपयोगकर्ता सामग्री और विज्ञापन को लगातार बदलते रहने का संयोजन है। हेडर में न्यूज इंटरफेस और नोटिफिकेशन जैसे यूजर इंटरफेस के कुछ मुख्य भाग भी हैं।

एक दृश्य परीक्षण उपकरण का उपयोग करके, आप केवल देखने योग्य क्षेत्र ही नहीं, पूरे स्क्रॉल करने योग्य पृष्ठ की स्क्रीन कैप्चर करके शुरू कर सकते हैं। आप एक तुलना विकल्प चुन सकते हैं जो पाठ सामग्री की उपेक्षा करता है लेकिन ऑन-पेज तत्वों पर केंद्रित है।

उदाहरण के लिए, आप देख सकते हैं कि ट्वीट्स के लिए फ़ील्ड मौजूद हैं, प्रत्येक ट्वीट में एक नाम तत्व और एक दिनांक / समय तत्व है, जो तत्वों में है के बारे में चिंता किए बिना।

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

उत्तरदायी डिजाइन के लिए उत्तरदायी परीक्षण:

उत्तरदायी डिजाइन ने हर उपलब्ध प्लेटफ़ॉर्म पर कॉम्बिनेटरियल समस्या को जोड़ा है। प्रश्न है; इन सभी संभावित प्लेटफार्मों और स्क्रीन आकारों में से, जो हम सर्वश्रेष्ठ परीक्षण कवरेज के लिए चुनते हैं।

हम केवल सबसे लोकप्रिय लोगों को कवर करने वाले वातावरण की संख्या को कम करते हुए कवरेज की समस्या की अनदेखी करते हुए तकनीकी कार्य को आसान बनाते हैं।

अकेले स्वचालन ढांचे के साथ वातावरण की संख्या में वृद्धि करना एक रखरखाव दुःस्वप्न बनाता है और संभावित रूप से एक परीक्षण योग्य परीक्षण समस्या को जोड़ता है।

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

लक्ष्य एक उचित रखरखाव बोझ के साथ अच्छा यूजर इंटरफेस कवरेज है। दृश्य परीक्षण आपका एकमात्र मजबूत और मापनीय विकल्प है।

उत्तरदायी वेब परीक्षण के लिए युक्तियाँ

# 1) आरडब्ल्यू का परीक्षण करते समय आपको डिज़ाइन की स्थिरता का ध्यान रखना चाहिए जैसे कि सभी ब्राउज़रों और ऑपरेटिंग सिस्टमों में छवियों, ग्रंथों, किनारों के चारों ओर पैडिंग आदि।

#दो) एक आरडब्ल्यू के परीक्षण के दौरान, परीक्षक को पता होना चाहिए कि अलग-अलग ब्रेकपॉइंट पर कई उपकरणों पर क्या परीक्षण करना है और कैसे परीक्षण करना है। अन्यथा, यह काफी संपूर्ण और भटकावपूर्ण हो सकता है।

# 3) उत्तरदायी वेबसाइट के पूरी तरह से परीक्षण के लिए, परीक्षक और डेवलपर समन्वय आवश्यक है। डेवलपर को परीक्षण मामलों के पूर्वापेक्षाओं में उल्लिखित शर्तों को बनाने के साथ परीक्षकों की मदद करनी चाहिए।

# 4) जांचें कि क्या वेब पेज सभी प्रस्तावों पर पढ़ने योग्य हैं, अर्थात यदि हम ब्राउज़र को मोबाइल स्क्रीन आकार में बदलते हैं, तो भी सामग्री को पठनीय होना चाहिए।

# 5) आरडब्ल्यू की महत्वपूर्ण सामग्री सभी ब्रेकप्वाइंट के लिए दिखाई देनी चाहिए, अर्थात् यदि हम डेस्कटॉप स्क्रीन से ब्राउज़र का आकार मोबाइल स्क्रीन पर बदलते हैं तो मुख्य चित्र, मुख्य पाठ, मेनू, आदि समान रहना चाहिए।

# 6) यदि परीक्षण के लिए ब्राउज़र का आकार बदला गया है, तो आरडब्ल्यू के किसी भी क्लिक क्षेत्र (जैसे बटन, मेनू, उप-लिंक, आदि) पर क्लिक करने के लिए उपयुक्त होना चाहिए।

# 7) ब्राउज़र का आकार बदलना और उत्तरदायी वेबसाइट का परीक्षण करना केवल कुछ प्रमुख मुद्दों की पहचान कर सकता है जबकि मोबाइल उपकरणों पर उंगली-स्वाइप, टैपिंग आदि से संबंधित कुछ अन्य मुद्दे हो सकते हैं। वास्तविक उपकरणों पर इन विशेष विशेषताओं का परीक्षण बेहतर दोष खोजने और हटाने के लिए नेतृत्व कर सकता है।

निष्कर्ष

जब हम उत्तरदायी डिजाइन का परीक्षण कर रहे हैं तो कई चुनौतियां होंगी। चुनौतियों को दूर करने के लिए आपको एक कुशल तरीके से सोचना चाहिए।

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

आरडब्ल्यूडी का कार्यान्वयन और गहन परीक्षण आपकी साइट को उम्मीदों पर खरा उतरने का एक बेहतरीन तरीका है।

हमें उम्मीद है कि इस लेख में चर्चा की गई जानकारी, सुझाव और परीक्षण परिदृश्य निश्चित रूप से आपकी उत्तरदायी वेबसाइट परीक्षण आवश्यकताओं की सहायता करेंगे।

लेखक के बारे में: यह लक्ष्मी की एक अतिथि पोस्ट है। उसके पास 7+ साल का सॉफ्टवेयर परीक्षण का अनुभव है और वर्तमान में एक वरिष्ठ सॉफ्टवेयर परीक्षण इंजीनियर के रूप में काम कर रहा है।

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

अनुशंसित पाठ

^