A melhor largura para cada resolução

Uma dúvida que muitas vezes aparece na hora em que inicia-se um novo projeto é qual a melhor largura usar para que o site não tenha aquela indesejável rolagem horizontal. Esta pergunta é claro tem ligação direta com o público-alvo do site e a sua resolução de tela mais comum: geralmente 800×600 ou 1024×768.

Outra questão à respeito de rolagem que não aparece com tanta frequência, mas que pode ser tão relevante quanto a largura do layout, é a sua ‘altura’, ou mais precisamente o posicionamento de elementos importantes acima da área de ‘corte’ da tela do browser, aqueles que ficarão visíveis logo no início da página sem que seja necessário que o usuário ‘role’ o conteúdo. É essencial ter em mente que esta área é a responsável por causar a primeira impressão no usuário com relação ao site, quando trata-se ainda da primeira visita desse usuário a importância do que está ali é ainda maior. É comprovado que conteúdos otimizados visando esse fato tem taxas de convesão até 40% mais altas e melhores taxas de pageviews/visita.

Então segue aqui uma tabela que eu costumo usar na hora de decidir estes dois fatores, largura e altura:

Resolução Largura máx [sem scroll] Altura [visível] Número de usuários atendidos
800×600 760px 420px 86%
1024×768 (recomendado) 960px 550px +79%
1024×768 (máximo) 1002px 600px 79%
1280×1024 1210px 855px 31%

Alguns bons links onde procurar mais informações sobre o assunto:
Jakob Nielsen – Screen Resolution and Page Layout
Screen Resolutions and Better User Experience – Smashing Magazine
Methodologie Browser Size Test

21 comentários em “A melhor largura para cada resolução”

  1. Oi Yuri, tudo bem?

    Cara, não sei te dizer qual seria a largura máxima ideal para 1140×900.. Na verdade, eu nunca pensei em fazer um site especificamente pra essa resolução já que, pelos últimos dados que tenho aqui, ela rsponde por apenas 4.32% do total de usuários.
    Mas se você encontrar alguma coisa, por favor, m envie. É sempre bom saber.

    Abraço!

  2. ôpa Maurício!
    Muito obrigado!! Bem legal saber que, por incrível que pareça, alguém se dê ao trabalho de acompanhar o que coloco aqui. Ainda mais quando é um amigo tão bacana!
    Valeu!!

  3. Blz Amigão? Seu blog é show estava pesquisando no google sobre resoluções de site e parei aqui desde então salvei nos favoritos para acompanhar queria uma dica sua e dos amigos que frequenta o blog,queria a dica de um programa que fosse igual ao frontpage já que uso ele muito bem,mais infelismente foi descontinuado pela microsoft,queria um programa parecido e em português se possivel manda ai essa dica veleu!!!

  4. Olá Dom, seu blog esta muitooo bom cara, eu estou aprendendo webdesign, ainda só sei o básico, mas pretendo me especializar. E seu blog esta me ajudando mto. Nem todos gostam de passar conhecimento, e vc faz isso. Parabens. Flw.!!

  5. Olá DOM.
    Percebi que você domina bem. Parabéns pelos trabalhos.
    Gostaria de sanar uma dúvida, se possível. Quando que faço um folder e um um texto junto com imagens, ao mandar a imagem no email (não como arquivo anexo), as letras aparecem sem um boa resolução. Como fazer com que também o texto aparece nesse folder com uma boa resolução.
    Obrigado… Edivaldo

  6. Muito bom esse post! Realmente é uma necessidade estudar a resolução dos layouts de internet. O tamanho pode ser um grande aliado no layout como também um grande vilão.

    Parabéns pelo blog!

  7. Onde eu trabalho sempre enviamos e-mail mkt com 600px de largura, mas a qualidade fica ruim, os textos ficam pouco legiveis. Como eu resolvo isso mantendo a largura em 600px?

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>