Design responsivo já um termo que já está na boca de todo webdesigner que está ligado nas novidades. Mas, afinal de contas, o que é isto? Eu não sou nenhum expert no assunto, tanto é que, nem sou webdesigner, mas, em poucas palavras: Layout responsivo é um layout que se adequa á largura de tela de diversos dispositivos, sem, contudo, ser necessário criar um site inteiro adaptado pra isso. Ou seja, o código HTML deste site se mantém íntegro, deixando toda a parte da adaptação para o CSS. Voçê quer um exemplo? Este site aqui: http://sergiolopes.org/.
Para ver funcionando, tente redimensionar a tela do navegador o menor possível. Notou alguma diferença? Percebeu que os elementos conseguem se adaptar á variação de largura, sem comprometer a visualização do usuário? Então, isso é DESIGN RESPONSIVO. Mas, qual é o segredo? Precisa recriar um site do zero? Não necessariamente, vai depender de cada caso. Mas, na maioria dos casos, basta apenas uma ligeira adaptação no CSS. Já existem frameworks que auxiliam neste aspecto? Sim. Entre eles posso citar o bootstrap, zurb, etc. Porém, é sempre importante conhecer um pouco o fundamento disso tudo, afim de não ficarmos tão dependentes de frameworks.
Quando se lida com este assunto, normalmente aparecem duas palavras mágicas: User-agent e media-query. User-agent é uma frase que representa quem esté acessando o site. Ele vem através de um header de requisição. Identifica se o cliente é IPAD, IPHONE ou ANDROID, por exemplo. Media-query, pelo que entendi, calcula e redimensiona os elementos da página para se adequar á tela do usuário.
Para que os media-query entrem em ação, voçê deve, primeiramente, colocar o seguinte trecho de código no cabeçalho de seu site:
OK. Este é o primeiro passo. Sugiro que voçê crie uma página qualquer em HTML, com esta tag mágica, e acesse. Redimensione a janela do navegador até a largura mínima. Voçê pode observar que os elementos são automaticamente ajustados á largura da tela. Agora, voçê pode ir um pouco mais além: O menu é horizontal quando a largura é maior, e, vertical, caso a largura fique menor. Voçê pode fazer isso através do código CSS, como veremos em seguida:
@media screen and (max-width: VALOR){
/* Código CSS aqui */
} // Tratamento por tipo de largura
Como voçê vê, tu pode definir as propriedades CSS caso a largura de tela seja inferior ao atributo max-width, por exemplo. Voçẽ pode trabalhar também com min-width ou max-device-width (Largura máxima de dispositivo).
Num exemplo que fiz, em tela normal, há a seguinte apresentação:
Agora, aplicando o conceito de DESIGN RESPONSIVO para telas com largura máxima de 600 px e 300 px, há a seguinte apresentação:
Pois bem, observe que, há algumas alterações á mais além de uma simples adaptação de layout:
a) O menu ficou vertical
b) A fonte ficou menor quando a largura ficou menor do que 600 px, e menor ainda quando ficou menor do que 300 px.
c) Divs com ids conteudo e plus passaram a ocupar a largura inteira do container principal.
Estas alterações acima são específicas para telas menores, e obedecem ao código CSS abaixo:
@media screen and (max-width: 600px) {
#left{
float: none;
width: 100%;
}
#content{
float: none;
width: 100%;
}
#plus{
float: none;
width: 100%;
}
#nav ul li{
clear: both;
display: block;
}
#nav{
width: 100%;
}
#nav ul li a{
line-height: 100%;
font-size: 80%;
}
h1{
font-size: 80%;
}
#foot{
font-size: 80%;
}
#imagens{
width: 80%;
margin-top: 2em;
}
}
@media screen and (max-width: 300px) {
#left{
float: none;
width: 100%;
}
#imagens{
width: 80%;
margin-top: 2em;
}
#plus{
float: none;
width: 100%;
}
#nav ul li{
clear: both;
display: block;
margin-bottom: 0.5em;
}
#nav{
width: 100%;
}
#nav ul li a{
line-height: 100%;
font-size: 70%;
}
h1{
font-size: 70%;
}
#foot{
font-size: 70%;
}
}
Como voçê pode ver, a única diferença entre as adaptações de 600 e 300px é quanto ao tamanho da fonte.
Caso queira se aprofundar, sugiro a visita do seguinte site:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Clique no link abaixo para baixar o código-fonte do exemplo:
Nenhum comentário:
Postar um comentário