O que é o web design responsivo?
O web design responsivo significa que um design para ecrãs grandes se adapta a ecrãs mais pequenos. Desta forma, o site fica ótimo e pode ser utilizado em ecrãs grandes, médios, pequenos e extrapequenos.
Os nossos sites e lojas online são responsivos. Determinamos como os designs de desktop se adaptam a janelas de visualização mais pequenas, como computadores portáteis, tablets e smartphones. Além de janelas de visualização mais pequenas, também garantimos que o web design tem um aspeto fantástico nos monitores 4K.
A propósito, gostaríamos de informar que um web design responsivo é crucial para a otimização dos motores de busca.
IntroduçãoComo tornamos o seu site responsivo
Há muito a considerar ao criar sites responsivos. Discutiremos abaixo as partes mais importantes do web design responsivo, nas quais gostamos de nos concentrar para otimizar o seu website para ecrãs mais pequenos. Desta forma criamos um web design responsivo.
Texto legível
O texto deve ser legível. Isto significa que o texto não é demasiado pequeno, mas também não é demasiado grande. O mesmo se passa com o espaço entre linhas (altura da linha), entre letras (espaçamento entre letras), entre palavras (espaçamento entre palavras) e entre parágrafos (espaçamento entre parágrafos).
A espessura do texto também é importante: um texto demasiado fino pode ser desagradável à vista. Texto demasiado grosso também pode ser difícil de ler.
E por último, mas não menos importante, o contraste entre o fundo e o texto também tem um grande impacto na legibilidade.
Passo 1
Facilidade de utilização
Os botões devem ser facilmente clicáveis e reconhecíveis. Damos uma cor diferente aos botões importantes. Cores diferentes chamam a atenção. Desta forma podemos agilizar o processo desde o visitante até ao cliente. Isto deixa menos tempo para os visitantes se distrairem.
Otimizámos a página de checkout com o mesmo pensamento em mente: criar o mínimo de distração possível. Ocultamos o cabeçalho e o rodapé na página de checkout. A página de checkout só precisa de um link subtil para levar o visitante de volta à página do carrinho e talvez até de volta à página inicial. A página de checkout tem apenas uma função: fazer encomendas.
Passo 2
Menu desdobrável e filtros de produtos
Em ecrãs grandes, todos os links são geralmente colocados um ao lado do outro. Não há espaço para o fazer em ecrãs menores. É por isso que é prática comum utilizar um menu dobrável. O visitante pode tocar no ícone do hambúrguer no canto superior esquerdo ou direito do ecrã, o que abrirá o menu para navegar no site.
É chamado de ícone de hambúrguer porque é geralmente representado por três linhas uma sobre a outra. Muitas vezes, estes ícones de hambúrguer transformam-se num símbolo de cruz quando são abertos. Isto indicará ao visitante que o menu pode ser fechado tocando nele novamente. Os menus desdobráveis são essenciais para um site responsivo.
Este ícone de hambúrguer está localizado na barra superior do site. Esta barra fica fixada na parte superior do ecrã enquanto desliza ou rola para baixo uma página do site responsivo.
Tal como no caso dos menus, é sensato tornar os filtros de uma loja online expansíveis nos ecrãs dos smartphones. Caso contrário, estes filtros de produtos ocupam muito espaço. Colocar os filtros de produtos na parte inferior da loja online é inútil, porque os visitantes não os conseguiriam utilizar. É por isso que utilizamos filtros de produtos expansíveis e suspensos, para que os visitantes que utilizam um smartphone ou qualquer ecrã pequeno também possam utilizar filtros de produtos.
Passo 3
Ordem e prioridade do conteúdo
Imagine uma página com uma linha num ecrã de ambiente de trabalho. A linha contém texto na coluna da esquerda e uma imagem na coluna da direita.
Se esta imagem for necessária para compreender o texto, então é importante mover a coluna com a imagem para antes da coluna com o texto, pois caso contrário será mostrada na ordem errada quando visualizada num smartphone (pois as colunas ficarão uma por baixo da outra).
É por isso que mudamos a ordem quando são colocados um abaixo do outro.
Passo 4
Layout visualmente estável
Talvez já tenha passado por isso: está a ler um artigo com muitos anúncios entre parágrafos.
Desce a página e, de repente, vê um anúncio a ser carregado entre o parágrafo que estava a ler e o parágrafo que queria ler a seguir. Isto é muito irritante, porque teria de fazer scroll para baixo novamente para continuar a ler.
A Google repara nisso quando o layout é visualmente instável. Até introduziram uma métrica para isso: Cumulative Layout Shift (CLS). A métrica denominada CLS faz parte do Core Web Vitals; um novo fator de classificação do Google que também se concentra na velocidade da página e na interatividade.
Passo 5
Evite utilizar imagens de retrato
As imagens de retrato ocupam muito espaço quando são apresentadas em largura total, porque a sua altura é muito maior do que a sua largura. Isto não é um problema para os ecrãs de desktop, porque num ecrã de desktop pode simplesmente torná-los menos largos (tornando-os menos altos).
No entanto, para tornar as imagens fáceis de ver e compreender nos smartphones, é necessário apresentá-las em largura total. Isto não é um problema para imagens de paisagem, mas para imagens de retrato isto fará com que a imagem ocupe não só a largura total do seu smartphone, mas também a altura total do seu smartphone. Isto tornará o seu layout desestruturado, porque é mais difícil ver e reconhecer a relação entre as imagens altas e o texto que está por baixo delas.
Se uma imagem de retrato for puramente decorativa, pode ser uma ideia utilizar uma versão de paisagem (se possível) ou ocultar a imagem completamente nos ecrãs dos smartphones para manter o layout estruturado.
Pode perceber que precisará de muito texto para corresponder à altura quando colocado ao lado de uma imagem de retrato. As imagens de retrato são altas, não largas, o que significa que são necessárias mais linhas junto a elas e ocupam menos espaço horizontal, o que significa que precisa de mais palavras por linha.
Isto é algo que também enfrentamos ao escrever esta secção chamada Evite utilizar imagens de retrato. Felizmente, conseguimos escrever texto suficiente para caber ao lado da imagem à esquerda (se estiver a ler isto num ecrã de ambiente de trabalho), escrevendo este último parágrafo como conteúdo de preenchimento. Lamentamos profundamente.
Passo 6
Ajustes para ecrãs sensíveis ao toque
Ao utilizar um ecrã de ambiente de trabalho, utiliza um rato para clicar e mover. Por vezes, as lojas online mostram o botão adicionar ao carrinho apenas quando passa o rato sobre (coloca o cursor num) produto. Se utilizar um ecrã sensível ao toque, não utiliza um rato. Se tocar no produto, isto será considerado como passar o rato sobre ele, pelo que o botão adicionar ao carrinho só aparecerá depois de tocar no produto.
Isto é inconveniente, porque se tocar na imagem de um produto, será levado para a página do produto. É por isso que optámos por mostrar este tipo de botão sem a necessidade de interação em ecrãs tácteis, para evitar este tipo de confusão.
Passo 7
Funções para facilidade de utilização
Ao utilizar as funções abaixo, tornaremos o seu website ou loja online mais fácil de utilizar.
Botão para voltar ao topo
Se um visitante quiser navegar até ao topo do seu website, irá clicar neste botão. A posição deste botão é fixa, pelo que permanecerá sempre no ecrã quando rolar para baixo e para cima. Este botão só aparecerá quando o visitante tiver feito scroll para baixo o suficiente, o que tornaria útil poder saltar para o topo da página tocando ou clicando num simples botão de voltar ao topo.
Números de telefone clicáveis
Esta funcionalidade não é útil para desktops, mas é extremamente útil quando se trata de visitantes que utilizam smartphones! O visitante toca no número de telefone, a aplicação de chamadas é aberta e o visitante pode ligar-lhe imediatamente. Isto facilitará o contacto dos visitantes consigo, o que aumentará a confiança que têm na sua empresa.
Endereços de e-mail clicáveis
A mesma história é válida para os endereços de e-mail. No entanto, isto é útil tanto para utilizadores de telemóveis como de desktops. O visitante toca ou clica no endereço de e-mail, a aplicação de e-mail é aberta e o visitante pode enviar-lhe um e-mail imediatamente. Útil!
Passo 8
Exemplos de responsividade
Nesta secção, daremos exemplos de situações em que foram necessárias alterações para tornar um web design responsivo.
Desktop → Portátil - Menu não cabe
Num ecrã de ambiente de trabalho, pode inserir muitos links no menu, como pode ver na imagem abaixo.
No entanto, num ecrã de portátil, não poderá colocar tantos links no menu se mantiver o mesmo tamanho de letra dos links.
Depois de reduzir o tamanho da fonte dos links no menu, estes cabem agora no menu.
O tamanho da fonte dos links diminui gradualmente dentro de um determinado intervalo de largura do ecrã, onde, de outra forma, não caberiam. Desta forma, estes links caberão até em ecrãs de portáteis menores. Para além do tamanho da letra dos links, por vezes é necessário reduzir o espaçamento entre links. Se não couber depois disso, o tamanho do logótipo diminuirá. Se já não couber, mesmo depois disso, consideraremos quais os links a remover dos ecrãs dos portáteis. Felizmente, este último raramente é o caso.
Portátil → Tablet - Menos colunas
O exemplo abaixo mostra 3 colunas uma ao lado da outra. A primeira coluna contém a imagem de um pombo, a segunda coluna contém texto e a terceira coluna contém a imagem de outro pombo.
No entanto, também pode ver um ecrã de tablet no exemplo abaixo.
No ecrã do tablet, colocámos duas colunas uma ao lado da outra, em vez de três colunas, porque senão não cabiam uma ao lado da outra. Além disso, a coluna que continha o texto ganhou uma posição diferente; trocamos a segunda coluna (que contém o texto) e a terceira coluna (que contém a imagem de um pombo). Desta forma, os dois pombos estão virados um para o outro, enquanto o texto é colocado por baixo deles, ao lado de outra coluna que contém texto.
Tablet → Mobile - Quebra
Dando continuidade ao exemplo anterior, pode agora ver os mesmos dois pombos na imagem da direita ou abaixo (dependendo do dispositivo que está a utilizar no momento).
Estes pombos ainda ficam bem ao lado uns dos outros nos ecrãs dos smartphones, mas agora pode ver que a quarta coluna (contendo texto) não aparece ao lado da terceira coluna (contendo texto).
Isto ocorre porque é colocado abaixo da terceira coluna.
Esta prática é a parte mais fácil, embora mais importante, do web design responsivo.
Antigamente, os sites eram criados como tabelas reais, tal como o Excel.
Já deve ter reparado que falámos de linhas e colunas, mas estas colunas são, na verdade, blocos que se ajustam uns aos outros e que têm uma largura flexível que pode ser alterada independentemente das colunas de outras linhas (como se estivessem dentro de uma tabela, o que não é o caso).
Não era assim que funcionavam as colunas no passado; a largura das colunas não podia ser alterada em ecrãs mais pequenos. A largura da 1ª coluna da 2ª linha era igual à da 1ª coluna da 1ª linha, porque é assim que funcionam as tabelas.
Talvez já tenha encontrado um site deste tipo ao navegar num smartphone. Talvez não tenha, uma vez que os motores de busca dão prioridade aos sites que utilizam um design responsivo.