Para o primeiro post do blog escolhi um tema que estou estudando atualmente e acredito ser a tendência para o desenvolvimento web. E se você quiser experimentar o Responsive Web Design antes de ler o artigo, se está ansioso e não consegue esperar, não precisa esperar. Se estiver lendo esse artigo em um navegador de desktop, basta redirecionar a janela do seu navegador e ver essa nova técnica em ação. Não é incrível como a informação é adaptada para o tipo de resolução?
Isso é Responsive Design ou Design de Resposta e na minha visão assim como deixamos o layout de tabelas para diagramar nossas páginas com CSS é fundamental caminharmos para aplicação das técnicas do Responsive Web Design, que de forma resumida consiste na utilização de um mistura de técnicas de grids flexíveis e layouts, imagens e CSS media querys.
O criador
O criador do Responsive Web Design é Ethan Marcotte, ele foi o cara com a sacada de agrupar técnicas existentes em torno de uma nova concepção para se desenvolver sites adaptáveis a resolução de diferentes dispositivos. Confira aqui o artigo introdutório escrito por Ethan.
Mas afinal o que o Responsive Web Design resolve?
Cada dia é mais freqüente o lançamento de dispositivos com diferentes proporções, logo diferentes resoluções. Ao invés de se projetar com o pensamento no dispositivo devemos passar a programar com o foco em resolução. Essa é a grande quebra de paradigma não focarmos mais em desenvolver sites para iPhone, iPad ou blackberry.
Conclusão
Responsive Web Design na minha opinião é uma filosofia. Uma nova forma de pensar sobre o design e desenvolvimento de um web site. Considerando acima de tudo a apresentação do conteúdo de forma acessível, simples e intuitiva. Se resume na entregar de uma boa experiência de design para todos os públicos.
Vou escrever mais sobre esse tema e descrever as técnicas que o cercam. Acompanhe. Assine o feed.
Seu comentário é muito importante, por gentileza comente.
14 de janeiro de 2012 em 0:49
Olá Marcioqm, boa noite,
Eu estou a estudar a possibilidade de fazer uma versão específica mobile do meu website
http://www.profissionalweb.net
Então, tenho umas duas questões
Se responsive web design é fazer o site adaptavel para cada resolução e se nós não sabemos qual é o tamanho da tela do dispositivo movel como vou fazer com as imagens ? Que tamanho posso dar as imagens se não sei qual é a largura da página ?
Segunda Questão, não haverá uma forma de detectar qual o tamanho em largura que um dispositivo tem ?
Talvez um script em JavaScript ?
Como faço o css para fazer a tal tecnica de responsive web design ?
Pode dar um exemplo ?
Obrigado pela atenção
Cumprimentos
César Oliveira
http://www.profissionalweb.net
1 de março de 2012 em 1:50
Olá César.
estou preparando uma série de post sobre design responsivo e vou abordar essas duas questões logo mais. Porém, para não lhe deixar sem um caminho aqui vão algumas dicas.
Para as imagens você pode utilizar o seguinte na sua CSS:
img,
embed,
object,
video {
max-width: 100%;
}
É bem simples e resolve 90% dos casos. Os 10% são de usuários com IE7 ou 6.
Sobre a segunda questão a solução é utilizar media queries. Por exemplo, aqui no Blog utilizo:
@media screen and (max-width : 620px) –para Smartphones
@media screen and (max-width: 880px) — para iPads
@media screen and (max-width: 1024px) — ideal também para iPad com resolução em Landscape
Supondo que você quer que o fundo do seu site seja preto quando apresentado em um dispositivo com resolução máxima de 620px, levando em conta que você está a alterar o conteúdo da div page constante em seu HTML, pode-se utilizar o seguinte trecho de código:
@media screen and (max-width : 620px){
#page{
background-color:#999999;
}
}
Obrigado pelo apoio.
^-^