# Web design responsivo

Web design responsivo (WDR) é uma abordagem ao design da Web que faz as páginas da web renderizarem bem em uma variedade de dispositivos e tamanhos de janela ou tela do mínimo ao máximo. Trabalhos recentes também consideram a proximidade do visualizador como parte do contexto de visualização como uma extensão para WDR. Conteúdo, design e desempenho são necessários em todos os dispositivos para garantir usabilidade e satisfação.
Um site projetado com WDR adapta o layout ao ambiente de visualização usando grades fluidas e baseadas em proporção, imagens flexíveis, e as media queries CSS3, uma extensão da @media, das seguintes formas:
* O conceito de grade fluida exige que o dimensionamento do elemento da página seja em unidades relativas, como porcentagens, em vez de unidades absolutas como pixels ou pontos.
* As imagens flexíveis também são dimensionadas em unidades relativas, de modo a evitar que sejam exibidas fora do elemento que as contém.
* As media queries permitem que a página use regras de estilo CSS diferentes com base nas características do dispositivo em que o site está sendo exibido, por exemplo, largura da superfície de renderização (largura da janela do navegador ou tamanho físico da tela).
* Os layouts responsivos se ajustam e se adaptam automaticamente a qualquer tamanho de tela do dispositivo, seja um desktop, um laptop, um tablet ou um telefone celular.
O web design responsivo tornou-se mais importante à medida que a quantidade de usuários de dispositivos móveis passou a representar mais da metade do tráfego total da Internet. Em 2015, por exemplo, o Google anunciou o Mobilegeddon e começou a aumentar as avaliações de sites compatíveis com mobile se a busca fosse feita em um dispositivo móvel. O web design responsivo é um exemplo de plasticidade da interface do usuário.

## Conceitos relacionados
### Dispositivos móveis primeiro, JavaScript discreto e aprimoramento progressivo

O design móvel primário e o aprimoramento progressivo são conceitos relacionados anteriores ao WDR. Navegadores de telefones celulares básicos não entendem JavaScript ou media queries, então uma prática recomendada é criar um site básico e aprimorá-lo para smartphones e computadores pessoais, em vez de depender da degradação normal para fazer um site complexo e cheio de imagens funcionar em celulares.

### Aprimoramento progressivo com base no navegador, dispositivo ou detecção de recurso

Em 2014, pela primeira vez, mais usuários acessaram a internet dos seus dispositivos móveis do que de desktop. Quando um site deve oferecer suporte a dispositivos móveis básicos sem JavaScript, a detecção de navegador ("agente de usuário") (também chamada de "detecção de navegador") e a detecção de dispositivo móvel são duas maneiras de deduzir se determinados recursos HTML e CSS são suportados (como base para aprimoramento progressivo) — no entanto, esses métodos não são totalmente confiáveis, a menos que sejam usados em conjunto com um banco de dados de recursos do dispositivo.$^[$
Para telefones móveis e PCs mais capazes, estruturas JavaScript como Modernizr, jQuery e jQuery Mobile que podem testar diretamente o suporte do navegador para recursos HTML/CSS (ou identificar o dispositivo, ou agente do usuário) são populares. Polyfills pode ser usado para adicionar suporte para recursos - por exemplo, para oferecer suporte a media queries (necessário para WDR) e aprimorar o suporte a HTML5, no Internet Explorer. A detecção de recursos também pode não ser totalmente confiável; alguns podem relatar que um recurso está disponível, quando está ausente ou tão mal implementado que efetivamente não funciona.

## Desafios e outras abordagens

Luke Wroblewski resumiu alguns dos desafios de WDR e design de dispositivos móveis e criou um catálogo de padrões de layout para vários dispositivos. Ele sugere que, em comparação com uma abordagem simples de WDR, as abordagens de experiência do dispositivo ou RESS (web design responsivo com componentes do lado do servidor) podem fornecer uma experiência do usuário mais otimizada para dispositivos móveis. A implementação do gerador CSS do lado do servidor de linguagens de folha de estilo como Sass ou MML do Incentivated pode fazer parte de tal abordagem, acessando uma API baseada em servidor que lida com as diferenças do dispositivo (normalmente celular) em conjunto com um banco de dados de recursos do dispositivo para melhorar a usabilidade. O desenvolvimento de RESS é mais caro, exigindo mais do que apenas lógica do lado do cliente e, portanto, tende a ser reservado para organizações com orçamentos maiores. O Google recomenda um design responsivo para sites de smartphones em vez de outras abordagens. Embora muitos editores estejam começando a implementar designs responsivos, um desafio contínuo para WDR é que alguns anúncios em banner e vídeos não são fluidos. No entanto, a publicidade de pesquisa e a publicidade de exibição (banner) suportam segmentação de plataforma de dispositivo específica e diferentes formatos de anúncio de tamanho para desktop, smartphone e dispositivos móveis básicos. Diferentes URLs de página de destino podem ser usados para diferentes plataformas, ou Ajax pode ser usado para exibir diferentes variantes de anúncio em uma página. As tabelas CSS permitem layouts híbridos fixos + fluidos.
Existem agora muitas maneiras de validar e testar designs WDR, variando de validadores de sites móveis e emuladores móveis a ferramentas de teste simultâneas como o Adobe Edge Inspect. Os navegadores Chrome, Firefox e Safari e o console do Chrome oferecem ferramentas de redimensionamento de janela de visualização de design responsivo, assim como terceiros.
Os casos de uso de WDR agora se expandirão ainda mais com o aumento do uso de dispositivos móveis; conforme o Statista, as visitas a mecanismos de busca orgânica nos EUA provenientes de dispositivos móveis atingiram 51% e estão aumentando.