Desenho responsivo é uma abordagem à criação de páginas web que faz uso de layouts flexíveis, imagens flexíveis e consultas de mídia em cascata. O objetivo do design responsivo é construir páginas web que detectem o tamanho e a orientação da tela do visitante e mudem o layout de acordo.
Desenho responsivo é uma abordagem um pouco retrógrada ao design de páginas web que resolve muitos problemas de design causados pela proliferação de novos tipos de dispositivos móveis. As páginas de design responsivo usam coordenadas x e y em uma grade para layout e porcentagens matemáticas para imagens, ao invés de parâmetros de largura fixa. Usando percentagens em vez de parâmetros de largura fixa e um layout de grade cria um layout mais fluido que se redimensionará para se ajustar ao tamanho do display.
Media queries, uma característica das folhas de estilo em cascata (CSS), permite ao desenvolvedor especificar quando um determinado estilo tem efeito. Com CSS2, por exemplo, uma consulta de mídia servirá para folhas de estilo amigáveis à impressora, se solicitado. CSS3 expandiu os recursos de consulta que permitem que as folhas de estilo sejam direcionadas para a exibição de um dispositivo e servir uma folha de estilo para desktop, tablet ou smartphone, dependendo da resposta da consulta.
Essa capacidade significa que, em vez de ter que construir uma versão móvel especial de um website -- o que muitas vezes requer a escrita de novo código do zero -- os desenvolvedores podem simplesmente construir várias folhas de estilo para a mesma página web e talvez até associar imagens diferentes com cada uma das folhas de estilo. As a result, HTML code can be repurposed instead of having to be rewritten, which saves considerable development time.
Chris Converse of Codify Design Studio demonstrates the basic elements of responsive design:
See also: mobile application development, Web app, native app, hybrid app, mobile browser, mobile OS,