Quais são os melhores tamanhos de tela para um Web design responsivo?

Divulgação: “Este artigo é uma opinião pessoal de uma pesquisa baseada na minha experiência de quase 20 anos. Não há publicidade de terceiros nesta página ou links monetizados de qualquer tipo. Links externos para sites de terceiros são moderados por mim. Isenção de responsabilidade. “Shaun Anderson, Hobo

Não existe um tamanho de tela ideal para o design. Os sites devem se transformar de forma responsiva e rápida em todas as resoluções de tela em diferentes navegadores e plataformas. Acessível. Compatível com dispositivos móveis. Projete primeiro para o seu público. Projete de 360 × 640 a 1920 × 1080.

• Projete para telas de desktop de 1024 × 768 a 1920 × 1080
• Projete para telas de celulares 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 de seu público-alvo
• Não crie para um tamanho de monitor ou resolução de tela. O tamanho da tela e o estado da janela do navegador variam entre os visitantes.
• O design deve ser responsivo e rápido. Use um layout líquido ou responsivo que se transforma para o tamanho da janela do usuário atual.
• Monitore os alertas de usabilidade e de compatibilidade com dispositivos móveis do Google Search Console

Ainda deve ter uma boa aparência e funcionar bem em todos os tamanhos, é por isso que eu * costumava * recomendar um layout líquido altamente acessível usando larguras percentuais para controlar o layout. Agora, a recomendação é um modelo de site responsivo.

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

• Visibilidade inicial da página da web: é fundamental informações visíveis acima da dobra para que os usuários possam vê-las sem rolar? Esta é uma troca entre quantos itens são mostrados e 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 da web: Qual é a aparência de sua página quando os elementos estão no tamanho e localização adequados para este 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 com resoluções de tela 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 de maneira uniforme tamanhos menores e maiores, embora esses extremos sejam menos importantes.

Embora esses usuários certamente devam ser capazes de acessar seu site, dar a eles um design inferior às vezes é um compromisso aceitável.

Dez principais resoluções de tela mais comuns

Análise do visitante de quase meio milhão de visitantes nos primeiros 6 meses de 2020:

Um modelo de site responsivo é uma boa aposta

CITAÇÃO: “Design da Web responsivo: exibe o mesmo código HTML no mesmo URL, independentemente do dispositivo do usuário (por exemplo, desktop, tablet, celular, não navegador visual), mas pode renderizar a exibição de maneira diferente com base no tamanho da tela. O Google recomenda Web Design Responsivo porque é o padrão de design mais fácil de implementar e manter. ” Guias do desenvolvedor do Google, 2020

No mundo de hoje, muitas pessoas estão usando dispositivos portáteis (tablets e smartphones) para navegar na web e um design de site responsivo ( RWD) surgiu como uma solução muito provável (ainda é debatida por aficionados) para desafios de tamanho de tela.

Este 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 responde em tamanho às diferentes janelas de exibição de dispositivos portáteis e telas menores que as pessoas usam.

Portanto, seja qual for o dispositivo que uma pessoa esteja usando para ver o seu site, você é capaz de dar a ela a experiência mais completa possível.

Índice

Google prefere sites compatíveis com dispositivos móveis

O Google determina o fluxo e refluxo do comércio online e eles apenas determinaram que você precisa projetar para uma experiência de usuário satisfatória em vários dispositivos SE você quiser ter uma classificação elevada em palavras-chave competitivas no Google.

CITAÇÃO: “O Google usa 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 (celular ou desktop) como rastreador principal para o 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 (celular ou desktop).Isso é chamado de rastreamento secundário e é feito para ver se o seu site funciona bem 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 diversos dispositivos.

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

CITAÇÃO: “Tenho 20 anos de experiência na prática de SEO profissional. Este tutorial de SEO é minha coleção de dicas e práticas recomendadas de SEO que uso para classificar sites no Google.” Shaun Anderson, Hobo 2020

O SEO agora se baseia, em parte, em uma boa UX de sites, conforme quantificada pelo Google, pelo menos para usuários de celular.

CITAÇÃO: “Como as pesquisas para celular agora ultrapassam as pesquisas para computador, é importante que seu site seja otimizado para celular. O Googlebot agora usa um rastreador móvel como rastreador padrão para sites. ” Diretrizes para webmasters do Google, 2020

No momento – isso significa essencialmente um design de site responsivo e compatível com dispositivos móveis, especialmente com o Google “tornando nosso índice em primeiro lugar para dispositivos móveis “.

Estatísticas de resolução de tela da área de trabalho no mundo todo, maio de 2019 – maio de 2020

Para referência, aqui está uma lista das principais resoluções de tela do mundo, registradas recentemente (2020):

Tamanhos de resolução de tela de área de trabalho mais comuns em todo o mundo

• 1366 × 768 – 23,49%
• 1920 × 1080 – 19,91%
• 1536 × 864 – 8,65%
• 1440 × 900 – 7,38%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4,01%
• 1280 × 800 – 3,33%

Estatísticas de resolução de tela do celular em todo o mundo, maio de 2019 – maio de 2020

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

• 360 × 640 – 17,91%
• 375 × 667 – 7,61%
• 414 × 896 – 6,52%
• 360 × 780 – 5,56%
• 360 × 760 – 5,06%
• 414 × 7 36 – 3,74%

Estatísticas de resolução da tela do tablet em todo o mundo, maio de 2019 – maio de 2020

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

• 768 × 1024 – 51,98%
• 1280 × 800 – 7,11%
• 800 × 1280 – 5,34%
• 601 × 962 – 4,47%
• 600 × 1024 – 2,85%
• 1024 × 1366 – 1,96%

Estatísticas da resolução da tela da área de trabalho nos EUA, maio de 2019 – maio de 2020

Principais resoluções da tela nos EUA (2020)

Tamanho de resolução de tela de área de trabalho mais comum nos Estados Unidos da América

• 1920 × 1080 – 19,15%
• 1366 × 768 – 14,91%
• 1440 × 900 – 9,59%
• 1536 × 864 – 7,7%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4,28%
• 1280 × 800 – 3,92%

Estatísticas de resolução da tela do celular nos EUA de maio de 2019 a maio de 2020

Tamanho de resolução de tela de celular mais comum nos Estados Unidos da América

• 414 × 816 – 17,89%
• 375 × 667 – 14,2%
• 375 × 812 – 11,97%
• 360 × 640 – 8,55%
• 414 × 736 – 8,54%
• 412 × 846 – 4,7%
• 360 × 740 – 4,39%

Estatísticas de resolução da tela do tablet nos EUA de maio de 2019 – maio de 2020

Tamanho de resolução de tela de tablet mais comum nos Estados Unidos da América

• 768 × 1024 – 54,68%
• 800 × 1280 – 5,75%
• 1280 × 800 – 5,73%
• 601 × 962 – 5,41%
• 1024 × 1366 – 3,06%
• 600 × 1024 -2,57%

Estatísticas de resolução da tela da área de trabalho no Reino Unido de maio de 2019 a maio de 2020

Principais resoluções da tela no Reino Unido (2020)

Tamanho de resolução de tela de área de trabalho mais comum no Reino Unido

• 1920 × 1080 – 20,62%
• 1366 × 768 – 17,32%
• 1440 × 900 – 11,65%
• 1536 × 864 – 8,38%
• 1280 × 720 – 5,2%
• 1280 × 800 – 4,73%

Estatísticas de resolução da tela do celular no Reino Unido de maio de 2019 a maio de 2020

Tamanho de resolução de tela de celular mais comum no Reino Unido

• 375 × 667 – 16,66%
• 414 × 816 – 14,11%
• 360 × 640 – 9,95%
• 375 × 812 – 8,55%
• 360 × 740 – 5,67%
• 360 × 780 – 5,39%
• 414 × 736 – 4,75%

Estatísticas de resolução da tela do tablet no Reino Unido de maio de 2019 a maio de 2020

Tamanhos de resolução de tela de tablet mais comuns no Reino Unido

• 768 × 1024 – 58,31%
• 1280 × 800 – 6,92%
• 800 × 1280 – 6,02%
• 601 × 962 – 3,68%
• 600 × 1024 – 3,26%
• 1024 × 1366 – 1,71%

Desktop x celular x participação no mercado de tablets em todo o mundo

Participação no mercado mundial de desktop x celular x tablet

1. Celular – 50,48%
2. Desktop – 46,51%
3. Tablet – 3.0%

* Observação – as estatísticas acima são de uma fonte (embora confiável), portanto, podem ser distorcidas de maneiras que talvez não saibamos. Gráficos fornecidos por http://statcounter.com/.

Como posso criar um site que tenha a mesma aparência em todos os navegadores & Resolução?

Você não pode.

É impossível projetar um site para ter a mesma aparência em todos os navegadores, plataformas e resoluções de tela, então evite tentar.

Você pode optar por um layout fluido sem tabelas para o seu design, com larguras de% que se expandem e contraem para se ajustar à configuração do navegador do visitante OU pode considerar a procura de soluções de design responsivo que alcançam praticamente a mesma coisa. > O Google favorece designs responsivos, o que é uma boa notícia para aqueles que os adotaram:

CITAÇÃO: “sites que fazem uso de web design responsivo e implementam corretamente exibição dinâmica (que inclui todo o conteúdo da área de trabalho e marcação) geralmente não precisa fazer nada. ” Google NOV 2017

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

Meu objetivo é manter as coisas simples quando estou codificando coisas.

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

O que sei por experiência própria é que é de importância crítica para você identificar SEU público e os dispositivos que eles usam, e construir seu site (em todo) para se adequar a ESSE público.

E esse público inclui o GOOGLEBOT.

Seu site para celular redireciona para outro URL & Versão de Seu site?

Bem, isso não é o ideal. Na verdade, nunca foi.

Há muito tempo – algumas pessoas usavam versões APENAS TEXTO de um site para produzir conteúdo para usuários / navegadores que não suportam elementos de sua web sites – em uma tentativa (geralmente em vão) de tornar seu conteúdo mais acessível.

O W3C até costumava recomendá-lo, acho que se tudo o mais falhasse:

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

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

O Google pode muito bem classificá-lo PRIMARIAMENTE no seu celular experiência em um futuro próximo – então, todos nós realmente precisamos estar cientes das grandes mudanças que veremos em breve nas SERPs do Google.

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

Portanto, a situação ideal é entregar um URL em todos os momentos.

Se você tiver conteúdo para “smartphone” (que vemos como conteúdo normal da web, pois geralmente é uma norma l página HTML, apenas ajustada no layout para monitores menores), você pode usar o rel = canonical para apontar para sua versão de desktop. Isso nos ajuda a nos concentrar na versão desktop para pesquisa na web. Quando os usuários visitam a versão para desktop com um smartphone, você pode redirecioná-los para a versão móvel. Isso funciona independentemente da estrutura do URL, então você não precisa usar subdomínios / subdiretórios para sites de smartphones para celular. Ainda melhor, no entanto, é usar os mesmos URLs e mostrar a versão apropriada do conteúdo sem um redirecionamento John Mueller, Google

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

CITAÇÃO: Para recapitular, atualmente nossos sistemas de rastreamento, indexação e classificação geralmente olham para a área de trabalho versão do conteúdo de uma página, o que pode causar problemas para usuários móveis quando essa versão é muito diferente da versão móvel. A indexação que prioriza os dispositivos móveis significa que usaremos a versão móvel do conteúdo para indexação e classificação, para ajudar melhor nossos usuários – principalmente móveis – a encontrar o que procuram. Os webmasters verão um aumento significativo no rastreamento do Googlebot no smartphone, e os snippets nos resultados, bem como o conteúdo nas páginas de cache do Google, serão da versão móvel das páginas.Google novembro de 2017

O Google oferece as dicas a seguir para verificar se seu site está preparado para o primeiro índice móvel, mas essencialmente, se você estiver usando um web design responsivo modelo para seu site, você deve ter problemas mínimos com essa mudança:

• Certifique-se de que a versão móvel do site também tenha o importante , conteúdo de alta qualidade. Isso inclui texto, imagens (com atributos alt) 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: eles devem estar na versão para celular e 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 exibição. Por exemplo, certifique-se de que os títulos e as meta descrições sejam equivalentes em ambas as versões de todas as páginas do site.

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

• Verifique os links hreflang em URLs diferentes para celular. Ao usar elementos link rel = hreflang para internacionalização, vincule entre URLs móveis e de desktop separadamente. O hreflang de seus URLs móveis deve apontar para outras versões de idioma / região em outros URLs móveis e, da mesma forma, vincular desktop a outros URLs de desktop 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 elevada. Isso não afeta sites que usam web design responsivo e veiculação dinâmica, apenas sites em que a versão para celular está em um host separado, como m.example.com.

Os usuários esperam rolar uma página para baixo

Como o primeiro critério indica, a rolagem é sempre uma consideração importante. Os usuários geralmente não gostavam de rolar se não precisassem – embora, com o passar dos anos, isso tenha mudado.

Então, quando você projeta, deve considerar o quanto os usuários podem ver se rolarem apenas um tela cheia ou duas. Qualquer tela com mais de cinco telas pode ser uma indicação de que pode haver muitas cópias na página. Claro, isso é balanceado com a visão de que alguns artigos pretendem ser informações detalhadas e os usuários esperam esperar um pouco mais para visualizar o conteúdo da página e os tipos de conteúdo.

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

Uma mudança para um site móvel responsivo resultará em muito mais tráfego do Google?

Não necessariamente, mas talvez.

Como muitas coisas a fazer com a otimização do Google – ter um site otimizado para celular é mais ou menos para garantir que você MANTENHA o tráfego que já está recebendo, não necessariamente para lhe dar mais tráfego tráfego do Google.

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

O qual O nível de exigência está sendo aumentado – novamente – pelo Google e seus usuários – e se você quiser competir em SERPs orgânicos cada vez mais competitivos, este é outro obstáculo para as pequenas empresas superar.

A LONGO prazo – essa conversão para celular 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 costumam ser menores do que no computador.

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

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

Google Search Console

Você deve ser capaz de rastrear erros de dispositivos móveis no Google Search Console (também conhecido como Google Webmaster Tools) e ver os erros desaparecerem hora se o seu site estiver configurado corretamente.

Ferramenta para testar seu site para compatibilidade com dispositivos móveis

• Ferramenta de inspeção de URL do Search Console
• Pagespeed Insights
• Think With Google
• Teste de compatibilidade com dispositivos móveis

Como tornar seu site compatível com dispositivos móveis

Parte 1 – PageSpeed Insights, teste de compatibilidade com dispositivos móveis e usabilidade em dispositivos móveis

Parte 2 – janelas de visualização, zoom e plug-ins

Parte 3 – Alvos de toque, margens e tamanhos de fonte

Parte 4 – Redirecionamentos

Os desenvolvedores da web devem encontrar meus outros postagem útil agora que a velocidade do site é um fator de classificação no Google:

CITAÇÃO: “A versão móvel de um site deve carregar idealmente em menos de 3 segundos e o mais rápido, melhor. UM SITE MUITO LENTO pode ser um fator de classificação NEGATIVO (confirmado pelo Google). Não há limite definido ou pontuação de velocidade para atingir, ju st para tornar a sua página o mais rápido possível. ” Shaun Anderson, Hobo 2020

Isenção de responsabilidade

Isenção de responsabilidade: “Enquanto eu tenho envidou todos os esforços para garantir que as informações que forneci são corretas, não é um conselho .; Não posso aceitar qualquer responsabilidade ou obrigação por quaisquer erros ou omissões. O autor não garante sites de terceiros ou qualquer serviço de terceiros. Visite sites de terceiros por sua própria conta e risco. Não tenho parceria direta com o Google ou qualquer outro terceiro. Este site usa cookies apenas para análises e funções básicas do site. Este artigo não constitui aconselhamento jurídico. O autor não assume qualquer responsabilidade que possa surgir do acesso aos dados apresentados neste site. Links para páginas internas promovem meu próprio conteúdo e serviços. ” Shaun Anderson, Hobo