Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Dicas para uma boa versão móvel do site

Todos os sites do Squarespace são projetados para funcionar bem na versão móvel desde o início. No entanto, adições como arquivos de mídia grandes, conteúdo demais em uma página e espaçamento estreito entre as letras podem causar problemas no carregamento do site e na exibição móvel. Este guia aborda nossas práticas recomendadas para que o seu site funcione bem na versão móvel.

Teste a compatibilidade móvel do seu site

Para ver como o site aparece no celular, visite-o em um aparelho móvel ou use o recurso visualização por dispositivo, que mostra uma prévia de como ele fica em uma tela menor. Para aprender também como os diferentes recursos aparecem no celular, leia Como meu site ficará na versão móvel?

Use o Teste de compatibilidade com a versão móvel para fazer uma rápida avaliação da compatibilidade do seu site com os aparelhos móveis. Se o teste indicar que o site não funciona bem na versão móvel; ou se você tiver problemas ao testar o site em um aparelho móvel, siga as dicas deste guia.

Atenção: o Teste de compatibilidade com a versão móvel feito pelo Google é uma ferramenta externa e está fora do escopo do nosso suporte.

Cada aparelho móvel lida com websites de modo diferente

Celulares mais novos, por exemplo, lidam melhor com sites grandes, e o tempo de carregamento é geralmente mais rápido em uma rede wireless (em comparação à rede de celular).

Alguns navegadores móveis não exibem uma mensagem de erro se o tamanho da página for muito grande. Siga estas dicas para tornar suas páginas menores.

Mantenha as páginas com menos de 5 MB

Quando o visitante carrega uma página, o aparelho baixa todo o conteúdo. Os aparelhos móveis usam um hardware simples e dependem da rede de celular para acessar a Internet. Portanto, solicitar grandes quantidades de dados pode sobrecarregá-los. Para evitar problemas, minimize a quantidade de conteúdo em cada página.

Como o tempo de carregamento depende do aparelho e da conexão, não há um limite exato. No entanto, páginas com mais de 5 MB de conteúdo podem demorar para carregar nas conexões de celular; portanto, quanto menor, melhor.

Para verificar o tamanho de uma página, leia Verificação do tamanho do conteúdo da página. Se todas as páginas forem grandes demais, siga estas dicas para diminuí-las.

Dica: se o seu template aceitar, ative o carregamento com Ajax , que instrui o browser a carregar o conteúdo uma página de cada vez.

Deixe o espaçamento entre letras em 0 px ou maior

Se o espaçamento entre as letras for menor do que 0 px, elas poderão se sobrepor na versão móvel.

No painel Fontes, clique o-icone-de-engrenagem no pacote de fontes selecionado e depois clique no formato de fonte que você quer estilizar. Deixe o espaçamento entre letras em 0 px ou mais. Saiba mais em Opções de estilo e design da versão 7.1

No painel Estilos do site, veja se o recurso Espaçamento entre letras está em 0 px ou maior em todas as suas fontes.

image2.jpg

Não confie nos Blocos de Espaçamento

Os Blocos de Espaçamento adicionam espaço vazio a uma página, criando um layout minimalista à versão do site para computador. No entanto, esses blocos ficam ocultos no celular na maioria dos templates, o que pode alterar o layout de um modo indesejável. Em vez de confiar em vários Blocos de Espaçamento, considere alterar o preenchimento para adicionar mais espaço em branco. Uma opção é o recurso inserção de conteúdo, disponível em alguns templates.

Ative as AMP nas Páginas do Blog

Se você usa o Squarespace para blogar, ative a opção AMP (Páginas Móveis Aceleradas) para aumentar a velocidade de carregamento.

Veja se os Estilos móveis estão ativados

Na versão móvel do Squarespace, a maioria dos templates mostra o conteúdo em um layout empilhado exclusivo para que o visitante navegue facilmente pelo conteúdo. Com os Estilos móveis desativados, o visitante precisa usar os dois dedos para ampliar e navegar o site.

Para ver se os Estilos móveis estão ativados:

  1. No Menu Inicial, clique em Design e depois em Configurações de template.
  2. Veja se Desativar estilos móveis está desmarcado.

Essa configuração só aparece nos templates que aceitam a desativação dos Estilos móveis.

Mais dicas de formatação

Para mais dicas de formatação para a versão móvel, leia Como meu site ficará na versão móvel? Lá abordamos a exibição na versão móvel de cada template e mostramos otimizar a compatibilidade de certos tipos de conteúdo com a versão móvel.

Este artigo foi útil?
Utilizadores que acharam útil: 119 de 269