Home » Design

Teste seu site para as resoluções de tela mais usadas

14 agosto 2012 19.531 Leitores 6 Comentários

Quando está a fazer um site, você vai observando na tela como vai ficando o seu site. Essa tela tem uma determinada dimensão/resolução, e assim o site/blog vai ficar optimizado para a resolução que tem a tela do seu computador. Quem visitar seu site usando uma tela/ecrã com a mesma resolução vai visualizar o seu site do mesmo modo que você, mas quem estiver a usar uma tela com uma outra resolução pode visualizar o seu site de uma forma muito diferente.

Isso significa que partes importantes do seu site, que você visualiza mesmo sem usar as barras de rolagem, podem não estar a ser visualizadas por uma boa parte, ou mesmo pela maior parte dos visitantes do seu site. Com o desenvolvimento de novas tecnologias, novas resoluções estão a ser usadas por um número crescente de pessoas, com a internet a ser também acedida através de tablets e telemóveis.

Este é um problema importante ao qual deve dedicar alguma atenção. De que adianta destacar uma informação importante no topo do seu site se a maior parte dos visitantes não a vê de imediato? Para quê tanto trabalho a posicionar anúncios num local estratégico se a maior parte dos visitantes nem lhes põe os olhos em cima?…

Como ninguém tem em casa um armazém de computadores, smartphones e tablets com todas as resoluções que existem no mercado, apresento-vos uma ferramenta que permite testar resoluções de tela diferentes. Como exemplo deixo aqui algumas imagens do teste que fiz nessa ferramenta ao Como Fazer Um Site para algumas resoluções:

Resolução 800×600
Resolução 1024×768
Resolução 1152×864

A resolução do seu ecrã é x (detectada automaticamente). Experimente você mesmo outras resoluções clicando no link testar resolução de tela.

Pontos a considerar na optimização do seu site

O seu site deve ter um aspecto apelativo e funcionar sem problemas para o tamanho de tela mais usado. Embora não possa agradar a todos os visitantes do seu site, deve garantir também que o seu site continua funcional e com um aspecto bom/aceitável para os restantes tamanhos de tela.

Os três pontos mais importantes que deve ter em mente quando optimiza seu site são:

  • Visualização da página inicial: A informação chave está visível na sua página inicial sem ser necessário que os visitantes usem as barras de rolamento? De uma maneira geral os internautas não gostam de usar o “scroll”, verifique se essa parte essencial do conteúdo da página inicial é vista pelos seus visitantes quando estes rolam a página numa altura de apenas um ecrã, ou dois no máximo.
  • Facilidade de leitura do site: Verifique se é possível ler os textos nas diferentes colunas do site de forma adequada. Por vezes os diferentes tamanhos de tela alteram as larguras de colunas e secções do site dificultando a leitura dos textos.
  • Estética do site: Como é que muda o aspecto do seu site? Os diferentes elementos do site mantêm-se alinhados para essa resolução de tela? As secções ficam com o tamanho certo, as legendas alinham com as imagens?…

Para que possa saber quais as resoluções mais usadas na internet deixo-vos a seguir alguns gráficos que mostram as tendências da utilização de algumas resoluções ao longo do tempo, para o Brasil, para Portugal e para o Mundo.

Os seguintes gráficos são actualizados automaticamente para os últimos 3 meses.
Pode voltar a este artigo no futuro para verificar se as resoluções mais usadas se mantêm ou não.

Resoluções de tela mais usadas no Brasil

No Brasil as resoluções mais usadas entre Junho e Agosto de 2012 foram a 1366×768 e 1024×768. A resolução de tela mais usada é a 1366×768 e tem vindo a aumentar:

(Já não está disponivel)


Resoluções de tela mais usadas em Portugal

Curiosamente em Portugal a resolução mais usada entre Junho e Agosto de 2012 também é 1366×768, mas a outra resolução mais usada já não é 1024×780 mas sim a 1280×800:

(Já não está disponivel)


Resoluções de tela mais usadas a nível mundial

Se tem um site com tráfego internacional pode ter interesse em saber também quais as resoluções mais usadas a nível mundial. Entre Junho e Agosto de 2012 já não existe uma diferença tão grande das duas resoluções mais usadas para as restantes:

(Já não está disponivel)

Partilhe a sua experiência.
Qual foi o tamanho de tela que usou para criar o seu site ou blog? O seu design funciona bem para os tamanhos de tela mais usados?
Se ainda não o fez pode testar seu site no link testar resoluções de tela.

1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (1 votos, média: 5,00 de 5)
Loading...


6 Comentários »

  • mestre dos sites disse:

    Interessante o Artigo Avelino, mas acredito que modo mais eficaz é mesmo entrar no painel do google analytics do seu site e ver qual a resolução seus visitantes mais usam , e pegar as 2 tops e deixar o site mais agradavel para essas 2…
    Mesmo que exista uma tendencia no país, voce pode ter mais de um site na mesma lingua e ter resultados totalmente diferentes para cada site, até pelo publico alvo.Por isso normalmente uso o esquema que citei acima :o)

  • avelino (author) disse:

    Sim, tens razão, o google analytics é uma excelente ferramenta, que entre várias coisas permite também saber quais as resoluções de tela mais usadas pelos visitantes do nosso site.

    Mas quando fiz o post estava mais a pensar naqueles que estão a começar a fazer um site. E esses, mesmo que já tenham uma conta do google analytics, no inicio não vão ter tráfego suficiente para saber quais as resoluções de tela mais usadas pelos internautas.

    Com os gráficos deste post qualquer pessoa pode saber quais são, e com a ferramenta que forneci podem de imediato testar resoluções de tela para começarem a optimizar o site para essas resoluções mais usadas (e isso penso que o google analytics não faz). Concordo que as 2 tops são as mais importantes, mas não vamos querer que em alguma das outras resoluções o nosso site apareça com o layout desfigurado, e olha que isso acontece com alguma frequência.

    Agradeço o comentário e fica então a nota que o google analytics também permite ver as resoluções mais usadas. O google analytics pode ser muito útil para quem já tem um site com uma quantidade razoável de visitantes.

  • Marly Figueiredo disse:

    Ola!!
    adorei sua explicações, a tempo estava procurando e nada de encontrar o que queria, mas por aqui aprendi muito a unica coisa que não entendi ainda foi como resolver o problema de meta linguagem do blogs e o tal de h1 em excesso, não consigo resolver
    pode me ajudar???
    Parabéns pelo seu site.

  • avelino (author) disse:

    Olá Marly

    Que bom que gostaste…
    Relativamente a essas questões, se puderes explicar as tuas dúvidas no fórum também terei muito gosto em ajudar naquilo que puder.

  • Giliardy disse:

    Olá, eu cheguei até este site por procurar como projetar um site para funcionar em diversas resoluções.
    Não encontrei o esperado, mas vou utilizar esta ferramenta que é citada para testes.

    Aproveito para perguntar se sabem me indicar um tutorial que ensine ou que ajude a montar um site para funcionar em pelo menos duas resoluções.
    Pelas imagens, vejo que o site testado foi bem projetado e funciona muito bem em três resoluções.(Testei o seu site e ele não alterou seu formato nas resoluções)

    Alguém pode me ajudar nesta?

    Ps:Muito bom o seu blog!

  • avelino (author) disse:

    Obrigado pelo teu comentário, Giliardy.

    Vê por exemplo o tutorial de CSS. Qualquer site que tenha bem definidas as dimensões das diferentes secções em principio irá funcionar bem na maioria das resoluções. O problema surge, a maior parte das vezes, quando por exemplo a largura do site é calculada em função da largura do browser.

    Se trabalhares com larguras fixas não terás grandes problemas. Mesmo que não tenhas deformações no layout vais querer que certas coisas apareçam logo de imediato sem que o visitante tenha que fazer scroll. Por exemplo não vais querer que o logótipo do teu site apareça cortado nas resoluções de tela mais usadas…

Deixe um comentário!

Seja cordial. Respeite o assunto do tópico. Não faça spam.