Design responsivo é um tema muito comentado em várias comunidade de design gráfico. E é ainda mais difícil encontrar material em português para o estudo desse tema.
Encontramos uma postagem no blog PopUp que consegue explicar muito bem os conceitos do Design Responsivo. A equipe da Turbosite compartilha com a postagem abaixo esse conhecimento.
Como surgiu o conceito
Faça uma experiência. Tente aumentar ou diminuir muito a janela deste blog. Reparou como o conteúdo se re-organizou de acordo com o tamanho do browser? Em um tamanho pequeno, as imagens e o texto diminuiram proporcionalmente. Para aproveitar melhor o espaço, a sidebar se transformou em um menu superior. Já em uma janela maior o layout ganhou uma coluna extra. Se você acessar esse blog de um celular ou tablet vai reparar em outras adaptações. Tudo pensando em melhorar a sua experiência de navegação. Isto é design responsivo.
Mas como surgiu o conceito? Tudo começou com um artigo do blog A List Apart assinado por Ethan Marcotte no comecinho de 2010. Logo no inicio do artigo somos apresentados a Christopher Wren, um arquiteto inglês. Christopher disse uma vez que a arquitetura é uma arte que “objetiva a eternidade”. Afinal, todo arquiteto que se preze quer construir um prédio que seja admirado (e habitado) por séculos… Quer um exemplo prático? O coliseu de Roma foi construído no ano 79 e ainda é uma das maiores atrações turísticas do mundo. A imagem abaixo é a primeira versão do Twitter, lançado em julho de 2006. Aposto que o serviço não seria tão popular se a interface não tivesse sido atualizada… O Design Digital não tem a permanência da arquitetura. Na verdade, projetar para internet é já estar desatualizado daqui a duas semanas!
O Problema
Se você tem 20 anos ou mais provavelmente se lembra daquela época: um passado não muito distante, um tempo em que era obrigatório ter um computador para acessar a internet. As coisas evoluíram bastante e hoje as pessoas utilizam tablets, smartphones, televisores… Já vi por aí até banheiras conectadas a rede. A questão é que impossível prever como acessaremos a internet no futuro. E não é só a capacidade de cada aparelho que varia. Você pode até querer eleger uma categoria como alvo principal: desktops, por exemplo. Mas ainda vai ter as diferenças entre sistemas operacionais, browsers, resoluções de tela… Não podemos partir do pressuposto que todos se conectam através dos mesmos aparelhos. Mas através do Design Responsivo é possível garantir a acessibilidade do conteúdo independente do meio que o usuário utilizar para acessa-lo.
960 pixels não são mais suficientes
A maior parte dos desenvolvedores para web trabalha da seguinte maneira: cria-se uma divisão principal de largura fixa que funciona como um container (ou wrap). Ou seja, todo o site acontece dentro desta divisão, impedindo que tudo se espalhe desordenadamente pelo monitor. Esta divisão foi criada para que tivéssemos mais controle do design. Como a maior parte dos monitores eram da resolução 1024×768 foi padronizado 960 pixels como a largura ideal para um site. E isso funcionou bem. Por um tempo…
Na verdade os dispositivos foram evoluindo tão rápido que acabamos ficando para trás nesta corrida. Você já viu como um site de 960 pixels parece pequeno em um iMac de 21”? Todo aquele espaço vazio… E em uma televisão de 42”? Ignorar estas mudanças é um tiro no pé.
As telas com resolução menor também não podem ser ignoradas. E se você pensa que desenvolver uma versão mobile para o seu site é uma perda de tempo esta muito enganado. Uma pesquisa internacional comprovou que os smartphones ultrapassaram os computadores pessoais em vendas. Em 2010! Tentar fazer um layout diferente para cada aparelho também é loucura… São tantos sistemas operacionais e browsers diferentes que dá até crise de ansiedade nos pobres desenvolvedores. Eleger apenas um, como o iPhone por exemplo, é privilegiar os donos de uma determinada marca e negar acesso a uma quantidade enorme de outros usuários… É! 960 pixels não são mais suficientes… E agora?
Conheça os Media Queries
A solução proposta por Marcotte é criar um design que *responda* de maneira diferente de acordo com o dispositivo. Desta forma os sites não estariam desatualizados tão freqüentemente, pois não seria mais necessário tentar adivinhar quais formatos de dispositivos serão inventados no futuro. É só uma questão de formatar o conteúdo de acordo com o tamanho e o tipo. Podemos fazer isto através de uma ferramenta chamada Media Queries.
Imagine uma galeria de arte. Cada visitante gostaria de apreciar obras de um determinado estilo… Os Media Queries são como os funcionários da galeria. Eles direcionam cada visitante para uma sala diferente, de acordo com o que eles gostam mais de observar. Media Queries, em uma tradução livre consulta de mídia, são expressões que direcionam o visitante do seu site para uma folha de estilos diferente se acordo com o dispositivo que ele estiver utilizando. Isto já era possível em CSS2 através da função Medias Types… Antes você podia determinar o tipo de dispositivo: móvel (handheld), screen (monitores), print (impressão), etc. Mas com a chegada do CSS3, a funcionalidade Media Queries tornou-se uma ferramenta muito mais precisa. É possível definir não apenas o tipo de dispositivo, mas também o tamanho, orientação, resolução, proporção… Desta forma você pode ter um “alvo” muito mais específico. Você pode, por exemplo, definir o estilo para uma tela (screen only) com largura mínima de 768 pixels e máxima de 1024 com orientação paisagem (landscape). E, tcharam, aí está um conjunto de estilos perfeitos para iPads “deitados”. Através dos operadores *not*, *end* e *only* as possibilidades de determinação são muito grandes.
O Futuro
O design responsivo não é a solução absoluta para tudo, mas é um caminho a ser seguido, testado, remodelado… A constante mutabilidade da web trás problemas como os apresentados aqui. Isto pode ser considerado uma desvantagem para quem almeja a eternidade, como os arquitetos, mas para nós tem um sabor único. Designers, desenvolvedores, programadores tem algo que a maior parte das outras profissões não tem: espaço para mudança e transformação. Nós somos os responsáveis pela criação das bases para o futuro aqui e agora. O design responsivo pode não ser a solução definitiva, mas está nas nossas mão criar o conceito que seja. Espaço para isso não falta.