Criar um site mobile-first: o guia prático

Um site mobile-first é um site concebido primeiro para o ecrã de um smartphone, e só depois adaptado ao desktop, e não o inverso. Este método obriga a priorizar o essencial desde o início: a oferta, o meio de contacto, a ação esperada. Para a maioria das profissões de proximidade, onde uma grande parte dos visitantes chega a partir do telemóvel, é isto que faz a diferença entre um site consultável e um site abandonado em poucos segundos.

Muitos sites ainda são pensados primeiro para desktop

O método mais comum continua a ser, na prática, o inverso do mobile-first. Um site é concebido num ecrã grande, com uma maquete larga, colunas, menus horizontais detalhados. Depois de o design ser validado, "adapta-se" ao telemóvel: o menu passa a botão de hambúrguer, as colunas empilham-se, as imagens são redimensionadas. Tecnicamente, o site funciona no telemóvel. Mas as prioridades nunca foram repensadas para este formato.

O resultado é um site que se exibe corretamente em telemóvel sem ser pensado para o telemóvel. O visitante tem de percorrer vários ecrãs antes de encontrar o número de telefone. O formulário de contacto mantém os seus dez campos, adaptados a um ecrã largo mas incómodos de preencher com o polegar. Os textos mantêm um comprimento pensado para uma leitura tranquila no computador, quando a consulta em telemóvel é muitas vezes feita em poucos segundos, entre duas tarefas.

Este desfasamento afeta particularmente as pesquisas locais e urgentes: "canalizador disponível esta noite", "advogado de direito laboral perto de mim", "restaurante aberto agora". Estas pesquisas são feitas quase sempre a partir de um telemóvel, num contexto em que a rapidez de compreensão prevalece sobre tudo o resto.

Responsive e mobile-first não são a mesma coisa

A confusão é frequente, inclusive entre alguns prestadores. Um site responsive adapta-se tecnicamente a todos os tamanhos de ecrã: os blocos reorganizam-se, nada transborda, o site "funciona" em qualquer lugar. É uma característica técnica.

O mobile-first é um método de conceção. Consiste em perguntar, antes mesmo de desenhar seja o que for: "o que é que um visitante em telemóvel precisa de ver primeiro, com o menor esforço possível?" O design parte desta restrição, e depois enriquece-se progressivamente para os ecrãs maiores, que oferecem mais espaço para conteúdo secundário.

Na prática, um site responsive mas pensado primeiro para desktop mostra muitas vezes, em telemóvel, a mesma hierarquia de conteúdo do ecrã grande, apenas comprimida. Um site mobile-first mostra em primeiro lugar o que realmente importa para um visitante apressado, e relega o resto para mais abaixo, seja qual for o ecrã.

Os princípios concretos de uma conceção mobile-first

Algumas regras simples permitem verificar se um site respeita realmente esta abordagem.

• Um botão de chamada ou de contacto visível sem ter de percorrer o ecrã. Numa página inicial ou numa ficha de serviço, o meio de contactar o profissional (telefone, formulário, marcação) deve aparecer logo no primeiro ecrã, não depois de vários deslizamentos.
• Um formulário de contacto curto. Três a cinco campos bastam na grande maioria dos casos: nome, meio de contacto, mensagem. Cada campo adicional reduz as hipóteses de um visitante em telemóvel chegar ao fim.
• Um texto legível sem ampliar. Um tamanho de letra de pelo menos 16 pixels no corpo do texto, parágrafos curtos, títulos que permitem compreender o conteúdo num único olhar.
• Um tempo de carregamento controlado. Imagens comprimidas, poucos scripts externos desnecessários (widgets, rastreadores supérfluos), um alojamento corretamente dimensionado. Um site lento em mobilidade, muitas vezes com uma ligação menos estável do que no escritório, perde visitantes antes de estes lerem seja o que for.
• Zonas clicáveis suficientemente grandes. Os links e botões devem poder ser tocados com o polegar sem ter de acertar ao pixel.
• Um menu simplificado. Um menu de hambúrguer claro, com um número limitado de entradas, em vez de uma reprodução em miniatura do menu de desktop.

Os erros frequentes de um site "adaptado" ao telemóvel

Alguns erros repetem-se regularmente em sites que não foram pensados para telemóvel desde o início.

1. O conteúdo essencial fica escondido mais abaixo na página. A oferta, os preços ou o meio de contacto aparecem depois de vários blocos decorativos.
2. Os formulários mantêm o comprimento de desktop. Múltiplos campos, menus pendentes complexos, validação pouco clara em ecrã pequeno.
3. As imagens não estão otimizadas para telemóvel. Uma imagem pensada para uma exibição larga carrega desnecessariamente pesada no telemóvel, mesmo que se exiba mais pequena.
4. O texto é demasiado denso. Parágrafos longos, pensados para uma leitura em desktop, tornam-se ilegíveis num ecrã estreito sem serem encurtados.
5. Pop-ups e faixas invadem o ecrã. Um pop-up pensado para um ecrã grande pode ocupar a totalidade de um ecrã de telemóvel e esconder o conteúdo principal.
6. A navegação reproduz fielmente o menu de desktop. Dez entradas de menu comprimidas num menu de hambúrguer continuam a ser dez entradas a percorrer, sem uma hierarquia repensada para o formato reduzido.

Como verificar se o seu site é realmente mobile-first

Uma verificação simples, sem qualquer ferramenta técnica, já dá uma boa indicação.

Um teste mais aprofundado consiste em pedir a várias pessoas que procurem uma informação precisa no site a partir do seu próprio telemóvel, sem qualquer indicação. Se demorarem a encontrar o número de telefone ou o formulário de contacto, o site provavelmente não é mobile-first, mesmo que se exiba corretamente.

O que é importante reter

• Mobile-first significa conceber primeiro para o smartphone, depois enriquecer para o desktop, não o inverso.
• Responsive e mobile-first são duas coisas diferentes: uma é uma característica técnica, a outra um método de conceção.
• O essencial (oferta, contacto) deve estar visível sem ter de percorrer o ecrã em telemóvel.
• Formulários curtos e zonas clicáveis largas fazem uma verdadeira diferença em ecrã pequeno.
• A velocidade de carregamento conta tanto quanto a disposição da página, sobretudo em mobilidade.
• Uma reformulação direcionada costuma bastar; nem sempre é necessário reconstruir tudo.

Perguntas frequentes

Qual é a diferença entre responsive e mobile-first?

Um site responsive adapta-se tecnicamente a todos os tamanhos de ecrã, mas é frequentemente concebido primeiro para desktop. Um site mobile-first inverte a ordem: o design e o conteúdo são pensados primeiro para o ecrã pequeno, depois enriquecidos para o ecrã grande. O resultado visual pode parecer semelhante, mas as prioridades de conteúdo diferem.

Um site mobile-first custa mais do que um site clássico?

Não necessariamente. A diferença está sobretudo no método de conceção, não no orçamento. Um site institucional simples custa geralmente entre 1500 e 5000 euros numa agência, ou 99 euros por mês tudo incluído com uma subscrição como a da VeryAppi, mobile-first desde o início em ambos os casos se o prestador aplicar este método.

Como saber se o meu site atual é realmente mobile-first ou apenas responsive?

Abra o seu site no telemóvel e faça uma pergunta simples: o primeiro elemento visível é o que mais importa para um visitante apressado (oferta, número de telefone, botão de contacto)? Se tiver de percorrer muito ecrã antes de chegar ao essencial, o site foi provavelmente pensado para desktop e depois adaptado.

O mobile-first aplica-se a todos os setores de atividade?

A maioria das pesquisas locais (artesão, advogado, médico, restaurante) é feita a partir de um smartphone, muitas vezes com urgência ou em deslocação. O mobile-first faz, portanto, sentido para a maioria das profissões de proximidade. Continua pertinente mesmo para sites B2B, onde uma parte crescente da consulta inicial também é feita em telemóvel.

É preciso refazer todo o site para o tornar mobile-first?

Não sistematicamente. Se a estrutura do conteúdo estiver correta, uma reformulação direcionada do design e das prioridades de exibição costuma bastar, com um orçamento geralmente entre 2000 e 8000 euros. Uma reformulação completa só é necessária se o site assentar numa base técnica antiga ou mal adaptada.

Um site mobile-first não é um pormenor estético: é o que determina se um visitante apressado encontra o que procura em poucos segundos ou fecha a página. Se quiser comparar as abordagens para a sua atividade, pode consultar as opções em /pt/website.