Hoje em dia, as pessoas têm mais acesso à internet e o índice de dispositivos com vários tamanhos de tela diferentes e manuseio/ forma de navegação dos dispositivos (mouse vs dedos) cresce cada vez mais. Isso representa algumas das reais barreiras de design e usabilidade porque a maioria dos websites são projetados apenas para serem visualizados em grandes telas e navegados usando o mouse. Obviamente esta é a velha forma de fazer coisas – resquícios de uma época em que você podia fazer premissas razoáveis sobre o tamanho da tela do usuário.
Websites modernos terão que se adaptar para todos os tipos de tela e comandos. O varejista precisa olhar e trabalhar de forma igual tanto nos smartphones Android e o iPad, como ele faz geralmente no computador desktop. O e-commerce moderno se adapta ao dispositivo, ao invés de mandar que o dispositivo se adapte ao site.
Felizmente, temos um jeito elegante e simples de alcançar esse objetivo – chama-se web design responsivo.
Web design responsivo
O List Apart escreveu uma excelente introdução para este tópico. Em resumo, o web design responsivo adapta o layout à página dependendo do tamanho da tela do dispositivo que renderiza a página.
Na prática, isso é feito pelo uso inteligente dos media queries – uma parte da especificação CSS3. As media queries permitem que você aplique condicionalmente subconjuntos de estilos CSS dependendo da mídia – o dispositivo – que renderiza a página. Incluindo tamanho da tela.
Isso significa que seu site pode responder ao tamanho da tela do dispositivo que o renderiza – fazer o rearranjo de elementos, aumentar ou diminuir os tamanhos de fonte, etc. assim, o design busca e trabalha tão bem no smartphone quanto faria num computador. Esse é o design responsivo.
Design para múltiplos dispositivos
O aspecto mais óbvio do web design responsivo é manipular vários tamanhos de tela. Enquanto no desktop você pode querer trabalhar com um layout de três colunas, no smartphone as limitações da tela pequena vão te forçar a retroceder para o layout de uma coluna. Imagens terão que ser reduzidas ou aumentadas amigavelmente, etc, etc.
Porém, há mais que apenas o tamanho da tela para se preocupar quando estamos pensando em design responsivo. Você também vai precisar pensar na forma com que o usuário navega no seu site – usando o mouse ou os dedos? Acidentalmente, o manuseio na maioria dos smartphones é menos preciso porque é feito através do touch screen ao invés do mouse.
Isso força você a inserir links e botões a uma certa distância do outro então os usuários não clicarão errado por acidente. A navegação geralmente terá que ser repensada.
Outra grande diferença é que você não poderá mais esperar que o “hover” esteja disponível já que os dispositivos móveis não oferecem essa funcionalidade (ainda não). Portanto o seu site deve ser navegável e acessível sem o “hover“.
Qual é a utilidade disso?
A navegação mobile está bombando nos últimos anos e a porcentagem de visitantes na maioria dos sites está ficando muito grande para ignorar (em nossa empresa esse índice chegava a 10% em 2011. E o uso da internet móvel está quase na mesma direção; em alta.
Primeiro, o design responsivo pode soar para você como um monte de trabalho. De qualquer forma, se você for criar um site dedicado para smartphones e outro para tablets, e desktops simplesmente alterando o layout do site será muito fácil de implementar e (tão importante quanto) manter.
Mas, definitivamente, o design responsivo deve forçar você a abordar o web design de uma forma diferente. Uma vez que você estiver dominando o assunto, o design responsivo se tornará simples. Eu mesmo já implementei designs responsivos em alguns sites em apenas alguns dias. Considerando que você precisa apenas de alguns dias para transformar seu site em um site otimizado para iPhone, Ipad, Android, BlackBerry, etc eu posso te dizer com segurança que “sim, o design responsivo é muito útil”.
Design responsivo é o futuro e não apostar no futuro sem dúvida não é uma boa ideia. Concorda? Descorda? Feedback? Comente!
Link original disponível em: http://baymard.com/blog/responsive-web-design