Web Design Responsivo

Web Design Responsivo é o método pelo qual o desenvolvedor web possibilita que um projeto seja otimizado para que os usuários alcancem uma experiencia satisfatória na navegação, independente de qual forma ele o faça.

[caption id="attachment_10" align="alignnone" width="300"] Responsive Design[/caption]

Segundo a Wikipédia:

“Web Design Responsivo (RWD), essencialmente indica que um site é feito para usar Cascading Style Sheets (CSS) 3 Media Queries, ou seja, uma extensão da regra @media, com grids proporcionalmente fluídas, para adaptar o layout ao ambiente de visualização, usando também, imagens flexíveis. Como resultado, os usuários, através de uma ampla gama de dispositivos e navegadores, terão acesso a uma única fonte de conteúdo…“

*Fonte: WP Mídia

Com o surgimento dos dispositivos móveis (tablets e smartphones) e micros com telas cada vez maiores, um projeto web deve ser planejado de maneira que ele fique bonito e transmita as informações com clareza em todos os aparelhos, adequando-se ao tamanho de cada dispositivo.

A técnica utilizada para alcançar tal desempenho é a utilização dos Medias Queries. Segundo a Dani Guerrato, em seu artigo Design Responsivo I – O que é e por que usar, “os Media Queries são como os funcionários da galeria. Eles direcionam cada visitante para uma sala diferente, de acordo com o que eles gostam mais de observar. Media Queries, em uma tradução livre consulta de mídia, são expressões que direcionam o visitante do seu site para uma folha de estilos diferente se acordo com o dispositivo que ele estiver utilizando… é possível definir não apenas o tipo de dispositivo, mas também o tamanho, orientação, resolução, proporção… Desta forma você pode ter um “alvo” muito mais específico“.

*Recomendo também a leitura do artigo Design Responsivo ll – Grids e Texto da Dani.

A Míriam de Paula do WP Mídia escreveu uma série de artigos muito interessantes sobre Web Design Responsivo.

• Iniciando com Web Design Responsivo


• Design Responsivo com CSS3 Media Queries


• Design Responsivo em 3 passos

Para os amantes de WordPress, o Paulo Faustino escreveu um artigo muito interessante, mostrando como criar um template responsivo para o CMS.

Como criar um template responsivo para WordPress

Você pode também acompanhar estes Pod Cast e o Hangout do Imasters sobre o assunto:

• SearchCast: Layout responsivo


• SearchCast: tecnologias web – HTML5, CSS3, mobile first e layout responsivo


• Hangout sobre Aplicações web com design responsivo

E para terminar, o Sérgio Lopes escreveu um artigo sobre as melhores referências sobre o tema - http://sergiolopes.org/diretorio-design-responsivo/.

Atualização - 15/09/2014

Achei interessante acrescentar este hangouts que a galera do Imasters fez. O vídeo é de 2012 mas contém muita informação bacana.

https://www.youtube.com/watch?v=b5WZC1ugowU

Logo trarei alguns tutoriais de Web Design Responsivo. Até a próxima galera!