{"section":"tutorials","requestedLocale":"pt","requestedSlug":"responsivo-x-versao-mobile","locale":"pt","slug":"responsivo-x-versao-mobile","path":"docs/pt/tutorials/storefront/layout/responsivo-x-versao-mobile.md","branch":"main","content":"### Responsivo\n\nSeja do computador, smartphone, tablet ou notebook, o design é o mesmo. O que altera é como o design é apresentado. O layout inteiro é ajustado automaticamente de acordo com a resolução do dispositivo.\n\n### Versão Mobile\n\nO design da versão mobile e toda a sua programação é feito pensando apenas no mobile, sendo uma segunda aplicação, ou seja, uma para navegadores comuns e outra para navegadores mobile. Ao acessar a loja, identifica-se o dispositivo e redireciona a programação específica.\n\n![Principais resoluões mobile utilizadas atualmente](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/responsivo-x-versao-mobile_1.jpg)\n\nPrincipais resoluções de tela utilizadas atualmente (pode-se haver variações conforme o dispositivo\n\n - 320 x 480\n - 480 x 320\n - 768 x 1024\n - 1024 x 768\n - 1680 x 1050\n\n\n#### Alguns pontos fortes do RESPONSIVO devem ser considerados:\n\n- Melhor indexação de SEO (apesar do _site_ dedicado não ficar muito atrás).\n- Fácil atualização e manutenção operacional.\n- Favorece o carregamento e melhora a conversão de códigos de redirecionamento externos e internos.\n- Mesmo look & feel favorece a identidade visual e _branding_.\n- URLs únicas permitem trabalhar facilmente em campanhas.\n\n#### Características tanto no RESPONSIVO quanto na VERSÃO MOBILE:\n\n - Não existe mouse over.\n - Scripts pesam. Diminuir a quantidade ajuda no desempenho do site.\n - Imagens grandes pesam no carregamento, e não são abertas (zoom) frequentemente.\n - Posts resumidos e chamadas diretas tem melhor aderência.\n - Visão 100% vertical.\n - Elementos visuais (imagens exceto a foto do produto) devem ser simplórios.\n - Diferenciação de tamanho e cor é muito mais acentuada do que na loja tradicional.\n - Tempo médio de navegação é muito mais baixo, ou seja, precisa ser objetivo, principalmente na busca dos produtos.\n - Visibilidade da vitrine é muito menor, logo, boa categorização faz toda diferença.\n\n#### Principais elementos visuais reconhecidos nos dispositivos móveis:\n\n![Principais elementos visuais reconhecidos nos dispositivos móveis](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/responsivo-x-versao-mobile_2.jpg)\n\n#### A qualidade é indiferente ao tamanho!\n\nComo todo design, não existem pontos totalmente corretos, tão pouco totalmente errôneos. A fórmula secreta é incorporar a maior amostra de clientes finais e compreender a principais barganhas comerciais que temos, aliadas as boas práticas de usabilidade."}