Quais são as melhores resoluções de tela para design web responsivo em 2022?

 

Qual é a melhor resolução de tela para design web em 2022?

 

A resposta é: Não há um melhor resolução de tela para design web. Os sites devem se ajustar de forma responsiva e rápida em todas as resoluções de tela em diferentes navegadores e plataformas. Deve ser acessível e compatível com dispositivos móveis. As resoluções variam de 360×640 a 1920×1080.

Importante também considerar:

• Design para telas de desktop de 1024×768 a 1920×1080
• Design para telas de dispositivo móveis de 360×640 a 414×896
• Design para telas de tablet de 601×962 a 1280×800
• Verifique o Google Analytics e otimize para os tamanhos de resolução mais comuns do seu público-alvo
• Não faça o design para apenas um tamanho de monitor ou resolução de tela. Os tamanhos de tela e janela do navegador variam entre os visitantes.
• O design deve ser responsivo e rápido. Use um layout líquido ou responsivo que se transforme no tamanho da janela do usuário atual.
• Monitore os alertas de usabilidade e compatibilidade com dispositivos móveis do Google Search Console

 

 

Os três principais critérios para otimizar um layout de página para um determinado tamanho de tela são:

• Visibilidade inicial da página da Web: Todas as informações importantes estão visíveis acima da dobra para que os usuários possam vê-las sem rolar? Esta é uma troca entre quantos itens são mostrados versus quantos detalhes são exibidos para cada item.
• Legibilidade da página da Web: Quão fácil é ler o texto em várias colunas, dada a largura alocada?
• Estética da página Web: Qual é a aparência da sua página quando os elementos estão no tamanho e local adequados para esse tamanho de tela? Todos os elementos estão alinhados corretamente – ou seja, as legendas estão imediatamente ao lado das fotos, etc.?

As diretrizes de usabilidade também recomendam que você considere todos os três critérios em toda a gama de tamanhos. Verifique a janela do navegador de 360×640 a 1920×1080.

Sua página deve ter uma pontuação alta em todos os critérios em todo o intervalo de resolução.

Sua página também deve funcionar em tamanhos ainda menores e maiores, embora esses extremos sejam menos importantes. Esses usuários certamente podem acessar seu site, dar a eles um design menos que excelente às vezes é uma opção aceitável.

 

As 10 resoluções de tela mais comuns

 

Análise de visitantes de quase meio milhão de visitantes no último ano:

1 – 1920×1080 (22,62%)
2 – 1366 × 768 (11,20%)
3 – 1440×900 (9,55%)
4 – 1536×864 (8,60%)
5 – 2560×1440 (7,41%)
6 – 1680×1050 (4,28%)
7 – 1280×720 (3,55%)
8 – 1280×800 (2,33%)
9 – 1792 × 1120  (2,06%)
10 – 1600 × 900 (1,87%)

 

Você deve utilizar um modelo de site responsivo em 2022

 

“O Google recomenda o Responsive Web Design porque é o padrão de design mais fácil de implementar e manter” Guias do desenvolvedor do Google, 2021

Em 2022, muitas pessoas estão usando dispositivos portáteis (tablets e smartphones) para navegar na web e o design responsivo de sites (RWD) surgiu como uma solução muito provável (ainda é debatida pelos aficionados) para os desafios das diferenças de tamanho da tela.

Esse método deixa de usar sites de largura fixa e, em vez disso, usa Media Queries em folhas de estilo CSS para criar um site que responda em tamanho às diferentes janelas de exibição de dispositivos portáteis.

Portanto, qualquer que seja o dispositivo que uma pessoa esteja usando para visualizar seu site, você poderá oferecer a experiência mais completa possível.

 

Google prefere sites compatíveis com dispositivos móveis

 

O Google dita o fluxo do comércio on-line e eles acabaram de definir que você precisa criar uma experiência de usuário satisfatória em vários dispositivos, se você quiser esperar uma classificação alta para palavras-chave competitivas no Google.

“O Google utiliza dois rastreadores diferentes para rastrear sites: um rastreador móvel e um rastreador de desktop. Cada tipo de rastreador simula um usuário visitando sua página com um dispositivo desse tipo. O Google usa um tipo de rastreador (móvel ou computador) como o rastreador principal do seu site. Todas as páginas do seu site que são rastreadas pelo Google são rastreadas usando o rastreador principal. O rastreador principal para todos os novos sites é o rastreador móvel. Além disso, o Google rastreia novamente algumas páginas do seu site com o outro tipo de rastreador (móvel ou computador). Isso é chamado de rastreamento secundário e é feito para ver como seu site funciona com o outro tipo de dispositivo.” Diretrizes para webmasters do Google, 2020

Desde 21 de abril de 2015, globalmente, a compatibilidade de um site com dispositivos móveis afetou o desempenho de classificação de sites em vários dispositivos.

Se você cria sites para pequenas empresas – você saberá que eles querem um site que tenha um bom desempenho nas listagens orgânicas do Google – você sabe que eles estão interessados em otimização de mecanismos de pesquisa:

O SEO agora é baseado, em parte, no bom UX do site.

“Com as pesquisas em dispositivos móveis agora superando as pesquisas em computadores, é importante que seu site seja compatível com dispositivos móveis. O Googlebot agora usa um rastreador móvel como o rastreador padrão para sites.” Diretrizes para webmasters do Google, 2020

A compatibilidade com dispositivos móveis é um dos sinais de experiência da página do Google.

 

Estatísticas de resolução de tela da área de trabalho em todo o mundo de agosto de 2020 a agosto de 2021

Tamanhos de resolução de tela de desktop mais comuns em todo o mundo

1920×1080 – 21,04%
1366×768 – 20,48%
1536×864 – 10,05%
1440×900 – 6,17%
1280×720 – 5,79%
1600×900 – 3,68%

 

Estatísticas de resolução de tela móvel em todo o mundo de agosto de 2020 a agosto de 2021

 

Tamanhos de resolução de tela móvel mais comuns em todo o mundo

360×640 – 9,25%
414×896 – 7,29%
360×800 – 7,13%
360×780 – 5,43%
375×667 – 5,25%
360×780 – 4,76%

 

Estatísticas de resolução de tela do tablet em todo o mundo de agosto de 2020 a agosto de 2021

 

Tamanhos de resolução de tela de tablet mais comuns em todo o mundo

768×1024 – 40,53%
1280×800 – 6,91%
800×1280 – 5,36%
601×962 – 5,21%
810×1080 – 4,47%
962×601 – 3,79%

 

Participação de mercado de desktop X celular X tablet em todo o mundo de agosto de 2020 a agosto de 2021

 

Desktop vs Mobile vs Tablet Market Share em todo o mundo

Celular – 56,94%
Computador de mesa – 40,3%
Comprimido – 2,76%

 

Como criar um site com a mesma aparência em todos os navegadores e resoluções

 

Infelizmente não é possível criar um site que tenha a mesma aparência em todos os navegadores e resoluções. É impossível para você criar um design para um site com a mesma aparência em todos os navegadores, plataformas e resoluções de tela, portanto, evite tentar.

Você pode optar por um layout fluido sem tabelas para seu design, com % de larguras que se expandem e se contraem para se adequar à configuração do navegador de um visitante OU você pode considerar procurar soluções de design responsivo que alcançarão a mesma coisa.

O Google favorece os designs responsivos, o que é uma boa notícia para quem o adotou:

“Sites que fazem uso de web design responsivo e implementam corretamente o serviço dinâmico (que inclui todo o conteúdo da área de trabalho e marcação) geralmente não precisam fazer nada.” Google NOVEMBRO 2017

O MOBILE ESTÁ EM CRESCIMENTO – portanto, se estiver desenvolvendo um novo site – você DEVE pensar em como seu site é realmente compatível com dispositivos móveis desde o início.

Você deve manter as coisas simples ao codificar sites.

Você não vai – não pode – agradar a todos – e a questão de qual tamanho de site é o melhor ainda é um tema quente para debate por designers com experiência em usabilidade e UX.

É de fundamental importância para você identificar SEU público e os dispositivos que eles usam, e construir seu site (no geral) para atender a esse público.

E esse público inclui o GOOGLEBOT.

 

Seu site para dispositivo móvel redireciona para outra URL e/ou versão do seu site?

 

Isso não é o ideal. Nunca foi, na verdade.

Antigamente – algumas pessoas usavam versões TEXT-ONLY de um site para produzir conteúdo para usuários/navegadores que não suportavam elementos de seus sites – em uma tentativa (geralmente vã) de tornar seu conteúdo mais acessível.

O W3C até costumava recomendá-lo se nada mais desse certo:

Uma página apenas de texto, com informações ou funcionalidades equivalentes, deve ser fornecida para fazer um site cumprir as disposições desta parte, quando a conformidade não puder ser realizada de outra forma. O conteúdo das páginas somente de texto deve ser atualizado sempre que a página principal for alterada. SEÇÃO 508

SEMPRE foi ideal entregar uma URL a um visitante para fins de acessibilidade, e não há diferença ao entregar conteúdo para celular ou smartphone se você estiver pensando em criar uma versão “móvel” do seu site. Isso, é claro, pode ser AINDA MAIS IMPORTANTE se o Google estiver migrando para um MOBILE FIRST INDEX.

O Google confirmou que irá avaliar o seu site PRINCIPALMENTE em sua experiência móvel.

Quando o Google é o ‘visitante’, geralmente é ainda mais importante fornecer apenas uma URL por causa dos desafios de URL canônicos para os mecanismos de pesquisa – e esse foi o caso antes da implementação do elemento de link canônico há algum tempo.

Portanto, a situação ideal é entregar sempre uma URL.

Se você tem conteúdo “smartphone”…. você pode usar o rel=canonical para apontar para sua versão desktop…. Quando os usuários visitam essa versão de desktop com um smartphone, você pode redirecioná-los para a versão móvel. Isso funciona independentemente da estrutura de URL, portanto, você não precisa usar subdomínios/subdiretórios para sites móveis para smartphones. Ainda melhor, porém, é usar os mesmos URLs e mostrar a versão apropriada do conteúdo sem redirecionar – John Mueller, Google

 

Ignorar as recomendações do Google geralmente não é uma jogada inteligente

 

Os sistemas de rastreamento, indexação e classificação geralmente analisam a versão para computador do conteúdo de uma página, o que pode causar problemas para pesquisadores de dispositivos móveis quando essa versão é muito diferente da versão para dispositivos móveis. A indexação mobile-first significa que usaremos a versão móvel do conteúdo para indexação e classificação, para ajudar melhor…. principalmente móvel – os usuários encontram o que estão procurando. Os webmasters verão um aumento significativo no rastreamento pelo Smartphone Googlebot, e os snippets nos resultados, bem como o conteúdo das páginas de cache do Google, serão da versão móvel das páginas. Google novembro de 2017

O Google oferece as seguintes dicas para verificar se seu site está preparado para o índice mobile-first, mas, essencialmente, se você estiver usando um modelo de web design responsivo para seu site, deverá ter problemas mínimos com essa alteração:

Certifique-se de que a versão móvel do site também tenha conteúdo importante e de alta qualidade. Isso inclui texto, imagens (com atributos alternativos) e vídeos – nos formatos rastreáveis e indexáveis usuais.

Os dados estruturados são importantes para os recursos de indexação e pesquisa que os usuários adoram: devem estar na versão móvel e na versão desktop do site. Certifique-se de que os URLs nos dados estruturados sejam atualizados para a versão móvel nas páginas móveis.

Os metadados devem estar presentes em ambas as versões do site. Ele fornece dicas sobre o conteúdo de uma página para indexação e veiculação. Por exemplo, certifique-se de que os títulos e as meta descrições sejam equivalentes nas duas versões de todas as páginas do site.

Nenhuma alteração é necessária para a interligação com URLs móveis separados (sites m.-dot). Para sites que usam URLs móveis separados, mantenha o link existente rel=canonical e link rel=alternate elementos entre essas versões.

Verifique os links hreflang em URLs móveis separados. Ao usar elementos link rel=hreflang para internacionalização, vincule os URLs para dispositivos móveis e para computadores separadamente. O hreflang dos seus URLs para dispositivos móveis deve apontar para as outras versões de idioma/região em outros URLs para dispositivos móveis e, da mesma forma, vincular a área de trabalho a outros URLs de computador usando elementos de link hreflang.

Certifique-se de que os servidores que hospedam o site tenham capacidade suficiente para lidar com uma taxa de rastreamento potencialmente aumentada. Isso não afeta sites que usam design da Web responsivo e veiculação dinâmica, apenas sites em que a versão para celular está em um host separado, como m.example.com.

 

Seus usuários esperam rolar a página para baixo

 

Como o primeiro critério implica, a rolagem é sempre uma consideração importante. Os usuários geralmente não gostam de rolar se não precisarem – embora, ao longo dos anos, isso tenha mudado.

Portanto, ao projetar, você deve considerar o quanto os usuários podem ver se rolarem apenas uma tela inteira ou duas. Mais de cinco telas podem ser uma indicação para você de que pode haver muita cópia na página. Obviamente, isso é equilibrado com a visão de que alguns artigos devem ser informações detalhadas e os usuários esperariam um pouco mais para visualizar o conteúdo da página e os tipos de conteúdo.

Tanto a rolagem quanto a visibilidade inicial obviamente dependem do tamanho da tela: telas maiores mostram mais conteúdo acima da dobra e exigem menos rolagem.

 

Será que uma mudança para um site móvel responsivo melhora as classificações?

 

Não necessariamente, mas provavelmente.

Como muitas coisas relacionadas com a otimização do Google – ter um site compatível com dispositivos móveis é mais ou menos para garantir que você MANTENHA o tráfego que já está recebendo, não necessariamente fornece mais tráfego gratuito do Google.

Se você ainda não recebe muito tráfego de visitantes móveis – não tenho certeza se essa atualização do Google terá um efeito perceptível em seus níveis de tráfego (pelo menos em análise) no início – mas com o tempo – provavelmente será um desafio extremamente importante para navegar.

A barra de qualidade está sendo elevada – novamente – pelo Google e seus usuários – e se você deseja competir em SERPs orgânicos cada vez mais competitivos, esse é mais um obstáculo para as pequenas empresas superarem.

A LONGO prazo – essa conversão móvel só pode ser uma coisa boa para seus usuários – mas a curto prazo – será interessante ver o efeito que ela tem nas taxas de conversão de pequenas empresas – já que as taxas de conversão via celular geralmente são menores do que em Área de Trabalho.

O Google disse que esse algoritmo otimizado para dispositivos móveis terá um impacto maior nos SERPs do que os algoritmos Google Penguin e Google Panda – e descobriremos mais com o passar do tempo.

 

Como verificar problemas importantes de usabilidade em dispositivos móveis em seu site

 

Você deve ser capaz de rastrear erros móveis no Google Search Console (AKA Google Webmaster Tools) e ver os erros desaparecerem com o tempo se seu site estiver configurado corretamente.

 

Ferramentas para testar seu site quanto à compatibilidade com dispositivos móveis

 

• Pagespeed Insights
• Think With Google
• Mobile Friendly Test

 

Gostou das dicas? Entre em contato com o nosso time e contrate nossos especialistas para desenvolver o seu site ou sistema web!