O que é Design Responsivo?

Não faz muito tempo que os designers não precisavam se preocupar com a aparência dos sites em telefones celulares e tablets. Os telefones ainda não eram realmente práticos para visualização na web e, antes do iPad, os tablets eram mais uma novidade do que um essencial.

Obviamente, tudo isso mudou, e a maioria dos especialistas em tecnologia prevê que nos próximos anos, provavelmente mais cedo ou mais tarde, a navegação móvel ultrapassará a navegação em desktop como a forma dominante de visualizar a Web.

Com uma variedade de tamanhos de tela e dispositivos em constante evolução, incluindo consoles de videogame e TVs na Internet, as formas antigas de web design simplesmente não estão mais à altura da tarefa. E com as empresas percebendo a necessidade de otimizar sua experiência online para usuários móveis, os designers que não se adaptarem ficarão para trás.

Nota do editor: A seguir, uma introdução para iniciantes ao design responsivo, não destinada a web designers mais experientes.

Os principais componentes do design responsivo

É aí que entra o Responsive Web Design, conteúdo e/ou layout que se adapta automaticamente ao tamanho da tela em que é visualizado. Em sua forma mais básica, os três elementos principais do Design Responsivo são uma grade flexível, imagens flexíveis e consultas de mídia, este último introduzido como parte do CSS3s. Mais sobre aqueles em um momento.

Grades flexíveis

As grades flexíveis são basicamente temas e modelos nos quais os elementos de design são definidos em porcentagens em vez de pixels. Com porcentagens como unidade de medida, isso significa que um elemento projetado em 50% sempre ocupará metade da tela, não importa quão grande ou pequena seja a tela.

Imagens flexíveis

Em sua forma mais básica, as imagens flexíveis não poderiam ser mais fáceis de criar escrevendo uma regra simples que diz:

 img { max-width: 100%; }

Essencialmente, isso significa que, se um elemento for maior que seu contêiner, a regra o forçará a corresponder à largura desse contêiner. E como os navegadores modernos redimensionam as imagens proporcionalmente, a proporção da imagem também é preservada. Além disso, a regra de 100% também pode ser usada para quase todos os outros elementos, como vídeos incorporados.

A consulta de mídia

Desde a introdução dos tipos de mídia no CSS 2.1, as folhas de estilo têm sido muito mais inclusivas para dispositivos móveis e outros. Tipos de mídia essencialmente permitem que o estilo tenha como alvo classes específicas de dispositivos da web, com esses tipos incluindo handheld, tela e tv. Mas com pouca padronização entre os dispositivos e pouco suporte dos fabricantes de dispositivos, os Tipos de Mídia nunca atingiram seu potencial.

As consultas de mídia atendem a esse potencial e muito mais. Mas, em vez de se preocupar com o tipo de dispositivo como os tipos de mídia fazem, as consultas de mídia analisam os recursos do dispositivo.

Uma consulta de mídia simples pode ser assim:

Os dois componentes da consulta são o tipo de mídia, definido como tela e, em seguida, a consulta real – (max-device-width: 480px) – que basicamente pergunta se a largura do dispositivo é 480px ou menos. Se for esse o caso, o dispositivo carrega generic.css. Caso contrário, o link é ignorado, assim como os outros, até que a resolução correta seja identificada e a folha de estilo apropriada seja carregada.

Mais do que apenas resolução

Mas a resolução não é de forma alguma o único elemento de design que pode ser controlado pelo uso de Media Queries. Largura e altura da janela do navegador, orientação paisagem e retrato, até mesmo layout, são alguns dos outros parâmetros que podem ser definidos.

Por exemplo, se uma Media Query detectar que um dispositivo é um smartphone, um design que pode carregar mostrando três colunas com uma área de texto e duas barras laterais verticais na tela do computador pode ser carregado na tela do smartphone como uma área de texto de largura total com o duas barras laterais como elementos horizontais embaixo.

Uma mentalidade flexível

É claro que um requisito fundamental para o design flexível são designers com uma mentalidade de design flexível. Infelizmente, a maioria das páginas da web ainda não são tão amigáveis ​​em dispositivos móveis, principalmente porque a maioria dos designers ainda projeta apenas para o desktop com smartphones e tablets como uma reflexão tardia. Poucos designers abordam o design com múltiplas plataformas em mente.

Embora haja uma curva de aprendizado na incorporação de consultas de mídia em folhas de estilo, é a transição do design com pixels para o design com porcentagens que impede alguns web designers. Na realidade, porém, não há muita diferença em projetar com porcentagens, e também é mais fácil.

Considere, por exemplo, a diferença entre atribuir larguras de 100% e 100 pixels a dois elementos idênticos. Em um, você pode ter certeza de que o elemento preencherá a tela, seja a tela de um desktop, laptop ou iPhone. Mas um elemento com 100 pixels de largura seria grande em uma tela de iPhone de 480 pixels, mas comparativamente pequeno em uma tela de desktop com resolução de 1600×900.

Design responsivo significa negócios

Para as empresas, a principal razão para implementar o design responsivo é óbvia. Quanto mais fácil for para os clientes em potencial navegar e encontrar o que estão procurando, maior será a taxa de conversão. Mas para muitos designers, o design responsivo para um site de negócios normalmente significa apenas diminuir o tamanho do conteúdo para caber em uma tela menor. Qualquer um que tenha passado algum tempo rolando e ampliando e diminuindo o zoom para encontrar as informações que procurava sabe que uma versão em miniatura de um site não é a resposta.

Outra maneira pela qual empresas e designers lidaram com a questão do design para um dispositivo móvel foi criar um site separado para diferentes dispositivos com redirecionamentos automáticos de acordo com o dispositivo. Isso permite que a melhor interface seja fornecida, além de evitar o carregamento lento causado por JavaScript e imagens grandes.

Mas há várias desvantagens nessa abordagem. Certamente, uma delas é a despesa de criar e manter vários sites e coordenar o conteúdo entre esses sites. E, claro, há mais um novo site a ser construído quando um novo dispositivo for lançado. Felizmente, o design responsivo, se feito corretamente, pode resolver quase todos os problemas de design para dispositivos móveis.