Vejo com muita frequência pessoas que querem aprender a criar sites responsivos publicarem em grupos e listas de discussão algo como “quero aprender design responsivo… como uso as Media Queries?” ou então “o que é melhor para começar a aprender design responsivo: bootstrap ou foundation?”. Também é comum encontrar designers dizendo que a responsabilidade de fazer com que um layout torne-se responsivo é do front-rnder, e que eles não precisam se preocupar com isso.

Tudo errado!

Associar os esforços para o desenvolvimento de uma interface responsiva à etapa de front-end é um dos maiores equívocos atuais do desenvolvimento web.

Ethan Marcotte, que cunhou o termo responsive web design, publicou o primeiro texto sobre o assunto no A List Apart em maio de 2010. O que eu acho mais interessante nesse texto são as “categorias” nas quais ele classificou esse texto: CSS, layout & grids, mobile/multidevice, responsive design, interaction design. Isso mostra por si só a multidisciplinaridade de conhecimentos necessários para desenvolver um site responsivo. Para criar o conceito, Ethan se inspirou em uma ideia mais antiga, a arquitetura responsiva, na qual os espaços e ambientes podem se adaptar a condições pré-definidas ou desejáveis, por meio de sensores, de acordo com os diferentes contextos.

Contexto! Essa é a palavra-chave

O design responsivo não é apenas uma questão tecnológica de adaptação para diferentes dispositivos, mas sim uma adaptação para diferentes contextos. Desenvolver interfaces com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela, dispositivos e, principalmente, contextos de uso.

As pessoas consomem conteúdo e interagem com os dispositivos de maneiras diferentes de acordo com o contexto em que se encontram. A forma como uma pessoa navega por um site sentada em uma mesa de escritório, em um computador com teclado e mouse, com uma tela espaçosa, boa conexão e um ambiente razoavelmente controlado, é bem diferente da forma que essa mesma pessoa faria se estivesse no metrô com um smartphone de tela pequena e sem luz adequada, conexão instável e ambiente caótico, segurando o dispositivo com uma única mão e interagindo sem precisão com um dedo grande e engordurado. Nesses diferentes contextos, as pessoas têm disposições diferentes para consumir conteúdo. O tempo e o ritmo são diferentes, e a forma e quantidade de informação que estamos dispostos a consumir são proporcionalmente opostas.

Criar um site responsivo não consiste simplesmente em aplicar Media Queries ao código para espremer os conteúdos de forma um pouco mais amigável em telas menores. Aquilo que o usuário irá visualizar em um smartphone precisa ter mais foco e ser mais enxuto. Não temos espaço nem tempo disponíveis para conteúdos de relevância duvidosa, e por isso precisamos projetar uma interface mais específica e adequada, o que nos obriga a dar mais atenção a áreas como arquitetura de informação, usabilidade e acessibilidade. Entre o desktop e o mobile, precisamos estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site, e com isso repensar a pertinência de apresentação dessas informações em diferentes contextos e dispositivos. Não se trata apenas do tamanho da tela, mas sim do contexto em que o usuário se encontra.

Para que essa adaptação a diferentes contextos e dispositivos aconteça de forma adequada, precisamos de uma interface com características bem específicas, como um layout fluido com um design adaptativo. A estrutura fluida, onde todas as medidas utilizadas são relativas (porcentagem ao invés de pixels, por exemplo) permitirá que o site se adapte em pequenas variações de tamanhos de tela, como por exemplo a diferença entre um iPhone 6 e um iPhone 6 Plus. Por outro lado, em variações de telas maiores, como a diferença entre um iPad e um iPhone, provavelmente a interface fluida se quebraria, e uma parte do conteúdo se tornaria irrelevante. Nessa situação, precisamos de um layout adaptativo, ou seja, quando o site encontrar um desses pontos de quebra (Break Points), o layout e o conteúdo irão se recompor para serem exibidos de uma maneira mais adequada e adaptada.

A questão chave é que para implementar todo esse dinamismo no código, além de conhecer bem os usuários e os diferentes contextos de uso, é preciso ter um projeto de design muito bem definido. E, para projetar o design dessas interfaces, um meio estático como o Photoshop não ajuda da maneira adequada. Nessas horas é que designers e front-enders precisam dar as mãos, desde a concepção até a implementação das interfaces. No projeto de Design Responsivo é onde começam a fazer mais sentido as metodologias de “Designing in the Browser”, onde a partir de sketchs, wireframes e um guia de estilo, o layout é desenvolvido diretamente no navegador com a ajuda de um inspetor de código como o firebug. É uma maneira ágil e consistente e projetar e testar possibilidades e limitações reais simultaneamente.

Para que um site responsivo proporcione uma boa experiência para os usuários, além de layout fluido e design adaptativo, é necessária uma boa otimização de desempenho, o que pode ser feito muito bem por um designer que entende minimamente de código, e um front-ender que entenda minimamente de design.

Designer e front-enders, sejam amiguinhos. Cada vez mais vocês vão precisar um do outro!