Простая, отзывчивая навигация Mobile First

Russian (Pусский) translation by Alexander Sergeyevich (you can also view the original English article)

Мы собираемся создать простую, отзывчивую навигацию сайта. Наше решение поможет нам акцентировать внимание на содержании нашей страницы, что, возможно, является главным приоритетом при разработке для мобильных устройств. Здесь не будет задействован JavaScript, но мы рассмотрим его с помощью подхода Mobile First.

Мобильная навигация

Если вы читали Luke Wroblewski Mobile First, тогда вам знакомо его высказывание:

Как правило, контент имеет преимущество перед навигацией на мобильных устройствах.

Что он подразумевает под этим, так это то, что мобильные пользователи часто ищут немедленные ответы; им нужен контент, который они ищут, а не больше вариантов навигации.

Многие сайты, даже отзывчивые, придерживаются мнения, что навигация должна быть в верхней части любой страницы. Такой подход может вызвать проблемы с юзабилити на мобильных устройствах, поскольку их пользователям часто не хватает двух факторов: экранного пространства и времени. Если главная навигация размещена в верхней части страницы, есть хороший шанс, что она закроет весь мобильный экран. Эта проблема еще более усугубляется большими удобными для касания ссылками меню, заставляя пользователей прокручивать за дольше навигационного меню, пытаясь добраться до любого важного контента.

Рассмотрите этот пример из London & Partners:

Абсолютно приемлемый отзывчивый дизайн, но при стандартных размерах мобильного просмотра (320 x 480 пикселей) все, что вы действительно видите, - это меню навигации. Наверняка, только открыв главную страницу, я хотел бы увидеть что-то другое, нежели это. London & Partners не единственные, у кого есть эта проблема, подобная практика наблюдается во многих отзывчивых дизайнах по всему Интернету.

Итак, какие же есть решения?

Мы уже знаем о нескольких способах обойти это, например, опираясь на jQuery, которая помогает нам разобраться с этим. Возьмите объяснение раскрывающегося меню Chris Coyier Five Simple Steps ("Пять простых шагов").

С помощью jQuery дубликат меню создается в виде раскрывающегося списка <select>, изначально скрытого от просмотра с использованием CSS. Когда медиа-запросы обнаруживают меньший экран, они делают видимым выпадающее меню, а оригинальную навигацию невидимой. Это идеальное решение для мобильных устройств, поскольку выпадающие списки занимают минимальное пространство и используют специальный пользовательский интерфейс устройства (например, скроллер в iPhone).

Кроме того, вы можете скрыть свою навигацию, но переходить в режим просмотра при нажатии кнопки «меню». Вы можете увидеть этот эффект в действии в последнем Bootstrap Twitter.

Меньшие экраны скрывают навигационные ссылки и отображают иконку «список» (которая быстро стала восприниматься как «меню»), она показывает навигацию при нажатии. Опять же, мобильные посетителям представлен максимально возможный объем контента и при их желании им доступны опции навигации.

Чистое решение CSS

Мы будем использовать технику, которую обсуждал Luke, и которая предусматривает использование CSS и подход Mobile First. Какой смысл мы вкладываем в понятие "подход Mobile First"? Проще говоря, мы собираемся разработать прямой мобильный макет, а затем постепенно улучшать дизайн для больших экранов. Мы будем использовать медиа-запросы, которые обнаруживают постоянно увеличивающиеся размеры экрана, постепенно добавляя стиль и функции.

Это означает, что при просмотре дизайна с помощью мобильного устройства будет загружен только самый минимум CSS и ресурсов. Это также означает, что более старые версии IE (которые не распознают медиа-запросы) будут представлены на мобильной версии сайта. Посмотрите Leaving Old Internet Explorer Behind от Joni Korpi о дополнительной информацией об этом.

1. Разметка

Я объясню идеи, лежащие в основе этого решения, по мере нашего продвижения вперед, поэтому пока давайте набросаем некоторую разметку, начав с документа blanco 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>

Примечание. Не забудьте мета-тег Viewport!

Сделав это, добавим некоторую структуру страницы. Непосредственно необходимые моменты и всё для целей нашей демонстрации. Я использовал наполнитель текста Monty Python от Holy Grail (спасибо 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-страницу, так что теперь пришло время для главной достопримечатальности; нашей основной навигации ..

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

Да, вы всё увидели верно - мы добавили её в строке 68 после последней статьи. Не забывайте, что сейчас мы разрабатываем для мобильных устройств, позже мы рассмотрим версию desktop. Мы разместили навигацию в нижней части нашей страницы, что кажеться довольно странным. Теперь мы собираемся разместить ссылку в верхней части нашей страницы, чтобы пользователи могли найти навигацию, если пожелают.

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

</header>

3. Сброс CSS

В зависимости от того, как вы обычно начинаете веб-проекты, этот шаг может отличаться от вашего обычного рабочего процесса. Я всегда придерживался мнения, что перезагрузка Eric Meyer - это прочная основа для начала работы, тем более что недавно он откорректировал её. Мы добавим его правила сброса в таблицу стилей, чтобы начать наш 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;
}

Это все основные моменты (шрифты, line-heights, цвета и т.д.), но что действительно важно, так это то, что я нарисовал кнопку «меню» справа, внутри <header>, именно там, где вы и ожидаете её увидеть.

Если вы наведете на него курсор, вы увидите состояние зависания - конечно, это не обязательно для устройств с сенсорным экраном, но подобный характер действия будет перенесен на несовместимые версии Internet Explorer. То, что мы определили в качестве преимущества для мобильных пользователей, это состояние :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;
}

Намного лучше. Мы сделали ссылки меню приятными и большими (подробнее читайте в блоге Luke Wroblewski Touch Target Sizes) и еще раз определили состояние :focus для отзывов пользователей.

Также очевидно, что мы включили ссылку «наверх», которая при необходимости вернет пользователей в начало страницы.

6. Делаемся большими

Хорошо, мы поработали с нашим простым мобильным шаблоном, ну а теперь пришло время для более прогрессивных улучшений. Мы будем использовать медиа-запросы, чтобы определить, когда наш мобильный макет больше не подходит.

Но в какой момент он становится таковым? Есть много способов, как подойти к медиа-запросам, но мы будем работать на основе того, что мобильный viewport - 320 x 480 пикселей. Он имеет ширину 320 пикселей при просмотре в ориентации "portrait", 480 пикселей в ширину при просмотре в "landscape", поэтому будет оправдано, если мы установим наш первый медиа-запрос, чтобы он определял любой экран, больше 480 пикселей.

Однако следующий шаг - это, вероятно, планшет. IPad имеет разрешение 980px x 768px, поэтому можно смело предположить, что для нашего мобильного макета подходит всё, что меньше 768px. Все, что больше 768px, может работать с макетом навигации для компьютеров, "desktop" версия.

Поэтому теперь мы можем начинать добавлять правила, итак, давайте настроим медиа-запрос:

/*media queries*/

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

}

Этот медиа-запрос будет запускать все стили, которые в нем содержаться, если наименьшее значение viewport 768 пикселей. Обратите внимание на включение единственного ключевого слова, которое гарантирует, что Internet Explorer 8 не запутается и попробует обработать запрос. Для более детальной информации см. мое более раннее объяснение.

Давайте начнем нашу работу с того, что заставим кнопку "меню" исчезнуть:

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

}

Для того, чтобы это было возможно, мы сначала должны правильно разместить его parent (.wrapper). Мы можем либо сделать это здесь, в медиа-запросе, либо определить это в начале нашей таблицы стилей.

После того, как меню полностью установлено, нам нужно удалить некоторые элементы привязки. Особо ничего делать не нужно, надо только чтобы список товаров отображался линейно, убрать границы и огромные пробелы. Состояния hover, о котором мы говорили ранее, конечно же отличное, поэтому нам не нужно их менять.

8. И последнее...

Если вы были внимательными, вы заметили, что у нас все еще есть ссылка «наверх» в навигации - теперь нам она не нужна, верно?

Мы можем удалить ее несколькими способами, но чтобы четко представлять что происходит, давайте сначала добавим класс к элементу списка:

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

И тогда мы можем избавиться от него в нашем медиа-запросе:

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

Вывод

Вот и всё! Существует множество способов реализации этой идеи (иконка списка - только один из них), и, конечно же, вы можете продолжать добавлять медиа-запросы, для работы на больших экранах. Надеюсь, теперь у вас есть основания для этого. Мы создали простую, отзывчивую, сенсорную навигацию с помощью подхода mobile first, уделяя особое внимание контенту и юзабилити. Кому нужно чего-то больше?!

Дополнительные ресурсы

Вот несколько полезных ссылок, упомянутых в этой статье, собранных в один удобный список:

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
Мое объяснение медиа-запроса 'only' keyword
Brad Frost's responsive navigation patterns
Aaron Gustafson's Build a smart mobile navigation without hackson .net Magazine

Premium опция

На Envato Market есть множество дизайнерских шаблонов mobile first, готовых к использованию в ваших проектах.

Например, first - это mobile first тема веб-приложения/панели администратора с плоским UI на основе Bootstrap 3. Она мало весит, несмотря на множество компонентов для ваших разнообразных нужд. Она также полностью отзывчивая, а виджеты и компоненты выполнены с учетом mobile first.

first - Mobile First Web App Theme — first - Mobile First тема веб-приложения