Saiba como o Squarespace muda o conteúdo do seu site para caber em qualquer aparelho.

O design responsivo integrado do Squarespace redimensiona seu conteúdo e imagens para se adequar a diferentes dispositivos e larguras de tela. Com o design responsivo, os visitantes podem visualizar automaticamente seu site de várias maneiras, para que você não precise criar e manter sites separados para cada dispositivo, navegador e largura de exibição em potencial.

As respostas para perguntas comuns, como “Por que meu banner está cortando no celular?” ou “Minha imagem de fundo está distorcida. Como faço para consertar?” consistem na compreensão do design responsivo e na escolha de imagens que possam se adaptar à forma de diferentes navegadores e dispositivos.

Dica: para saber mais sobre como determinados elementos do site aparecem no celular, acesse Como meu site aparecerá em dispositivos móveis?

Práticas recomendadas de imagem

Imagine um tapete estreito que se cabe perfeitamente no chão de uma sala estreita. Se você mover o tapete para uma sala menor, ou mesmo mudar a orientação, ele não vai mais caber.

Imagens, especialmente banners e imagens de fundo, funcionam da mesma maneira. O design responsivo ajuda a alterar o tamanho e a forma do "tapete". Para obter o melhor efeito, selecione e configure cada imagem para que fique bem em todas as "salas".

Ao escolher uma imagem para carregar, lembre-se:

Tamanho da Imagem

• Para recomendações sobre tamanho e largura do arquivo de imagem, siga nossas práticas recomendadas de imagem.
• Para saber mais sobre as práticas recomendadas para imagens de banner, acesse Adicionar imagens de banner.
• Escolha imagens com aproximadamente a mesma forma que o contêiner onde elas aparecem. Por exemplo, use uma imagem ampla para um banner. Para entender como funciona o corte, acesse Solucionar problemas de corte.

Conteúdo da imagem

• Padrões abstratos e imagens sem texto ou bordas funcionam melhor.
• Para imagens de fundo, padrões de repetição oferecem maior flexibilidade.
• Altere o ponto focal para controlar como a imagem se centraliza.
• Se for importante que uma área específica da imagem (como uma pessoa ou objeto) não seja cortada, ela pode ajudar a adicionar uma" área de sem margens ao redor das bordas, de modo que o corte seja menos perceptível.

Práticas recomendadas de texto

O texto se redimensiona automaticamente para caber na tela.

Dicas:

• Adicione texto como legenda, sobreposiçãoou diretamente na página em vez de usar imagens que contenham texto. Isso reduzirá problemas de corte, já que as fontes são dimensionadas com a largura do navegador. Os motores de busca também podem indexá-lo para resultados.
• Na versão 7.0. alguns templates oferecem controle aperfeiçoado sobre o ajuste do tamanho do texto na versão móvel.

O conteúdo se reorganiza no celular

O Editor Intuitivo reorganiza o conteúdo no layout da versão móvel de forma independente do layout para computador.

No editor clássico, o conteúdo é empilhado na vertical na versão móvel. Com isso, o site fica mais fácil de navegar, e as imagens e o texto continuam visíveis no browser menor e mais estreito.

Para saber mais:

• Revise nossas regras gerais sobre a aparência do seu site em um dispositivo móvel.
• Saiba como as páginas e os layouts de blocos mudam em dispositivos móveis no editor clássico.

Observação: se o seu site estiver na versão 7.0 e você tiver desativado os estilos móveis , o conteúdo do site não será reorganizado ou empilhado no celular.

O conteúdo responde de forma diferente nas telas Retina

A aparência do seu site nas telas Retina e HD depende do tamanho original das imagens que você enviou para o seu site.

Quando você carrega uma imagem, armazenamos até sete versões dela, cada uma com uma largura diferente. Nosso design responsivo integrado detecta automaticamente a tela do visitante e escolhe o melhor tamanho de imagem para caber. Nas telas Retina, mostraremos uma imagem duas vezes maior que o necessário.

Nota: as imagens carregadas através de Estilos do Site na versão 7.0, como imagens de fundo, são a exceção a esta regra. Para essas imagens, sempre mostramos a imagem original em seu tamanho real.

Aqui estão alguns outros tipos de imagem a considerar:

• Logotipo: usar um arquivo grande (duas vezes o tamanho necessário) para o logotipo pode melhorar o visual dele nas telas HD e Retina. No entanto, isso pode tirar o foco dele em outras telas e em alguns browsers. Considere o público do seu site e use um tamanho adequado à maioria das telas dos visitantes. Você pode alterar a altura do logotipo na maioria dos templates.
• Ícones: a maioria dos ícones em nossos templates, como ícones de menu e ícones sociais, são dimensionados sem perda de qualidade de imagem porque são fontes da Web ou baseados em SVG. Alguns templates mais antigos ou descontinuados têm ícones baseados em imagens que não são dimensionados em telas Retina.
• Texto: qualquer texto adicionado ao seu site será dimensionado para telas Retina sem perda de qualidade.

Para obter mais dicas sobre como otimizar imagens, acesse Formatar suas imagens para exibição na Web.

Compare em diferentes dispositivos

Comparar o site no celular e no computador é uma boa maneira de ver como ele se adapta a diferentes formas no browser. Conforme você faz grandes alterações no site, é bom manter o celular por perto, com o site aberto no navegador. Ao salvar essas alterações no computador, atualize o browser no smartphone para ver o efeito.

Testar alterações em seu dispositivo móvel fornece a exibição mais precisa e é a única maneira de explorar as orientações retrato e paisagem. Para uma visualização rápida conforme você edita em um computador, use a Prévia por aparelho.

Saiba mais sobre como o tamanho da janela do browser afeta a formatação do conteúdo do site em Browsers aceitos.