Muitos designers da Web estão chamando 2018 do ano do design responsivo.

O design web responsivo é cada vez mais popular porque o maior desafio do design web hoje é que suas páginas são tão prováveis ​​de serem projetadas em um monitor de computador gigante como em uma pequena tela de telefone celular. Com um design responsivo, você cria uma página da Web que se ajusta automaticamente para se adequar ao tamanho de uma janela do navegador, seja um navegador em um iPhone e iPad, uma tela de televisão de 70 polegadas ou qualquer outro dispositivo que possa ser usado para ver suas páginas da web.

Projeto responsivo em ação

A melhor maneira de entender o quão sensível o design funciona é visitar um site projetado com essa abordagem. Os projetos responsivos respondem às diferenças na largura de uma janela do navegador ajustando fluentemente a colocação de elementos em uma página da web para se adequarem ao espaço disponível.

Assim, ao arrastar o lado de um navegador para torná-lo maior ou menor, você verá a mudança de design em tempo real. Visite o   site de Antonio Gaudi , que eu projetei para demonstrar o funcionamento do projeto responsivo, e arraste o lado da janela do navegador para torná-lo cada vez maior e você verá como o projeto responsivo funciona. À medida que você altera o tamanho do navegador, você verá a alteração do layout da página – as colunas ficam menores, os links de navegação alteram a posição e o tamanho, e os elementos mudam de um lado para outro para o outro.

Visite o mesmo site em um iPhone, iPad ou outro dispositivo com uma tela pequena, e você verá apenas o design que é direcionado para esse dispositivo de tamanho, como você vê na imagem no topo desta página.

Como o projeto responsivo funciona

Os projetos responsivos são criados ao combinar uma página HTML bem desenvolvida com vários conjuntos de estilos CSS e depois usar consultas de mídia para segmentar cada conjunto de estilos . As consultas de mídia são regras CSS que informam um navegador da Web sobre qual conjunto de estilos deve ser aplicado à página quando a janela do navegador estiver dentro de um tamanho especificado. Essencialmente, as consultas de mídia causam os estilos aplicados a uma página a serem alterados com base na largura da janela do navegador. Na maioria dos casos, quando os designers criam um design responsivo, eles criam três conjuntos de estilos e consultas de mídia correspondentes, mas é possível criar tantos conjuntos diferentes de estilos e consultas de mídia como você gostaria:

• Layout móvel: orienta regras CSS que se aplicam quando a janela do navegador é 480 pixels e abaixo.
• Layout do Tablet: alveja regras CSS que se aplicam quando a janela do navegador é de 481 a 768 pixels. Este layout herda todos os estilos do layout móvel e adiciona estilos que se aplicam à página somente quando a janela do navegador estiver no tamanho do tablet.
• Layout da área de trabalho: alveja regras CSS que se aplicam quando a janela do navegador é de 769 a 1232 pixels. Este layout herda todos os estilos dos layouts de dispositivos móveis e tablets e adiciona estilos que se aplicam à página somente quando a janela do navegador estiver no tamanho do desktop.

As duas figuras abaixo representam um site responsivo, tal como aparece em um navegador em cada um desses tamanhos, e a estrutura básica da página que você vê, se você olhar para o código “nos bastidores”. Observe que o mesmo código HTML é usado para criar o mesmo número de links e artigos e que a ordem dos elementos permanece a mesma. Isso porque é apenas uma página HTML que compõe as caixas neste design.

Essas caixas representam o código HTML. As variações da posição e do tamanho das caixas são controladas pelo CSS.

criação de sites responsivos

Abaixo você vê como o design se parece com as imagens e o texto no lugar.

À medida que você cria layouts usando um projeto responsivo, lembre-se de que você não está criando três páginas diferentes completamente diferentes. Em vez disso, você está criando um arquivo HTML que pode responder e ajustar para se ajustar a cada um dos tamanhos de tela alvo definidos nas consultas de mídia.

Isso significa que você precisa posicionar todas as tags <div> e outros elementos em seu documento HTML de forma a que possam ser reduzidos, ampliados e reorganizados para funcionar em todos os três layouts que você criou. Como resultado, uma das maiores complexidades à medida que você desenvolve projetos responsivos está chegando com uma estrutura de página básica que se presta a trabalhar em todos os três tamanhos de tela.

Quais programas você pode usar para criar projetos web responsivos?

Você pode criar projetos web responsivos usando quase qualquer programa que você possa usar para projetar sites. Se você usa o  WordPress , uma das ferramentas mais populares para criar sites e blogs, certifique-se de usar um tema que responda. Se você procura temas sensíveis do WordPress, você encontrará uma lista crescente de opções, e você sempre pode testar qualquer novo tema, clicando e arrastando a janela do navegador para ver o ajuste do design. Para aprender a criar um site WordPress com um design responsivo, assista o novo curso criativo da Janine, ” Criando o site da maneira mais fácil com o WordPress. “Se você usa um programa de web design, como o  Adobe Dreamweaver, você pode projetar o HTML e configurar as consultas de mídia CSS você mesmo, ou você pode usar os novos recursos de layout de grade de fluido incluídos no Dreamweaver CS6. Peça o vídeo Dreamweaver CS6 da Janine   para aprender essa abordagem.