Um site, vários ecrãs. O design responsivo faz com que um único layout se adapte a diferentes tamanhos e orientações de dispositivos. O termo foi criado por Ethan Marcotte em 2010, com base em ideias anteriores sobre grelhas flexíveis e imagens fluidas. Em vez de criar sites separados para desktop e dispositivos móveis, os designers criam uma única base de código que se reorganiza de acordo com a largura da janela de visualização.

Três ingredientes técnicos fazem com que funcione. As grelhas fluidas utilizam percentagens em vez de pixéis fixos, pelo que as colunas se esticam e encolhem. As imagens flexíveis são redimensionadas dentro dos seus contentores. As media queries detetam o tamanho do ecrã e aplicam regras CSS diferentes em breakpoints definidos. Um layout de desktop com três colunas pode reduzir-se a uma única coluna num telemóvel, com a navegação a passar para um menu hambúrguer. O objetivo não é o controlo perfeito em pixels, mas sim uma adaptação elegante.

Técnicas básicas

• Grades fluidas baseadas em percentagens.
• Imagens e media flexíveis.
• Consultas de media em pontos de interrupção definidos.
• Priorização de conteúdos para dispositivos móveis.

O design responsivo já é prática padrão. Os utilizadores esperam que um website funcione corretamente, independentemente de o acederem num telemóvel, tablet, portátil ou televisão.