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 thoughts on “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. Olá Domênico! Gostaria de saber se vc pode me ajudar nesta fase inicial, por gentileza manda seu e-mail, quem sabe vc turbina meu site? Parabéns… desistir jamais…

  8. 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?

  9. Para fazer um layout horizontal o com scroll horizontal, qual a altura que devo usar para abrir legal em todos monitores?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>