Design responsivo

O design responsivo (ou "RWD") é um tipo de design de sites que oferece uma experiência de visualização personalizada para diferentes plataformas de navegador. Um site criado com RWD exibirá uma interface diferente dependendo do dispositivo usado para acessar o site. Por exemplo, um site responsivo pode aparecer de uma forma em um laptop, de outra em um tablet e ainda de outra em um smartphone.

Hoje, muitas pessoas acessam sites por dispositivos móveis, em vez de computadores de mesa ou laptops. Embora a maioria dos smartphones consiga exibir sites comuns, o conteúdo é difícil de ler e ainda mais difícil de navegar. Por isso, muitos desenvolvedores de sites agora usam o design responsivo para oferecer uma experiência melhor de navegação na Web em telas pequenas.

Sites projetados para dispositivos móveis, como telefones com iOS e Android, normalmente têm um tamanho de fonte padrão maior e uma navegação simplificada. Alguns sites também aproveitam a interface de telas sensíveis ao toque, oferecendo suporte para deslizar, girar e usar gestos de pinça e zoom. Um site otimizado para dispositivos móveis também pode remover conteúdo desnecessário para reduzir a necessidade de rolagem. Rollover de imagens e outros recursos que aparecem quando o mouse é posicionado sobre eles geralmente são removidos, pois as telas sensíveis ao toque não são compatíveis com um ponteiro do mouse.

Há várias maneiras de implementar o design responsivo. Um método é detectar dinamicamente a plataforma do usuário, como um iPad ou iPhone, e carregar HTML e CSS específicos para o dispositivo correspondente. Outra opção é usar consultas de mídia, que carregam automaticamente diferentes estilos CSS dependendo do tamanho da janela do navegador. O pacote Bootstrap, que contém vários arquivos predefinidos de JavaScript e CSS, baseia-se em consultas de mídia e é comumente usado no design responsivo.