Responsive Web Design – Há uns anos atrás existia uma diferença clara entre os ambientes desktop e mobile. Com a introdução de smartphones, tablets e novas tecnologias que acedem à Web, os Web Designers depararam-se com o desafio de conceber para cada vez mais resoluções e dispositivos. Seria de enlouquecer desenhar múltiplas versões de um mesmo site que suprissem cada uma dessas variações de tamanho do ecrã e cada uma das resoluções de tela disponíveis no mercado.
Nos dias que correm, todos querem uma versão mobile do seu website. Afinal de contas, os smartphones, tablets, etc, vieram para ficar. Iremos estar sempre a desenvolver os mesmos websites para mais uma mão cheia de dispositivos ou inclusivamente a re-desenhar websites mobile existentes. Quando é que esta loucura terá fim? Nunca, obviamente!
Felizmente, o Responsive Web Design emergiu como a solução ideal para este desafio, sendo atualmente uma das maiores tendências no mundo Web. Programar um site de forma que os elementos que o compõem se adaptem automaticamente à largura do ecrã do dispositivo no qual ele está sendo visualizado.
Um Responsive Web Design inclui:
- Adaptar o layout da página de acordo com a resolução em que está sendo visualizada.
- Redimensionar as imagens automaticamente para que caibam no ecrã e para que não sobrecarreguem a transferência de dados em um dispositivos móvel, por exemplo.
- Simplificar elementos da tela para dispositivos móveis, onde o usuário normalmente tem menos tempo e menos atenção durante a navegação.
- Ocultar elementos desnecessários nos dispositivos menores.
- Adaptar tamanho de botões e links para interfaces touch onde o ponteiro do mouse é substituído pelo dedo do usuário.
- Utilizar de forma inteligente recursos mobile como geolocalização e mudança na orientação do aparelho (horizontal ou vertical).
Assim, em vez de desenvolvermos múltiplos websites para cada vez mais dispositivos diferentes, esta prática permite-nos criar um único website que é flexível o suficiente para se adaptar perfeitamente a todos os dispositivos do presente, bem como os do futuro. Esta abordagem já é considerada por muitos um standard na prática profissional do meio e a sua adoção aumenta de dia para dia.
É possível encontrar na Net vários Slides e apresentações sobre Responsive Web Design. Exemplo disso é apresentação que se segue, que resume de forma muito simples o que é Responsive Web Design:
Se você estiver lendo este post por RSS e a apresentação acima não abrir, veja-a no blog
É claro que essa é a explicação resumida de alguns dos principais aspectos do Design Responsivo. O infográfico abaixo é outro exemplo bem interessante devido a forma simples e didática do conteúdo aí mostrado:
No infográfico podemos ver as estatísticas para 2013, a tendência crescente dos dispositivos móveis, exemplo disso é o Facebook, o seu uso nos dispositivos móveis já supera o desktop. Com certeza é uma tendência evidente para redes sociais, porém em breve também estará se aplicando à grandes portais de notícias. Nos dispositivos móveis como o iPhone, iPad e outros smartphones e tablets onde quer que você esteja, se quiser, estará sempre conectado.
Neste link pode encontrar uma boa coleção de recursos sobre os vários aspectos do Responsive Web Design, para quem quiser iniciar a sua aventura nesta nova tendência no mundo Web.
E você gostou da ideia? Já usa Responsive Web Design? Comente!
Um abraço e até breve!