Baixe nosso manual gratuito para criar o seu site com confiança.
O e-mail informado é inválido.
Obrigado por se cadastrar.
Ao informar seu e-mail, você indica que leu e entendeu nossa Política de Privacidade e concorda em receber marketing do Squarespace.
As pessoas procuram acessar o seu site de um laptop, monitor, smartphone ou tablet. Com tantos tamanhos diferentes de tela, é importante criar um site padronizado e que funcione tranquilamente em todos os aparelhos. Ao priorizar os aparelhos móveis na hora de criar o design o site, você oferece uma melhor experiência ao usuário.
Saiba mais sobre o design voltado para aparelhos móveis e garanta que as pessoas tenham uma interação positiva com o seu site.
O que é design voltado para a versão móvel?
O design voltado para a versão móvel (mobile-first) é uma filosofia que prioriza as telas menores para oferecer uma navegação mais fácil. Ela se baseia na ideia do avanço progressivo — criar a versão menor primeiro e depois revisar para as versões maiores (como desktop ou smart TV).
Você pode incorporar os mesmos princípios que os designers de UX usam: priorizar quem usa o celular para acessar o site. Ou seja: coloque em destaque os elementos importantes do site, como navegação do site e CTAs, a fim de aproveitar ao máximo o espaço limitado.
Todos os sites Squarespace vêm com design responsivo que ajusta automaticamente o tamanho das caixas de conteúdo e das imagens para que caibam em telas de diferentes tamanhos. No editor do site, você também vêm uma prévia do seu site na versão móvel e pode fazer edições nessa versão.
Como montar um site próprio para versão móvel
Quando alguém fala em site para celular, se refere como o site aparece nos aparelhos móveis. O objetivo principal do web design voltado para a versão móvel é fazer as pessoas que acessam o seu site com um aparelho móvel receberem as informações de forma rápida, fácil e eficaz. Aqui, a conveniência é essencial.
Noções básicas de web design voltado para a versão móvel
Você não precisa atualizar todo o site de uma só vez. Se lhe falta tempo, foque algumas peças-chave do web design para aparelhos móveis. Siga estas recomendações ao criar o design do seu site.
Inclua somente os itens essenciais. Crie um site com base no conteúdo que as pessoas realmente querem. Elimine as distrações para que os usuários móveis sejam facilmente direcionados para o que desejam ver e para as ações que você quer que eles realizem.
Capriche no visual. Os recursos clicáveis são fáceis de identificar? Os botões de chamada para ação (CTA), por exemplo, são destacados, padronizados e fáceis de achar? Os elementos da iconografia, cor e tipografia são legíveis na tela pequena?
Faça um site ágil. Um site com carregamento lento pode aumentar a taxa de rejeição (o número de pessoas que deixam o site após visitarem apenas uma página) e diminui o tempo médio de permanência (o tempo que as pessoas passam olhando para uma página). Para aumentar a velocidade de carregamento na versão móvel, basta compactar as imagens e minimizar os links para sites com redirecionamentos.
Crie uma hierarquia visual para o conteúdo
No site voltado para a versão móvel, a ordem de importância de cada conteúdo deve ser óbvia. Os usuários móveis devem descobrir rapidamente onde procurar e no que clicar. Com menos espaço para trabalhar, é possível planejar como os usuários lerão uma página.
Comece criando um inventário de conteúdos — uma planilha contendo todos os elementos a serem criados no site. Depois, faça uma lista de prioridades: o que os clientes devem ver primeiro? O que eles não podem deixar de ver? Essa é sua hierarquia visual.
Seu logotipo, por exemplo, deve ser a primeira coisa que o usuário vê, pois ajuda no awareness da marca. Ele pode aparecer no topo de cada página, logo antes do título das páginas. A navegação do site também deve ser sempre acessível, para que os visitantes explorem tranquilamente todas as suas páginas. Os botões de CTA também são prioridade na hierarquia visual.
Seja em cima de um template ou com um wireframe, é bom criar primeiro uma hierarquia visual. Ela evita a necessidade de fazer grandes mudanças estruturais durante a fase de construção ou de teste.
Quatro exemplos de site na versão móvel
Na versão móvel, não é possível mostrar muita coisa de cada vez na tela. Ao criar o design do seu site na versão móvel, o principal é mostrar aos visitantes os detalhes mais importantes o quanto antes.
Defina uma meta: você quer que os visitantes vejam seu trabalho, comprem na sua loja, ou visitem outra página no seu site? Os exemplos abaixo mostram como direcionar os visitantes.
1. loja on-line
A meta desse site de eCommerce é fazer você comprar na loja. O design para versão móvel destaca os dois elementos que você precisa ver imediatamente: os produtos em oferta e um botão de CTA que leva à loja completa.
Você também pode acessar o carrinho e a navegação completa do site, o que facilita a localização do que você precisa.
Confira a íntegra do template Crosby
2. Portfólio de fotografias
Talvez a meta seja expor sua arte para construir uma reputação, atrair clientes ou ambos. A versão móvel do site com o template Reseda chama a atenção para o nome da marca e para uma imagem em destaque. O ideal é que essa imagem seja o trabalho que melhor representa sua estética.
Ao rolar a tela, você sabe mais sobre o fotógrafo e vê mais coleções de portfólios. O design não cansa e ainda dá espaço para as fotos brilharem.
Confira a íntegra do template Reseda
3. Serviços baseados em projeto
Se você presta serviços, os aspectos mais importantes para os potenciais clientes são sua expertise e as opções de serviço. Com apenas duas frases, a versão móvel desse site informa tudo sobre o que essa empresa faz e a especialidade dela.
Uma rápida rolagem mostra uma prévia do estilo do design, da experiência do designer e dos depoimentos. O design tem seções nítidas e fáceis de navegar, e as CTAs mostram claramente o destino dos links e botões.
Confira a íntegra do template Condesa
4. Curso on-line
Semelhante à loja on-line acima, a versão móvel para esse curso on-line mostra imediatamente aos visitantes as informações relevantes: o que o curso on-line abrange e um link para ver as opções de aprendizagem.
A página do curso em si é adaptada para telas menores, de modo que ainda fica fácil ver as diferentes aulas e descrições.
Confira a íntegra do template Kusa
Por que o web design para versão móvel é importante
Os dados do Squarespace Analytics mostram quantos visitantes do seu site estão usando um aparelho móvel. O bom funcionamento do site na tela móvel afeta como cada um deles enxerga a sua marca — ou mesmo se eles descobrem o site. Se a versão móvel for difícil de usar, um novo visitante que encontrar seu site no celular pode não retornar, além de isso prejudicar sua classificação nas buscas.
Criando um relacionamento com o público
O bom funcionamento do site — a experiência do usuário — é uma das principais influências no relacionamento com os visitantes. Pense no site como uma extensão sua. Se for difícil achar as informações ou usar o site, é mais provável que o usuário saia e não volte mais. Assim, eles acabam não conhecendo você nem sabendo o que você faz.
Quanto mais fácil for a navegação, mais provável será de as pessoas ficarem no site e visitarem outras páginas nele. Eles podem começar nos seus produtos, mas, ao direcioná-los para a página "Sobre mim" ou para o cadastro na lista de e-mails, você abre mais oportunidades para conquistar um apoiador ou cliente fiel.
Encontre seu público onde ele navega
Embora as conversões sejam maiores nos computadores do que nos aparelhos móveis, a maior parte do awareness e do envolvimento da marca ocorre nesses últimos. A conclusão é que as pessoas procuram produtos no celular e depois fecham a compra em casa ou no trabalho, quando voltam para um computador.
A experiência móvel positiva aumenta a probabilidade de alguém voltar ao site quando tiver acesso a uma tela de laptop ou desktop.
Aumentando sua classificação na SERP
Em muitos casos, os principais buscadores do mundo, como o Google, analisam primeiro a versão móvel dos sites — ou seja, antes das versões para desktop — ao classificá-los. Por isso, para turbinar a classificação da página de resultados dos buscadores (SERP), é essencial que a versão móvel do seu site tenha um desempenho igual ou melhor do que a interface para desktop.
Com isso, sua SEO fica ainda melhor do que um conteúdo bem produzido e rico em palavras-chave, garantindo que o maior número possível de potenciais clientes descubra o seu site.
Ainda está construindo um site? Saiba como criar uma página de destino.
Esta publicação foi atualizada em 27 de março de 2024.