Recentemente trabalhei em um projeto onde utilizamos o Design Responsivo e resolvi tratar desse tema tão importante, e a sua importância se dá não pela tecnologia empregada, mas sim, pelo caminhar do desenvolvimento da Web.

Quando falamos em Web a primeira coisa que nos vem a cabeça certamente é um computador e a internet propriamente dita a nossa frente, websites onde navegamos e surfamos pelo mundo virtual afora. Só que, essa relação tem mudado bastante nos últimos tempos primeiramente com os Smartphones, e agora sem dúvida com os Tablets.

Por conta disso, um tema outrora esquecido como o Design Responsivo torna-se importante novamente. Vamos a idéia  do que significa o termo.

Design Responsivo ou RWD é a maneira de criar um layout que se comporte adequadamente em qualquer resolução de tela. Anteriormente foi criado para que o website em questão tratasse de atender a públicos que navegassem em resoluções de 800×600 e outros com resoluções de 1024×768, e assim sucessivamente conforme as resoluções foram aumentando e claro, partes dos usuários migravam e parte não.

No entanto foi realmente com o uso cada vez mais frequente de Smartphones e Tablets que fez o Design Responsivo tão importante atualmente no desenvolvimento Web. Isso porque voltando a um tema tratado por mim em outro post, o IxD do RWD é sem dúvida o melhor possível para a realidade de hoje.
O RWD propõe reformular o website de acordo com a resolução utilizada pelo usuário, do ponto de vista da Experiência do Usuário isso é excelente, visto que para quem é usuário de Smartphones e Tablets a maior frustração que pode existir ao acessar um site é ver que ele não é responsivo ao device utilizado, essa frustração se caracteriza ou por quebra nas tabelas, ou funções que não respondem ao uso do Tablet etc, são muitos os problemas encontrados, dentre eles, alguns sites que se ajustam ao formato do Tablet porém não reorganizam a sua estrutura informativa.

Estrutura Informativa?

Sim, o RWD também avalia o tipo de dispositivo que está sendo utilizado através das dimensões do browser, feito isso é escolhido a hierarquia da informação que será apresentada naquele novo formato, na nova estrutura.
Não basta porém o site se ajustar adequadamente ao device se por ventura o campo de busca acabar aparecendo no meio da página, ou ainda, informações menos relevantes começarem a poluir o visual do website.

Uma coisa é termos um website para ser visto no Desktop, o outro em um Smartphone ou Tablet. Certamente as informações que devem ser apresentadas mudam sua imporância devida a relação que o usuário tem com o dispositivo. Sabemos por exemplo que um usuário mobile  não tem o mesmo foco que um usuário desktop. Assim sendo é fundamental hierarquizar que tipo de informação será apresentada para cada tipo de usuário, sendo que, muitas vezes o usuário em si não muda, mas muda a situação em que ele se encontra e isso deve ser levado em consideração.

Falando rapidamente da parte técnica, a “tecnologia” empregada é o CSS3, utilizando grades fluídas, ou seja, a regra é baseada em colunas. Existem diversos frameworks no mercado que podem facilitar e muito esse trabalho, não é meu foco tratar desse tema, mas darei algum exemplo e mostrarei logo abaixo websites desenvolvidos com RWD. Experimente espremer seu Browser a fim de simular as diversas situações em que o website poderia passar até chegar a dimensão de um mobile, observe que a resposta é pelo Browser e não pelo device em si, como obviamente o browser de um Smartphone tem sua resolução reduzida, o website se adapta fluidamente a essa nova situação.

Vale ressaltar que a idéia de Design Responsivo já existia a anos na internet devido ao citado logo no começo do artigo, porém quem cunhou tal termo foi Ethan Marcotte em 25 de maio de 2010, em A list a Part, você poderá se deliciar com a parte técnica neste artigo maravilhoso.

Exemplo de Framework:
BluePrint

Exemplo de Grid:
Tiny Fluid Grid

10 Exemplos de Websites com Design Responsivo:

_________________________________________

Eduardo Horvath é UX Specialist e Designer na redspark.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design há mais de 15 anos.
@eduardohorvath