de chamadas para outros conteúdos, cada uma mostrando seu respectivo título, um
resumo/chamariz e um link para se acessar a página, na íntegra.
Como a estrutura foi idealizada para ser mantida e se repetir em todas as páginas
do site, para os outros tipos de páginas, basta alterar os elementos HTML dentro de content.
No caso, essa página de exemplo foi estruturada com 6 destas chamadas, mas
a estrutura permite que sejam feitas quantas sejam precisas (preferencialmente, em quantidade par, para manter sua estrutura de apresentação).
<div class="content">
<div class="content-main">
<article class="hero">
<h2>
Título Importante
</h2>
<p class="brief">
Descrição ou resumo de um conteúdo
importante, que precisa ser mostrado para evidenciar
a notoriedade deste
conteúdo.
</p>
</article>
<div class="last-contents">
<article class="last-content-call">
<h2 class="secondary-title">
Título de Conteúdo
</h2>
<p class="brief">
Resumo ou
descrição deste conteúdo.
30
Casa do Código
Capítulo 3. layout fluído
Deve ser algo que chame a atenção!
</p>
<a href="#">Leia mais</a>
</article>
<article class="last-content-call">
<h2 class="secondary-title">
Título de Conteúdo
</h2>
<p class="brief">
Resumo ou
descrição deste conteúdo.
Deve ser algo que chame a atenção!
</p>
<a href="#">Leia mais</a>
</article>
[...]
</div>
</div>
<aside class="content-sidebar">
<nav class="main-nav">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
</nav>
</aside>
</div>
O código completo pode ser visto neste link: https://gist.github.com/3630605
Até então, tudo normal. Inclusive quando alguém redimensiona a janela - ou,
o que é mais comum, acessa usando uma resolução menor do que a mostrada no
31
3.3. Exemplo de um layout fixo
Casa do Código
exemplo -, o conteúdo continua no mesmo lugar, eventuais barras de rolagem do
navegador aparecem. Enfim, tudo normal e como o esperado:
Quando alguém acessa através de um dispositivo móvel, principalmente com os
que temos atualmente, o próprio device se encarrega de fazer sua mágica para que
todo o site seja apresentado na telinha como se aplicasse um zoom out nele todo.
Com isso, a pessoa tem uma visão geral do site (por o estar vendo pequenininho)
e, caso algo seja do seu interesse, através de um botão pressionado ou gesto feito na tela do dispositivo, consegue dar um zoom in e ver melhor o que é de seu interesse no momento.
A partir do momento que a pessoa já viu o que queria, ou vai deslizando o site
para encontrar outras coisas do interesse, ou dá um zoom out para ter novamente
a visão topográfica. Esse processo pode acontecer mais vezes, caso o usuário não consiga encontrar a informação com rapidez.
Essa facilidade que os dispositivos móveis nos oferecem realmente facilita o pro-
cesso de navegação, já que nem todos os sites estão
tecnicamente preparados para
apresentar seus conteúdos nas mais diversas resolução possíveis. Sim, realmente é
um processo que, depois de algum tempo, é cansativo, repetitivo e, concordemos,
não atende aos padrões e gostos de usabilidade um pouco mais rigorosos.
32
Casa do Código
Capítulo 3. layout fluído
O ideal é que o layout do site - e, logicamente, seu conteúdo - seja bem apresen-
tado em todos os tipos de resolução. O desejável - e, muitas vezes e cada vez com
mais frequência, o esperado - é que o site seja inteligente o bastante para apresentar o melhor conteúdo através da melhor maneira possível, não importando qual dispositivo ou qual resolução estejam sendo utilizados no momento do acesso.
CSS de um layout fixo
Esse HTML de exemplo que mostramos deve ser acompanhado por um pouco
de CSS, e é justamente isso que iremos abordar agora. Como você verá, é um CSS
que não tem absolutamente nada demais, servindo para dar uma leve estilizada e
apresentar nossa página de um layout fixo de uma maneira um pouco mais agradável
e organizada.
Começaremos com a forma mais básica de CSS reset, servindo somente para
ilustrar a necessidade de que haja um esforço inicial na criação das folhas de estilo de uma padronização entre os diferentes navegadores. Pessoalmente prefiro, ao invés
de um reset, um padronizador de CSS, tal como o CSS que podemos encontrar
no HTML5 Boilerplate (http://html5boilerplate.com/); mas, para fins de exemplo,
vamos trabalhar com um reset básico. Além disso, vamos colocar uma fonte comum
para os elementos.
* {
margin: 0;
padding: 0;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
Começando a mexer nos elementos especificados no HTML, vamos trabalhar
com o .container, que é o wrap de toda a página. A ideia é termos um site centralizado, bastante comum nos dias de hoje. A largura ideal para tal modelo de página não existe, portanto, podemos arbitrar o que melhor nos aprouver.
.container {
margin: 0 auto;
width: 960px;