Layout Fluido ou Lquido

por Bruno Barros | Publicado em 8 NOV 2010

A ideia de se fazer sites que se adaptem ao tamanho do monitor do usurio j existe.

Esta tcnica conhecida como Layout Fluido ou Lquido. Quando o layout Fluido
temos que planejar o que pode e o que no pode ter seu tamanho alterado, seno o
resultado no ser satisfatrio, pois o que queremos um projeto usvel, acessvel e
ainda sim, belo.
Esta tcnica conhecida como Layout Fluido ou Lquido, e se baseia em usar valores
percentuais ao invs de absolutos para as tags que delimitam as reas do site (div), ou
seja, ao invs de declarar a largura do site com valores absolutos em pixels (px), usamos
valores proporcionais em percentual (%). Desta forma o site e suas subpartes ocuparo
uma rea relativa ao tamanho da janela do navegador do usurio.

Nota
H quem diga que Layout Fluido e Lquido so tcnicas distintas. Layout Fluido usaria
unidades percentuais (%) e Layout Lquido unidades relativas (em). Eu no vejo desta
forma. O uso de unidades relativas (em) baseado no tamanho do corpo do texto em um
determinado contexto, ou seja, uma unidade tipogrfica, por isso o site no se
adaptaria ao dispositivo, mas responderia as necessidades dos usurios ao aumentar e
diminuir o tamanho do corpo de texto.
No desenvolvimento de sites existem algumas variveis que temos que considerar:

Tamanho da tela do usurio

Navegador utilizado
Se o navegador est ou no maximizado
Plugins instalados no navegador
Sistema operacional

Ou seja, definir um padro, um modelo, consistente de usurio uma tarefa impossvel.

Sugiro a leitura do artigo Como temos feito sites at agora.

Diferenas entre Fixo e Fluido

Layouts Fixos so reflexos exatos do nosso arquivo de Photoshop. As medidas dos box
models so definidas e imutveis independentemente se a unidade usada para a
tipografia for em valores relativos em.
Exemplo de estrutura de um site com Layout Fixo e tipografia em pixels. Ver exemplo
de Layout Fixo.

Layouts Fluidos so variaes do nosso arquivo de Photoshop, ou seja, o layout

produzido uma base que deve prever variaes em sua estrutura. Para conseguirmos
esta fluidez usamos unidades proporcionais em %.

Exemplo de estrutura de um site com Layout Fluido e tipografia em em. Ver exemplo
de Layout Fluido.

Como podemos ver nos exemplos acima, layouts Fixos e Fluidos tm suas vantagens e
desvantagens. Um dos problemas com layouts Fluidos que em algum momento as
estruturas internas do site se desorganizam. Para minimizar este efeito negativo
podemos usar a propriedade CSS min-width e max-width para limitar a expanso ou
reduo do site, assim como fiz com o exemplo Fluido acima. Veja neste link o mesmo
exemplo fluido com a limitao na div.container para no reduzir menos de 800px.

1
2
3
4
5
6
7
8
9
10
11

.container {
width:97%; /* mantm uma distncia entre o site e os lados da janela
*/
max-width:960px;/* limita o crescimento do layout a at 960px */
min-width:800px; /* limita a reduo do layout em at 800px */
margin:1em auto; /* mantm o site centralizado */
}

Em um prximo artigo vou detalhar e exemplificar como se trabalha com valores

relativos na tipografia, criando um ritmo vertical e espacejando os objetos de forma que
se ajustem de acordo com o espao disponvel sem que haja sobreposies.
De qualquer forma o cdigo CSS dentro do arquivo de exemplo est comentado dando
algumas dicas.

Quando ser Fluido ou Fixo?

Pode parecer, mas eu no estou defendendo que todo e qualquer site deva ser construdo
com layout Fluido, apesar dos ganhos em acessibilidade e usabilidade.
Sites Fluidos devem ser pensados desde o incio do projeto para serem desta forma,
seno o que acontece que o designer cria um projeto visual impossvel de se tornar
fluido usando ilustraes e texturas para definir as reas do site. Quando o layout
Fluido temos que planejar o que pode e o que no pode ter seu tamanho alterado, seno
o resultado no ser satisfatrio, pois o que queremos um projeto usvel, acessvel, e
ainda sim, belo.
Geralmente, sites que no devem ser fluidos tm as seguintes caractersticas:

Muitos espaos com publicidade (pelo menos na sua forma tradicional)

Uso de ilustraes para desenhar as reas do site
Sites com mais de trs colunas para acomodar uma quantidade muito grande de
contedo
Composio do layout que foge dos padres, pois os elementos no podem
alterar sua posio no layout sem descaracterizar o projeto inicial

Abaixo alguns exemplos de sites que dificilmente se comportariam bem com layout
Fluido:
a) Web designer depot
b) Operation Upcycle
c) Free Agent Depot
d) Circuito Bavaria de Rodeio
Agora, sites que tem layout propcio para serem Fluidos mas no so:
e) Design Challenge
f) Pro Blog Design
g) Tableless
Por fim, sites com layout Fluido:
h) Abstract fonts (suporta no mnimo 925px)
i) Gmail (suporta no mnimo 800px voc tem que se logar)
j) Wikipedia (suporta no mnimo 640px)
l) Matthew James Taylor (suporta no mnimo 620px)

Alguns problemas para resolver

Existem algumas tcnicas que acabam falhando em funo de problemas nos
navegadores ou pela falta de controle sobre o layout. Por isso, sites Fluidos no so
comuns. Eu mesmo j tentei desenvolver projetos fluidos h alguns (muitos) anos atrs,
mas por falta de conhecimento e por limitaes dos navegadores no obtive resultados
satisfatrios e abandonei esta tcnica.
Hoje, vivemos outra realidade. Os navegadores esto cada vez melhores e renderizando
os sites cada vez mais parecidos, claro, sabemos que o Internet Explorer puxa a mdia
para baixo, mas em sua verso 8, e mais recentemente 9, penso que muitos problemas
estaro superados.
A primeira coisa que precisamos incorporar em nosso trabalho , ao invs de pensarmos
em pixel perfeito (do termo em ingls pixel perfect) devemos pensar em proporo
perfeita.
Subdividindo o site em trs colunas como na regra dos teros (ver na wikipedia)

Subdividindo o site usando a proporo urea (ver na wikipedia).

A segunda entender que os navegadores renderizam os box models com pequenas

diferenas, e assim nos precavermos de algumas armadilhas. Ao usarmos propores
para definir as reas do site no precisamos nos preocupar com quantos pixels
exatamente cada coluna tem, pois os navegadores que fazem todo clculo para ns.
Isso pode nos pregar uma pea, pois no exemplo abaixo temos uma estrutura com
apenas 4 colunas, cada coluna tem sua largura definida como: width: 25%.
Quando nossa rea til tem a largura de 800px, cada coluna possui 200px, mas quando a
diviso da rea til do site faz com que uma coluna tenha um valor fracionado, ou seja,

no um nmero redondo, cada motor de renderizao trata o caso de uma maneira

diferente.
Neste exemplo temos o seguinte cdigo HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="text">Container com 800px de largura</div>

<div class="container">
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 4</div>
</div>
<div class="container2">
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 4</div>
</div>
<div class="text">Container com 798px de largura</div>

E o seguinte estilo aplicado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.container {
background:#F00;
width:800px;
margin:10px auto;
}
.container2 {
background:#F00;
width:798px;
margin:10px auto;
}
.box {
position:relative;
background-color:#06C;
width:25%;
height:50px;
float:left;
color:#FFF;

35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

font-size:1.4em;
text-align:center;
padding:1em 0;
}
.text {
display:block;
clear:both;
text-align:center;
font-size:1.4em;
padding:1em 0;
}

Como o pixel a menor unidade nas telas e indivisvel (diferente das partculas
atmicas ), no existe o,5 pixel (meio pixel). O que acontece que o Internet
Explorer 7 ou inferior (eca!) arredonda o valor para cima, e outros navegadores
arredondam para baixo ou simulam o meio pixel para no haver a quebra do layout.
Veja na imagem abaixo a comparao da renderizao do cdigo nos seguintes
navegadores: (1) Safari 5, (2) Chome 7, (3) Firefox 3.6, (4) Internet Explorer 8 e (5)

Internet Explorer 7, ou acesse a pgina de exemplo e faa seus prprios testes.

Para prevenirmos a quebra do layout no Internet Explorer na verso 7 ou inferior

podemos setar na folha de estilo principal, ou alternativa atravs do comentrio
condicional, o valor de 24.99999999% ao invs de 25% para as colunas. Veja o
resultado neste link.