Por Lua Leite - Programador na ProdwebMais do que nunca a Internet esta sendo acessada a todo o momento devido a quantidade de informacoes e da necessidade de se estar presente neste universo de conexao entre as pessoas. Com o surgimento e disseminacao mundial dos dispositivos moveis, criou-se uma demanda de passar uma qualidade de informacao para o usuario destes dispositivos, tal qual aquela ja consolidada nos desktops. Com isso surgiu a pratica e o termo Responsive Web Design.A principio na construcao de um projeto Web, os desenvolvedores buscavam identificar que tipo de dispositivo estava acessando a pagina com as Media Types. Atraves desta identificacao era definida qual a formatacao e estilo a pagina receberia. Com o tempo as Media Types foram extendidas e hoje temos as Media Queries. Layout fluido e imagens flexiveis tambem estao incluidos nesse conceito.Media Queries sao especificacoes feitas em uma pagina Web usando Media Types. Porem nesse metodo podem-se definir restricoes mais precisas de qual arquivo de estilo sera usado, de acordo com o que voce definir em seu projeto. Veja o exemplo abaixo.<link rel="stylesheet" href="telamobile.css" media="screen and (max-width:480px)">O atributo media informa para a pagina que quando um dispositivo de tela colorida (screen), com largura maxima de 480 pixels acessar a pagina, a mesma deve utilizar o arquivo de estilo telamobile.css. Sabendo disso, podemos definir varios estilos para tamanhos de tela diferentes, desta forma fazendo com que tenhamos um layout agradavel independentemente do dispositivo que esta acessando determinado conteudo.Outra forma de se construir um layout para diversos tamanhos de tela e usar um layout fluido ou liquido. Esta forma e usada desde o inicio da construcao de sites, muitos nao o consideram como Responsive Web Design. Este tipo de construcao e baseada em proporcoes (porcentagem ou em) de espaco na tela que cada elemento devera ocupar. Isso nem sempre e facil de implementar, pois nao se pode ter um controle de forma exata dos tamanhos, portanto pode ocorrer quebra do layout em determinados tamanhos de tela.Por ultimo, mas nao menos importante e o uso de imagens flexiveis. Esta forma e uma maneira de adaptacao das imagens em um layout que podem ser usadas de duas maneiras: ser feita atraves de porcentagem, gerando imagens de alta qualidade e redimensionando proporcionalmente ao tamanho da tela; gerar varios tamanhos de uma mesma imagem, de acordo com os limites de telas especificados, definir a imagem na dimensao que for mais viavel para o tamanho da tela do dispositivo que esta acessando a pagina.O uso de design responsivo traz formas de obtermos qualidade na interacao dos usuarios com os projetos Web, independente do meio e da resolucao do video de onde o conteudo e acessado. Deve-se planejar bem e, de preferencia, usar o Mobile First, ou seja, pensar primeiro em mobile para depois ir para o desktop. Com mais acesso e qualidade na exibicao da informacao, os resultados tornam-se supreendentes!Alguns Layouts Responsivos do ranking The Top Responsive sites of 2012Disney.com Microsoft Starbucks Por Luiz Fernando - Programador na ProdwebHoje, desenvolver um CSS 100% cross browser e praticamente impossivel para layout`s mais complexos.