Introdução ao Responsive Web Design
Autor: Daniel Prodweb | Publicado: 2013-05-13T15:59:00-03:00

Por Luã Leite - Programador na Prodweb

Mais do que nunca a Internet está sendo acessada a todo o momento devido à quantidade de informações e da necessidade de se estar presente neste universo de conexão entre as pessoas. Com o surgimento e disseminação mundial dos dispositivos móveis, criou-se uma demanda de passar uma qualidade de informação para o usuário destes dispositivos, tal qual aquela já consolidada nos desktops. Com isso surgiu a prática e o termo Responsive Web Design.

A princípio na construção de um projeto Web, os desenvolvedores buscavam identificar que tipo de dispositivo estava acessando a página com as Media Types. Através desta identificação era definida qual a formatação e estilo a página receberia. Com o tempo as Media Types foram extendidas e hoje temos as Media Queries. Layout fluído e imagens flexíveis também estão incluídos nesse conceito.

Media Queries são especificações feitas em uma página Web usando Media Types. Porém nesse método podem-se definir restrições mais precisas de qual arquivo de estilo será usado, de acordo com o que você definir em seu projeto. Veja o exemplo abaixo.


<!--[if gte mso 9]>
 
  
  
 
<![endif]-->
&lt;link rel="stylesheet" href="telamobile.css" media="screen and (max-width:480px)"&gt;

O atributo media informa para a página que quando um dispositivo de tela colorida (screen), com largura máxima de 480 pixels acessar a página, a mesma deve utilizar o arquivo de estilo telamobile.css. Sabendo disso, podemos definir vários estilos para tamanhos de tela diferentes, desta forma fazendo com que tenhamos um layout agradável independentemente do dispositivo que está acessando determinado conteúdo.

Outra forma de se construir um layout para diversos tamanhos de tela é usar um layout fluido ou líquido. Esta forma é usada desde o início da construção de sites, muitos não o consideram como Responsive Web Design. Este tipo de construção é baseada em proporções (porcentagem ou em) de espaço na tela que cada elemento deverá ocupar. Isso nem sempre é fácil de implementar, pois não se pode ter um controle de forma exata dos tamanhos, portanto pode ocorrer quebra do layout em determinados tamanhos de tela.






Por último, mas não menos importante é o uso de imagens flexíveis. Esta forma é uma maneira de adaptação das imagens em um layout que podem ser usadas de duas maneiras: ser feita através de porcentagem, gerando imagens de alta qualidade e redimensionando proporcionalmente ao tamanho da tela; gerar vários tamanhos de uma mesma imagem, de acordo com os limites de telas especificados, definir a imagem na dimensão que for mais viável para o tamanho da tela do dispositivo que está acessando a página.

O uso de design responsivo traz formas de obtermos qualidade na interação dos usuários com os projetos Web, independente do meio e da resolução do vídeo de onde o conteúdo é acessado. Deve-se planejar bem e, de preferência, usar o Mobile First, ou seja, pensar primeiro em mobile para depois ir para o desktop. Com mais acesso e qualidade na exibição da informação, os resultados tornam-se supreendentes!



Alguns Layouts Responsivos do ranking The Top Responsive sites of 2012



Disney.com














 












Microsoft&nbsp;





&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 









Starbucks