Qual a largura ideal para um site?

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Essa é uma dúvida que aflige muitos desenvolvedores web, principalmente os iniciantes na área. Por isso, no artigo de hoje você vai aprender o que deve ser levado em conta na hora de tomar uma decisão em relação a largura de um site.

Hoje em dia a grande maioria dos profissionais trabalha com frameworks e sistemas de grid, sendo que a maioria desses sistemas usa larguras pré-definidas de 960 a 1.100 pixels. Essa padronização dos frameworks acaba fazendo com que os desenvolvedores simplesmente usem uma largura generalizada em seus projetos, esquecendo-se do mais importante: os usuários do site.

Sabendo disso, a primeira atitude a ser tomada é descobrir quais as resoluções de tela mais usadas por quem acessa o site. Esse é um dado básico que está disponível em praticamente todos os sistemas de análise de tráfego em sites, como o Google Analytics, por exemplo.

Na imagem a seguir você pode ver as 10 resoluções de tela mais usadas por quem acessa o RBtech:

resolucoes

Com base nesses dados, eu concluí que a largura ideal para o site seria de 1.280 pixels, uma vez que menos de 10% dos acessos são feitos por telas menores. Logicamente que estou falando de um site responsivo e que será exibido corretamente em resoluções menores, mas a largura ideal foi definida para 1.280 pixels.

A princípio básico para chegar a tal conclusão é a proporção de 80/20, ou seja, procure atender no mínimo 80% do seu público com sua decisão. É importante pegar dados de um período de tempo de aproximadamente 6 a 12 meses, uma vez que analisando apenas 30 dias os dados podem não retratar a realidade do seu público como um todo.

E se o site for novo?

Acho que você já deve ter perguntado isso também, afinal de contas se o site é novo não teremos dados para usar como base para nossa decisão. Mas isso não significa que você deve usar um sistema de grid com 960 pixels para depois de alguns meses descobrir os dados de seus visitantes reais.

Para ajudar em novos projetos, além da experiência de quem já criou outros projetos, podemos contar com sites especializados que monitoram milhares de sites na internet e geram estatísticas com as resoluções de tela mais usadas, veja dois exemplos:

  1. Screen Resolution
  2. Market Share

Mas e os layouts fluídos?

Atualmente temos no mercado monitores e resoluções cada vez maiores, isso torna praticamente impossível prever o comportamento de um layout totalmente fluído nesses dispositivos. Há quem defenda o contrário, mas aqui já entra mais uma opinião pessoal do que uma regra de negócio.

Outro dado relevante é que temos um grande aumento no número de pessoas usando dois ou três monitores, que somados podem chegar resoluções incrivelmente altas. Pense como seria horrível ver um site fluído em uma resolução de mais de 3.000 pixels...

Conclusão

Seja com base no Analytics do site ou usando dados de outros sites monitorados, o fato é que você precisa tentar atender a maior parcela de usuários que acessam a página.

Voltando ao exemplo do RBtech, você pode té pensar que eu deveria ter feito o site menor para atender 100% dos visitantes, mas isso seria um grande engano, pois para atender uma pequena parcela de visitantes eu estaria deixando 90% dos usuários com um enorme espaço vazio na tela.

Ou seja, eu optei por "espremer" um pouco o conteúdo para 10% dos visitantes e deixar a usabilidade mais confortável para a grande maioria.

Por hoje é isso, espero que tenham gostado das dicas. Abraço à todos!

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 7 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

Deixe seu comentário