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

Design responsivo

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?

sizes.gif

Práticas recomendadas de imagem

Imagine um tapete estreito que se encaixa perfeitamente no chão de uma sala estreita. Se você mover o tapete para uma sala menor, ou mesmo apenas mudá-lo de lado, ele não vai caber corretamente.

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

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.

bleed-areas.png

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.
  • Alguns templates oferecem controle aperfeiçoado sobre o redimensionamento de texto em dispositivos móveis.

O conteúdo se reorganiza no celular

Em geral, o conteúdo empilha verticalmente no celular. Isso torna o seu site mais fácil de navegar e ajuda as imagens e o texto a permanecerem visíveis em um navegador menor e mais estreito.

Para saber mais:

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:

  • Logotipos: fazer upload de um arquivo de imagem grande (duas vezes o tamanho necessário) para o seu logotipo pode melhorar sua aparência nas telas HD e Retina. No entanto, isso pode causar falta de foco em outras telas e alguns navegadores, como o Internet Explorer. Considere o público do seu site e use um tamanho de logotipo adequado para a maioria das telas de seus visitantes. Você pode alterar a altura do logotipo na maioria dos templates.
  • Ícones: a maioria dos ícones em nossos templates, como ícones de menu, ícones de redes sociais e botões de compartilhamento, aumentam sem perda de qualidade de imagem porque são fonte web ou baseado 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 seu site no celular versus um computador é uma boa maneira de ver como seu site se adapta a diferentes formas de navegador. Conforme você faz grandes alterações em seu site, é bom manter seu telefone por perto, com seu site aberto em seu navegador. Quando você salvar grandes alterações em um computador, atualize o navegador em seu 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 Visualização por dispositivo.

Este artigo foi útil?
Utilizadores que acharam útil: 62 de 227