एक सरल, रेस्पॉन्सिव, मोबाइल फर्स्ट नेविगेशन

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

हम एक सरल, रेस्पॉन्सिव वेब साइट नेविगेशन का निर्माण करने जा रहे हैं। हमारा समाधान हमारे पृष्ठ की content पर जोर देने में हमारी मदद करेगा, मोबाइल के लिए डिजाइन करते समय यकीनन शीर्ष प्राथमिकता। इसमें कोई भी JavaScript शामिल नहीं होगा, और हम इसे मोबाइल फ़ेस्ट ऐप से निपटेंगे।

मोबाइल नेविगेशन

अगर आपने ल्यूक राबोलेव्स्की के Mobile First को पढ़ लिया है तो आप उसके बयान से परिचित होंगे कि:

सामान्य नियम के रूप में, मोबाइल पर नेविगेशन पर कंटेंट प्राथमिकता देती है।

इसका अर्थ यह है कि मोबाइल उपयोगकर्ता अक्सर तत्काल उत्तर की तलाश कर रहे हैं; वे चाहते हैं कि कंटेंट वे खोजे, न कि अधिक नेविगेशन विकल्प।

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

London & Partners से यह उदाहरण लें:

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

तो समाधान क्या हैं?

हमने गोल करने के कुछ तरीके देखे हैं, अक्सर हमारे लिए चीजों को सॉर्ट करने के लिए jQuery पर झुकाव। Chris Coyier's explanation की Five Simple Steps रेस्पॉन्सिव ड्रॉपडाउन मेनू लें।

JQuery का उपयोग करते हुए मेनू का डुप्लिकेट एक <select> ड्रॉपडाउन के रूप में बनाया गया है, शुरू में CSS का उपयोग करके देखने से छिपा हुआ है। जब मीडिया क्वेरीज़ एक छोटी स्क्रीन का पता लगाते हैं, तो वे ड्रॉपडाउन दिखाई देते हैं और मूल नेविगेशन अदृश्य हैं। यह मोबाइल उपकरणों के लिए एकदम सही है क्योंकि ड्रॉपडाउन न्यूनतम अचल संपत्ति को लेते हैं और डिवाइस के विशेष UI (जैसे आईफोन के स्क्रोलर) का उपयोग करते हैं।

वैकल्पिक रूप से, आप अपना नेविगेशन छिपा सकते हैं, लेकिन जब एक 'menu' बटन क्लिक किया जाता है तो उसे देखने में संक्रमण होता है। आप इस इफ़ेक्ट को Twitter के lastest Bootstrap के साथ देख सकते हैं।

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

शुद्ध CSS समाधान

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

इसका मतलब यह है कि हमारे डिजाइन को मोबाइल डिवाइस के साथ देखा जाने पर केवल कम से कम CSS और संसाधन भारित होंगे। इसका भी अर्थ है कि IE के पुराने संस्करण (जो मीडिया के प्रश्नों को नहीं पहचानते हैं) को मोबाइल साइट के साथ पेश किया जाएगा। इस पर अधिक जानकारी के लिए जानी कोर्पी की पुरानी इंटरनेट एक्सप्लोरर को छोड़कर देखें।

1. मार्कअप

मैं इस समाधान के पीछे के विचारों को समझाता हूं जैसे कि हम साथ जाते हैं, इसलिए समय के लिए हम कुछ मार्कअप को एक साथ फेंक दें, एक ब्लानको HTML5 डॉक्यूमेंट के साथ शुरू करें।

<html lang="en">
<head>

  <meta charset="utf-8">
	<title>Mobile First Responsive Navigation</title>
	<meta name="description" content="CSS only mobile first navigation">
	<meta name="author" content="Ian Yates">

	<!--Mobile specific meta goodness :)-->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!--css-->
	<link rel="stylesheet" href="styles.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons-->
	<link rel="shortcut icon" href="img/favicon.ico">

</head>
<body id="home">

	
</body>
</html>

Note: व्यूपोर्ट मेटा टैग को मत भूलें!

ऐसा करने के बाद, हम कुछ पेज संरचना जोड़ देंगे। हमारे प्रदर्शन के प्रयोजनों के लिए सीधे-आगे सामान और सभी। मैंने Monty Python's की होली ग्रेल (धन्यवाद Chris Valleskey) से फिलर टेक्स्ट का उपयोग किया है जो कि आप काम कर रहे हैं, जबकि आपके चेहरे पर मुस्कुराहट करने का एक अच्छा तरीका है :)

<body id="home">

	<div class="wrapper">
	
		<header>
		
			<h1 class="logo"><a href="">Nav</a></h1>
		
		</header>
		
		<article>
		
			<h2>Blue. No, yel&hellip;</h2> 
			
			<p>Shut up! Will you shut up?! But you are dressed as one&hellip; Camelot! You don't vote for kings.</p> 
		
		</article>
		
		<article>
			
			<h2>We want a shrubbery!!</h2> 
			
			<p>Look, my liege! Shut up! But you are dressed as one&hellip;</p> 
			
			<ul> 
				<li>The nose?</li> 
				<li>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!</li> 
				<li>Look, my liege!</li> 
			</ul> 
		
		</article>
		
		<article>
			
			<h2>Help, help, I'm being repressed!</h2> 
			
			<p>Why? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Be quiet! A newt?</p> 
		
		</article>
		
		<footer>
		
			<p>Copyright &copy;2012 Ian Yates <a href="http://webdesign.tutsplus.com">Webdesigntuts+</a></p>
		
		</footer>
	
	</div><!--end wrapper-->
	
</body>

2. नेविगेशन मार्कअप

हमने एक मूल HTML पृष्ठ को एक साथ खींच लिया है, इसलिए अब यह मुख्य आकर्षण का समय है; हमारी प्राथमिक नेविगेशन ..

		
<nav id="primary_nav">
		
	<ul>
	
		<li><a href="">Portfolio</a></li>
	
		<li><a href="">About Me</a></li>
	
		<li><a href="">Nonsense</a></li>
	
		<li><a href="">Services</a></li>
	
		<li><a href="">Contact</a></li>
	
		<li><a href="#home">Top</a></li>
	
	</ul>

</nav><!--end primary_nav-->

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

		
<header>
		
	<h1 class="logo"><a href="">Nav</a></h1>
	
	<a class="to_nav" href="#primary_nav">Menu</a>

</header>

3. CSS रीसेट

आप सामान्य रूप से वेब प्रोजेक्ट कैसे शुरू करते हैं इस पर निर्भर करते हुए, यह चरण आपके सामान्य वर्कफ़्लो से भिन्न होता है। मैंने हमेशा एरिक मेयर के रीसेट को काम करने का ठोस आधार पाया है, खासकर जब वह he's tweaked it recently। हम अपने रीसेट नियमों को हमारी css बंद करने के लिए स्टाइलशीट में जोड़ देंगे:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

4. बेसिक स्टाइल्स

फिलहाल हमारा पेज बहुत निराधार दिख रहा है ..

..तो चलो कुछ सरल स्टाइल जोड़कर चीजों को बेहतर बनाएं।

/*begin our styles*/

body {
	font: 16px/1.4em 'PT Sans', sans-serif;;
	color: #1c1c1c;
}

p,
ul {
	margin: 0 0 1.5em;
}

ul {
	list-style: disc;
	padding: 0 0 0 20px;
}

a {
	color: #1D745A;
}

h1 {

}

h2 {
	font-family: 'PT Serif', serif;
	font-size: 32px;
	line-height: 1.4em;
	margin: 0 0 .4em;
	font-weight: bold;
}

/*layout*/

.wrapper {
}

article {
	border-bottom: 1px solid #d8d8d8;
	padding: 10px 20px 0 20px;
	margin: 10px 0;
}

/*header*/

header {
	background: #1c1c1c;
	padding: 15px 20px;
}

		/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
		header:before,
		header:after {
		    content:"";
		    display:table;
		}
		
		header:after {
		    clear:both;
		}
		
		/* For IE 6/7 (trigger hasLayout) */
		header {
		    zoom:1;
		}

h1.logo a {
	color: #d8d8d8;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 22px;
	float: left;
	letter-spacing: 0.2em;
}

a.to_nav {
	float: right;
	color: #fff;
	background: #4e4e4e;
	text-decoration: none;
	padding: 0 10px;
	font-size: 12px;
	font-weight: bold;
	line-height: 22px;
	height: 22px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

a.to_nav:hover,
a.to_nav:focus {
	color: #1c1c1c;
	background: #ccc;
}

यह सब बुनियादी सामान (फ़ॉन्ट्स, लाइन-हाइट्स, रंग इत्यादि) है, जो अब तक महत्वपूर्ण है कि मैंने 'menu' बटन को स्टाइल कर दिया है जो कि <header> के भीतर दाएं फ़्लोट करता है, जहां आप अक्सर नेविगेशन मिलने की अपेक्षा रखते थे।

यदि आप इसके ऊपर घुमाते हैं तो आप हॉवर स्टेट देखेंगे - निश्चित रूप से टच स्क्रीन उपकरणों के लिए आवश्यक नहीं है, लेकिन यह अनुभव असुरक्षित इंटरनेट एक्सप्लोरर संस्करणों को भी वितरित किया जाएगा। हमने मोबाइल उपयोगकर्ताओं के लाभ के लिए परिभाषित किया है :focus स्टेट। यह उसी के समान है :hover स्टेट, लेकिन टच स्क्रीन उपकरणों के लिए महत्वपूर्ण प्रतिक्रिया प्रदान करेगा। हमारे उपयोगकर्ताओं को पता चल जाएगा कि वे मेनू बटन को छूने में सफल रहे हैं।

वैसे भी, इसे क्लिक करें और आपको नेविगेशन पर ले जाया जाएगा, सुपर।

अब चलो मेनू को थोड़ा सा स्टाइल दें।

5. नेविगेशन स्टाइल्स

हम वास्तव में हमारे प्राथमिक नेविगेशन को London & Partners की तरह दिखते हैं, जैसा कि पहले दिखाया गया था, इस समय के अलावा यह स्पष्ट रूप से पृष्ठ के निचले भाग में है ..

/*navigation*/	

#primary_nav ul {
	list-style: none;
	background: #1c1c1c;
	padding: 5px 0;
}

#primary_nav li a {
	display: block;
	padding: 0 20px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	letter-spacing: 0.1em;
	line-height: 2em;
	height: 2em;
	border-bottom: 1px solid #383838;
}

#primary_nav li:last-child a {
	border-bottom: none;
}

#primary_nav li a:hover,
#primary_nav li a:focus {
	color: #1c1c1c;
	background: #ccc;
}

/*footer*/

footer {
	font-family: 'PT Serif', serif;
	font-style: italic;
	text-align: center;
	font-size: 14px;
}

काफी बेहतर। हमने मेनू लिंक को अच्छा और बड़ा बना दिया है (ल्यूक राबोलेव्स्की के अपने ब्लॉग पर टच टारगेट सिज़ेस के बारे में अधिक पढ़ें) और एक बार फिर से निर्धारित किया गया: उपयोगकर्ता प्रतिक्रिया के लिए :focus स्थिति।

यह भी स्पष्ट हो गया है कि हमने एक 'top' लिंक शामिल किया है जो उपयोगकर्ताओं को यदि आवश्यक हो तो पृष्ठ के शीर्ष पर ले जाएगा।

6. बड़ा हो रहा है

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

लेकिन किस बात पर यह अनुचित हो जाता है? media queries से संपर्क करने के कई तरीके हैं, लेकिन हम इस आधार पर काम करने जा रहे हैं कि मोबाइल व्यूपोर्ट 320px x 480px है। यह 320px चौड़ा है जब पोर्ट्रेट में देखा जाता है, 480px चौड़ा जब परिदृश्य में देखा जाता है, इसलिए हम 480px से अधिक किसी भी स्क्रीन को स्कैन करने के लिए हमारी पहली मीडिया क्वेरीज को उचित रूप से सेट कर सकते हैं।

हालांकि, अगले कदम को यकीनन टैबलेट के तौर पर दिया गया है। आईपैड में 980 px x 768px का संकल्प है, इसलिए हम सुरक्षित रूप से यह मान सकते हैं कि 768 px की तुलना में छोटे हमारे मोबाइल लेआउट के लिए उपयुक्त है। 768px से बड़ा कोई भी अधिक डेस्कटॉप-जैसे नेविगेशन लेआउट को संभाल सकता है।

इसलिए हम नियम जोड़ना शुरू कर सकते हैं, तो चलो एक मीडिया क्वेरी सेट करें:

/*media queries*/

@media only screen and (min-width: 768px) {

}

व्यूपोर्ट कम से कम 768px चौड़ा होने पर यह मीडिया क्वेरी उसमें स्थित सभी स्टाइल्स को चलाएगा। only keyword शामिल करने के लिए ध्यान दें, जो सुनिश्चित करता है कि इंटरनेट एक्सप्लोरर 8 को सभी भ्रमित न हो और क्वेरी को संसाधित करने का प्रयास करें। विवरण के लिए मेरी पहले व्याख्या देखें।

चलो हमारे 'menu' बटन गायब होकर बातें करे:

		
@media only screen and (min-width: 768px) {

	a.to_nav {
		display: none;
	}

}

ब्राउज़र ने थोड़ा अधिक व्यापक बना दिया है, मेनू बटन अब प्रदर्शित नहीं होगा।

7. नेविगेशन स्थानांतरण

अब हमें पृष्ठ के ऊपर अपने प्राथमिक नेविगेशन लाने की आवश्यकता है। हम उस डॉक्यूमेंट प्रवाह से इसे निकालकर, शीर्ष पर स्थित स्थिति में बिल्कुल ऐसा करेंगे।

 
@media only screen and (min-width: 768px) {

	a.to_nav {
		display: none;
	}
	
	.wrapper {
		position: relative;
		width: 768px;
		margin: auto;
	}
	
	#primary_nav {
		position: absolute;
		top: 5px;
		right: 10px;
		background: none;
	}
	
	#primary_nav li {
		display: inline;
	}
	
	#primary_nav li a {
		float: left;
		border: none;
		padding: 0 10px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}

}

इसके लिए संभव है कि हमें सबसे पहले अपने पैरेंट (.wrapper) को अपेक्षाकृत स्थानित करना होगा। हम या तो मीडिया क्वेरी में ऐसा कर सकते हैं या यह निर्धारित कर सकते हैं कि हमारे स्टाइलशीट की शुरुआत में।

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

8. एक अंतिम चीज

यदि आप ध्यान दे रहे हैं तो आपको पता चल जाएगा कि नेविगेशन में अभी भी एक 'top' लिंक है - हमें वास्तव में किसी और की जरूरत नहीं है?

हम इसे कई तरीकों से निकाल सकते हैं, लेकिन हम यह सुनिश्चित कर रहे हैं कि हम पहले सूची में एक वर्ग को जोड़ते हैं:

				
<li class="top"><a href="#home">Top</a></li>

और फिर हम इसे अपने मीडिया क्वेरी से छुटकारा पा सकते हैं:

			
#primary_nav li.top {
	display: none;
}

निष्कर्ष

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

आगे के संसाधन

ट्यूटोरियल में उल्लिखित कुछ उपयोगी लिंक्स, सभी को एक आसान सूची में रखा गया है:

Luke Wroblewski's Mobile First
Chris Coyier's jQuery-based responsive dropdown menu
Five Simple Steps
Twitter Bootstrap
Joni Korpi's Leaving Old Internet Explorer Behind
Don't Forget the Viewport Meta Tag!
Chris Valleskey's Monty Python (amongst other things) filler text
Eric Meyer's reset revisited
Luke Wroblewski's Touch Target Sizes
My explanation of the media query 'only' keyword
Brad Frost's responsive navigation patterns
Aaron Gustafson's Build a smart mobile navigation without hacks on .net Magazine

प्रीमियम विकल्प

आपकी परियोजनाओं में तत्काल उपयोग के लिए Envato बाजार पर उपलब्ध mobile first design templates के बहुत सारे हैं।

उदाहरण के लिए, पहले Bootstrap 3 पर आधारित एक फ्लैट UI के साथ मोबाइल पहले वेब ऐप / एडमिन डैशबोर्ड थीम है। यह हल्का है, लेकिन आपकी आवश्यकताओं के अनुकूल कई घटकों के साथ। यह पूरी तरह से रेस्पॉन्सिव भी है, और विगेट्स और घटकों को पहले मोबाइल हैं।

first - Mobile First Web App Theme — पहले - मोबाइल प्रथम वेब ऐप थीम