Navigasi yang Mobile First, Responsif, dan Sederhana

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Kita akan membangun navigasi situs web yang sederhana dan responsif. Solusi kami akan membantu kita menekankan konten halaman kita, bisa dibilang prioritas utama saat merancang untuk mobile. Tidak akan ada keterlibatan JavaScript, dan kita akan menyelesaikannya dari pendekatan Mobile First

Navigasi Mobile

Jika Anda sudah membaca Luke Wroblewski terkait Mobile First, Anda akan terbiasa dengan pernyataannya:

Sebagai aturan umum, konten lebih diutamakan daripada navigasi di seluler.

Yang dia maksud dengan hal ini adalah bahwa pengguna ponsel sering mencari jawaban langsung; Mereka menginginkan konten yang mereka cari, bukan lagi pilihan navigasi.

Banyak situs, bahkan yang responsif, berpegang pada konvensi bahwa navigasi berada di bagian atas halaman tertentu. Pendekatan ini dapat menyebabkan masalah kegunaan pada perangkat mobile karena pengguna ponsel seringkali kekurangan dua hal: ruang layar dan waktu. Jika navigasi utama diletakkan di bagian atas halaman, ada kemungkinan besar akan mengaburkan seluruh layar ponsel. Masalah ini diperburuk lebih lanjut oleh tautan menu berukuran besar, yang memaksa pengguna untuk menggulir melampaui navigasi untuk mendapatkan konten yang di inginkan.

Kita ambil contoh ini dari London & Partners:

Desain responsif yang sangat baik, namun pada dimensi viewport seluler standar (320px x 480px) yang benar-benar Anda lihat adalah menu navigasi. Tentunya, setelah baru saja tiba di beranda, saya ingin melihat sesuatu selain itu? Bukan hanya London & Partners yang mendemonstrasikan ini - ini adalah praktik yang terlihat pada banyak desain responsif di seluruh web.

Jadi Apa Solusinya?

Kami telah melihat beberapa cara untuk menyelesaikan ini, kerap kali bersandar pada jQuery untuk menyelesaikan masalah ini. Ambil penjelasan Chris Coyier dari Five Simple Steps tentang menu dropdown responsif.

Menggunakan jQuery, duplikat menu dibuat dalam bentuk dropdown <select>, yang awalnya tersembunyi dari pandangan menggunakan CSS. Saat media query mendeteksi layar yang lebih kecil, mereka membuat dropdown terlihat dan navigasi asli tidak terlihat. Ini sangat cocok untuk perangkat seluler karena dropdown menghabiskan sedikit ruang dan memanfaatkan UI khusus pada perangkat (seperti scroller iPhone).

Atau, Anda mungkin menyembunyikan navigasi Anda, namun akan beralih ke tampilan menu terbuka saat tombol 'menu' diklik. Anda bisa melihat efek ini beraksi dengan Bootstrap terbaru dari Twitter.

Layar yang lebih kecil menyembunyikan link navigasi dan menampilkan ikon 'daftar' (dengan cepat diterima sebagai makna 'menu') yang mengungkapkan navigasi saat diklik. Sekali lagi, pengunjung seluler disajikan dengan konten sebanyak mungkin, namun memiliki pilihan navigasi yang tersedia jika mereka menginginkannya.

Solusi Murni CSS

Kita akan menggunakan teknik yang dibahas oleh Luke, yang menggunakan pendekatan CSS dan Mobile First. Apa yang kita maksud dengan pendekatan Mobile First? Sederhananya, kita akan merancang tata letak yang straight-forward mobile, kemudian semakin meningkatkan desain untuk layar yang lebih besar. Kita akan menggunakan media query yang mendeteksi ukuran layar yang terus meningkat, menambahkan gaya dan fitur saat kondisi tertentu.

Ini berarti hanya memakan CSS secara minimum dan sumber daya yang akan dimuat saat desain kita dilihat dengan perangkat seluler. Ini juga berarti bahwa versi IE yang lebih tua (yang tidak mengenali media query) akan disajikan dengan situs seluler. Silahkan lihat artikel Meninggalkan Internet Explorer Lama Dibelakang oleh Joni Korpi untuk informasi mengenai ini.

1. Markup

Saya akan menjelaskan ide-ide di balik solusi ini nanti, jadi untuk saat ini mari saling melempar beberapa markup, memulai dengan dokumen awal 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>

Catatan: Jangan Lupakan Meta Tag Viewport!

Setelah melakukan itu, kita akan menambahkan beberapa struktur halaman. Tambahan langsung dan semuanya hanya untuk tujuan demonstrasi kita. Saya telah menggunakan teks pengisi dari Monty Python's Holy Grail (terima kasih Chris Valleskey) yang merupakan cara yang bagus untuk memberi senyum di wajah Anda saat Anda bekerja :)

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

Kita telah mengumpulkan halaman html dasar, jadi sekarang saatnya untuk daya tarik utama; Navigasi utama kita.

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

Ya, Anda telah melihatnya dengan benar, kita telah menambahkannya di baris 68, setelah artikel terakhir. Jangan lupa bahwa kita sedang merancang untuk mobile sekarang, kita akan mengurus desktop nanti. Kita telah menempatkan navigasi di bagian bawah halaman kita, sehingga ini benar-benar menyimpang. Kita sekarang akan menempatkan link di bagian atas halaman kita sehingga pengguna dapat menemukan navigasi jika mereka mau.

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

</header>

3. Reset CSS

Bergantung pada bagaimana Anda biasanya memulai proyek web, langkah ini berbeda dengan alur kerja Anda yang biasa. Saya selalu mendapati penyetelan Eric Meyer menjadi dasar yang kuat untuk dikerjakan, terutama saat dia men-tweaknya baru-baru ini. Kita akan menambahkan aturan reset ke stylesheet untuk menendang css kita:

/* 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. Gaya Dasar

Pada saat ini halaman kita terlihat sangat membosankan..

..jadi mari kita memperbaikinya dengan menambahkan beberapa gaya sederhana.

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

Ini semua adalah hal dasar (font, tinggi garis, warna, dll.), Yang penting sejauh ini adalah saya telah menata tombol 'menu' untuk melayang di kanan, di bagian dalam <header>, di mana Anda sering mengharapkan navigasi Bisa ditemukan

Jika Anda mengarahkan kursor ke atasnya, Anda akan melihat status hover - tidak diperlukan untuk perangkat layar sentuh memang, namun pengalaman ini juga akan dikirimkan ke versi Internet Explorer yang tidak kooperatif. Apa yang telah kita definisikan untuk kepentingan pengguna ponsel adalah keadaan :focus. Ini sama dengan keadaan :hover, namun akan menawarkan umpan balik penting untuk perangkat layar sentuh. Pengguna kita akan tahu bahwa mereka telah berhasil menyentuh tombol menu.

Bagaimanapun, klik dan Anda akan dibawa ke navigasi, super.

Sekarang mari kita beri sedikit gaya pada menu.

5. Gaya Navigasi

Kita benar-benar akan memilih navigasi utama kita seperti contoh London & Partners yang ditunjukkan sebelumnya, kecuali saat ini jelas di bagian bawah halaman..

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

Jauh lebih baik. Kita telah membuat tautan menu yang bagus dan besar (baca lebih lanjut tentang Ukuran Sasaran Sentuhan pada blog Luke Wroblewski) dan sekali lagi menentukan status :focus untuk umpan balik pengguna.

Ini juga menjadi jelas bahwa kita menyertakan tautan 'top' yang akan membawa pengguna kembali ke bagian atas halaman jika diperlukan.

6. Menjadi Lebih Besar

Oke, kita telah menangani tata letak seluler sederhana kita, jadi sekarang saatnya untuk beberapa peningkatan progresif. Kita akan menggunakan media query untuk menentukan kapan tata letak seluler kita tidak sesuai lagi.

Tapi pada titik manakah itu menjadi tidak sesuai? Ada banyak cara untuk mendekati permintaan media, tapi kita akan bekerja dari basis bahwa area pandang seluler berukuran 320 piksel x 480 piksel. Luasnya 320px jika dilihat dalam bentuk potrait, lebar 480px jika dilihat dalam bentuk landscape, jadi kita dapat dengan tepat menetapkan media query pertama kita untuk mendeteksi layar yang lebih besar dari 480px.

Namun, langkah selanjutnya bisa dibilang tablet. IPad memiliki resolusi 980px x 768px, jadi kita bisa berasumsi bahwa sesuatu yang lebih kecil dari 768px sesuai untuk tata letak ponsel kita. Apa pun yang lebih besar dari 768px dapat menangani tata letak navigasi desktop lainnya.

Oleh karena itu, kita dapat mulai menambahkan aturan, jadi mari menyiapkan media query:

/*media queries*/

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

}

Permintaan media ini akan menjalankan semua gaya yang ada di dalamnya saat viewport minimal selebar 768px. Perhatikan masuknya satu-satunya kata kunci, yang menjamin Internet Explorer 8 tidak bingung seluruhnya dan mencoba memproses query. Lihat penjelasan saya sebelumnya untuk rinciannya.

Ayo lepaskan semuanya dengan membuat tombol 'menu' kita hilang:

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

	a.to_nav {
		display: none;
	}

}

Dengan peramban yang dibuat sedikit lebih lebar, tombol menu tidak lagi ditampilkan.

7. Pergeseran Navigasi

Sekarang kita perlu membawa navigasi utama kita ke bagian atas halaman. Kita akan melakukannya dengan menghapusnya dari arus dokumen, memposisikannya benar-benar di atas.

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

}

Agar hal itu menjadi mungkin kita terlebih dahulu harus membuat induknya (.wrapper) diposisikan relatif. Kita bisa melakukannya di sini dalam media query, atau menentukannya di awal stylesheet kita.

Begitu menu diposisikan secara mutlak, kita perlu menghapus beberapa gaya jangkar (anchor). Tidak banyak yang bisa dilakukan, tapi kita memerlukan daftar item untuk ditampilkan secara garis besar, dan kita perlu menghapus batas dan bantalan berlapis dari jangkar. Status hover yang kita didiktekan sebelumnya tentu saja baik, jadi kita tidak perlu mengubahnya.

8. Satu Hal Terakhir

Jika Anda telah memperhatikan, Anda akan menyadari bahwa kita masih memiliki tautan 'top' di navigasi - kita tidak benar-benar membutuhkannya lagi?

Kita bisa menghapus ini dengan beberapa cara, tapi apabila kita yakin akan apa yang terjadi mari kita tambahkan.

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

Dan kemudian kita bisa menyingkirkannya dalam media query kita:

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

Kesimpuan

Itu dia! Ada banyak cara untuk membangun gagasan ini (menerapkan daftar ikon hanya satu) dan, tentu saja, Anda dapat terus menambahkan media query untuk memenuhi layar yang berkembang. Mudah-mudahan Anda sekarang memiliki fondasi untuk melakukannya. Kita telah membuat navigasi yang sederhana, responsif, dan ramah sentuhan, dari pendekatan mobile first sambil memberi penekanan pada konten dan kegunaan. Siapa yang ingin bertanya lebih lanjut?!

Sumber Daya Lebih Lanjut

Beberapa link berguna yang disebutkan dalam tutorial, semuanya disusun menjadi satu daftar praktis:

Mobile First oleh Luke Wroblewski
Menu dropdown responsif berbasis jQuery oleh Chris Coyier
Five Simple Steps
Twitter Bootstrap
Meninggalkan Internet Explorer Lama Dibelakang oleh Joni Korpi
Jangan Lupakan Meta Tag Viewport!
Chris Valleskey's Monty Python (antara lain) teks pengisi
reset tinjau ulang oleh Eric Meyer
Ukuran Target Sentuhan oleh Luke Wroblewski
Penjelasan saya tentang media query kata kunci 'only'
Pola navigasi responsif oleh Brad Frost
Membangun navigasi mobile cerdas tanpa hack oleh Aaron Gustafson di .net Magazine

Opsi Premium

Ada banyak template desain mobile first yang tersedia di Envato Market untuk segera digunakan dalam proyek Anda.

Misalnya, first adalah dashboard mobile web app / admin dashboard theme dengan flat UI berdasarkan Bootstrap 3. Ini ringan tapi dengan banyak komponen sesuai dengan kebutuhan anda. Ini juga sepenuhnya responsif, dan widget dan komponennya mobile first.

first - Mobile First Web App Theme — first - Tema Mobile First Web App