Em termos práticos, site responsivo é aquele que, com o mesmo layout, se ajusta e adapta perfeitamente a qualquer resolução de ecrã, passando a mesma experiência de leitura ao utilizador, independentemente do equipamento que ele está a usar para aceder à Internet: desktop, smartphone, tablet, notebook, laptop, etc.
Site ou layout responsivo é então a designação dada à capacidade de um site se encaixar automaticamente no dispositivo do utilizador, sem ser necessário recorrer ao zoom para ler. E isto porque um site responsivo muda a sua aparência e disposição com base no tamanho do ecrã em que está a ser exibido, ou seja: se a pessoa tem um ecrã pequeno (muitas vezes um smartphone tem uma navegação pela web limitada), os elementos do site reorganizam-se para que as informações principais fiquem em primeiro lugar.
Como funciona um site responsivo?
Um design responsivo, para facilitar a visualização, identifica qual é a largura de cada dispositivo e, dessa forma, consegue determinar a quantidade de espaço disponível e a forma como deve mostrar a página para que esse espaço seja aproveitado em toda a sua plenitude. Num site responsivo, quanto menor for o tamanho do ecrã, maior será o zoom para os utilizadores poderem visualizar melhor o conteúdo. É por isso que neste tipo de sites, os elementos são reorganizados através de CSS (Cascading Style Sheets) utilizando um sistema conhecido como media queries (a ferramenta mais potente de responsive design) onde se pode alterar as propriedades dos elementos em um ou mais tamanhos de ecrã especificados pelo programador. Por exemplo, através do media queries pode-se programar de modo a que uma “div” (tag que serve para alterar o estilo em partes específicas da página e posicionar objetos) que tenha um banner apareça num iPad mas não num iPhone, ou que um menu seja vertical num smartphone de 3 polegadas e seja horizontal num tablet de 7 polegadas.
Resumindo, num site responsivo também se ajustam as dimensões das imagens, das fontes e dos demais elementos para que não haja distorção. Além disso, os sites responsivos também podem expandir para visualizações de detalhes da página dando um zoom.
Ora, hoje em dia com o aumento da utilização de equipamentos de pequenas dimensões e com o aumento dos acessos à Internet via smartphones, as empresas devem adaptar os seus sites e lojas virtuais para conseguirem chegar a um maior número de utilizadores, facilitando o acesso e visualização das suas páginas.
Diferenças entre site responsivo e site mobile
Site responsivo é aquele que é projetado para ser adaptado para qualquer tipo de ecrã com base numa única estrutura de códigos que funciona em diferentes resoluções. Site mobile ou mobile-friendly é aquele que tem uma segunda versão em separado, feita exclusivamente para ser aberta em determinados tipos de dispositivos como smartphones e tablets (e que não são visualizados em computadores desktop ou notebooks). Muitas vezes o site mobile serve o propósito provisório de facilitar a leitura aos utilizadores enquanto não se passa para um site responsivo.
Um site mobile usa os recursos de HTML, CSS e Javascript para adequar o mesmo layout para vários tamanhos de ecrã, ou seja, os arquivos como imagens e scripts, podem até ter o mesmo caminho, porém os arquivos HTML (HyperText Markup Language) são outros. Alguns sites mobile, inclusive, ficam num subdomínio. Depois é uma questão de se usar um Javascript na programação capaz de detetar qual o equipamento que o utilizador está a usar através do tamanho, e redirecionar para o site que melhor se adapta a ele.
O site responsivo é uma excelente solução para quem vai começar do zero e tem a vantagem de permitir utilizar sempre o mesmo código, as mesmas imagens para todos os tamanhos de ecrã, enquanto que o site mobile – que é praticamente um novo site – pode ser excelente quando é preciso trabalhar a partir de um site que já está pronto. Porém, o último tem a desvantagem de exigir dois designs para o mesmo projeto e consequentemente dobrar a parte da programação porque é necessário aplicar todos os recursos que estão presentes na versão desktop, na versão mobile. A escolha entre responsivo e mobile depende, claro, do tipo de projeto, mas uma coisa é certa: com o aumento dos acessos à Internet através de dispositivos móveis, são os sites que têm de se adaptar a ecrãs mais pequenos, e não os utilizadores.
