Layout da página da web segue uma das duas abordagens diferentes:
- Layouts de largura fixa: São layouts em que a largura de toda a página é definida com um valor numérico específico.
- Layouts líquidos: Esses são layouts em que a largura de toda a página é flexível, dependendo da largura do navegador do visualizador.
Existem boas razões para usar os dois métodos de layout, mas sem compreender os benefícios e deficiências de cada método, você não pode tomar uma boa decisão sobre qual usar para sua web página.
Layouts de largura fixa
Layouts fixos são layouts que começam com um tamanho específico conforme estipulado pelo web designer. Eles permanecem com essa largura, independentemente do tamanho da janela do navegador que está visualizando a página. Os layouts de largura fixa permitem que o designer controle mais direto sobre a aparência da página na maioria das situações. Eles são frequentemente preferidos por designers com fundo de impressão, pois permitem que o designer faça ajustes minuciosos no layout e os mantenha consistentes em navegadores e computadores.
Layouts líquidos
Layouts líquidos são layouts baseados em porcentagens do tamanho da janela do navegador atual. Eles se flexionam com o tamanho da janela, mesmo que o visualizador atual mude o tamanho do navegador conforme ele está visualizando o site. Layouts de largura líquida permitem um uso eficiente do espaço fornecido por qualquer janela do navegador ou resolução da tela. Eles são frequentemente preferidos por designers que têm muitas informações para serem transmitidos em tão pouco espaço quanto possível, pois eles permanecem consistentes em tamanho e pesos relativos de página, independentemente de quem está visualizando o página.
O que está em jogo?
Sua design do site afeta o seu capacidade de resposta e adaptabilidade do site. Dependendo de qual você escolher, a capacidade de seus leitores de escanear seu texto, encontrar o que procuram ou às vezes até usar seu site pode ser ajudada ou prejudicada. A identidade geral da marca de seu site também pode estar em risco, especialmente se os padrões de sua marca seguirem um modelo lógico de imprimir primeiro.
Benefícios dos layouts de largura fixa
Um layout de largura fixa é útil em algumas circunstâncias.
- Um layout de largura fixa permite ao designer construir páginas que parecerão idênticas, não importa quem as esteja olhando.
- Elementos de largura fixa, como imagens, não superarão o texto em monitores menores porque a largura da página inteira incluirá esses elementos.
- O comprimento da digitalização não será afetado por grandes segmentos de texto, independentemente da largura do navegador.
Benefícios de layouts líquidos
Um layout líquido funciona melhor em outras circunstâncias.
- Um layout de largura de líquido se expande e se contrai para preencher o espaço disponível.
- Todo o espaço disponível é usado, permitindo ao designer exibir mais conteúdo em monitores maiores, mas ainda permanecer viável em monitores menores.
- Os layouts líquidos fornecem consistência em larguras relativas, permitindo que uma página responda de forma mais dinâmica às restrições impostas pelo cliente, como tamanhos de fonte maiores.
Desvantagens para layouts de largura fixa
No entanto, um formato fixo tem seus custos.
- Layouts de largura fixa forçam a rolagem horizontal em janelas menores do navegador. A maioria das pessoas não gosta de rolar horizontalmente.
- Eles deixam grandes extensões de espaço em branco em monitores maiores, resultando em muito espaço não utilizado e mais rolagem vertical do que poderia ser necessário.
- Os layouts de largura fixa não lidam muito bem com as alterações do cliente em tamanhos de fonte. Para pequenos aumentos no tamanho da fonte, eles podem ser adequados, mas para aumentos maiores, o layout pode ficar comprometido.
Desvantagens dos layouts líquidos
Os layouts líquidos também têm suas desvantagens.
- Os layouts líquidos permitem muito pouco controle preciso sobre a largura dos vários elementos da página.
- Eles podem resultar em colunas de texto muito largas para serem digitalizadas confortavelmente ou em navegadores menores, muito pequenos para que as palavras apareçam claramente.
- Erro de layouts de líquido quando um elemento de largura fixa, como uma imagem, é colocado dentro de uma coluna de líquido. Se a coluna for renderizada sem espaço suficiente para a imagem, alguns navegadores irão aumentar a largura da coluna, desconsiderando as instruções do designer, enquanto outros navegadores forçam sobreposições de texto e imagens para atingir o correto percentagens.
Preferência de layout e abordagens mistas
Alguns designers preferem mesclar esses conceitos. Eles não gostam de usar layouts líquidos para grandes blocos de texto, pois essa estrutura torna o texto ilegível em um monitor pequeno ou não digitalizável em um monitor grande. Portanto, eles tendem a deixar as colunas principais das páginas com largura fixa, mas fazem cabeçalhos, rodapés e laterais colunas mais flexíveis para ocupar o restante do imóvel e não perder a capacidade de maior navegadores.
Alguns sites usam scripts para determinar o tamanho da janela do navegador e, em seguida, alteram os elementos de exibição de acordo. Por exemplo, se você abrir esse site em uma janela muito ampla, poderá obter uma coluna adicional de links no lado esquerdo que os visitantes com monitores menores podem não ver. Além disso, a quebra automática de texto em torno da publicidade depende da largura da janela do navegador. Se for grande o suficiente, o site envolverá o texto em torno dele, caso contrário, exibirá o texto do artigo abaixo do anúncio. Embora a maioria dos sites não precise desse nível de complexidade, ele demonstra uma maneira de aproveitar as vantagens de telas maiores sem afetar a exibição em telas menores.