Existe um tamanho padrão para a largura de um site em uma maquete? Qual é esse tamanho? Por quê?
Respostas:
Inicio a maioria dos meus modelos com 1200 px de largura, mesmo que eu esteja projetando para uma resolução de 1024 px. Eu configurei guias dentro da maquete para 1000px. A altura pode variar. A razão pela qual eu amplio meu arquivo de maquete é ver como o design se sente com o espaço para respirar em torno dele. Atualmente, a maioria das pessoas usa mais de 1024 px.
Existe uma largura padrão para o design de modelos de páginas da web?
Sim não Talvez?
Era uma vez (veja abaixo) o design da web em grande parte tentou criar uma única exibição que se encaixasse razoavelmente bem na maioria das telas. Nos últimos cinco anos, isso mudou drasticamente com a adoção do Responsive Web Design (RWD).
O RWD é um princípio de design que permite que eles se encaixem razoavelmente bem em qualquer dispositivo, independentemente do tamanho do dispositivo.
No desenvolvimento da Web, as consultas de mídia geralmente são usadas para aplicar diferentes conjuntos de estilos às páginas da Web, dependendo de vários fatores. Alguns fatores comuns incluem:
Como os estilos podem ser direcionados para tamanhos de tela específicos, não é incomum criar vários conjuntos de designs direcionados a intervalos específicos.
Para ser claro, não existem "padrões" definidos. Não há órgão diretivo ou organização que diga que "os projetistas devem fazer desenhos seguindo estas diretrizes de tamanho", porque no final é uma decisão judicial.
Com isso dito, a indústria de desenvolvimento da Web criou organicamente um conjunto de pontos de interrupção comuns que ocorrem repetidamente.
Os pontos de interrupção típicos são para a largura da tela atual e geralmente são:
unidades em px
A razão para esses números específicos é bastante mundana. O iPhone original tinha uma tela com dimensões de 320 × 480; o iPad original tinha uma tela com dimensões de 768 × 1024; 1600 × 1200 são comuns para resoluções de tela maiores.
Embora seja comum ver modelos em alguns ou todos esses pontos de interrupção, também é comum precisar fornecer várias renderizações de uma página específica, mostrando pontos de inflexão intermediários do design.
Uma composição de largura de fluido que mostra itens empilhados com 768px de largura pode precisar incluir um design para 900px, onde os itens foram alternados para duas colunas. Se você achar que precisa fornecer muitos conjuntos de designs para esses pontos de interrupção intermediários, eu recomendo projetar componentes individuais e mostrar os pontos de interrupção em que um componente é alterado por componente, sem incluir o restante da página na maquete.
Isso também ajuda a evitar armadilhas comuns de design onde componentes específicos da interface do usuário desaparecem ou não são congruentes entre os pontos de interrupção.
A seguir, é apresentada a versão mais antiga desta resposta, que eu mantenho para o bem da posteridade, mas ela não é relevante há algum tempo
Estou surpreso que ninguém tenha mencionado isso ainda:
O Google tem uma boa ferramenta de desenvolvimento chamada
Deveria responder sua pergunta sozinho.
Tenho algumas notas sobre as tendências atuais:
Atualmente, a grande maioria dos usuários possui resoluções de 1024x600 (tablet / netbook) ou maiores. Você deve se lembrar de remover 24pxas barras de rolagem, o que deixa uma largura agradável de 1000px. Quanto à altura: os usuários da Web são muito bons em rolar verticalmente, pois se acostumaram a rolar as rodas nos ratos. A altura inicial é importante principalmente para as primeiras impressões.
Os usuários não são tão bons em rolar horizontalmente, portanto, não é recomendável fazer layouts maiores que 1000 px.
Também muitos usuários com telas maiores, não use sua tela inteira para o seu navegador web. Especialmente agora que o Windows 7 inclui uma funcionalidade simples de arrastar e encaixar para soltar uma janela na metade da tela.
Em suma:
Resposta curta: 775x400 para 800x600 e para 1024x768 use 1000x500.
Resposta longa: Você nunca pode ter certeza de que a sua apresentação ficará bem no computador cliente (pode ter um sistema operacional diferente, navegadores, monitor calibrado diferente ou uma resolução mais baixa com fonte grande configurada para ler melhor). Por esse motivo, costumo mostrar sempre a apresentação no meu computador, se puder.
Se eu não conseguir mostrá-lo no meu PC quanto ao tamanho, eu uso essas minhas regras pessoais (não tome minhas medidas como medidas sagradas, todo mundo tem o seu):
Como tamanho seguro, é bom otimizar para 800x600 (removendo a barra de rolagem e a barra superior, eu uso 775x400 como "acima da linha"). Hoje em dia, com tela mais barata e com padrão mais amplo, comecei a desenhar para 1024x768 (1000x500)
O importante é otimizar não para a altura, mas para a largura. A altura é solucionável com um simples rolagem do mouse; com a largura, se você não possui um mouse mac, não pode rolar horizontalmente para visualizar mais informações. É bom saber, no entanto, onde mais ou menos poderiam ser posicionados na linha inferior da tela, mesmo que seja impossível determinar com precisão.
NOTA: Eu uso essa altura baixa mesmo em 1000px porque as pessoas tendem a ter muitas barras de rolagem adicionais no navegador básico (como o GoogleRank, por exemplo, favoritos ou muitos outros), por isso sempre gosto de projetar para a pior situação possível.
Ps desculpe pelo meu inglês ruim :)
Temos um programa de rastreamento que nos informa informações sobre nossos usuários. Mais da metade está em 1024x768. Então, eu uso isso como o tamanho do monitor "padrão".
No entanto, essa não é a sua área ativa do site - as pessoas têm barras laterais, nem sempre abrem a largura total da janela do navegador etc.
Eu gosto do sistema de grade 960 . Os números são flexíveis e o site oferece muitos modelos para download. Eu uso isso para minhas maquetes, e todo mundo ficou muito feliz até agora.
Eu precisaria procurar estatísticas para me fazer backup (como esta postagem no blog da SO ), mas 1024x768 assumiu ou está assumindo o denominador comum padrão para a resolução da tela. Projecto maquetes da web para o público em geral com uma largura de 1000 px para contabilizar barras de rolagem e bordas de janelas com uma resolução de 1024 px de largura. Para públicos mais específicos, Pekka está certo em seu comentário. Descubra qual é a norma para o público-alvo.
Hoje, o tamanho do navegador é uma questão complicada, porque as pessoas estão usando dois tipos de dispositivos, computadores com resoluções cada vez mais altas e telefones com resoluções relativamente baixas.
Se você está transformando um site em um site, a maioria dos computadores hoje (a maioria tem 90% ou mais) tem uma resolução mínima de 1024. Se você quer um pouco menos de computadores, mas ainda assim uma boa porcentagem de 1200 também está nesse intervalo.
Se você está criando um site para celular, a maioria dos telefones atinge 480px para navegação horizontal, mas a maioria deles também possui algum tipo de sistema de renderização para sites maiores.
A questão do tamanho diz respeito ao seu próprio público, se o seu alvo é um monte de designers, você pode ter um site maior, se pessoas de meia-idade procuram um seguro de carro novo do que deveria trabalhar um pouco menor e se é por telefone usuários a olhar enquanto estão em seus telefones, ainda menores.
Depende totalmente do seu site, como regra, eu tenderia a não exceder 1000 para esses clientes em máquinas antigas. No entanto, estudos estão mostrando agora que o design para 1200 agora é aceitável no mundo do design, portanto é definitivamente uma boa ideia.
Seu plano deve ser atingir o menor denominador comum e, se esse for o Joe Dinosaur em uma máquina Windowsx 800x600, então é com isso que você deve atender.
Também depende totalmente do design do seu site. Atualmente, estou projetando um site para minha agência e ele terá 800 de largura, ou seja, de preferência, para não atender a ninguém específico.
Infelizmente, não há tamanho padrão, pois as páginas da web agora são acessadas em vários monitores. Embora esteja do lado mais seguro, pesquise nas resoluções mais populares (por exemplo, 1024x768) e projete com base na popularidade.
A resposta é: Não, não existe um 'padrão'.
Eu recomendo usar 960px para a largura do seu modelo, porque a maioria das resoluções de tela são 1028px, portanto a barra de rolagem não aparecerá e você verá o plano de fundo que você usou também.