Largura fixa vs largura dinâmica

15

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?

BenV
fonte

Respostas:

11

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.

Kris
fonte
11
+1 para o ponto de largura da leitura do texto. Não importa se o monitor tem 1680px de largura - você não vê um jornal colocando texto em toda a largura da página.
theotherreceive
8

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.

Ben Hoffman
fonte
Você pode me dar um exemplo de um recurso que não funcionaria com um layout variável?
BenV 28/07
3
Não é que os recursos não funcionem com layouts variáveis. É que você deve gastar mais tempo testando e desenvolvendo layouts de largura variável, pois precisa gerenciar como os trechos da sua página lidam com a movimentação entre si.
Ben Hoffman
Ah, eu interpretei mal sua última frase. Eu entendo agora.
BenV 28/07
Um problema com alguns layouts de variável é que eles não têm largura mínima definida para o conteúdo principal; portanto, se sua janela for muito estreita, você terá o texto compactado em uma coluna extremamente estreita, dificultando a leitura. Os layouts de largura fixa têm o problema oposto quando codificam a largura em vez da largura máxima e o texto principal não pode ser lido sem a rolagem horizontal.
Marius Gedminas
3

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.

Dan Diplo
fonte
1

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.

Alan
fonte
1

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.

melhosseiny
fonte
0

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%; }
feeela
fonte
0

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?

paulmorriss
fonte