Navegação Simples, Responsiva e para Dispositivos Móveis Primeiro

Portuguese (Português) translation by Hugo Carlos Borges Pinto (you can also view the original English article)

Nós vamos desenvolver uma navegação simples e responsiva para um web site. Nossa solução vai nos ajudar a colocar ênfase no conteúdo da nossa página, sem dúvidas a prioridade máxima em design para dispositivos móveis. Não usaremos JavaScript, e nós vamos partir de um enfoque primeiramente para dispositivos móveis.

Navegação para Dispositivos Móveis

Se você leu o texto de Luke Wroblewski Primeiro Dispositivos Móveis você vai estar familiarizado com sua afirmação de que:

Como regra geral, o conteúdo tem precedência sobre navegação em dispositivos móveis.

O que ele quer dizer com isso é que usuários de dispositivos móveis estão normalmente procurando respostas imediatas; eles querem chegar ao conteúdo que eles procuram, não mais opções de navegação.

Muitos web sites, mesmo os responsivos, se apegam à convenção de que a navegação pertence ao topo de qualquer página. Este enfoque pode causar problemas de usabilidade em dispositivos móveis porque os usuários normalmente tem falta de duas coisas: área útil de tela (a partir de agora tratada como 'viewport') e tempo. Se a navegação primária está no topo da página, existe uma grande chance de que ela vá ocupar inteiramente uma tela de dispositivos móveis. O problema é exacerbado ainda mais por links grandes otimizados para toque, forçando usuários a rolar além da navegação para chegar a qualquer conteúdo relevante.

Veja este exemplo da London & Partners:

Um design responsivo perfeitamente decente, mas em uma viewport comum em dispositivos móveis (320px x 480px) tudo que você realmente vê é o menu de navegação. Com certeza, tendo acabado de chegar na página inicial, eu quero ver algo mais do que isto? Não é só a London & Partners que demonstra isto - é uma prática vista em muitos designs responsivos pela web.

Então Quais são as Soluções?

Nós vimos algumas maneiras de contornar isto, normalmente se apoiando em jQuery para arrumar as coisas para nós. Considere a explicação de Chris Coyier sobre o menu dropdown responsivo da Five Simple Steps.

Grande tela, pequena tela.

Usando jQuery, uma cópia do menu é criada na forma de um dropdown <select>, inicialmente oculto usando CSS. Quando alguma media query detecta uma tela menor, elas tornam o dropdown visível e a navegação original invisível. Isto é perfeito para dispositivos móveis já que dropdowns ocupam espaço real mínimo e fazem uso da Interface de Usuário do próprio dispositivo (como a barra de rolagem do iPhone).

Alternativamente, você pode ocultar sua navegação, mas fazê-la aparecer com uma transição quando um botão 'menu' é clicado. Você pode ver este efeito em ação na última Bootstrap do Twitter.

Telas menores escondem os links de navegação e mostram um ícone de 'lista' (rapidamente sendo aceito como significando 'menu') que revela a navegação quando clicado. Novamente, visitantes de dispositivos móveis são apresentados ao máximo de conteúdo possível, mas tem as opções de navegação disponíveis caso necessitem delas.

Solução CSS Pura

Nós vamos utlizar uma técnica discutida pelo Luke, que faz uso de CSS e enfoque Dispositivos Móveis Primeiro. O que queremos dizer com um enfoque Dispositivos Móveis Primeiro? Em poucas palavras, nós vamos fazer o design de um layout para dispositivos móveis direto, então progressivamente melhorar este design para telas maiores. Nós vamos usar media queries que detectam regularmente tamanhos de telas maiores, adicionando estilos e funções de acordo.

Isto significa que o mínimo de CSS e recursos serão carregados quando nosso design é visto em um dispositivo móvel. Isto também significa que versões antigas do IE (que não reconhecem media queries) vão receber a versão móvel do site. Dê uma olhada no artigo de Joni Korpi, Deixando Internet Explorer Antigos para trás para mais informações sobre este assunto.

Passo 1: Markup

Eu vou explicar as ideias por trás desta solução enquanto vamos avançando, então por enquanto vamos juntar algum markup, começando com um documento HTML5 em branco.

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

Nota: Não Esqueça da Meta Tag Viewport!

Feito isto, vamos adicionar estrutura à página. Coisas diretas para os propósitos da nossa demonstração. Eu usei texto do Holy Grail do Monty Python de exemplo (obrigado Chris Valleskey) que é uma boa maneira de colocar um sorriso em seu rosto enquanto você está trabalhando :)

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

Passo 2: Markup de Navegação

Nós juntamos uma página html básica, então agora é hora da atração principal; nossa navegação primária..

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

Sim, você viu isto corretamente, nós adicionamos isto na linha 68, depois do último artigo. Não se esqueça que nós estamos fazendo o design para dispositivos móveis agora, nós vamos cuidar de desktop depois. Nós posicionamos a navegação no final da página para que ela fique totalmente fora do caminho. Nós agora vamos colocar um link no topo da página para que os usuários possam achar a navegação caso eles desejem.

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

</header>

Passo 3: Reset CSS

Dependendo de como você normalmente começa projetos web, este passo pode ser diferente do seu fluxo de trabalho usual. Eu sempre achei o reset do Eric Meyer uma base sólida a partir da qual posso trabalhar, especialmente já que ele a alterou recentemente. Nós vamos adicionar as regras de reset dele para iniciar nosso 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;
}

Passo 4: Estilos Básicos

No momento nossa página está sem inspiração..

..então vamos melhorar as coisas adicionando alguns estilos simples.

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

Isto é tudo coisa básica (fontes, line-heights, cores etc.), o que é crucial até agora é que eu estilizei o botão 'menu' para flutuar para a direita dentro do <header>, onde você normalmente espera encontrar a navegação.

Se você pairar o mouse sobre ele verá o estado de foco - não necessário para dispositivos com telas de toque obviamente, mas esta experiência vai também ser entregue para versões não cooperativas do Internet Explorer. O que nós já definimos para o benefício de usuários de dispositivos móveis é um estado de :focus. É o mesmo que um estado de :hover, mas vai oferecer um feedback crucial para dispositivos com telas de toque. Nossos usuários vão saber que eles tocaram com sucesso o botão de menu.

De todo modo, clique nele e você será levado para a navegação, super.

Agora vamos estilizar este botão de menu um pouco.

Passo 5: Estilos de Navegação

Nós vamos na verdade estilizar nossa navegação primária muito como o exemplo da London & Partners mostrado mais cedo, exceto que desta vez ela estará obviamente no final da página..

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

Bem melhor. Nós colocamos os links do menu grandes e bonitos (leia mais sobre Tamanhos de Alvos para Toque no blog do Luke Wroblewski) e mais uma vez determinamos um estado de :focus para o feedback para o usuário.

Também ficou claro que nós incluímos um link 'topo' que vai levar os usuários de volta para o topo da página se necessário.

Passo 6: Aumentando o Tamanho

OK, nós lidamos com nosso layout móvel simples, então agora é a hora de algumas melhorias progressivas. Nós vamos usar media queries para determinar quando nosso layout móvel não será mais apropriado.

Mas a partir de qual ponto ele se torna inapropriado? Existem várias maneiras de lidar com media queries, mas nós vamos trabalhar com a assunção de que uma viewport móvel é 320px x 480px. Possui largura de 320px quando vista em retrato, largura de 480px quando vista em paisagem, então nós podemos justificadamente estabelecer nossa primeira media query para detectar telas mais largas do que 480px.

Entretanto, nosso próximo passo é sem dúvida os tablets. O iPad tem uma resolução de 980px x 768px, então nós podemos assumir com segurança que qualquer coisa menor que 768px é apropriada para nosso layout móvel. Qualquer coisa além de 768px pode lidar com nosso layout de navegação para desktop.

Nós podemos então começar a adicionar regras, então vamos criar uma media query:


/*media queries*/

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

}

Esta media query vai rodar todos os estilos contidos nela quando a viewport alcançar ao menos 768px de largura. Note a inclusão da palavra-chave only, que garante que o Internet Explorer 8 não fique confuso e tente processar a query. Veja minha explicação anterior para mais detalhes.

Vamos continuar fazendo nosso botão 'menu' desaparecer:

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

	a.to_nav {
		display: none;
	}

}

Com o navegador um pouco mais largo, o botão menu não é mais mostrado.

Passo 7: Deslocando a Navegação

Agora precisamos trazer nossa navegação primária para o topo da página. Nós vamos fazer isto a removendo do fluxo do documento, posicionando-a absolutamente no topo.

 
@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 que isto seja possível nós devemos primeiro colocar o seu pai (wrapper) posicionado relativamente. Nós podemos tanto fazer isso aqui na media query, ou determinar isto no começo da nossa stylesheet.

Uma vez que o menu esteja posicionado absolutamente, nós temos que remover alguns dos estilos de âncoras. Não há muita coisa a fazer, mas nós precisamos que os itens da lista sejam exibidos em linha, e nós precisamos remover as bordas e o padding exagerado do elemento âncora. Os estados de foco que nós ditamos antes estão adequados, então não vamos precisar modificá-los.

Passo 8: Uma Última Coisa

Se você está prestando atenção notou que nós ainda temos um link 'topo' na navegação - nós não precisamos realmente dele agora não é?

Nós podemos remover isto de várias maneiras, mas para ter certeza do que está acontecendo vamos primeiro adicionar uma classe ao item da lista:

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

Então nós podemos nos livrar dele dentro da nossa media query:

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

Conclusão

É isso! Existem inúmeras maneiras de executar esta ideia (implementar um ícone de lista sendo apenas uma delas) e, claro, você pode continuar a adicionar media queries para atender telas maiores. Espero que você agora tenha as fundações para fazer isto. Nós criamos uma navegação simples, responsiva, adaptada a toque, com um enfoque em dispositivos móveis primeiro e ao mesmo tempo demos ênfase ao conteúdo e usabilidade. Quem precisa pedir mais?!

Recursos Adicionais

Alguns links úteis mencionados neste tutorial, todos juntos em uma lista grande e prática (em inglês):

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

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!