Disclosure: “This article is personal opinion of research based on my experience of almost 20 years. 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. Isencao. “Shaun Anderson, Hobo

Os Websites devem transformar-se de forma responsável e rápida em todas as resoluções da tela em diferentes navegadores e plataformas., Acessivel. Sem telemóvel. Desenhe para o seu público, primeiro. Projeto de 360×640 a 1920×1080.

  • concepção para ecrãs de secretária de 1024×768 a 1920×1080
  • concepção para ecrãs móveis de 360×640 a 414×896
  • concepção para ecrãs de comprimidos de 601×962 a 1280×800
  • verifique o Google Analytics e Optimize para os tamanhos de resolução mais comuns do seu público-alvo
  • Não desenhe para um monitor ou resolução do ecrã. O tamanho da tela e o estado da janela do navegador variam entre os visitantes.
  • O Design deve ser sensível 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 da consola de pesquisa do Google para dispositivos móveis e usabilidade

ele ainda deve parecer bom e funcionar bem em todos os tamanhos, e é por isso que eu *usado para* recomendar uma disposição líquida altamente acessível usando larguras percentuais para controlar layout. Agora a recomendação é um modelo de site sensível.,

os três critérios principais para otimizar a disposição de uma página para um determinado tamanho de tela são:

  • visibilidade inicial da página Web: Todas as informações-chave são visíveis acima da dobra para que os usuários possam vê-la sem deslocar-se? Este é um tradeoff entre quantos itens são mostrados vs. quanto detalhe é mostrado para cada item.
  • legibilidade da página Web: como é fácil ler o texto em várias colunas, dada a sua largura atribuída?
  • estética da página Web: quão boa é a sua página quando os elementos estão no tamanho e localização adequados para este tamanho de tela?, Faça todos os elementos alinhados corretamente-isto é, são legendas imediatamente ao lado das fotos, etc.?

Usability guidelines also recommended you consider all three criteria at the full range of sizes,. Verifique a janela do navegador de 360×640 a 1920×1080 resoluções de tela.

a sua página deve ter uma pontuação elevada em todos os critérios ao longo de todo o intervalo de resolução.

sua página também deve funcionar em tamanhos ainda menores e maiores, embora tais extremos são menos importantes.,

embora esses usuários certamente devem ser capazes de acessar o seu site, dando-lhes um design menos do que grande é, por vezes, um compromisso aceitável.,

Top Dez Mais Comuns Resoluções de Tela

a 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: “Responsive Web Design: Serve o mesmo código HTML no mesmo URL, independentemente de os usuários de dispositivo (por exemplo, desktop, tablet, móveis, não-visual do navegador), mas podem tornar-se apresentar de forma diferente com base no tamanho da tela. O Google recomenda um design web responsivo porque é o padrão de design mais fácil de implementar e manter.,”O Google Developer Guias, 2020

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

Este método move o uso de largura fixa sites e, em vez disso, usa as Consultas de Mídia em folhas de estilo CSS para criar um site que responde em tamanho para as diferentes viewports de dispositivos portáteis e telas menores que as pessoas usam.,

portanto, qualquer dispositivo que uma pessoa possa estar usando para ver o seu site, você é capaz de dar-lhes a experiência mais completa possível.

Índice

o Google Prefere Sites fáceis de usar

o Google determina o fluxo e o refluxo do comércio on-line e eles apenas ditou que você precisa para projetar uma satisfatória experiência de usuário em vários dispositivos, SE você quer esperar para ter uma boa classificação para palavras-chave competitivas no Google.

QUOTE: “Google uses two different crawlers for crawling websites: a mobile crawler and a desktop crawler., Cada tipo de rastreador simula um usuário que visita sua página com um dispositivo desse tipo. O Google usa um tipo de rastreador (móvel ou desktop) como o principal rastreador para o seu site. Todas as páginas do seu site que são rastejadas pelo Google são rastejadas usando o rastreador primário. O principal rastreador para todos os novos sites é o rastreador móvel. Além disso, o Google recrawls algumas páginas em seu site com o outro Tipo crawler (móvel ou desktop). Isto é chamado de rastejar secundário, e é feito para ver como bem o seu site funciona com o outro tipo de dispositivo.,”Google Webmaster Guidelines, 2020

desde 21 de abril de 2015, em todo o mundo, como um site amigável para dispositivos móveis afetou o desempenho de ranking para sites em uma variedade de dispositivos.

Se você faz sites para pequenas empresas-você saberá que eles querem um site que irá funcionar bem no Google organic listings – você sabe que eles estão interessados na otimização do motor de busca:

QUOTE: “eu tenho 20 anos de experiência praticando SEO profissional. Este tutorial SEO é a minha coleção de dicas e melhores práticas SEO que eu uso para classificar sites no Google.,”Shaun Anderson, Hobo 2020

SEO é agora baseado, em parte, em um bom site UX, como o Google quantifica, pelo menos para usuários móveis.

QUOTE: “com as buscas móveis agora excedendo as buscas no ambiente de trabalho, é importante que o seu site seja amigável para as comunicações móveis. Googlebot agora usa um rastreador móvel como o rastreador padrão para sites.”Google Webmaster Guidelines, 2020

no momento – que essencialmente agora significa design sensível do site e amigo do celular, especialmente com o Google “tornando o nosso índice móvel-primeiro”.,

área de Trabalho Resolução de Tela de Estatísticas em todo o Mundo de Maio de 2019 – Maio de 2020

Para referência, aqui está uma lista das atuais top resoluções de tela de todo o mundo, como registrado recentemente (2020):

de ambiente Desktop Mais Comuns de Resolução de Tela Tamanhos 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%

resoluções de Ecrã de Estatísticas em todo o Mundo de Maio de 2019 – Maio de 2020

Mais Comuns resoluções de Ecrã Tamanhos 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×736 – 3.74%

Tablet Resolução de Tela de Estatísticas em todo o Mundo de Maio de 2019 – Maio de 2020

Mais Comuns do Tablet de Tela de Resolução de Tamanhos 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%

área de Trabalho Resolução de Tela de Estatísticas, NOS eua, Podem 2019 – Maio de 2020

Top Resoluções de Tela NOS eua (2020)

de ambiente Desktop Mais Comuns Tamanho da Resolução de Tela 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%

resoluções de Ecrã de Estatísticas, NOS eua, Podem 2019 – Maio de 2020

Mais Comuns Móvel Tamanho da Resolução de Tela 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%

Tablet Resolução de Tela de Estatísticas, NOS eua, Podem 2019 – Maio de 2020

Mais comuns do Tablet Tamanho da Resolução de Tela nos Estados Unidos Da América

  • 768×1024 – 54.,68%
  • 800×1280 – 5.75%
  • 1280×800 – para 5,73%
  • 601×962 – 5.41%
  • 1024×1366 – 3.06%
  • 600×1024 -2.57%

área de Trabalho Resolução de Tela de Estatísticas do reino UNIDO de Maio de 2019 – Maio de 2020

Top Resoluções de Tela no reino UNIDO (2020)

de ambiente Desktop Mais Comuns Tamanho da Resolução de Tela 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%

resoluções de Ecrã de Estatísticas do reino UNIDO de Maio de 2019 – Maio de 2020

Mais Comuns Móvel Tamanho da Resolução de Tela 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%

Tablet Resolução de Tela de Estatísticas do reino UNIDO de Maio de 2019 – Maio de 2020

Mais Comuns do Tablet Resolução de Tela Tamanhos 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%

área de Trabalho vs Mobile vs Quota de Mercado de Tablet em todo o Mundo

área de Trabalho vs Mobile vs Quota de Mercado de Tablet em todo o Mundo

  1. Móvel – 50.48%
  2. área de Trabalho – 46.51%
  3. Tablet – 3.0%

*Nota – estatísticas acima são de uma (embora credível) origem, de modo que pode ser desviado de uma maneira que talvez não saiba. Gráficos fornecidos por http://statcounter.com/.,

Como posso desenhar um Site que se parece com o mesmo em cada navegador & resolução?

Você não pode.

é impossível projetar um site para parecer o mesmo em cada navegador, plataforma e resolução de tela, então evite tentar.

Você pode optar por um layout fluido sem tabelas para o seu design, com % larguras que expandem e contratam para caber um navegador de visitantes ou você pode considerar olhar para soluções de design responsivo que irá alcançar muito a mesma coisa.,

O Google favorece designs sensíveis, o que é uma boa notícia para aqueles que o adotaram:

QUOTE: “sites que fazem uso de design web responsivo e implementam corretamente o serviço dinâmico (que incluem todo o conteúdo do desktop e marcação) geralmente não têm que fazer nada.”Google NOV 2017

MOBILE está em ascensão – por isso, se desenvolver um novo site – você deve pensar sobre o quão móvel amigável seu site realmente é desde o início.

I aim to keep things simple when I am actually coding things.,

Você não pode agradar a todos – e a pergunta que tamanho é melhor ainda é um tema quente para o debate por designers com mais usabilidade e UX experiência do que eu.

o Que eu sei da experiência é que é de fundamental importância para você identificar SEU público-alvo e os dispositivos que eles usam, e construir o seu site (no todo), para atender esse público.

E esse público inclui GOOGLEBOT.

o seu site móvel redireciona para outro URL & versão do seu Site?bem, isso não é ideal. Na verdade, nunca foi.,

caminho de volta na época – algumas pessoas usaram apenas texto versões de um site para produzir conteúdo para usuários/navegadores que não suportavam elementos de seus sites – em uma tentativa (geralmente em vão) de tornar seu conteúdo mais acessível.

O W3C mesmo usado para recomendá-lo eu acho que se tudo mais falha:

Um texto, uma só página, com informações equivalentes ou funcionalidade, deve ser fornecido para fazer um web site conformidade com as disposições da presente parte, quando conformidade não pode ser feita em qualquer outra forma., O conteúdo das páginas apenas de texto deve ser atualizado sempre que a página principal mudar. Secção 508

sempre foi ideal para entregar um URL a um visitante para fins de acessibilidade, e não há diferença na entrega de conteúdo de telemóvel ou smartphone se estiver a pensar em criar uma versão” móvel ” do seu site. Isto, é claro, pode muito bem ser ainda mais importante se o Google estiver se movendo para um primeiro índice móvel.,

O Google pode muito bem avaliá – lo principalmente em sua experiência móvel em um futuro próximo-então todos nós realmente precisamos estar cientes das grandes mudanças que podemos ver muito em breve nos SERPs do Google.

Quando o Google é o ‘visitante’, geralmente é ainda mais importante entregar apenas um URL por causa de desafios de URL canônicos para os motores de busca – e este tem sido o caso antes da implementação do elemento de link canônico há algum tempo atrás.

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

Se você tem o “smartphone” de conteúdo (o que vemos como normal web-conteúdo, como é geralmente uma página HTML normal, apenas ajustado em layout para telas menores) você pode usar o rel=canonical para apontar para a versão desktop. Isso nos ajuda a focar na versão desktop para a web-search. Quando os usuários visitam a versão desktop com um smartphone, você pode redirecioná-los para a versão móvel. Isso funciona independentemente da estrutura de URL, então você não precisa usar subdomínios / subdiretórios para sites de smartphone-mobile., Ainda melhor, porém, é usar as mesmas URLs e para mostrar a versão apropriada do conteúdo, sem um redirecionamento de John Mueller, Google

Ignorando Google Recomendações muitas Vezes Não É Uma jogada Inteligente

CITAÇÃO: Para recapitular, atualmente nossa rastreamento, indexação, e sistemas de classificação normalmente olham para a versão de desktop de uma página de conteúdo, o que pode causar problemas para o móvel pesquisadores quando essa versão é muito diferente da versão móvel., Mobile-first indexing significa que vamos usar a versão móvel do conteúdo para indexação e ranking, para melhor ajudar os nossos – principalmente móveis – usuários a encontrar o que eles estão procurando. Webmasters vai ver significativamente aumentado rastreamento por Smartphone Googlebot, e os trechos nos resultados, bem como o conteúdo nas páginas de cache do Google, será a partir da versão móvel das páginas., O Google Novembro de 2017.

o Google oferece as seguintes dicas para verificar se o seu site está preparado para o mobile primeiro índice, mas, essencialmente, se você estiver usando um responsive web design de modelo para o seu site, você deve ter o mínimo de problemas com esta alteração:

  • certifique-se de que a versão móvel do site também tem o importante, conteúdo de alta qualidade. Isto inclui texto, imagens (com alt-atributos), e vídeos – nos formatos rastejáveis e indexáveis habituais.,

  • dados estruturados são importantes para a indexação e busca de recursos que os usuários adoram: ele deve ser tanto na versão móvel e desktop do site. Garantir que os URLs dentro dos dados estruturados são atualizados para a versão móvel nas páginas móveis.

  • metadados devem estar presentes em ambas as versões do sítio. Ele fornece dicas sobre o conteúdo em uma página para indexar e servir., Por exemplo, certifique-se de que títulos e Descrições meta são equivalentes em ambas as versões de todas as páginas do site.

  • não são necessárias alterações para a interligação com URLs móveis separadas (m.-dot sites). Para sites que usam URLs móveis separados, manter o link existente rel=canônico e rel link = elementos alternativos entre estas versões.

  • Verifique hreflang links em separado URLs móveis., Ao usar link rel=elementos hreflang para internacionalização, link entre URLs móveis e desktop separadamente. O hreflang dos seus URLs móveis deverá indicar as outras versões da língua/região em outros URLs móveis, bem como a ligação entre o ecrã e outros URLs de secretária que utilizam os elementos de ligação hreflang.

  • assegurar que os servidores que hospedam o site tenham capacidade suficiente para lidar com uma taxa de crawl potencialmente aumentada., Isso não afeta os sites que utilizam o responsive web design e dinâmica, servindo, apenas os sites onde a versão móvel está em um host separado, como m.example.com.

os Usuários Esperam para Rolar Para Baixo Uma Página

Como o primeiro critério implica, deslocamento é sempre uma consideração fundamental. Os usuários geralmente não gostam de rolar se eles não precisam – embora, ao longo dos anos, isso mudou.

assim, quando você projetar, você deve considerar o quanto os usuários podem ver se eles só rolam uma tela cheia ou duas., Qualquer mais de cinco telas de comprimento pode ser uma indicação para você de que pode haver demasiada cópia na página. Claro, isso é equilibrado com a visão de que alguns artigos são destinados a ser Peças de informação em profundidade e os usuários esperariam esperar um pouco mais para ver algum conteúdo de página e tipos de conteúdo.

tanto a deslocação como a visibilidade inicial dependem obviamente do tamanho do ecrã: os ecrãs maiores mostram mais conteúdo acima da dobra e requerem menos deslocamento.

uma mudança para um Site móvel sensível resultará em muito mais tráfego do Google?

não necessariamente, mas talvez.,

tantas coisas a ver com a otimização do Google – ter um site Amigo do celular é mais ou menos para garantir que você mantém o tráfego que já está recebendo, não necessariamente dar-lhe mais tráfego livre do Google.

Se você já não recebe muito tráfego de visitantes móveis – Eu Não tenho certeza se esta atualização do Google terá um efeito perceptível nos 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á a ser levantada – novamente – pelo Google, e pelos seus utilizadores – e se quiser competir em SERPs orgânicos cada vez mais competitivos, este é mais um obstáculo para as pequenas empresas ultrapassarem.

a longo prazo-esta conversão móvel só pode ser uma coisa boa para os seus utilizadores – mas a curto prazo – será interessante ver o efeito que tem nas taxas de conversão das pequenas empresas – uma vez que as taxas de conversão via telemóvel são muitas vezes menos do que na área de trabalho.,

O Google disse que este algoritmo amigável para dispositivos móveis terá um maior impacto nos SERPs do que os algoritmos Google Penguin e Google Panda-e vamos descobrir mais com o passar do tempo.

Como verificar se existem problemas importantes de usabilidade móvel no seu Site

Google Search Console

deve ser capaz de detectar erros móveis na Google Search Console (também conhecida por Google Webmaster Tools) e ver que os erros desaparecem com o tempo se o seu site estiver configurado correctamente.,”>

Parte 1 – PageSpeed Insights, Móveis de Teste e Móveis, Usabilidade

Parte 2 – Viewports, zoom e plug-ins

Parte 3 – Toque alvos, margens e tamanhos de tipo de letra

Parte 4 – Redireciona

os desenvolvedores da Web devem encontrar meu outro post recente útil agora que a velocidade do site é um fator de classificação no Google:

CITAÇÃO: “A versão móvel de um site idealmente deve carregar em menos de 3 segundos, e quanto 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 atender, apenas para fazer sua página o mais rápido possível.”Shaun Anderson, Hobo 2020

Disclaimer

Disclaimer: “embora eu tenha feito todos os esforços para garantir que a informação que tenho fornecido é correta, não é Conselho.; Eu não posso aceitar qualquer responsabilidade por quaisquer erros ou omissões. O autor não responde por sites de terceiros ou qualquer serviço de terceiros. Visite sites de terceiros por sua conta e risco., Eu não sou parceiro direto com o Google ou qualquer outro terceiro. Este site utiliza cookies apenas para análises e funções básicas do site. Este artigo não constitui aconselhamento jurídico. O autor não aceita qualquer responsabilidade que possa surgir no acesso aos dados apresentados neste site. As ligações às páginas internas promovem o meu próprio conteúdo e serviços.”Shaun Anderson, Hobo