Por que a maioria dos sites é otimizada para visualização no modo retrato? [fechadas]

Eu simplesmente não consigo entender isso. Quase todos os monitores têm uma proporção em que a largura é muito maior que a altura e, no entanto, quase todos os sites são projetados exatamente para o contrário. Eu não sou realmente um desenvolvedor web e estou apenas experimentando coisas no momento, mas essa loucura me confunde !!!

Edit: O ponto não é que eu gostaria de limitar a altura de um site. O ponto é que eu gostaria que, de alguma forma, preenchesse todo o espaço disponível quando eu tiver meu 1920x1080 no modo paisagem.

Edit 2: Veja isto para entender o que estou dizendo

Há um limite para o quão longe o olho pode digitalizar sem perder a noção da próxima linha quando você chegar ao final da linha atual. Existem vários estudos ( incluindo este ) sobre largura e legibilidade ideais da linha.

Você pode reduzi-lo em graus, mas para saber o que é ótimo nesse momento, é necessário saber a que distância o usuário está do monitor. É por isso que a maioria das recomendações é para medições em ems, caracteres ou palavras. O tamanho em pixels depende do tamanho da fonte, mas o consenso geral ainda funciona.

Pessoalmente, eu teria muita dificuldade em ler um artigo se ele fosse formatado para usar toda a largura de uma tela de 1080p. Tenho certeza que você também. Nossas convenções atuais são derivadas das diretrizes de design de layout de impressão e as diretrizes de layout não foram alteradas materialmente. A única diferença é que podemos interagir com a página em um navegador.

Comentário adicional : (da pergunta colocada nos comentários)

Existem limitações para o que o HTML pode fazer por você em uma tela. Por um lado, não há páginas. Apenas barras de rolagem. Projetar um comportamento razoável de como um navegador deve exibir marcação é uma proposta muito difícil. As propriedades CSS3 para o layout de várias colunas ainda não saíram do estágio de recomendação do candidato. Existem hacks para brincar com ele descritos neste artigo em uma lista à parte . No entanto, ainda não está pronto para o horário nobre na maioria dos sites.

Contanto que seu conteúdo não exija rolagem, você deve estar bem. Assim que isso acontece, a abordagem de várias colunas pode apresentar alguns desafios sobre como o usuário interage com o site.

Comentário sobre o padrão atual De Facto :

Para abordar a maneira como você reformulou sua pergunta e o exemplo que você forneceu, entenda que o design da web precisa equilibrar vários requisitos potencialmente conflitantes - e ainda manter o site com aparência profissional. Para equilibrar as necessidades dos designers e dos clientes, a maioria das casas de desenvolvimento projeta uma resolução. Essa resolução é baseada em dados que podem estar prontamente disponíveis . Eles também podem ser baseados em registros históricos de tráfego da Web ou no conhecimento do ambiente de destino.

As larguras de tela mais comuns (1024, 1280, 1366) são próximas o suficiente para que, se você criar o menor (1024p) e centralizar o design na página, ele ainda ficará bonito nas outras dimensões horizontais um pouco maiores. É muito difícil alinhar tudo corretamente em qualquer formato, e muito menos ter que suportar vários formatos, dependendo da largura da tela. Os usuários de 1080p estão crescendo em número, mas ainda representam uma porcentagem muito pequena de todos os que têm para oferecer suporte.

Caso você esteja interessado, eu recomendo ler alguns dos artigos de design em "A List Apart" . Você começará a ter a ideia de que fazer o que deseja é mais difícil do que parece. Quando postei uma pergunta sobre o design para 1080p , as primeiras respostas iniciais foram "Tornar tudo maior". É algo que ainda não está no radar para a maioria dos web designers.

A maioria dos sites é mais alta do que larga, porque você pode rolar para baixo naturalmente para ler mais conteúdo. Eu pessoalmente odeio barras de rolagem horizontais. Eles devem ser abolidos!

Site ainda está em retrato, o site se estende para além da parte inferior da tela. Não há limite para a altura de um site.

Agora existem páginas da web infinitamente longas (Obrigado, AJAX). O que você faria se visse uma página infinitamente larga? (Eu caçava e matava o designer, clicar fora da página não é bom o suficiente, o designer deve morrer.)

Rolar para trás e voltar para cada linha levará um ao suicídio. É por isso que as pessoas criam aplicativos sofisticados, como virar páginas, para que você não precise rolar a página.

Depois de ler as respostas anteriores, noto que faltam vários pontos, então tentarei descrevê-los.

Implementação de colunas difíceis

Quando você fala sobre páginas de grande largura, imagino que você esteja falando de colunas de texto, como o que vê em um jornal "físico". Existem dois problemas com isso.

Primeiro, o HTML 4 e o XHTML 1.0 / 1.1 reais não se destinam a exibir texto em colunas. Existem hacks para o Firefox (e talvez outros navegadores normais), mas ele não funciona no Internet Explhorror.

Segundo, na implementação real do Firefox ou no futuro HTML 5, se o texto precisar ser exibido em colunas, você deverá especificar a largura da coluna e o número de colunas. Não é possível especificar a altura (por exemplo, a altura da página, menos a altura do cabeçalho e a altura do rodapé) e permitir que o navegador ajuste o número de colunas.

Torna praticamente impossível ter um layout utilizável em colunas com apenas barra de rolagem horizontal, sem a vertical.

100% de altura

O HTML / XHTML real destina-se a ajustar o tamanho dos elementos de acordo com a largura da página. É muito difícil usar a altura da página para métricas.

Isso significa que você precisará usar hacks JavaScript para exibir o conteúdo corretamente. Em outras palavras, para pessoas que não têm o JavaScript ativado, seu site ficará completamente inutilizável.

Navegando com a página de meia tela

Com telas grandes de 16: 9/16: 10, não é incomum trabalhar com duas janelas lado a lado ( Win+ ←/ Win+ →no Windows Seven). Isso significa que a janela do navegador terá uma largura pequena e uma altura grande.

Largura fixa versus dinâmica

Sua suposição de que a maioria dos sites é otimizada para exibição no modo retrato pode estar errada.

Primeiro, a maioria dos sites não é otimizada e é escrita por pessoas que não sabem nada ou pouco sobre desenvolvimento web em geral.

Segundo, existe uma diferença entre sites com largura fixa e sites com largura igual a uma porcentagem da largura da janela do navegador.

No primeiro caso, você pode perceber que a maioria dos sites não é otimizada nem para o retrato, nem para o modo paisagem. Geralmente, a largura é fixada em 1024, 800 ou menos, o que não faz nenhum sentido ao visualizá-las em uma tela de 24 polegadas com resolução 1920 × 1080.

No segundo caso, se você estiver visualizando a página no modo de tela cheia em uma tela de 24 polegadas, há chances de que este site seja exibido corretamente nos modos retrato e paisagem.

Exemplo: imagine um site com uma galeria de fotos. Em uma página, existem miniaturas e, quando você clica em uma miniatura, vê uma foto em grande escala. Se as miniaturas forem de flutuação, com uma largura dinâmica de uma página, serão exibidas no modo paisagem. Será especialmente agradável ver as fotos em grande escala.

Por que os monitores modernos são orientados no modo paisagem?

1. Formato de vídeo. O vídeo HD será melhor dimensionado para telas orientadas para paisagem.
2. Leitura. Seja da esquerda para a direita ou da direita para a esquerda, é mais fácil ler grandes blocos de linhas completas sem rolagem quando orientado no modo paisagem.

EDIT: Depois de revisar seu comentário e reformular a intenção da sua pergunta original, parece que você está mirando, por algum motivo, o layout de duas e três colunas mais comum hoje em dia. Para isso, um breve resumo da história do site:

Por que os sites são otimizados para visualização no modo retrato?

Eu não acho que eles sejam otimizados para isso. Geralmente, é um compromisso entre ter certos aspectos sempre disponíveis, certos aspectos frequentemente disponíveis e certos aspectos disponíveis apenas dentro de um determinado contexto. Na melhor das hipóteses, você poderia chamar um compromisso ideal.

Ser capaz de colocar a navegação principal e esperada e o conteúdo secundário em cada página juntamente com o conteúdo específico do contexto é o motivo pelo qual os layouts de duas e três colunas são tão difundidos quanto são. Nos dias anteriores da Web, muitos sites experimentavam layouts que ofereciam o que tentava aparecer como layouts de coluna única, usando listas de navegação dinâmicas (ou menus, como você deseja vê-los), que se ocultavam e expandiam a área de leitura para o conteúdo principal. Mas foi um desafio em duas partes: a) desafios técnicos na falta de compatibilidade entre navegadores; b) usabilidade: era frequentemente vista pelos usuários, mesmo que (um grande se) o desafio técnico fosse superado, como um jogo de caça não intuitivo ou desnecessário (para navegação) e destruição (satisfação da experiência porque algumas soluções modificavam o comportamento de contexto padrão do cliques do mouse).

Para superar isso, a maioria dos sites adotou um padrão defacto e aceitou as consequências. Duas colunas exibindo navegação em uma e conteúdo na outra, ou uma terceira coluna é adicionada para que o conteúdo de navegação secundário e não principal sempre possa ser exibido (seja sua ajuda relacionada ao contexto, notas ou publicidade ou, mais recentemente, fluxos de comunicação mostrando pessoas ao vivo atividade relacionada ao site ou contexto). O conteúdo real do contexto está preso no meio.

Isso é chamado de layout de largura fixa. Existem layouts de largura total ou também chamados de fluidos. Há uma razão pela qual a largura fixa é usada. Uma é que a resolução do seu monitor afeta a usabilidade. Se você tem um monitor enorme como eu, com 27 ", o site ficaria horrível. Todo o texto, fotos e tudo seriam tão espalhados que seria difícil para mim entender o layout ou o site. Um layout fixo permite um design bonito. O layout fluido é usado principalmente na lista ou no tipo de dados dos sites. Por exemplo, o eBay usa o layout fluido em suas listagens porque proporciona uma melhor experiência. Os fóruns também podem se beneficiar do layout fluido. Mas blogs, fotos criativas, ou sites comerciais se beneficiam muito melhor com sites de largura fixa.

Não sei ao certo, mas meu palpite é que a maioria dos "documentos" impressos são projetados para serem impressos em orientação retrato, e muitas pessoas ainda criam sites como "documentos" - isso pode ser uma coisa cultural? Outra explicação possível é que a largura do monitor varia mais que a altura do monitor ...

Suponho que, em geral, é desencorajado a postar uma resposta no segmento que não vê atividade há muito tempo. Sinto, no entanto, que existem algumas coisas relevantes que ainda não foram mencionadas.

Primeiro, deixe-me mencionar a seguinte extensão do Firefox que descobri há alguns meses: Column Reader

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

Por que rolamos verticalmente?

Para comparação: considere um idioma escrito em colunas verticais. Para um idioma como esse, os atuais monitores de tela ampla são ideais. É assim que funciona: você rola perpendicularmente à direção de suas linhas. As páginas dos livros estão no formato retrato porque nossas linhas são horizontais.

Como foi apontado nas respostas anteriores: os recursos de refluxo dos mecanismos de layout do navegador são ajustados para refletir verticalmente.

capacidade de várias colunas

A equipe de desenvolvimento de um navegador pode optar por adicionar o recurso de várias colunas da seguinte maneira: Primeiro, renderize a página inteira como uma única coluna, depois corte-a em tiras com a altura de pixel do espaço disponível na janela e exiba essas tiras lateralmente. ao lado. Mas qual a largura das colunas? Mesmo quando uma largura muito pequena é usada para o texto real, geralmente a página codifica uma determinada cor de fundo para toda a largura do espaço disponível na janela.
Em seguida, o mecanismo de renderização deve ser seguro e alocar todo o espaço horizontal para uma única coluna.

É possível que os designers da Web implementem um layout refletor de várias colunas?
Isso traria sérias dificuldades. Você deve obter a altura e a largura do espaço disponível nas janelas e fazer o corte e a organização de tiras em colunas em Javascript. Então você deve decidir o que fazer com as imagens cortadas em duas partes.

Lidar com esse tipo de coisa é o que faz um mecanismo de layout. Tentar criar uma biblioteca Javascript que facilite o refluxo do layout de várias colunas é criar um mecanismo de renderização em Javascript. Isso está criando uma plataforma em uma plataforma.

Tamanho do monitor

Acho frustrante que, na verdade, os monitores de computadores tenham diminuído nos últimos dois anos. Os monitores grandes tinham 1200 pixels de altura, atualmente apenas 1050. Sim, são mais largos, mas para o texto esse espaço não pode ser utilizado.

Além disso, na orientação retrato, esses monitores são muito estreitos.
Eu tenho uma configuração de monitor duplo, com os dois monitores na orientação retrato, os dois monitores são 1200x1600px. Para mim, esses 1200 pixels são no mínimo.

Uma declaração condicional em CSS

Uma observação sobre layouts de largura fixa.

Adoro o comando CSS que permite ao web designer acomodar uma grande variedade de larguras, evitando barras de rolagem e mantendo a legibilidade: "max-width". (Existem quatro comandos como esse: largura mínima, largura máxima, altura mínima, altura máxima). Para uma div que contém texto, especifique uma largura máxima de, digamos, 65em.

Você recebe um if / else.
Se o espaço disponível for menor que 65em, o texto será refletido de acordo: nenhuma barra de rolagem horizontal Se o espaço disponível for maior que 65em, a div contendo será definida em 65em.

Os monitores widescreen realmente decolaram nos últimos 2 anos - eles costumavam ser as opções mais caras.

Em termos de design, sempre foi visto que ter uma página da Web (documento) demorava muito para que um usuário tivesse que rolar para baixo é muito superior a fazer alguém rolar por alguns motivos. Primeiro, é assim que a maioria dos documentos de computador costuma funcionar, por isso é um padrão mais "normal"; você tem uma chave de página para baixo, mas não uma página de chave. Segundo, temos rodas de mouse quase onipresentes hoje em dia, portanto, rolar para cima / baixo é uma atividade muito fácil, muito mais fácil do que rolar.

Por fim, como você escolhe a resolução widescreen que deseja obter - minha área de trabalho é 1920x1080; meu laptop é 1440x900. Para qual você projeta?

Embora seja verdade que a maioria dos monitores possui orientação de paisagem que está sendo vendida hoje, você também deve levar em consideração que, ao criar um site, não há como saber exatamente qual resolução de tela o visualizador usará. Ainda existem 15% dos usuários da Internet que operam com uma resolução de tela de 1024 de largura ou menos. Isso não deixa muito espaço para expansão horizontal antes que você precise rolar para ver as informações. Além disso, alguns usuários não navegam na Internet em uma janela totalmente maximizada. A única solução para esse problema é desenvolver um design dinâmico com base no tamanho da janela do navegador. Se você já tentou fazer isso, seria muito hesitante em tentar novamente, a menos que seja absolutamente necessário, pois é uma dor real. Existem muitas outras razões para ter uma largura menor, como já foi mencionado.

Existem várias razões:

• Como a maioria dos documentos é tradicionalmente a proporção de retrato, a Web preserva isso.

• É mais fácil ler linhas de texto mais curtas. Não tenho uma citação, mas é um conselho muito comum de design, a ponto de ser um padrão mais do que uma diretriz.

• Um design que favorece o estreito é mais flexível. Gosto de janela do navegador para apenas metade da tela inteira do monitor de tela ampla e colocar outra coisa (geralmente um editor de texto ou outra janela do navegador) ao lado. Só porque eu posso ter uma página da Web com 1920 pixels de largura não significa que eu sempre quero que ela seja. Na verdade, é um pouco presunçoso de um web designer fazer suposições sobre como eu vou (ou devo) visualizar sua página. Dá-me flashbacks ruins para "Esta página é melhor visualizada em 800x600 no IE6".

• Uma escolha melhor seria um design líquido que se adapta a qualquer largura, e o CSS faz com que funcione bem para texto (na maioria das vezes, na maioria dos navegadores modernos, talvez). Mas imagens, vídeo incorporado, flash e outros objetos incorporados modernos sempre estragam esse tipo de design sem muito trabalho. Dada a escolha entre um design de dimensionamento flexível que leva muito tempo para se adequar a um design experimentado e verdadeiro de largura fixa estreita, muitas pessoas optam pelo caminho mais fácil (mais barato).

• A opção mais flexível é algo como o iGoogle, uma tela de Web Parts ajustável pelo usuário. Então, seu texto pode ser tão largo ou estreito quanto você quiser, com blocos de texto e imagens organizados como você deseja. Agora, gostaria que você imaginasse o pesadelo de todos os sites que você visita, exigindo personalização antes que seja legível.

Por enquanto, o padrão de web design para sites é o desenvolvimento em 960px de largura para acomodar uma resolução de tela de 1024px e superior (sem barra de rolagem horizontal). Esse é o requisito mínimo, pois nem todo mundo usa um novo monitor brilhante de 24 polegadas. (pense em tablets e netbooks que são novos hardwares com pequenas resoluções)

Lembre-se de que a resolução de um site é impactada pelo público-alvo e deve ser adaptada de acordo.

Também em termos de usabilidade, as linhas de texto devem ter entre 11 e 14 palavras de largura (pode ser mais se você adaptar a altura da linha) para que nem todo site possa lidar com design fluido.

Na melhor das hipóteses, se você não quiser dar a seus visitantes a sensação de que a página fora da zona de conteúdo não está vazia, você pode adicionar faixas de textura / cor que se estendem além e que se adaptam ao tamanho da tela do usuário. (como em http://www.cnn.com/, que se aplica apenas ao cabeçalho, mas você pode fazê-lo em toda a página)

Por que a maioria dos sites é otimizada para visualização no modo retrato?

Por que imprimimos papel no modo retrato quando a paisagem também é uma opção perfeitamente viável?

Como muitas pessoas disseram, é mais fácil ler um número maior de linhas curtas do que ler duas ou três linhas longas.

Além disso, se você preenchesse 1280 * x pixels de conteúdo, a página da Web ficaria cheia e ninguém saberia o que precisa ser abordado. Uma página da web deve executar uma tarefa específica, não TODAS as tarefas.

As tendências da Web 2.0 nos ensinam a colocar menos informações em uma página e tornar a frase de chamariz clara e concisa. Essa filosofia de design comumente aceita é exatamente o oposto do que você está sugerindo.

Existem MUITAS razões para desenvolver uma resolução 1024, mas acho que o fator de desordem é um dos mais importantes.

Tenho notado que você está usando o que parece ser o Windows 7, então a resposta é: Win+←

Em uma observação séria: o principal motivo pelo qual os sites são otimizados verticalmente é que é mais fácil codificar um layout de largura estática em CSS e parecer correto em vários navegadores em várias plataformas. As larguras de fluido são usadas ocasionalmente, mas não se prestam à legibilidade.

Ao assistir a um filme ou jogar um jogo, é ótimo usar todo o seu espaço horizontal com coisas, mas com a leitura, você realmente quer apenas uma pequena coluna de texto para que os olhos possam escanear naturalmente sem a necessidade de virar a cabeça. Adicionar mais porcarias à esquerda e à direita de uma página da Web tenderá a distrair o conteúdo principal da página; portanto, muitos designers apenas deixam em branco para ter um espaço em branco atraente.

Além disso, o fato de você ter um bom monitor não significa que a maioria das pessoas tenha um bom monitor de tela ampla. Um ótimo recurso para verificar os tamanhos de layout é o tamanho do navegador do Google .

Seu monitor está orientado incorretamente. O monitor de um programador deve ser mais alto do que largo, em retrato e não em paisagem.