O vosso website é mesmo responsive?
O vosso website vai ser visto em vários dispositivos de ecrãs de todos os tamanhos e proporções. Será que encaixa bem em todos?
Desenhar websites que irão ser vistos em monitores que não páram de crescer, telemóveis e tablets com ecrãs de diferentes polegadas e até em smartwatches onde mal cabem as horas são o maior desafio para os webdesigners.
A resposta é criar um site responsivo, ou adaptarem-se e fazer um design adaptativo. Se estão confusos, foi de propósito. Para evitar essas confusões, muita gente chama de “responsivo” a qualquer site que tem uma arrumação diferente de acordo com a dimensão do ecrã em que é visualizado.
Responsivo e adaptativo são duas formas de abordar o mesmo problema, com vantagens e desvantagens para qualquer uma delas.
Design Responsivo
Um website responsivo é fluido, como água. De cada vez que é vertido para ecrãs de tamanhos diferentes, ele coloca os seus elementos de acordo com o espaço que tem disponível. Se num monitor de um portátil o design tem 3 colunas, bem encostadas às margens do ecrã, num monitor maior poderá ter 6 colunas e margens maiores. Num telemóvel, todos os elementos estarão dispostos numa só coluna.
O conteúdo é mostrado de acordo com o espaço disponível no browser. Se quiserem perceber se um site é responsivo ou adaptativo, alterem as dimensões do browser. Se for responsivo, o conteúdo adaptar-se-á de forma dinâmica às novas dimensões da janela.
O design responsivo é o preferido dos webdesigners porque é o mais fácil de implementar, apesar de não permitir um controlo total sobre como o layout irá aparecer nos vários ecrãs.
Design Adaptativo
O design adaptativo não é um design, mas vários. As boas práticas dizem que são pelo menos seis. Um website adaptativo tem diversas versões do mesmo layout, que são carregadas de acordo com as dimensões específicas do ecrã.
Se fizerem o teste de redimensionar a janela, irão ver que o site não irá mudar muito, já que reconhece e responde às dimensões do ecrã, logo não tem necessidade de carregar o layout para ecrãs mais pequenos. Mas se o abrirem no telemóvel, irão perceber as diferenças entre o design pensado para monitores grandes e pequenos ecrãs.
Cada layout é uma versão trabalhada especificamente para cada um desses ecrãs, o que permite um maior controlo sobre a qualidade da experiência do utilizador. Mas são diferentes versões do mesmo layout que, mesmo assim, pode deixar de fora ecrãs ainda maiores ou de tablets, por exemplo.
Mobile only está fora de moda
Já viram moradas de sites que começam por “https://m.”etc. Esses sites foram desenhados especificamente para telemóveis, sendo carregados quando acedidos através de um dispositivo móvel.
O grande problema é que é mais um site que precisa de alojamento e manutenção, pelo que os sites desenhados apenas para dispositivos móveis estejam a cair em desuso e ignorados pelos motores de busca, pelo que já nem são considerados como uma opção.
Quando muito cria-se uma app, mas isso é outra coisa completamente diferente.
A estratégia do design para todos os dispositivos
Porquê esta preocupação? Primeiro, porque todos os websites devem ser fáceis de navegar e, se querem converter, os elementos importantes para que os utilizadores naveguem facilmente por todo o processo deverão estar corretamente colocados, visíveis e acessíveis, em todos os dispositivos.
Segundo, os motores de busca, particularmente o Google, dão melhor colocação a páginas que asseguram a melhor navegação possível aos utilizadores. Um site que é bem visto em qualquer ecrã tem mais valor para o Google.
Escolher entre websites responsivos e adaptativos não deve ser uma escolha fundamentada no custo mas na qualidade da experiência do vosso utilizador. O vosso website pode muito bem funcionar com design responsivo, mas ter um design específico para cada ecrã pode ser a melhor opção.
Por exemplo: há carrinhos de compras em lojas online que seriam mais fáceis de usar se tivessem elementos especificamente desenhados para ecrãs de smartphone, recorrendo ao design adaptativo, em vez de ter um layout responsivo desenhado para monitores de maiores dimensões que não consegue apresentar elementos funcionais do interface como formulários, menus e botões, de forma eficaz em ecrãs mais pequenos.
Escolher entre um e outro depende sempre da experiência do utilizador e da qualidade do design.
Já perceberam se o vosso website é responsivo? Adaptativo? Ou nenhum dos dois?
Estamos cá para vos ajudar a escolher a solução ideal, temos a resposta certa para se adaptarem bem a todos os ecrãs.