O que é Responsividade?
Sabe aquele site que você entra pelo celular, e tem que ficar dando "zoom" pra ver as letras e imagens? Além disso, os itens do site parecem perdidos na tela, e é no mínimo chato visualizar os itens e informações. Esses são sites "não-responsivos".Com a grande popularização de dispositivos móveis, a necessidade de criar sites e aplicações web que se adaptam à qualquer tela cresceu exponencialmente. Pra esse tipo de site, criou-se o termo layout responsivo.
Alguns anos atrás, era comum a criação de dois sites. Um para ser utilizado no computador, e outro pra ser utilizado no celular. Funcionava, mas era pouco prático e dinâmico, além de acarretar outras responsabilidades e problemas, como realizar checagem de dispositivos, redirecionar a página, etc.
Hoje, utilizando técnicas de HTML + CSS, é possível criar sites totalmente responsivos, que se adaptam aos mais variados dispositivos sem nenhum problema.
1. Exemplo de Site que se adapta aos dispositivos
O que devo saber pra criar sites responsivos?
A princípio, deve saber CSS, utilizando os media-queries, que são comandos que delimitam determinadas funcionalidades de acordo com o tamanho da tela. Em outras palavras, as media-queries informam quando determinado comportamento será aplicado dependendo do tamanho da tela do dispositivo.Exemplos:
/* Aqui especifiquei que a cor da letra do parágrafo é preto, caso não caia nas
condições abaixo */
p {color: black;}
/* Caso esteja em um tablet por exemplo, com largura mínima 768, a cor é vermelho */
@media screen and (min-width: 768px) {
p {color: red;}
}
/* Em um monitor, a cor seria amarelo */
@media screen and (min-width: 992px) {
a {color: yellow;}
}
Ao incluir o CSS acima no seu HTML, e acessá-lo em um computador, por exemplo, a cor do texto seria amarelo. Ao acessar no tablet, seria vermelho, e assim por diante. Ou seja, o CSS nos permite especificar comportamentos diferenciados.
Mas são muitas telas e não quero fazer isso na mão
Antes de tudo, gostaria de deixar uma pequena orientação aqui: Antes de partir para o uso de algum framework CSS que facilite tudo isso, aprenda certinho como funcionam as media-queries. Elas serão úteis em várias ocasiões e, nem sempre você precisará de um framework.
Mas, voltando ao assunto, existem sim frameworks CSS que trabalham a parte da responsividade e muitas outras coisas, facilitando a vida do Desenvolvedor. Geralmente trabalham com sistema de Grid, dividindo a tela em linhas e colunas, o que facilita ainda mais o trabalho com responsividade.
Caso já tenha conhecimento de CSS, vale a pena dar uma olhada em alguns desses frameworks e aprender a utilizá-los, pois eles podem sempre agilizar suas tarefas:
Frameworks
Boostrap - O mais conhecido e utilizado atualmente, desenvolvido pelo Twitter
Foundation - Outro Framework muito conhecido e completo
TopCoat - Framework voltado para aplicações Web
Mini-Frameworks - Muito adequados para projetos onde você deseja depender o mínimo de Frameworks, utilizando apenas características básicas como Grids. Seguem alguns:
MinCSS - Possui apenas 995 bytes!! Legal né?
PureCSS - Framework leve e minimalista, para aplicações e sites rápidos. Muito bonito.
Furtive - Outro bem pequeno, menos de 4Kb
Considerações Finais
É isso aí pessoal!! Espero que tenham gostado. Se você está começando agora no desenvolvimento de sites, estude bastante CSS voltado para esta questão de responsividade.
Em breve estarei lançando um post com mais explicações sobre responsividade, provavelmente com a criação de uma pequena página utilizando CSS com Media-Queries e depois, criando a mesma página com algum framework. Fiquem no aguardo.
Em breve estarei lançando um post com mais explicações sobre responsividade, provavelmente com a criação de uma pequena página utilizando CSS com Media-Queries e depois, criando a mesma página com algum framework. Fiquem no aguardo.
E boa sorte nos estudos!! Sucesso. :D
EmoticonEmoticon