Como Fazer Um Site Responsivo – Web Design

Como fazer um site responsivo?

Com a difusão de equipamentos com ligação à Internet, hoje acedemos a sites através de laptops, tablets, netbooks, telemóveis, desktops, televisores e até consolas de jogos. Mas será que são corretamente visualizados em todos os tamanhos de ecrãs?

Porque seria extremamente dispendioso e moroso desenvolver e manter múltiplas versões de um mesmo site para cada uma das variações de tamanho e resolução de ecrã disponíveis no mercado, surgiu uma nova abordagem à programação e desenvolvimento web denominada Responsive Web Design, também conhecida como HTML 5 Frameless. E veio preparada para ajudar! Por outras palavras ela é a melhor forma de aceder a todos os conteúdos e ter uma ótima experiência de navegação, independentemente do suporte e do tamanho do ecrã. Excelente para angariar mais clientes. Perfeita para proporcionar mais vendas.

O que é o Responsive Web Design?

O Responsive Web Design é uma solução que possibilita programar um site de forma a que os elementos que o compõem se adaptem automaticamente à dimensão física (largura e altura) e resolução do dispositivo no qual o site está a ser visualizado. Como o nome indica, é a forma de construir um site de modo a que este responda ao equipamento onde está a ser consultado: desktop, um laptop, um tablet ou smartphone. No fundo é aquilo que precisa de ter no seu site empresarial para que seja visto de forma correta em todos os dispositivos que os seus clientes possam usar. Se o seu site ainda desconhece estas técnicas, apresse-se! Nunca é tarde para melhorar a experiência de navegação dos seus clientes. Construa ou adapte um único site para todos os meios e tipos de acesso que os visitantes possam utilizar de forma a atingir o seu público-alvo onde quer que ele esteja.

O que acontece nos sites que usam Responsive Web Design?
Os sites que usam Responsive Web Design utilizam as grelhas fluídas e as media queries onde todos os elementos do site são dimensionados proporcionalmente em percentagem em detrimento do pixel, que é uma unidade de medida fixa. Desta forma, com Responsive Web Design deixa também de ser necessário criar uma solução específica para cada terminal, de acordo com o sistema operativo, por exemplo, iOS, Android, Mac OS, Windows ou Windows Mobile.

Quais as vantagens dum site responsivo?

A principal vantagem do Responsive Web Design é uma visualização e navegação correta de acordo com o equipamento e respetivo ecrã. Além deste benefício, evita a duplicação de manutenção de conteúdos permitindo assim que o site não seja prejudicado na posição nos motores de pesquisa. O Responsive Web Design opera com um único domínio para qualquer terminal, evita redireccionamentos do endereço e o site fica mais leve para o smartphone, por exemplo.

O que ter em conta antes de começar?

Quando decidir avançar para uma solução Responsive Web Design, leve em linha de conta alguns aspetos, nomeadamente os prazos para a implementação do site e o orçamento disponível, já que a utilização destas práticas obriga a um maior investimento no desenho e na produção pois o layout terá de ser pensado de forma a ficar adaptado ao tamanho do ecrã do dispositivo usado pelo utilizador. Já lá vai o tempo em que os web designers tinham de fazer um site específico para cada dispositivo.

Hoje um único site adapta-se ao dispositivo escolhido pelo utilizador graças à possibilidade de redimensionar automaticamente as imagens sem sobrecarregar a transferência de dados. Claro que terá de simplificar elementos no ecrã para dispositivos móveis, onde o utilizador normalmente tem menos tempo para ler e também ocultar elementos desnecessários nos dispositivos mais pequenos. Terá ainda de adaptar o tamanho de botões e links para interfaces touch, ou seja, onde o rato é substituído pelo dedo do utilizador. Ao mesmo tempo pode utilizar de forma inteligente recursos mobile como localização e mudança na orientação do dispositivo (horizontal ou vertical). Assim, se estiver a visualizar o site num ecrã de televisão, num computador, num tablet ou num telemóvel verificará que o layout do site se adapta automaticamente à dimensão e resolução do ecrã, tornando muito mais fácil e cómoda a visualização dos seus conteúdos. As páginas carregam muito mais depressa, as imagens são apresentadas com uma resolução adequada à velocidade de acesso à Internet do dispositivo utilizado e os textos são muito mais fáceis de ler.

Sugestões para implementar com sucesso o Responsive Web Design no seu site

1. Utilize media queries para redimensionar o layout para qualquer tamanho de ecrã. Mas, atenção, isso não basta para transformar o site da sua empresa num site capaz de responder a vários tamanhos.
2. Utilize layouts fluídos que se adaptem a qualquer tamanho de ecrã. Não deve desenhar um layout para cada tipo de equipamento (smartphones, tablets, computadores), deve usar o mesmo e mantê-lo fluído, para o caso de aparecer no mercado um novo dispositivo com um tamanho de ecrã diferente de todos os outros.
3. Crie as grelhas do site baseadas no conteúdo do site. As grelhas que existem não vão ao encontro do que o site quer transmitir ao visitante porque são feitas para diferentes tipos de conteúdo.
4. Comece com o tamanho mais pequeno, utilizando as media queries para ajustar os elementos. Aconselhamos a começar com uma coluna para os smartphones e ir aumentando o tamanho do layout para ecrãs maiores.
5. Utilize as bibliotecas de JavaScript para as media queries de forma a dar suporte aos browsers mais antigos. Ao começar do tamanho mais pequeno para o maior os browsers dos computadores precisam de lidar com as media queries e por isso é necessário garantir que os browsers mais antigos funcionam, utilizando estas bibliotecas.
6. Desenhe os seus componentes no browser. Não utilize o Photoshop/Fireworks porque é praticamente impossível desenhar um layout fluído no Photoshop.
7. Redimensione as imagens usando a propriedade img. Para imagens muito grandes deve usar um plugin de Javascript como o Responsive Images que permite fazer apenas o download das imagens para o dispositivo que está a utilizar. Ou seja, se estiver a aceder ao site de um smartphone, só faz o download das imagens utilizadas para esse layout permitindo desta forma poupar no tráfego de informação.
8. Carregue o conteúdo principal em primeiro lugar e só a seguir os dados complementares (recorrendo ao JavaScript).

No final do processo, teste e delicie-se com os resultados. Mas lembre-se que, apesar do esforço, haverá sempre visitantes que não vão conseguir aceder ao site na perfeição ou porque têm browsers demasiado antigos ou porque têm o JavaScript desativado. No entanto, este tipo de utilizadores é cada vez mais raro. E os outros estão perfeitamente satisfeitos. Vamos a isso!