Design Responsivo é o termo mais utilizado para denominar a característica que muitas interfaces digitais possuem, de "redesenhar" suas formas automaticamente ao serem carregadas em diferentes dispositivos móveis ou equipamentos fixos. Tecnicamente, esse comportamento - percebido principalmente no uso de diferentes dispositivos para acesso de uma mesma interface - pode ser programado por 2 tipos de técnicas: Design Responsivo ou Design Adaptativo.
Com o crescimento constante do uso de dispositivos móveis desde o ano e 2010, a indústria de design teve que adaptar-se a padrões de linguagem capazes de resolver as interfaces de forma dinâmica, em vez de aplicar um tipo de interface para dispositivo móvel e outro para computadores. A inovação de aparelhos e da capacidade de telas dos dispositivos móveis teve uma evolução rápida. Os tamanhos e formatos de telas foram diversificando, para acompanhar a evolução tecnológica. Isso trouxe um desafio ainda maior para os designers e programadores, envolvendo recursos como fluidez, resposta visual, comportamentos distintos de interatividade.
A partir da nova realidade, a solução de criar 2 tipos de interfaces tornou-se inútil e deu lugar às técnicas de responsividade e adaptabilidade, para permitir a construção de interfaces únicas que se "reconstroem" para layouts apropriados, de acordo com a tela em que serão carregadas, com diferentes resoluções e proporção.
Qual a diferença entre as duas técnicas?
Em questão de objetivo, ambas permitem a mesma coisa: facilitar a usabilidade e navegabilidade na interface, independente de qual plataforma ou dispositivo seja apresentada ao usuário. Porém, se diferenciam em alguns aspectos, relativos aos métodos de "redesenho".
Técnica de Design Adaptativo
Os principais elementos que formam o desenho de interface na tela são calculados para resposta à breakpoints (pontos de interrupção), conforme formatos determinados de telas e - especialmente - respectivas resoluções, por um método de escalas. Definidos os breakpoints que serão utilizados, determina-se novos tamanhos para os elementos e atribui-se comportamentos específicos, entre eles posicionamento, flutuação e até mesmo se um elemento é mantido aparente ou torna-se oculto.
Nesta técnica, o programador e o designer conseguem estabelecer de forma pouco abstrata as características visuais dos elementos de forma muito controlável, mas dependem de mais codificação para estabelecê-las. Embora permita maior controle e precisão para tamanhos específicos e escalonados, recobra em trabalho.
Técnica de Design Responsivo
Os elementos da interface de uma forma geral, incluindo fluxos de texto e imagens são tratados de forma a serem flexíveis em conformidade à resolução e à proporção da tela de dispositivo em que são apresentados. Normalmente os cálculos são variáveis proporcionais, em vez de tamanhos prefixados para cada breakpoint. E apesar de também utilizar breakepoints, o tratamento das escalas também se dão por proporção e, consequentemente, o resultado é alcançado com menor quantidade de linhas de código, comparada à técnica adaptativa.
Marco de Freitas é Profissional de Marketing, Mídias Digitais e Tecnologias Aplicadas ao Design. Designer há 33 anos, acrescenta à sua carreira - desde 1993 - a atuação como Docente nessas mesmas áreas no Senac de São Paulo.