रेस्पॉन्सिव नेविगेशन के लिए एक लचीला दृष्टिकोण

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

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

क्या नेविगेशन फिट होता है?

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

इन सभी कारकों पर विचार करने के बजाय, हम अंत के नतीजे पर गौर करेंगे: क्या सभी नेविगेशन आइटम्स एक स्वच्छ पंक्ति में फिट होती हैं, या कुछ को अगली पंक्ति में धकेल दिया जाता है? यदि यह उत्तरार्द्ध है, तो कितने आइटम फिट हैं? इस जानकारी के साथ सशस्त्र, हम नौकरी के लिए सही नेविगेशन चुन सकते हैं।

चरण 1: ब्रेकपॉइंट चुनना

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

मीडिया क्वेरी का उपयोग करके आप ब्रेकपॉइंट बना सकते हैं, जैसे:

1

@media only screen and (max-width: 480px) {

2

  /* This CSS will be applied only to phones and other small devices. */

3

}

तो, हम ब्रेकपॉइंट चुनने के बारे में कैसे जाते हैं? एक तरीका कुछ चौड़ाई चुनना है जो सामान्य डिवाइस आकारों के साथ मेल खाता है।

Twitter बूटस्ट्रैप के पास several breakpoints हैं, जिनमें "स्मार्टफ़ोन" ब्रेकपॉइंट शामिल है, जो कि 480px से अधिक विस्तृत दृश्यों पर ट्रिगर होता है। इसमें 768px और 979px के बीच ट्रिगर होने वाले "पोर्ट्रेट टैबलेट" ब्रेकपॉइंट भी हैं।

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

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

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

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

चरण 2: मार्कअप लेखन

आइए एक साधारण पृष्ठ का निर्माण शुरू करें। हम एक "लेख" क्षेत्र का निर्माण करेंगे जिसमें कुछ सामग्री और एक नेवबार शामिल हैं I लेख के बगल में, हम एक तरफ स्थान रखेंगे।

1

<article>

2

	<nav>

3

		<ul class="navbar" id="mainNavbar">

4

			<li><a href="/">Home</a></li>

5

			<li><a href="/products.html">Products</a></li>

6

			<!-- More nav items... -->

7

			<li><a href="/contact.html">Contact</a></li>

8

		</ul>

9

	</nav>

10

	<p>Here is our content.</p>

11

</article>

12

<aside>

13

	<p>Here is a side note about our content.</p>

14

</aside>

प्रदर्शन के लिए इस सूची में दस या अधिक नेविगेशन आइटम शामिल करें।

चरण 3: बेसिक स्टाइलिंग

सबसे पहले, हमारी सूची को एक नेविगेशन बार देखने के लिए स्टाइल दें

1

.navbar {

2

	background-color: #055;

3

	margin: 0;

4

	padding: 0;

5

	width: 100%;

6

	line-height: 1;

7

	overflow: hidden;

8

}

9

10

.navbar li, .navbar a {

11

	display: inline-block;	

12

}

13

14

.navbar li {

15

	list-style-type: none;

16

}

17

18

.navbar > li {

19

	margin-left: .25em;

20

}

21

22

.navbar > li:first-child {

23

	margin-left: 0;

24

}

25

26

.navbar a {

27

	padding: .25em;

28

	text-decoration: none;

29

	height: 1em;

30

	font-weight: bold;	

31

	color: #fff;

32

}

33

34

.navbar a:hover {

35

	background-color: #088;

36

}

हम भी हमारे लेख को थोड़ा सा खड़ा कर देंगे, और एक साइडबार के रूप में अलग-अलग प्रदर्शन करेंगे। हम अपने डिजाइन तरल पदार्थ को बनाने के लिए हमारी चौड़ाई के लिए प्रतिशत मानों का उपयोग कर रहे हैं।

1

body {

2

	font-family: sans-serif;

3

	font-size: 16px;

4

	background-color: #fff;

5

}

6

7

article {

8

	background-color: #eee;

9

	padding: 2.5%;

10

	margin-right: 1%;

11

	width: 64%;

12

	float:left;

13

}

14

15

aside {

16

	background-color: #ccc;

17

	padding: 2.5%;

18

	width: 25%;

19

	float: left;

20

}

हमारा अंतिम परिणाम इस तरह दिखना चाहिए:

चरण 4: एक ब्रेकपॉइंट जोड़ें

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

1

@media only screen and (max-width: 550px) {

2

	aside, article {

3

		width: 95%;

4

		float: none;

5

	}

6

7

	article {

8

		margin-right: 0;

9

		margin-bottom: 1em;

10

	}

11

}

विंडो की चौड़ाई के साथ खेलने के लिए स्वतंत्र महसूस करें और देखें कि क्या होता है। आमतौर पर, जैसा कि विंडो छोटी हो जाती है, वहाँ कम से कम नेविगेशन के लिए जगह होती है। जब आप विंडो को 550 पिक्स करने के लिए सिकुड़ते हैं, हालांकि, आप नेविगेशन के लिए वास्तव में कुछ स्थान प्राप्त करते हैं क्योंकि अगली पंक्ति में एक तरफ बूँदें है।

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

चरण 5: नेवबार पर एक निश्चित ऊंचाई निर्धारित करें

कई मामलों में, हमारी नेवबार सामग्री एक साफ लाइन पर फिट नहीं होती है। चलो यह ठीक करें!

यदि उपयोगकर्ता के पास JavaScript है, तो हम उन चीजों को छिपाएंगे जो फिट नहीं होंगे। हम बाद में उन्हें एक ड्रॉपडाउन मेनू में दिखाएंगे I अगर उपयोगकर्ता के पास JavaScript नहीं है, तो हम सिर्फ जरूरत के मुताबिक, नेवबार की ऊँचाई बढ़ाएंगे। यह सुंदर नहीं है, लेकिन यह कम से कम कार्यात्मक हैI

ऐसा करने के लिए, हम एक Modernizr के कस्टम बिल्ड को शामिल करेंगे, जो JavaScript लाइब्रेरी है जो हमें ब्राउजर में सुविधा का समर्थन करने की सुविधा देता है। JavaScript समर्थन और टच इवेंट समर्थन के लिए हमारी कस्टम बिल्ड टेस्टI

इसके बाद, हम अपने टैग को "no-js" वर्ग जोड़ देंगे। यदि उपयोगकर्ता के पास JavaScript है, तो Mozernizr उस class को "js" में बदल देगा। यदि उपयोगकर्ता के पास JavaScript नहीं है, तो क्लास रीमियन "no-js" होगाI

1

<html class="no-js">

2

<script src="modernizr.custom.js"></script>

नोट: प्रदर्शन के कारणों के लिए, पृष्ठ के शीर्ष पर लिपियों को डालने से बचने के लिए आमतौर पर सबसे अच्छा होता हैI हालांकि ब्राउज़र स्क्रिप्ट डाउनलोड करने में व्यस्त है, यह अन्य फ़ाइलों को डाउनलोड करना बंद कर देगा और पृष्ठ को रेंडर करेगा। इस मामले में, वास्तव में हम क्या चाहते हैं: हम नहीं चाहते कि ब्राउजर किसी भी चीज को प्रदर्शित करे जब तक कि हमारे .js क्लास की जगह नहीं हो। इस दृष्टिकोण से जुड़े एक छोटे से प्रदर्शन हिट है, जो हमने Modernizr की कस्टम बिल्ड का उपयोग करके कुछ हद तक कम किया है। यदि आपको "no-js" वर्ग की आवश्यकता है और मॉडर्नविज़र की अन्य विशेषताओं का उपयोग करने की योजना नहीं बना रही है, तो आप इस पेज को एक हल्की आश्चर्य का उपयोग करके भी हल्का बना सकते हैं।

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

1

.js .navbar {

2

	height: 1.5em;

3

 	overflow: hidden;

4

}

चरण 6: FlexMenu जोड़ें

इसके बाद, flexMenu, एक jQuery प्लगइन डाउनलोड करें जो हमें यह जांचने देता है कि क्या सभी आइटम नेवबार में फिट हैं या उचित प्रकार के मेनू प्रदर्शित करते हैं। हमें भी jQuery की आवश्यकता होगी इन स्क्रिप्ट को पृष्ठ के निचले भाग में रखें, ताकि वे लोड होने पर प्रदर्शित होने वाले पेज को ब्लॉक न करें।

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

2

<script src="flexmenu.min.js"></script>

हमें फ्लेक्स मेन्यू को हमारे मेनू पर देखने और ज़रूरत के अनुसार इसका साइज बदलने की आवश्यकता है:

1

<script type="text/javascript">

2

	$('#mainNavbar').flexMenu();

3

</script>

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

अब हमारे पास ऐसा व्यवहार है जिसे हम चाहते हैं, लेकिन ड्रॉपडाउन मेनू बहुत भयानक दिखता है। यह ठीक है - हम अगले चरण में इसे ठीक कर देंगे।

चरण 7: स्टाइल फ्लेक्स मेमेनू

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

CSS arrows के साथ, लोड करने के लिए कोई इमेज नहीं है, और तीर उच्च-रिज़ॉल्यूशन डिस्प्ले पर तेज रहती हैं। यह दृष्टिकोण सभी आधुनिक ब्राउज़रों के साथ-साथ IE8 में भी काम करता है। यदि आपको IE7 या इससे पहले का समर्थन करने की आवश्यकता है, तो एक इमेज-आधारित फ़ॉलबैक शामिल करना सुनिश्चित करें।

1

.flexMenu-popup {

2

	padding: 0;

3

	background-color: #088;

4

	margin: 0;

5

}

6

7

.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {

8

	background-color: #5599AA;

9

}

10

11

.flexMenu-viewMore > a:after {

12

	display: inline-block;

13

	content:"";

14

	border-left:0.3em solid transparent;

15

	border-right:0.3em solid transparent;

16

	border-top:0.4em solid white;

17

	margin-left:0.4em;	

18

	position: relative;

19

	top: -.1em;

20

}

21

22

.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {

23

	background-color: #088;	

24

}

25

26

.flexMenu-popup > li > a, .flexMenu-popup > li {

27

	display: block;

28

}

29

30

.flexMenu-popup > li > a:hover {

31

	background-color: #3aa;

32

}

चरण 8: टचस्क्रीन के लिए समायोजित करें

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

Modernizr, जो हमने पहले जोड़ा था, प्रत्येक फीचर के लिए एक CSS वर्ग प्रदान करता है जो इसे जांचता है। टचस्क्रीन वाले उपकरणों पर, यह क्लास "टच" जोड़ देगा। टचस्क्रीन के बिना डिवाइस पर, यह क्लास "नो-टच" जोड़ देगा।

1

.touch .navbar {

2

	font-size: 1.25em;

3

}

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

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

चरण 9: क्रॉस-ब्राउज़र फँकिनेस्स फिक्स करें

यदि आप IE7 में अब तक डेमो खींच रहे हैं, तो आप शायद दो समस्याएं देखेंगे:

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

पहली समस्या प्रतिशत के IE7 के प्रबंधन की वजह से है यदि यह एक मान की गणना करता है जो एक पिक्सेल के अंश को घेरता है, तो यह हमेशा फ़ैल जाता है। दूसरी समस्या शायद इसी तरह की समस्या के कारण होती है।

इस समस्या को हल करने के लिए, हम IE7 में हमारे पृष्ठ के लिए एक निश्चित चौड़ाई निर्धारित कर सकते हैं। ऐसा करने के लिए, पहले हमारे पृष्ठ के शीर्ष पर "IE8 से कम" वर्ग जोड़ें।

1

<!--[if lt IE 8]>    <html lang="en-us" class="no-js lt-ie8"> <![endif]-->

2

<!--[if gte IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

अगला, आइए कुछ CSS जोड़ दें जो IE7 में लेख के लिए एक विशिष्ट पिक्सेल चौड़ाई और एक तरफ सेट करता है। इन क्षेत्रों की कुल चौड़ाई, पैडिंग, मार्जिन और गोलाई के लिए भत्ता, 901 पिक्सल के बाहर आता है।

1

.lt-ie8 .flexMenu-popup {

2

	margin-top: -1px

3

}

4

5

.lt-ie8 article {

6

	width: 600px;

7

}

8

9

.lt-ie8 aside {

10

	width: 200px;

11

}

12

13

.lt-ie8 body {

14

	width: 901px;

15

}

आप यह भी देख सकते हैं कि iOS पर, ज़ूम स्तर बदलता है जब आप डिवाइस को इमेज से लैंडस्केप तक घुमाते हैं। इस समस्या को ठीक करने के लिए, बस इस JavaScript-based फिक्स को पकड़ो और पृष्ठ के निचले भाग में इसका संदर्भ दें। यह समस्या जाहिर iOS 6 में fixed की गई है।

आगे की पढाई

ब्रैड फ्रॉस्ट के लेख रेस्पॉन्सिव नेविगेशन पैटर्न और रेस्पॉन्सिव डिजाइन के लिए कॉम्प्लेक्स नेविगेशन पैटर्न रेस्पॉन्सिव साइटों पर नेविगेशन के लिए कई तरह के तरीकों को शामिल करते हैं।

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

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