O que é design responsivo? (Vídeo explicativo e infográfico)

web design responsivo

Demorou uma década para web design responsivo (RWD) para se tornar mainstream desde Cameron Adams apresentado pela primeira vez o conceito. A ideia era engenhosa - por que não podemos criar sites que se adaptem à janela de visualização do dispositivo em que estão sendo exibidos?

O que é Design Responsivo?

Web design responsivo (RWD) é uma abordagem de web design que visa criar sites para fornecer uma experiência de visualização ideal - fácil leitura e navegação com um mínimo de redimensionamento, panorâmica e rolagem - em uma ampla gama de dispositivos (de telefones celulares a computadores desktop monitores). Um site projetado com RWD adapta o layout ao ambiente de visualização usando grades fluidas e baseadas em proporção, imagens flexíveis e consultas de mídia CSS3, uma extensão da regra @media.

Wikipedia

Em outras palavras, elementos como imagens podem ser ajustados, bem como o layout desses elementos. Aqui está um vídeo que explica o que é design responsivo e por que sua empresa deve implementá-lo. Recentemente, reconstruímos o DK New Media site para ser responsivo e agora estamos trabalhando em Martech Zone para fazer o mesmo!

A metodologia de construção de um site responsivo é um pouco entediante, pois você precisa ter uma hierarquia para seus estilos que são organizados com base no tamanho da janela de visualização.

Os navegadores têm consciência de seu tamanho, então carregam a folha de estilo de cima para baixo, consultando os estilos aplicáveis ​​para o tamanho da tela. Isso não significa que você precise criar diferentes folhas de estilo para cada tamanho de tela, você só precisa mudar os elementos necessários.

Operar com uma mentalidade que prioriza os dispositivos móveis é o padrão básico hoje. As melhores marcas estão pensando não apenas se seu site é compatível com dispositivos móveis, mas também na experiência completa do cliente.

Lucinda Duncalfe, CEO da Monetate

Aqui está um infográfico da Monetate ilustrando os benefícios potenciais de criar um design responsivo para vários dispositivos:

Infográfico de Web Design Responsivo

Se você gostaria de ver um site responsivo em ação, aponte seu Google Chrome navegador (acredito que o Firefox tem o mesmo recurso) para DK New Media. Agora selecione Exibir> Desenvolvedor> Ferramentas do desenvolvedor no menu. Isso carregará um monte de ferramentas na parte inferior do navegador. Clique no pequeno ícone móvel à esquerda da barra de menu Ferramentas do desenvolvedor.

responsive-testing-chrome

Você pode usar as opções de navegação na parte superior para alterar a visualização de paisagem para retrato, ou até mesmo selecionar qualquer número de tamanhos de viewport pré-programados. Você pode ter que recarregar a página, mas é a ferramenta mais legal do mundo para verificar suas configurações responsivas e garantir que seu site tenha uma ótima aparência em todos os dispositivos!

3 Comentários

  1. 1
  2. 2

    Muito obrigado Douglas por este artigo bem explicado. Devo concordar com isso, embora no lado do conteúdo das coisas. Para a maioria dos sites que fazemos um layout responsivo não será suficiente. Precisamos de conteúdo responsivo. Mas para os sites mais básicos, com certeza usaremos seu artigo bem documentado sobre como lidar com isso!

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.