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).

Na versão móvel, alguns navegadores mostram uma mensagem de erro se o tamanho da página for grande demais. Siga estas dicas para reduzi-la.

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 da página ou obter dicas para reduzir o tamanho da página, acesse Reduzir o tamanho da página para um carregamento mais rápido.

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, em Estilos gerais de texto, clique no formato de fonte que você deseja estilizar. Deixe o Espaçamento entre letras em 0 px ou mais. Veja mais informações em Alteração de fontes.

No painel Estilos do site, verifique se o espaçamento entre letras está definido como 0px ou superior para todas as fontes.

image2.jpg

Não confie nos Blocos de Espaçamento

Os Blocos Espaçadores adicionam espaço vazio a uma página, criando layouts minimalistas ao visualizar um site em um computador. No entanto, no celular, os Blocos Espaçadores geralmente ficam ocultos. Isso pode alterar a aparência do layout do seu site para dispositivos móveis de maneiras que você não pretende. Em vez de recorrer a muitos Blocos Espaçadores, considere alterar o espaçamento para adicionar mais espaço em branco.

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.

Certifique-se de que os Estilos Móveis estejam ativados (versão 7.0)

Estilos Móveis estão sempre ativados na versão 7.1. Para saber mais, acesse Como meu site ficará na versão móvel?

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 obter mais dicas de formatação para a versão móvel, acesse Como meu site ficará na versão móvel?, onde abordamos como o conteúdo é exibido em telas menores e como otimizar certos tipos de conteúdo para compatibilidade com a versão móvel.

Este artigo foi útil?
Utilizadores que acharam útil: 128 de 304