Largura fixa vs largura dinâmica

Notei que mais e mais sites foram para um layout de largura fixa, onde o redimensionamento da janela do navegador apenas faz com que as barras de rolagem apareçam, em oposição a um layout flexível, onde o redimensionamento do navegador faz com que os componentes da página "se misturem" juntos .
Os sites StackExchange como este são um exemplo do layout fixo. GMail e iGoogle são exemplos de layout flexível. Quais são as razões para escolher um sobre o outro?

Projetos mais complexos podem ser muito difíceis de realizar com layout de largura variável. Então, imagino que isso tenha um papel.

Também existe o fato de não ser confortável ler textos muito amplos. O tamanho da coluna nos sites StackExchange é bastante gerenciável e fácil de ler. Com um layout de largura variável, você não pode apenas estender o corpo do texto principal sem tornar-se ilegível. Até o Google limita a largura dos resultados de pesquisa.

Obviamente, se você tem um site em que o espaço é escasso (como o Google Docs e o Google Maps), você realmente deseja usar um esquema de largura variável para usar todo o espaço disponível.

Corrigido com é muito mais fácil desenvolver para sites complexos. Além disso, a maioria dos sites de largura fixa terá cerca de 1000 pixels de largura. O motivo é que apenas 1% dos navegadores usam 800x640 e 0% usam 640x480. Confira as estatísticas mais atuais aqui . Isso não inclui dispositivos móveis. Que é um jogo totalmente diferente.

O valor do layout de largura variável é que ele permite que as pessoas usem o site facilmente em uma janela que não é maximizada.

Você precisa olhar para o seu público e decidir com base na experiência que deseja e se a largura variável é mais importante do que outros recursos que você não poderá desenvolver se precisar fazer largura variável.

Também existe um compromisso entre os dois, em que você define uma largura mínima e uma largura máxima (usando CSS) e, em seguida, usa larguras de porcentagem para fazer o resto fluir entre os dois extremos. Por exemplo, você pode querer que uma coluna do menu à esquerda não fique mais estreita que 200px, mas que o conteúdo principal flua. Essa técnica permite que o site seja dimensionado para a resolução dos visitantes, sem parecer bobo em resoluções extremamente altas ou muito baixas. Afinal, o HTML foi projetado para fluir - é uma linguagem de marcação e não é o mesmo que impressão.

Essa abordagem funciona bem para designs relativamente simples, como blogs ou que apresentam muitas informações textuais. Na verdade, eu o uso em meu próprio site pessoal . Afinal, muitas pessoas agora têm monitores de tela ampla ou de alta resolução - meu monitor de trabalho tem 1680px de largura - então por que eles deveriam perder um grande grau de propriedade e ter que rolar horizontalmente simplesmente porque um designer decidiu por uma largura fixa que se adequava à sua tela? No final, um bom design é oferecer aos usuários a melhor experiência possível - não é apenas o que parece "bonito" no monitor do designer.

Você pode não ter que fazer essa escolha. A List Apart tem um excelente artigo sobre Design Responsivo . A idéia principal é que você pode usar consultas de mídia para capturar alterações na janela do navegador ou no tamanho da janela de visualização e reatribuir o CSS conforme necessário. Há muito o que ler lá, então confira o artigo para obter todos os detalhes interessantes. Mas, no longo e curto prazo (ou deveria ser o "amplo e o estreito"), veja as páginas anteriores e posteriores de seu exemplo. A página anterior é bem dimensionada até certo ponto, mas se você a tornar estreita o suficiente, ela ficará um pouco desajeitada. O depois A página também é dimensionada, mas também altera o layout quando você a torna muito estreita para que a escala funcione bem.

De acordo com as 113 diretrizes de design de Jakob Nielsen para a usabilidade da página inicial :

67 Use um layout líquido para que o tamanho da página inicial se ajuste a diferentes resoluções de tela.

É também uma das dez diretrizes de design da página mais violada :

Lutar contra layouts congelados parece uma batalha perdida, mas vale a pena repetir: usuários diferentes têm tamanhos de monitor diferentes. Pessoas com grandes monitores querem poder redimensionar seus navegadores para visualizar várias janelas simultaneamente. Você não pode assumir que a largura da janela de todos é de 800 pixels: é demais para alguns usuários e muito pouco para outros.

Que tal uma confusão? Isso exibe a # seção de conteúdo em uma largura fixa (70em) se houver espaço suficiente - caso contrário, a seção será reduzida para 80% da janela da porta de visualização / navegador.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

A vantagem de um layout dinâmico é que ele funciona em todos os tamanhos de tela, incluindo dispositivos móveis. É um trabalho mais difícil, porém, fazer com que as coisas pareçam boas em todos esses tamanhos. A pergunta a ser feita é: seus visitantes vão usar dispositivos móveis?