Introdução a RWD (Responsive Web Design)

Provavelmente você já ouviu falar de RWD! Não? Em que mundo você vive?? Lê aqui esse post para conhecer um pouco sobre o conceito.

O conceito de RWD começou em 2010 com um artigo para “A List Apart” (blog que fala sobre design, desenvolvimento, com foco para padrões web e boas práticas), assinado por Ethan Marcotte. Neste artigo Ethan falava de como o cenário estava mudando como relação ao acesso a internet e já previa que dentro de três a 5 anos o acesso a internet por dispositivos mobiles iria ultrapassar o acesso por desktop (o que é uma realidade). Leia o artigo na integra aqui.

Com o lançamento do iPhone (com tela de 320x480px ) percebeu-se que não era algo atrativo acessar um site desenvolvido pra desktop, então surgiu a necessidade de fazer sites mobile, era uma coisa simples, era só fazer um design de 320px.

Mas isso foi mudando com o tempo, com iPads, tablets, com resoluções maiores, e seria uma grande idiotice e perda de tempo desenvolver um site para cada dispositivo (tablet, iPad, smartphone…). Então chegamos ao RWD onde temos UM site, UM design e UM conteúdo que se adapta a qualquer dispositivo aproveitando o melhor de cada dispositivo.

Então desenvolvemos um site para desktop e o mobile que se adapte, sendo assim temos que pensar na adaptação, flexibilidade, priorizar o conteúdo. Design Responsive é passar a mesma informação de maneira útil e priorizada para todo mundo.

O ponto chave do design responsive são as “media queries” (definem condições para utilização de um CSS especifico, se o dispositivo se adequar a todas as condições o CSS será aplicado).

Exemplo do uso media queries

As “media queries” são uteis para adaptar o site a diferentes resoluções. No mediaqueri.es tem vários exemplos de sites que utilizam as “media queries” de forma responsive.

Na minha opinião esse é o melhor exemplo de RWD alistapart.com , com a tela maximizada e vá diminuindo a janela do seu browser e veja os efeitos.