Ang Simple, Responsive na Mobile First Navigation

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Gagawa tayo ng simple, responsive na web site navigation. Ang ating solusyon ay makakatulong para mabigyan ng diin ang content ng iyong pahina, na maaaring pangunahing prayoridad sa pagdidisenyo para sa mobile. Walang JavaScript na kasama, at tatalakayin natin ito mula sa Mobile First na paraan.

Pag Navigate ng Mobile

Kung nabasa mo ang Luke Wroblewski’s Mobile First magiging pamilyar ka sa sinabi niya na:

Bilang pangkahalahatang panuntunan, ang content ay mas importante kaysa sa pag navigate sa mobile.

Ang ibig niyang sabihin dito ay ang mobile users ay madalas naghahanap ng mabilis na sagot; gusto nila yung content ng hinahanap nila, hindi ang iba pang pagpipilian sa navigation.

Maraming sites, mga responsive, ay naniniwala sa dati ng kaalaman na ang navigation ay dapat nasa itaas ng kahit na anong pahina. Ang paraan na ito ay maaaring maging sanhi ng problema sa gamit nito sa mobile devices dahil ang mobile users ay madalas kulang sa dalawang bagay: espasyo sa screen at time. Kapag ang pangunahing navigation ay nilagay sa itaas ng pahina, may magandang posibilidad na palabuin nito ang buong mobile screen. Ang isyung ito ay mas pinapalala ng malaking touch-friendly menu links, kung kaya napipilitan ang users na tumingin pa higit sa navigation para makakuha ng mahalagang content.

Tingnan ang halimbawang ito mula sa London & Partners:

Perpekto at desenteng responsive na disenyo, subalit sa normal na mobile viewport na sukat (320px x 480px) lahat ng makikita mo ay navigation menu. Sigurado, pagdating palang sa homepage, gusto kong makakita ng iba pa maliban diyan? Hindi lamang ang London & Partners ang nagpakita nito- ito ay nakasanayan na na makikita sa maraming responsive na disenyo sa lahat ng web.

Kung Kaya Ano Ang Mga Solusyon?

Nakita na natin ang ilang paraan para masimulang gawin ito, madalas nakadepende sa jQuery para ayusin ito para sa atin. Kumuha ng paliwanag kay Chris Coyier sa Five Simple Steps responsive dropdown menu.

Gamit ang jQuery, nangyayari ang pagkakapareho ng menu sa form ng a <select> dropdown, na sa una ay nakatago gamit ang CSS. Kapag ang media queries ay may nakitang maliit na screen, ipapakita nila ang dropdown at ang orihinal na navigation. Ito ay tamang-tama para sa mobile devices dahil ang dropdowns ay tumatanggap ng maliit lamang na real estate at ginagamit ang particular na UI ng device (katulad ng pang-scroll ng iPhone).

Bilang kahalili, maaari mong ring itago ang iyong navigation, subalit ilipat ito sa vien kapag pinindot ang ‘menu’ button. Makikita mo itong gumagana sa bagong Bootstrap ng Twitter.

Ang maliit na screen ay tinatago ang navigation links at ipinapakita ang ‘list’ icon (na mabilis na na tinatanggap na ibig sabihin ‘menu’) kung saan ipinapakita ang navigation kapag pinindot. Muli, ang mobile visitors ay hinahainanng hanggat maaari ng maraming content, subalit may pagpipilian sa navigation kungsakaling gusto nila ito.

Buong CSS Solution

Gagamit tayo ng pamamaraan na tinalakay ni Luke, kung saan gumagamit ng CSS at Mobile First na paraan. Anong ibig sabihin natin ng Mobile First na paraan? Simple lang, gagawa tayo ng disenyo ng straight-forward na mobile layout, pagkatapos ay unti-unting pagagandahin ang disenyo para sa malaking screens. Gagamit tayo ng media queries na nakikita ang tuluy-tuloy na paglaki ng sukat ng screen, na nakakadagdag sa istilo at features habang nagpapatuloy tayo.

Ibig sabihin taglay lang nito ang maliit na CSS at resources na ilo-load kapag ang ating disenyo ay tiningnan sa mobile device. Ibig sabihin din nito na ang lumang bersyon ng IE (kung saan hindi kinikilala ang media queries) ay ipapakita gamit ang mobile site. Tingnan ang Leaving Old Internet Explorer Behind ni Joni Korpi para sa karagdagang impormasyon tungkol dito.

1. Markup

Ipapaliwanag ko ang mga ideya sa likod ng solusyon na ito habang umuusad tayo, pero sa ngayon sama-sama nating isantabi ang ilang markup, bilang simula sa malinis na HTML5 na dokumento.

<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>

Paalala: Huwag Kalimutan Ang Viewport Meta Tag!

Pagkatapos magawa ito, magdadagdag tayo ng ilang balangkas sa pahina. Walang paliguy-ligoy na bagay at iba pa para sa layunin ng pagpapaliwanag. Gumamit ako ng filler text mula sa Monty Python's Holy Grail (salamat Chris Valleskey) na isang magandang paraan para mapasaya ka habang nagtatrabaho :)

<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. Navigation Markup

Gumawa kami ng pangunahing pahina ng html, ngayon ay oras na para sa pinakamahalagang paksa; ang pangunahing navigation.

1
2	<nav id="primary_nav">
3
4	<ul>
5
6	<li><a href="">Portfolio</a></li>
7
8	<li><a href="">About Me</a></li>
9
10	<li><a href="">Nonsense</a></li>
11
12	<li><a href="">Services</a></li>
13
14	<li><a href="">Contact</a></li>
15
16	<li><a href="#home">Top</a></li>
17
18	</ul>
19
20	</nav><!--end primary_nav-->

Oo, nakita mo ito ng tama, dinagdag natin ito sa linya ng 68, pagkatapos ng huling artikulo. Huwag kalimutan na nagdi-disenyo tayo ngayon para sa mobile, tatalakayin natin ang desktop mamaya. Inilagay natin ang navigation sa ibaba ng ating pahina para tapos na ito. Ilalagay na natin ngayon ang link sa itaas ng ating pahina para makita ng users ang navigation kung gusto nila.

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

</header>

3. CSS Reset

Depende sa kung paano mo karaniwang sinisimulan ang proyekto sa web, ang hakbang na ito ay maaaring iba sa iyong dating workflow. Palagi kong naiisip ang Eric Meyer's reset na matibay na basehan sa unang gagawin, lalo na at inayos niya ito kamakailan. Idadagdag natin ang panuntunan sa reset sa style sheet para masimulan natin ang 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. Pangunahing Istilo

Sa ngayon ang ating pahina ay mukhang walang buhay..

..kung kaya pagandahin natin ito sa pamamagitan ng paglagay ng ilang simpleng istilo.

/*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;
}

Ang mga ito ay pangunahing bagay (fonts, line-heights, kulay at iba pa.), ang mahalaga sa ngayon ay nilagyan ko ng istilo ang ‘menu’ button para lumutang sa kanan sa loob ng <header>, kung saan inaasahan mong doon makikita ang navigation.

Kapag iho-hover mo ito, makikita mo ang hover state- hindi naman siyempre ibig sabihin para sa touch screen devices, subalit ang karanasang ito ay ipapadala rin sa hindi nakikipagtulungan na bersyon ng Internet Explorer. Ang natukoy nating pakinabang ng mobile users ay :focus state Katulad din ito ng :hover state, subalit mag aalok ng mahalagang feedback sa touch-screen devices. Ang mga users ay malalaman na naging matagumpay sila sa pag galaw ng menu button.

Gayunpaman, pindutin ito at mapupunta ka sa navigation, sobra.

Ngayon lagyan natin ng kaunting istilo ang menu.

5. Istilo ng Navigation

Sa totoo lang lalagyan natin ng istilo ang pangunahing navigation katulad ng halimbawa ng London & Partners na ipinakita kanina, maliban lang sa ngayon ay malinaw na ito ay nasa ibaba ng pahina.

/*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;
}

Mas maganda. Ginawa nating maganda ang menu links at malaki ( basahin pa ng maigi ang tungkol sa Touch Target Sizes sa sariling blog ni Luke Wroblewski) at muli natukoy na :focus state para sa feedback ng user.

Naging malinaw din na isinama natin ang ‘top’ link kung saan dadalhin ang users pabalik sa itaas ng pahina kung kinakailangan.

6. Lumalaki

OK, nagawa na natin ang simpleng mobile layout, ngayon naman ang oras para sa ilang progressive enhancement. Gagamit tayo ng media queries para matukoy kung hindi na angkop ang ating mobile layout.

Subalit saang punto hindi na ito angkop? Maraming paraan para gawin ang media queries, subalit gagawin natin mula sa batayan na ang mobile viewport ay 320px x 480px. Ito ay may lawak na 320px kapag tiningnan sa portrait, may lawak na 480px kapag tiningnan sa landscape, kung kaya makatarungan nating maisi-set ang ating unang media query para makita ang anumang screen na mas malaki sa 480px.

Gayunpaman, ang susunod na hakbang ay maaaring ang tablet. Ang iPad ay may resolution na 980px x 768px, kung kaya maaari nating ipalagay na anumang mas maliit sa 768px ay hindi naaangkop sa ating mobile layout. Maaaring kaya ng ala-desktop na navigation layouts ang anumang mas malaki sa 768px.

Kung kaya maaari na nating simulang lagyan ng panuntunan, kaya mag set-up tayo ng media query:

/*media queries*/

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

}

Ang media query ay papaganahin lahat ng istilo na nakapaloob dito kapag ang viewport ay hindi bababa sa lawak ng 768px. Tandaan na kasama ang natatanging keyword, kung saan sinisigurado nito na ang Internet Explorer 8 ay hindi malilito at subukang gawin ang query. Tingnan ang nauna kong paliwanag para sa detalye.

Magsimula tayo sa pamamagitan ng pagtanggal ng ‘menu’ button:

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

	a.to_nav {
		display: none;
	}

}

Dahil sa browser na bahagyang malawak, ang menu button ay hindi na makikita.

7. Paglipat ng Navigation

Ngayon kailangan nating dalhin ang pangunahing navigation sa taas ng pahina. Gagawin natin ito sa pamamagitan ng pagtanggal nito mula sa document flow, at siguradong ilagay ito sa itaas.

 
@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;
	}

}

Para magawa ito gawin muna natin ang parent (.wrapper) na sadyang nakaposisyon. Maari natin itong gawin dito sa media query, o tukuyin ito sa simula ng ating stylesheet.

Kapag ang menu ay saktong naiposisyon, kailangan nating tanggalin ang ilang achor styling. Wala ng marami pang gagawin, subalit kailangan natin ang list items para ipakita ng inline, at kailangan nating tanggalin ang borders at sobrang padding mula sa anchors. Ang hover states na sinabi natin kanina ay ayos lang, kung kaya hindi nating kailangang baguhin iyon.

8. Isa Pang Panghuling Bagay

Kung tinandaan mo mapapansin mo na mayroon pa ring ‘top’ link sa navigation - hindi na natin ito kailangan?

Maaari nating tanggalin ito sa maraming paraan, subalit para sigurado tayo sa nangyayari maglagay tayo ng class sa list item:

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

At pagkatapos maaari na natin itong alisin sa media query:

1
2	#primary_nav li.top {
3	display: none;
4	}

Konklusyon

Ganoon lang! Maraming paraan para mabuo ang ideyang ito (ang pagpapatupad ng list icon ay isa lamang dito) at, siyempre, maaari mong ituloy ang paglagay ng media queries para matugunan ang lumalaking screens. Sana ay may pundasyon ka na para gawin ito. Nakagawa tayo ng simple, responsive, touch-friendly na navigation, mula sa mobile first na paraan habang binibigyang diin ang content at usability. Sino pa ang may hihingiin ng higit pa?!

Karagdagang Resources

Ang ibang kapaki-pakinabang na links na nabanggit sa pagtuturo, ay lahat nakalagay sa isang maayos na listahan:

Luke Wroblewski's Mobile First
Ang batay sa jQuery na responsive dropdown menu ni Chris Coyier
Five Simple Steps
Twitter Bootstrap
Joni Korpi's Leaving Old Internet Explorer Behind
Huwag Kalimutan Ang Viewport Meta Tag!
Ang Monty Python ni Chris Valleskey (bukod sa iba pang mga bagay) filler text
Ang reset revisited ni Eric Meyer
Ang Touch Target Sizes ni Luke Wroblewski
Ang aking paliwanag sa media query ‘only’ keyword
Ang responsive navigation patterns ni Brad Frost
Ang ginawa ni Aaron Gustafson na smart mobile navigation na walang hacks sa .net Magazine

Pagpipilian sa Premium

Maraming unang mobile design templates na makikita sa Envato Market para sa mabilis na gamit sa iyong proyekto.

Halimbawa, una ay ang mobile first web app/ admin dashboard theme na may flat UI batay sa Bootstrap 3. Hindi ito ganoon ka-importante subalit maraming components na angkop sa iyong kailangan. Ito ay sadyang responsive, at ang widgets at components ay mobile first.