Site responsivo

O que é um site responsivo?

Um site responsivo entrega o mesmo HTML para todos os dispositivos e adapta o layout com grades fluidas, imagens escaláveis e media queries do CSS. Em vez de ter um site móvel separado (como uma URL m.dot), o conteúdo flui de forma que colunas, fontes e navegação se ajustem à largura da tela. A base para isso é a tag <meta name="viewport" content="width=device-width, initial-scale=1"> contida na tag <head> da página — sem ela, os navegadores móveis renderizam a página na largura de desktop e ignoram suas media queries.

Por que um site responsivo é importante?

O Google utiliza a indexação baseada primeiro no dispositivo móvel (mobile-first indexing), o que significa que a versão mobile da sua página é a que é rastreada, indexada e utilizada para o ranqueamento. Uma estrutura responsiva com uma única URL e um único HTML também é a abordagem recomendada pelo Google, porque é mais fácil de manter e evita erros de SEO comuns em sites móveis separados. Para uma loja online, isso também significa conversão direta: a maior parte do tráfego vem de celulares, e uma página de produto apertada ou um checkout que não cabe na tela custam vendas de imediato.

Casos de uso comuns

• Páginas de produtos no celular. Certifique-se de que as imagens, o preço e o botão “Adicionar ao carrinho” estejam legíveis e fáceis de tocar sem necessidade de zoom.
• Dimensões reservadas. Defina largura/altura ou uma proporção (aspect ratio) nas imagens e banners para que não desloquem o conteúdo e prejudiquem o CLS.
• Priorização do conteúdo acima da dobra. O conteúdo mais importante deve ser visível em telas pequenas sem que seja necessário rolar a página.
• Testes em múltiplos dispositivos. Verifique o tema em celulares, tablets e desktops antes de cada grande alteração.

Perspectiva do Shopify

Os temas do Shopify para a Online Store 2.0, como o Dawn, são responsivos e voltados para dispositivos móveis por padrão, mas personalizações e aplicativos podem quebrar essa funcionalidade. Pop-ups, barras flutuantes e scripts de terceiros são os problemas mais comuns em dispositivos móveis. Teste suas alterações na visualização de dispositivos do editor de temas e em um celular real, e monitore as Core Web Vitals no Search Console, em vez de assumir que o tema gerencia tudo de forma automática.