Nos últimos anos, as pesquisas em dispositivos móveis aumentaram de tal forma que ultrapassaram as pesquisas em desktop. Neste momento, estima-se que mais de metade do tráfego web mundial provenha de smartphones. Nesse sentido, também a forma como desenvolvemos websites e aplicações tem vindo a evoluir, com diversas abordagens a ganhar força.

Já abordámos várias vezes a importância da responsividade dos sites, mas com os dados a apontar para uma maior utilização de smartphones do que PCs, coloca-se uma questão: será que não devemos desenhar websites primeiro para mobile?

O objetivo final é que os visitantes do nosso site tenham a melhor experiência de navegação possível, e é essa a razão que leva muitos designers a pensar os sites primeiro para as versões mobile em vez do que nos habituámos há alguns anos: desenhar a versão desktop e adaptá-la depois para tablets e smartphones.

Longe vai a teoria de que a versão mobile de um site é uma versão “pequena” da versão desktop. Hoje em dia, as pessoas fazem quase todas as tarefas do seu dia-a-dia nos telemóveis, sendo crucial adotar um design intuitivo e reorganizar o conteúdo para que a leitura seja fácil. Ficam algumas noções sobre a abordagem mobile-first:

Simplificar, Re-organizar, Re-hierarquizar

Em vez de adaptar a estrutura e o layout ao tamanho de um ecrã de telemóvel, os elementos devem ser reorganizados e repensados para que o utilizador consiga navegar de forma eficiente. A redução do número de colunas, o aumento do tamanho da letra e a própria alteração de sítio dos elementos obriga a que a hierarquia da informação seja repensada.

Menos é mais

Os dispositivos móveis foram pensados para as pessoas poderem fazer as suas atividades do cotidiano e utilizarem o seu tablet ou smartphone ao mesmo tempo. Assim, a atenção do utilizador já está automaticamente reduzida. Assim, é importante preservar apenas a informação mais relevante e deixar de lado o acessório.

O utilizador deve ser orientado rapidamente para o conteúdo que procura ou precisa para concluir a sua tarefa, uma vez que o seu tempo de atenção está a ser dividido com uma série de outros elementos do contexto em que se encontra.

Desenhar para dedos e não ratos

Enquanto que nos computadores tradicionais, estamos habituados desde sempre a utilizar um rato, o modo de interação básico dos dispositivos móveis é o toque. Assim, há que ter em conta que o que vai tocar nos elementos do ecrã são dedos, com diferentes formas, tamanhos e pressão exercida no ecrã.

Todos os elementos que necessitem de touch, como formulários, botões call-to-action, etc, devem ser grandes o suficiente para que não exista sobreposição com outros elementos e, assim, má interpretação do toque, que se revela muito frustrante para o utilizador.

Tudo isto não exclui a necessidade de testar em vários dispositivos com resoluções diferentes de forma a assegurar que o design em questão funciona para cada uma das especificidades.

Apesar de ter inúmeras vantagens, a abordagem mobile-first não é consensual. Alguns designers consideram restritivo desenhar para mobile primeiro, uma vez que ter menos espaço e, algumas vezes, menos recursos, os limita em termos de criatividade e apresentação do conteúdo.

Assim, em vez da tradicional metodologia “desktop primeiro-mobile segundo” ou da abordagem em que nos centramos neste artigo “mobile primeiro - desktop segundo”, surge uma linha de trabalho que junta as duas anteriores.

Tem vindo a ganhar peso a teoria de que mobile e desktop devem ser desenvolvidos em simultâneo, página a página. Assim, o designer desenha a homepage de um site para desktop ao mesmo tempo que a desenha para mobile, com as devidas alterações, tendo uma noção muito mais clara de como o site se comporta em todas as resoluções.