Layout responsivo 2

Criar um layout responsivo não é tão complicado quando você tem em mente o que deseja. Por exemplo, no vídeo que você vai assistir nesse artigo, queria criar um layout com menu superior, conteúdo na esquerda, barra lateral na direita e um rodapé simples. Também gostaria que o conteúdo tivesse largura máxima de 1200px e que a barra lateral seguisse o fluxo do layout quando o usuário visualizasse o site utilizando um smartphone.

Então decidi tentar montar o layout correndo aqui, sem testar em nenhum navegador mais antigo nem me preocupar com cores, fundos, nem nada disso, somente a estrutura. Fiz isso para que você possa entender o processo da criação e o estilo que costumo começar um desenvolvimento. Normalmente eu crio a estrutura primeiro e depois trabalho o restante do layout.

Como resultado? Como você vai ver, ficou horrível, porém atingimos o objetivo de criar a estrutura de um layout responsivo. Agora só precisamos ajustar as cores (é óbvio), fontes e coisas do tipo. Não esquecendo de testar em outros navegadores para corrigir os bugs, por exemplo, o menu precisa de um "fix" para o IE6 e IE7 no menu. Também aconselharia verificar a largura mínima para o IE8, já que media queries não funcionam nele (ou utilizar algo que faça funcionar, como respond.js).

Assista ao vídeo abaixo.

Layout responsivo em 8 minutos

Obs.: Não é um problema no áudio, eu gravei sem microfone propositalmente para não demorar muito e focar completamente no código.

Só isso!

O código do vídeo

Se quiser copiar o código do vídeo, segue abaixo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title>TutsUP - Layout Responsivo</title>
		
		<style>
		body, html{
			margin:0;
			padding:0;
		}
		.main{
			max-width:1200px;
			margin:0 auto;
			overflow:hidden;
			background:lightgray;
		}
		.content{
			float:left;
			width:100%;
			margin-right:-210px;
		}
		.content-inner{
			margin-right:210px;
		}
		.sidebar{
			background:red;
			float:right;
			width:200px;
		}
		.menu{
			width:100%;
			background:blue;
		}
		.menu ul{
			margin:0; 
			padding:0;
		}
		.menu ul li{
			display:inline-block;
			*display:inline;
			zoom:1;
			margin:0; 
			padding:0;
		}
		.menu ul li a{
			display:block;
			padding:20px;
			color:#fff;
		}
		.footer{
			width:100%;
			background:yellow;
			text-align:center;
		}
		
		@media screen and (max-width: 700px) {
			.sidebar, .content-inner, .content{
				float: none;
				width: 100%;
				margin-right:0;
			}
		}
		</style>
		</head>
	<body>
		<div class="main">
			<div class="menu">
				<ul>
					<li> <a href="#"> menu </a> </li>
					<li> <a href="#"> menu </a> </li>
				</ul>
			</div>
			<div class="content">
				<div class="content-inner">
					Conteúdo
				</div>
				
			</div>
			<div class="sidebar">
				Barra lateral
			</div>
			
			<br style="clear:both">
			
			<div class="footer">
				Rodapé
			</div>
		</div>
	</body>
</html>

Provavelmente isso vai funcionar perfeitamente em todos os navegadores. Apenas media queries (como eu disse), precisam ser analisadas no IE6, 7 e 8.