Resolução recomendada do website (largura e altura)? [fechado]

Acho que foi má ideia. O objetivo de separar o conteúdo do layout era permitir que sua página web fosse exibida em qualquer tipo de navegador. A introdução de limitações artificiais, como o tamanho mínimo do ecrã, limitará o seu mercado. Dito isto, acho que todos os ecrãs devem poder exibir 1024x768. Mas e os navegadores que rodam em iPhones ou outros dispositivos com dificuldade de tela, ou mesmo aqueles que não usam todo o seu desktop para o navegador? Em resposta à sua pergunta específica, Não, Não acredito que exista um padrão para uma área de exibição mínima ou comum em navegadores.

Forçar o utilizador a deslocar-se horizontalmente é uma grave transgressão UI. A menos que você esteja construindo especificamente um site para uma população com um tamanho de tela conhecido, você está mais seguro garantir que o seu projeto funciona com telas tão pequenas como 800 pixels de largura (cerca de 8% da população de surfing da web, se a memória não me falha). É sensato fazê-lo adaptar-se bem às telas maiores, mas não à custa das pessoas que ainda surfam a 800x600. Eis outra coisa a considerar.: nem todo mundo executa seu navegador em tela cheia (Eu não). Então a idéia de que se é Ok para projetar para um específico (e grande) "tamanho da tela" realmente não funciona por uma série de razões.

Actualização em 15/12/2010: quando respondi à primeira pergunta, 800 pixels era uma resposta adequada. No entanto, neste momento, eu recomendaria 1024 pixels de largura (ou 960, como outra pessoa aponta). A tecnologia avança...

Aqui estão as Estatísticas da visualização do navegador em 2008: http://www.w3schools.com/browsers/browsers_display.asp

Cerca de 50% dos utilizadores ainda estão a utilizar 1024x768. Se você quer que o seu site para olhar agradável em resoluções elevadas use layout flexível.

Existem normas industriais para as larguras (pelo menos de acordo com o yahoo). As suas larguras suportadas são 750, 950, 974, 100%

Há vantagens destas larguras para as suas grelhas predefinidas (colunas layouts) que funcionam bem com as dimensões padrão para anúncios, Se você fosse incluir algum. Conversa interessante que vale a pena ver.

Ver base de YUI

Aqui está uma ferramenta incrível, Tamanho do navegador do Google Labs.

Eu diria que só se deve esperar que os utilizadores tenham um monitor com resolução 800x600. O governo canadense tem padrões que listam isso como um dos Requisitos. Embora isso possa parecer baixo para alguém com um monitor widescreen extravagante, lembre-se que nem todo mundo tem um monitor agradável. Ainda conheço muita gente a correr em 1024x768. E não é nada incomum encontrar alguém que corre em 800x600, especialmente em cafés baratos enquanto viaja. Além disso, é bom tem que fazer a sua janela do navegador Tela cheia se você não quiser. Você pode fazer o site mais amplo em monitores mais amplos, mas não fazer o usuário rolar horizontalmente. Nunca. Outra vantagem de apoiar resoluções mais baixas é que seu site vai trabalhar em telefones celulares e Nintendo Wii é muito mais fácil. Uma nota com pelo menos 1280 de largura, devo dizer que é muito exagerada. A maioria dos 17 e até mesmo os meus monitores não widescreen de 19 polegadas só suportam uma resolução máxima de 1280x1024. E os 14 o laptop widescreen de polegada que estou a digitar agora tem apenas 1280 pixels de diâmetro. Eu diria que a maior resolução mínima que você deve lutar é 1024x768, mas 800x600 seria ideal.

Todas as respostas até agora falam sobre monitores de desktop, mas estou a usar o fluxo de pilha no meu iPhone e acho que não deve excluir nenhuma plataforma móvel, apontando para 1024 ou 1280 pixels horizontais. Marque a sua página para que o navegador saiba o que tudo isso significa e torná-lo utilizável virá de graça, mesmo em leitores de tela e outro kit que você ainda não pensou.

É melhor não visar nenhuma resolução específica, mas adaptar-se facilmente a muitas resoluções diferentes.

As diretrizes que usamos, que parecem ser bastante amplamente utilizadas e são apoiadas pelos números que recebemos do Google Analytics, são para projetar o site para que ele funcione em uma tela de 1024 pixels de largura e 768 pixels de altura (1024x768 e 1280x800 são as resoluções mais comuns que vemos, representando pelo menos 70% de todo o tráfego).

É por isso que você vê muitos sites (este incluído) que usam uma coluna central com aproximadamente 1000 pixels de largura e com o conteúdo mais importante no top 500-600 pixels por isso está acima da dobra ao ser visto em telas deste tamanho.

Usando um 1000 pixel de largura de layout funciona muito bem em tamanhos de tela de até cerca de 1680 pixels na largura (normalmente tão alta como você vai ver em computadores portáteis, exceto as de 17" queridos), mas começam a parecer um pouco bobo em 1920 pixel de largura (para high-end computadores, normalmente estações de trabalho), no entanto, essas resoluções muito altas não são responsáveis por uma grande porcentagem de tráfego na internet - 2% ou menos (por outro lado, se você tem um público especializado como este site, a figura com altas resoluções pode ser um pouco maior).

Embora a melhor largura possa atingir 1024, terá de ajustar a altura para ter em conta as várias opções do navegador (barra de navegação, barra de favoritos, barra de Estado, etc.) e conta para a configuração da barra de Tarefas. Baixará rapidamente o 768 para cerca de 550.

Seja qual for o tamanho do seu navegador de destino, certifique-se de incluir espaço para as barras de ferramentas do navegador, barras de estado e barras de posicionamento como acima. O Internet Explorer (IME) muitas vezes tem mais de 100px de espaço vertical em barras de ferramentas e barras de Estado. Normalmente, se eu estiver filmando para 1024 x 768, eu tentaria criar um design de cerca de 960-980px de largura e 600px de altura para ser Seguro. Dessa forma, você acomoda o deslocamento se necessário e algum espaço branco agradável (se o design o requer). Eu recomendo grelhas YUI para casos em que é necessário visar tamanhos específicos:

Grelha YUI

Recebo muitas perguntas de designers sobre não só largura, mas que altura usar para 'manter tudo acima da dobra'. Aqui está uma resposta que eu dei recentemente -

Para largura, eu não sou um designer, mas eu li que 960px largura é o caminho para ir hoje em dia, porque ele se presta a ser dividido em colunas que parecem agradáveis, e se encaixa bem dentro da maioria das exibições. Se você pode, projetar um layout líquido-mas isso nem sempre é prático, dependendo de seu designer, suas habilidades CSS, o imagens e a quantidade de texto.

(você sempre quer que haja 65-80 caracteres por linha, com uma altura de linha de cerca de 1,15). Esta é a largura óptima da coluna para o texto, e provou-se ser muito mais rápida e agradável de ler do que colunas muito largas ou estreitas)

No que diz respeito a 'acima da dobra', eu só tenho que advertir contra o uso de qualquer um desses conceitos na web. A rolagem Horizontal pode e deve ser evitada, mas a rolagem vertical é algo que não se pode evitar a 100%. Tudo o que posso dizer você é que em um display 1024x768 (pelo menos 95% dos usuários têm isso ou mais) você deve estar OK com um bloco fixo 600px alto. Mas existem muitos formatos de exibição diferentes lá fora, o navegador chrome pode ocupar um monte de espaço, e nem todo mundo maximiza a janela do navegador.

Aqui estão alguns outros sites que dizem mais ou menos a mesma coisa, mas planejar para obter absolutamente tudo 'acima da dobra' para todos é difícil porque então você pode ter apenas 400px ou assim, de acordo com o real estatistica. E finalmente um artigo longo e bom que vai em grande detalhe (eu postaria mais, mas assim diz que eu sou muito noob) - Como desenhar para tamanhos de navegador - baekdal.com

Eu pessoalmente sempre fiquei preso à largura máxima de 1000px, centrado no meio da Página (via margem esquerda/direita: auto).

Se está a correr a menos de 1024x768, está na hora de actualizar. Seriamente. Estamos quase em 2010. Pode comprar monitores LCD bargain bin com uma res nativa de 1280x1024.

Sugiro que dê uma vista de olhos às perguntas dos media. Esta é uma nova adição útil ao CSS que realmente faz tanto sentido, você gostaria de saber por que isso não foi implementado waaay mais cedo. Basicamente, permite-lhe atingir atributos do navegador (como Max e Min-widths) directamente através do CSS e ramificar o seu código de layout a partir daí. Semelhante à criação de uma folha de estilo de impressão, você pode criar o seu ambiente de trabalho e layouts móveis em paralelo no mesmo arquivo, que chuta ass para o desenvolvimento.

As disposições flexíveis ou líquidas desenham um pouco, no entanto, por exemplo, se usar imagens de fundo que têm de corresponder à imagem de fundo do corpo.

Eu preferiria fazer diferentes layouts css para o site e fazê-los aplicar dependendo da resolução do usuário, ou se isso não for possível (não ter digitado isso ainda), torná-lo uma opção choosable.

Muito bem, vejo muita desinformação aqui. Para começar, criar uma página web usando uma determinada resolução, digamos 800x600, por exemplo, faz com que a página renderize corretamente usando essa resolução apenas! Quando essa mesma página é exibida no laptop de outra pessoa, ou no monitor home PC, a página será exibida usando a resolução atual dessa tela, não a resolução que você usou ao projetar a página. Não crie páginas web para uma resolução específica! Existem demasiadas proporções de aspecto diferentes e resoluções de tela para esperar um cenário de "um tamanho se encaixa a todos", que com o web design não existe. Aqui está a solução: Use as consultas de mídia CSS3 para criar um código adaptável à resolução. Aqui está um exemplo:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

O que acabamos de fazer foi especificar três conjuntos de estilos que rendem em diferentes resoluções. No caso do nosso exemplo, se a resolução de uma tela é maior que 800px, o CSS para 1024 será executado em vez disso. Da mesma forma, se a tela que exibe o conteúdo foi 1224px, o 1280 seria executado desde 1224 é maior que 1024. O site em que estou a trabalhar funciona em todas as resoluções 800x600 a 1920x1080. Outra coisa a ter em mente é que nem todos os monitores com a mesma resolução têm as mesmas telas de tamanho. Você poderia colocar 15.4 laptops lado a lado, enquanto ambos parecem o mesmo, ambos poderiam ter resoluções drasticamente diferentes, uma vez que nem todos os pixels são do mesmo tamanho em diferentes telas LCD. Então, use consultas de mídia, e comece a criar o seu site com uma tela laptop com alta resolução, particularmente 1280+. Além disso, crie cada consulta de mídia usando uma resolução diferente em seu laptop. Você poderia usar suas configurações de resolução no Windows para ajustar 800x600 e criar uma consulta de mídia naquela res, e então mudar para 1024x768 e criar outra consulta de mídia nessa res. eu poderia Continuar e continuar, mas eu acho que vocês devem obter o ponto.

Actualização: aqui está um link para usar as consultas multimédia que irão ajudar a explicar mais, concepção inovadora da Web para dispositivos móveis Dispositivos com pesquisas multimédia

Esse tutorial irá mostrar-lhe como desenhar para todos os dispositivos. Há também tutoriais para consultas de mídia especificamente. Eu desenvolvi todo o site para renderizar em todos os dispositivos, Todas as telas, e todas as resoluções sem subdomínios, e apenas CSS! Ainda estou a trabalhar no apoio a tablets e smartphones. O site torna perfeitamente em qualquer laptop, ou sua TV LCD 50inch, e muitas páginas funcionam perfeitamente em todos os dispositivos móveis. Se você colocar todo o seu código na página, então as tuas páginas vão iluminar-se depressa! Além disso, certifique-se de prestar atenção à discussão nesse artigo sobre o CSS "background-size: cover;" ou "contain" propriedades, eles vão fazer o seu background graphics fluid e capaz de renderizar perfeitamente em todas as resoluções.

Siga os tutoriais dos sites e você pode fazer uma única página web que renderiza em tudo e qualquer coisa!

Tente apontar para 1024 como largura mínima. Tente como ele olha para 800, mas não se preocupe muito em fazer isso funcionar. Em 800x600 quase nenhum dos principais sites vai funcionar, então as pessoas que trabalham nessa resolução vão ter problemas o tempo todo de qualquer maneira.

Se você vai para um layout líquido, certifique-se de que o texto não fica muito largo {[[5]}, porque quando as linhas são muito longas, elas se tornam difíceis de ler. Essa é a principal razão pela qual a maioria dos sites têm uma largura fixa.

Eu viso os monitores de 1024 pixels (mas não use 100% desse espaço). Desisti daqueles com 800x600. Prefiro punir alguns com hardware desactualizado, fazendo-os rolar se for preciso, em vez de punir todos com equipamento novo, desperdiçando espaço.

Acho que depende do seu público e da natureza da sua aplicação.

Em última análise, isto não é uma questão de padrões ou melhores práticas para marcar, mas sim conhecer o seu público e certificar-se de que o seu site faz o que você quer que ele faça.

É mais importante considerar a largura da janela do navegador do que a resolução do ecrã -- Você não pode assumir que todos os pixels de uma visualização serão atribuídos ao navegador (e mesmo que seja, você tem que subtrair o navegador chrome). Se tiver acesso a análises que relatem a largura do navegador (N. B. largura do navegador, não Resolução do ecrã) então preste muita atenção.

É bom tentar acomodar a maior gama possível de viewports, mas há algumas limitações. Alguns desafios podem ser tratados com tipos de mídia CSS , outros não. alguns podem ser tratados com layouts de fluidos. Mas layouts fluidos não podem funcionar em todas as situações, dependendo do tipo de informação a ser exibida, comprimento da linha, conforto de leitura, etc.Alguns esquemas de fluidos não funcionam. displays largos. A maioria quebra quando dimensionada abaixo de uma certa largura, etc. Por Mais que eu gostasse de desenhar para os viewports ~960 pixels e para cima, nem sempre o consegues fazer. Então, em alguns casos, ainda é mais seguro projetar para verports Onde as conversões são um problema -- e você tem um layout largura -- é melhor que você tenha uma boa razão para colocar qualquer coisa que o usuário precisa clicar, a fim de que a caixa registadora para ir "ka-ching" em qualquer lugar a leste do 760º pixel. Idem para a navegação primária. Finalmente, testa a tua disposição em tudo o que conseguires. Grande. Pequeno. Trabalho. Portatil. Trabalho. Não há substituto.

Eu só peguei uma amostra de resoluções de tela de todos os sites de clientes que eu tenho acesso a este inclui mais de 20 sites em mais de 8 indústrias aqui estão os resultados:
alt texto http://unkwndesign.com/so/percentScreenResolutions.png
Com base nisso, eu diria para garantir que fica bem em 1024x768 como essa é a maioria aqui em um tiro no escuro. Também não se preocupe com a altura tanto, no entanto, tente evitar fazer a maioria das páginas mais, em seguida, 1-2 páginas impressas em seu Tamanho de letra padrão, a maioria das pessoas não vai ler uma página tão longa, e se um usuário instalar uma barra de ferramentas que ocupa espaço vertical, a minha preferência pessoal é que é o seu problema, mas eu não acho que é para grande de um negócio.

*note-se que a percentagem é de 100,05% devido aos arredondamentos.

Tenha em mente que quanto maior a resolução, menor a probabilidade de o navegador da internet ser maximizado.

E alguns navegadores também têm barras laterais. Depende do que quiseres desenhar, mas eu escolheria uma largura variável que não se quebre em 800-900 largura.

A altura não é um problema.

[[1]}o SBE disse que "você sempre quer que haja 65-80 caracteres por linha". Isso não é verdade. Wikipedia, por exemplo, pode ter 180 caracteres por linha. Ou era suposto ser um site em particular?