os sites devem expandir ao redimensionar a janela?
https://stackoverflow.com/questions/27381
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou fazendo esta pergunta puramente do ponto de vista da usabilidade:Um site deve se expandir/estender para preencher a área de visualização quando você redimensiona a janela do navegador?
Eu sei com certeza que existem os contras óbvios:
- Colunas largas de texto são difíceis de ler
- Escrever HTML/Css usando porcentagens pode ser uma dor
- Isso o torna vulnerável a ter seu design esticado além dos limites se uma imagem for muito larga ou se um bloco de texto muito longo for adicionado.(veja que é difícil codificar o html/css)
O único Pro que consigo pensar é que os usuários que usam o redimensionamento de fonte embutido em seus navegadores não terão que lidar com colunas com apenas algumas palavras, com um corpo de espaço em branco em cada lado.No entanto, acho que isso pode ser mais um problema do navegador do que qualquer outra coisa (o Firefox 3 permite ampliar tudo em vez de apenas o texto, que é sempre útil)
editar:Percebi que o estouro de pilha tem largura fixa, mas o horror da codificação é redimensionado.Parece que Jeff não tem uma preferência forte de qualquer maneira.
Solução
HTML bruto faz exatamente isso.Você está alterando seus dados para que não sejam renderizados tão bem em janelas de tamanho aleatório?
Antigamente, todo mundo tinha telas VGA.Agora, essa resolução é muito incomum.Quem sabe quais resoluções serão comuns no futuro?E por que esperar uma certa largura ou altura mínima?
Do ponto de vista da usabilidade, exigir uma determinada resolução dos usuários apenas criará uma experiência degradada para quem não usa essa resolução.Outra coisa que vem disso é o que é Largura fixa?Já vi muitas janelas de tamanho fixo (pop-ups) que simplesmente não funcionam corretamente porque minhas fontes são diferentes das do designer.
Outras dicas
Em termos de dimensionamento de sites, gosto de sites de tamanho fixo que sejam bem dimensionados usando a função "zoom" do navegador.Não quero uma página muito larga com fontes minúsculas no meu monitor de resolução de 1920.Não sei se o web designer precisa fazer alguma coisa para escalonar bem quando ampliado, mas o zoom no FF3 é incrível, o do IE7 é inútil ...
O design deve ser fluido dentro de limites razoáveis.
Use CSS tem min-width e max-width propriedades (que funcionam em todos os navegadores, incluindo IE7+) para evitar que o design se estique demais.
O importante é nunca deixar um bloco de texto muito esticado.Se uma janela for expandida, nenhum bloco de texto deverá se esticar indefinidamente para corresponder, pois a leitura se torna uma dificuldade.
Como as pessoas disseram, realmente depende das informações que o site está exibindo.Dois bons exemplos são StackOverflow e Google Images.
Se o stackoverflow fosse esticado para caber na tela, respostas mais longas seriam irritantes de ler, porque o olho acha difícil digitalizar linhas longas - isso é exatamente por que os jornais usam colunas para tudo e por que os livros têm a mesma largura.
Com o Imagens do Google, onde o conteúdo é basicamente um monte de imagens de 200 pixels de largura, ele se estende para caber na largura do navegador e ainda é perfeitamente legível.
Basicamente, tenha em mente que os olhos odeiam ler longas linhas de texto e baseie seu design nisso.Você pode projetar seu site de forma que, quando aumentar o tamanho da fonte, todo o layout seja dimensionado perfeitamente com ele (o único site que consigo pensar que faz isso é www.geektechnique.org - pressione o botão ctrl and -/= ou ctrl+scrollwheel, e o layout muda de largura com o tamanho da fonte)
Acho que gosto de muitas coisas:depende.Normalmente faço as duas coisas.Alguns conteúdos permanecem com largura fixa para terem uma boa aparência ou, se não puderem beneficiar de mais espaço.outras coisas são definidas como 100% se parecerem úteis.
Isso deve ser decidido com base no quão complicado é o design do seu site.O mais complicado, graficamente ou em termos de componentes (quantidade de divs de conteúdo), determinará o quão bem o seu site será dimensionado.Geralmente, você descobrirá que os sites da maioria dos designers gráficos não são escaláveis porque são graficamente intensivos.No entanto, o site informativo será dimensionado para fazer o melhor uso do espaço legível na tela e não será complicado para facilitar o uso.É uma questão de preferência, na verdade.
Acho que depende do conteúdo do site.Sites como SOFlow, Fóruns e outros sites enfatizam a leitura de muitos detalhes, portanto, ter mais espaço para fazer isso é um grande benefício para mim.Quanto menos rolagem vertical, melhor.
Porém, para sites um pouco menos exigentes no nível de leitura, até mesmo blogs ou sites de varejo onde você simplesmente exibe um produto individual, ter uma largura fixa permite manter as coisas mais concisas.
Sou um grande fã de designs totalmente fluidos.Quanto às reclamações de usabilidade sobre linhas de texto muito longas...se eles forem muito longos devido ao tamanho da janela do meu navegador, posso facilmente estreitar a janela e alargá-la.
Observação:se você usar a funcionalidade de zoom em seu navegador, um layout fixo comprime o texto, enquanto um layout fluido permite que ele ocupe toda a tela.
Talvez seja apenas um problema do navegador, mas é definitivamente um argumento a favor da fluidez
Larguras de parágrafo maiores que a sua exibição tornam um site completamente inutilizável.Você tem que balançar a barra de rolagem horizontal para frente e para trás para cada linha que você lê.Estou cursando web design na universidade e o livro chama os designs que se adaptam à largura da tela layout fluido.
Estou projetando meu projeto de classe grande usando layout fluido, é um pouco mais problemático do que largura fixa.Suspeito que nenhum dos outros alunos irá usá-lo, os marcadores não perceberão e nenhum dos sites profissionais que estamos imitando também é fluido.
Eu diria fluido o tempo todo. O usuário sempre pode voltar para uma janela de tamanho menor se não gostar do resultado de ampliá-la, mas não pode fazer nada em relação a um layout fixo.
Se você realmente odeia a ideia de seu site parecer feio por causa de algo que um usuário com uma tela grande faz, então pelo bem de tudo que é verdadeiro e bonito, pelo menos nunca use layouts fixos baseados em pixels! CSS tem essas unidades de tamanho relativo ao texto, como "em", que permitem que partes da sua página sejam dimensionadas com o tamanho da fonte, enquanto outras (como imagens) permanecem em seu tamanho "natural".
Por que não usá-los e dimensionar bem sua página sem depender do menos flexível "escalar tudo" do FF3, que é apenas uma solução alternativa para sites que usam um layout fixo baseado em pixels idiota?
Muitas pessoas estão dizendo coisas como "isso é uma questão de gosto" ou "Eu não gosto de fontes grandes na minha tela de alto pixel". O número de pixels não tem nada a ver com isso, e não é uma questão de gosto.É uma questão de DPI, que está diretamente relacionado à resolução da tela e ao tamanho da fonte.Se o seu layout for dimensionado junto com o DPI das fontes (sendo especificado em ems, por exemplo, e usando SVG), você terá sites muito bonitos e nítidos que funcionam perfeitamente com qualquer exibição.
Esta é uma questão de preferência de estilo.Ambos podem ser igualmente utilizáveis dependendo da implementação.Colunas também podem ser usadas, se a tela ficar larga o suficiente.Pessoalmente, acho irritante quando há uma única coluna estreita de texto na tela.
Editar para 2012:Sim, o seu site deve responder ao tamanho da janela em que está sendo exibido.
Existem muitos lugares para ler mais sobre isso, incluindo:
Provavelmente existe um projeto de compromisso entre projetos fixos e fluidos.Você pode criar um site fluido, mas definir a propriedade css max-width para 1024 (ou qualquer outro).Isso significa que você obtém um layout fluido quando o window width é menor que 1024 e fixed width quando é maior.
Assim, os usuários de tela estreita (como meu eee 701 de 800 pixels) não precisam girar a barra de rolagem horizontal para ler cada linha e os usuários de tela larga (que não sabem como redimensionar a janela do navegador) não obtêm 500 caracteres de largura , Parágrafos altos de 1 caractere.
