Campo de busca

Categoria Front-End

CSS
O que é Design Responsivo?

O que é Design Responsivo?

Por | 08 de maio, 2012 | 7 comentários

Design Responsivo é uma técnica de estruturação HTML e CSS, em que o site se adapta ao browser do usuário sem precisar definir diversas folhas de estilos para cada resolução.

Como surgiu?

Em 2010, pensando em melhorar a sua experiência de navegação, Ethan Marcotte criou o artigo Responsive Web Design para o blog A List Apart. Ele apresenta o arquiteto inglês Christopher Wren, que disse certa vez que arquitetura é uma arte que “objetiva a eternidade”. Todo arquiteto que se preze quer construir um prédio que seja admirado (e habitado) por séculos… Infelizmente o Design Digital não tem a permanência da arquitetura. Na verdade, o que é projetado para internet hoje, já estará desatualizado daqui a duas semanas!

Por que usar?

Nos tempos atuais, além dos desktops e notebooks, é possível acessar a internet através de smartphones, tablets, televisores e já existem até mesmo geladeiras que possuem internet para algumas finalidades, como buscar receitas ou ler as últimas notícias, por exemplo.

De acordo com a pesquisa realizada pela WMcCann, 41% dos entrevistados acessam a internet pelo celular e, dentre estes, 47% utilizam banda larga móvel (3G). Além disso, 44,4% das pessoas que ainda possuíam o celular convencional, disseram que pretendiam trocar de aparelho em 6 meses ou menos.

“A tendência, este ano, é aumentar ainda mais. As pessoas preferem ter um celular conectado à internet, para acessar de qualquer lugar”, disse o ministro das Comunicações, Paulo Bernardo, ao participar do programa Bom Dia, Ministro, produzido pela EBC Serviços em parceria com a Secretaria de Comunicação da Presidência. “Temos, agora, de ter mecanismos para treinar e orientar as pessoas a entrar nesses ambientes digitais com muita velocidade. E também baratear planos e smartphones”, completou.

 

Frequentemente estão surgindo novas maneiras de acessarmos a internet, então é preciso conseguir uma estrutura de codificação HTML e CSS que independa do meio utilizado pelo usuário para acessá-la. Afinal, você pode até querer eleger uma categoria como alvo principal: desktops, por exemplo, mas ainda vai haver as diferenças entre sistemas operacionais, browsers, resoluções de tela…

Exemplos

Como fazer?

O Design Responsivo usa Media Queries, que em uma tradução livre é consulta de mídia. São expressões que direcionam o visitante do seu site para uma folha de estilos diferente de acordo com o dispositivo que ele estiver utilizando.

/* Smartphone em modo retrato */
@media only screen and (max-width : 320px) {
/* estilos */
}
 
/* iPads (retrato e paisagem) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* estilos */
}

Quer saber mais?

Ainda é difícil encontrar artigos em português que expliquem tão bem o passo-a-passo de como fazer um Design Responsivo, mas indicamos esses três artigos do blog da PopUp Design.

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[7] Comentários  

Lucas

Muito bom !! Simples e direto !

19-11-2013 às 20:51 Responder

Katori Genosuke

Gostei bastante do site e da matéria. Continue com o trabalho. Parabéns!

21-04-2014 às 11:55 Responder

Luiz Carlos

ACHEI BEM INTERESANTE ESSA TECNICAE GOSTARIA DE OBTER MAIS INFORMAÇOES A RESPEITO OU ATE CURSOS ... PODE AJUDAR ... GRATO

07-05-2014 às 17:20 Responder

amanda

Poxaaaaa!!!
primeira vez aqui gostei gostei

24-09-2015 às 11:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a amanda

:)

30-09-2015 às 17:04 Responder

Keila

Como saber se o site possui design de interfaces (home/iresponsividade)?
Obrigada

11-11-2016 às 14:46 Responder