Tamanho de um site ou largura ideal para ajustar na resolução da tela

Tutorial sobre definição do tamanho ou resolução de um site. Veja as dicas para definir a largura ideal de um site e algumas estatísticas que poderá ajudar. Confira

Ao construir um site devo me preocupar com o tamanho dele, ou seja, qual é a largura ideal para um site?

Bem, isto é bastante relativo e deve ser levado em consideração o resultado de algumas análises antes de tomar esta decisão.

Se você está refazendo um site, o ideal é você ler os relatórios de visitas do seu site, pois lá constam os percentuais de resolução de telas dos seus usuários e a partir daí você poderá definir qual largura se adequará melhor ao site.

A largura 800 por 600 foi usada durante muitos anos como sendo o tamanho padrão de sites, mas com as novas safras de monitores cada vez maiores este quadro mudou bastante. Portanto não dá para afirmar qual é o tamanho ou a largura ideal, é necessário conhecer o seu usuário para oferecer a ele um layout agradável e adaptado aos seus recursos.

Tendências e Estatísticas

Fiz um comparativo das resoluções de monitores usadas pelos usuários deste blog desde 2008 e olhando para os resultados dá para perceber várias coisas. Tomei como base sempre o mês de março, iniciando em março de 2008 até março de 2012. Veja os resultados abaixo:

Resoluções de tela mais usadas em 2008

Resoluções de tela mais usadas em março de 2008

 

Resoluções de tela mais usadas em 2009

Resoluções de tela mais usadas em março de 2009

 

Resoluções de tela mais usadas em 2010

Resoluções de tela mais usadas em março de 2010

 

Resoluções de tela mais usadas em 2011

Resoluções de tela mais usadas em março de 2011

 

Resoluções de tela mais usadas em 2012

Resoluções de tela mais usadas em março de 2012

Análise das resoluções de tela

Algumas percepções importantes nos dados acima:

  • Se comparado 2008 com 2012, a resolução 1024x768 teve uma queda de mais de 50%, embora ela ainda seja a mais usada.
  • Em 2008 as duas resoluções mais usadas somavam 77,98%, em 2012 as duas resoluções mais usadas chagam a apenas 49,59%.
  • Em 2008 apenas 5 resoluções somavam mais de 2%, em 2012 as 10 primeiras já somam mais de 2% de participação. Isto mostra uma pulverização na quantidade de resoluções.
  • A resolução 800x600 que representa os monitores mais antigos oscilou da seguinte forma: 2008 e 2009 – 2ª posição, 2010 – 3ª posição, 2011 – 7ª posição e 2012 ela não aparece entre as 10 primeiras.
  • A segunda posição das resoluções de tela mais usadas é rivalizada por 1280x800 e 1336x768.

Os dados acima não são científicos, mas é um indicador e pelo menos para mim eles servem como parâmetro para eu entender quem é meu usuário e quando terei de ajudar meu site para melhor atendê-lo. Desta forma o tamanho de um site deve levar em conta esses números e procurar ajustá-lo a eles da melhor forma possível




 

Veja também:




// Comentários

Thiago Bettanzos // Rio Grande // 14/05/2009 00:04:00

Muito Interessante, nem sabia que dava de saber a resolução dos monitores dos usuários.

Abraço

Pedro L.L Priminini // Limeira // 28/04/2010 20:10:00

Ola Luis!... tava aqui pesquisando ..tirando algumas duvidas sobre desenvolvimento web, e varias vezes cai no seu blog!..e pensei..gostei desse blog fui ver e nome e me dei conta que vc foi meu professor! na Info 11!..nao sei se ainda se lembra, mas.... to passando só pra dar os parabens pelo blog! é muito util pra quem ta começando na area como eu!!

abraço

luis.blog.br // Limeira/SP // 28/04/2010 23:04:00

Olá Pedro.

Lembro de você sim. Afinal, não faz tanto tempo assim né?

Confesso que tenho dificuldade de lembrar de todos os alunos, principalmente depois de alguns anos, mas é sempre bom reencontrá-los, ainda que seja na internet.

Obrigado pela visita. Volte sempre!

DHIEGO // salvador // 29/04/2010 14:22:00

AMIGO DESCULA A MINHA IGINORANCIA RSSR MAIS É QUE EU SOU MUITO CURIOSO E TO TENTANDO APRENDER A CRIAR SITES MAIS QUERIA SABER SE VC NAO TEM UM MANUAL QUE ENSINE A CRIAR PLAYS? TIPO: EU VI UM PLAY QUE ELE FICA GRUDADO NO MENU DO SITE E VC PODE MECHER NO SITE TODO E A MUSICA NAO PARA DE TOCAR ENTAO QUERIA CRIAR UM TIPO ESSE MAIS NAO SEI COMO.

EU TO COM O PROGRAMA: ( WYSIWYJ Web Builder 6 )NAO SEI SE VC JÁ OUVIU FALAR, MAIS EU TO TENTANDO APRENDER NELE O QUE EU MAIS QUERIA APRENDER A FAZER É O TIPO DE PLAY QUE TE DISSE.. ABRAÇOS E DESDE JÁ OBRIGADO E PARABENS PELO BLOG

Nacaique // Nazario // 15/08/2010 11:01:00

mais como vamos conhecer nossos usuarios nesse mundoooo, seria quase impossivel fazer uma pagina que se enquadre perfeitamente para todos os monitores e navegadores existentes, www.agitoteen.com

Bruno // BH // 15/09/2010 11:32:00

Bom para se padronizar poderia também usar a medida de 960 do framework de CSS www.960.gs que por sinal é um ótimo Framework vale a pena vê-lo! Basicamente ele gera layout em colunas tornando a visualização dos elementos mais fácil.

Bom Post,

Sucesso com o Blog =D

Lívia // Americana // 11/04/2011 19:03:00

Olá Luis, tudo bem?

Procurando algum conteúdo pra tirar minha dúvida, acabei caindo no seu blog!! E encontrei a resposta!!

Terminei o curso no SENAC em Janeiro, se lembra de mim??

Estou terminando meu site pessoal, logo mais te mando o link por email.

Grande abraço!

claudia // campinas // 21/04/2011 22:46:00

Oi gostaria que me ajudassem como eu coloco o logo que eu fiz no meu site, já tentei de todos os jeitos e maneiras possíveis, mas ou fica enorme ou oequeno demais como faço? Gosto muito do meu logo mas não faço ideia de como fica perfeito no tamanho para colocar no site e como eu mudo o tamanho.

claudia // campinas // 21/04/2011 22:49:00

E nem sei qual o tamanho ideal para colocar o logo no site pois no site nao indica o tamanho, como posso colocar certinho o tamanho no meu site. Se alguem sabe porfavor me ajudemmm pois já nao sei onde mais recorer, a nao ser aqui neste sabe , espero que alguem saiba me responder.

harrison // brasilia // 02/03/2012 15:36:00

claudia vai depender do tamanho do seu logo se você usar mais de 300px para width e height é doideira. Bom depende do tamanho da imagem porém se ela for grande de mais você pode regular-la pelo próprio HTML ou CSS exemplo em HTML com logo 22x22px:

em CSS:

basta colocar este do HMTL dentro de uma div.

Fahel // Vitória // 23/03/2012 23:08:00

Tirando por base que seu blog é(.br). Isso mostra a evolução no poder de consumo dos brasileiros. Mas tem que levar em conta as mudanças nos browsers também. E vi ali na analise, março de 2012. Ainda nem terminamos o mês. Afinal, acha melhor começar a optar por 1280x768 ou por 1280x800? Parabéns pelo blog!

luis.blog.br // Limeira/SP // 24/03/2012 11:08:00

Fahel.

Considerando o cenário acima, eu não optaria ainda por 1280x768 ou por 1280x800. Embora esteja em queda, mas 30% ainda é uma participação muito significativa da resolução 1024x768.

Há uma fator que precisa ser bem analisado: Se um site está otimizado para 1024x768, sua visualização em resoluções maiores não é tão problemática, mas o inverso sim. Por isso, penso que uma mudança deve ocorrer quando os números ficarem insignificativos.

Renato // Rio De Janeiro // 22/04/2012 13:42:00

Obrigado por nos apresentar esses dados e suas comparações, me pareceu ter toda razão, rs.

Me formei em Design gráfico (Desenhos Industrial), mas não me interessava por web.

Teorias, análises, concorrência e público são a base para um bom projeto.

Parabéns e boa sorte.





 

2007-2012   //   Blog do Luis   //   Política de Privacidade   //   Eu creio em Deus