Saiba como o que é design responsivo e como ele é importante para manter suas aplicações acessíveis
Da mesma maneira que você que trabalha com internet começou a usar do dia pra noite os termos como Ajax, Tableless, Web 2.0, Seo etc… Você vai começar a ouvir cada vez mais os termos layout / design responsivo, mas o que é isso afinal? Mais uma buzzword?
Deixe-me pensar… Um conceito interessante.
De forma conceitual, não estamos falando de nenhuma revolução, porém com o crescente uso de diferentes “devices” no acesso a internet além das centenas de resoluções possíveis exibir o conteúdo de forma mais adequada ao dispositivo do usuário se tornou mandatário para aplicações web de alto padrão.
Algum tempo atrás bastava manter o site dentro dos 960px de largura testar em alguns navegadores e ok… No início era assim, e foi bom, mas tudo mudou. Hoje o seu site esta sendo acessado do Xbox em uma tela de 50 polegados, ou em um tablet xing-ling de 7″ 8″ 9″ 10″ 11″, do iOs do Android, ou do WinMobile ou seja o padrão é: não temos padrão.
Com base nesse cenário caótico a preocupação em como seu site será exibido se torna cada vez mais relevante, pois não queremos perder nossos visitante por que nosso conteúdo não carrega de forma adequada, e é nessa hora que ou você usa um Layout / Design Responsivo ou você faz 20 sites diferentes.
Manter a linkagem original
Uma das grandes vantages de utilizar este conceito na criação de aplicações web é a manutenção dos links originais do conteúdo independente do dispositivo ou resolução utilizada, o que aumenta a relevância do conteúdo pois o acesso não é dissipado entre diversas urls como os famosos (m.site.com.br) não prejudicando dessa forma nossas estratégias de SEO
Alguns exemplos de sites com design responsivo, acesse do celular e veja:
* Globo.com
* Uol.com.br
* Midiatismo
Mas afinal o que é isso?
De maneira geral é uma layout / design / html / css construído de forma a se adaptar a qualquer resolução/device de forma automática, sem a necessidade de criação de diversos sites diferentes.
Veja na figura como o site deve se comportar:
Isso custa?
Sim custa, o projeto deve ser pensado com base nesta premissa desde o início, caso contrário você precisará reescrever boa parte do seu site.
Porém o benefício também é bem claro, além da melhor experiência proporcionada aos seus usuários, o Google já deixou claro que para a área de SEO o design responsivo é o mais adequado.
Por onde começar?
Bom, pra começo de conversa, se você chegou aqui, é por que já conhece o W3C, a importância de seguir os padrões web, acessibilidade, qualidade de código etc…
Se esse não é o seu caso, volte 10 casas, aprenda primeiro sobre a qualidade do seu HTML/CSS, pode começar por aqui.
De toda forma existem alguns frameworks que podem ajudar nessa tarefa, os quais ainda não testei, por isso não posso dizer se são bons ou não mas veja a lista
- Foundation (http://foundation.zurb.com/)
- Fluid Baseline (http://fluidbaselinegrid.com/)
- Frameless (http://framelessgrid.com/)
- Skeleton (http://www.getskeleton.com/) – Leia aqui minha análise
- Golden Grid (http://goldengridsystem.com/)
- Boostrap (http://twitter.github.com/bootstrap/)
O assunto não termina aqui e ainda vou entrar nos detalhes mais técnicos como
- Os tipos de design
- Análise de frameworks
- Media Queries
- User Agent
Mas isso fica para o próximo artigo, sexta que vem, de toda forma analisando esse cenário podemos concluir que aplicações web cada mais não são coisa pra amador, bom fim de semana!