Vocẽ já deve ter ouvido falar no termo design responsivo, mas sabe realmente o que ele significa? Hoje, todos os clientes querem uma versão mobile de seus websites, afinal, é essencial que um design funcione tanto em iPhones quanto celulares Android e pareça tão bonito quer seja visualizado em celulares ou tablets. Mas como fazer um site responsivo?

Hoje aprenderemos a resposta para essas perguntas e veremos porque um layout responsivo é tão importante. Vamos lá?

O que é design responsivo?

Design responsivo é uma abordagem que sugere que design e desenvolvimento devem responder ao ambiente e comportamento do usuário baseado no tamanho de sua tela, na plataforma em que ele executa seu navegador e na orientação (vertical ou horizontal) que usa para visualizar uma página.  Para conseguir isso designers utilizam uma mistura de grades flexíveis, layouts, imagens e bastante CSS. Afinal, a medida que o usuário migra de dispositivo o site precisa ter a tecnologia para responder automaticamente às suas novas preferências.

A grande vantagem do design responsivo é que ele elimina a necessidade de fases de desenvolvimento diferentes, que levam em consideração cada tipo de dispositivo no mercado. Com layouts responsivos um mesmo código reage a situações diferentes e se adapta de acordo com a expectativa do usuário.

Se quiser saber um pouco mais sobre como o layout responsivo surgiu eu sugiro esse artigo de Ethan Marcotte, que é uma introdução sobre o assunto. Ele explica como o design responsivo se origina na arquitetura e é transportado para o design da web.

Como fazer um site responsivo em 3 passos?

1. Comece pelo layout

Um layout responsivo deve, antes de tudo, ter um layout flexível. Talvez você comece a trabalhar na sua página considerando um formato padrão, mas é importante que, ao se sentir satisfeito, comece a pensar nas alterações que pode fazer para torná-lo responsivo.

Quando terminar um site não responsivo insira nele as tags <head> e </head>, o que configurará a exibição em todas as telas em uma relação 1×1 e removerá a funcionalidade padrão de dispositivos móveis que faz com que eles visualizem layouts completamente.

Em seguida é hora de fazer uma consulta de mídia, que o W3C define como a verificação dos recursos de mídia específico. Consultas de mídia permitem que seu site fique bem em todos os tipos de monitores, de smartphones a grandes telas.

A consulta de mídia depende do layout do seu site, portanto é algo que você deve descobrir como fazer sozinho. Defina pelo menos dois tamanhos com porcentagens que ocupam 70 e 30% de uma tela.

2. Concentre-se nas mídias

Um layout responsivo é só o primeiro passo para um site completamente adaptável. O segundo é o aspecto das mídias, como imagens. Utilizando o código img { max-width: 100%; } em seu CSS você garante que as imagens nunca serão maiores que o recipiente original.

3. Resolva a tipografia

Se até hoje você sempre usou pixels para definir os tamanhos de fonte é hora de mudar isso. Enquanto pixels funcionam quando seu site possui uma largura fixa, em layouts responsivos a coisa é bastante diferente. O tamanho da fonte responsiva deve estar relacionado à largura do espaço em que está contida. Só assim ela pode se adaptar à tela do cliente.

O CSS3 inclui uma nova unidade chamada rems, que funciona de maneira quase idêntica ao em, mas é relativa ao html. Apenas defina o tamanho da fonte html html { font-size:100%; } e especifique o tamanho nessa nova medida.

Se há alguns anos layouts flexíveis eram considerados um luxo, hoje eles são um necessidade. Este passo a passo deve ser o suficiente para ajudar você a implementar esse recurso em suas próximas criações. Ficou com alguma dúvida? Comente e terei prazer em ajudar.