Design Responsivo
Autor: Lauro Moraes | Publicado: 2014-07-18T23:51:00-03:00




Responsivo...quantas vezes voçê já ouviu falar esta palavra? Sabe o que ela significa?

Hoje em dia não é mistério que qualquer dispositivo com acesso a internet pode abrir uma página em determinado site, voçê mesmo provavelmente deve usar mais os dispositivos móveis como um celular, tablet ou netbook/notebook para acessar páginas e estar conectado a sites, redes, blogues e fóruns ou simplesmente para fazer uma pesquisa do que usando o bom e tradicional desktop (computador de mesa).

Voçê também já deve ter se deparado com a seguinte situação: abrir perfeitamente uma página no computador más a mesma não abrir perfeitamente no celular ou tablet ou até mesmo sequer no netbook ou notebook...voçê já deve ter se perguntado o por que disto não é mesmo?

Bom, pra começo de conversa, responsivo é uma concepção da área de web-design que visa construir um layout que possa ser exibido de maneira harmoniosa entre as mais distintas resoluções de tela "trocando em miúdos" fazer com que um layout possa ser exibido tanto em computadores com telas de resolução maior tanto quando em dispositivos com telas e resoluções menores como celulares, tabletes e netbook/notebooks.

A ideia de design responsivo surgiu logo após a "enxurrada" de dispositivos mobile no mercado e hoje em dia além de inúmeras ferramentas e padrões de desenvolvimento é atualmente a área de desenvolvimento mais trabalhada em web-sites e portais na web.

A exemplo disto podemos usar o desenvolvimento de uma simples página em html, o web-designer cria a página em seu ambiente de trabalho normalmente um computador e usa como padrão de seu layout sua resolução atual, através de regras de estilo (css) ele estiliza este documento dando ao html a melhor aparência possível definindo o tamanho de fonte para cabeçalhos (h1...h6), parágrafos (p), definindo o tamanho que divs e forms, imagens, etc...irão ocupar no documento.

Até ai tudo bem, vamos supor agora que neste ambiente de desenvolvimento a resolução escolhida para o desenvolvimento seja 1152x864 pixels...note que um cabeçalho desenvolvido para esta resolução que tenha sua fonte setada para 18px não irá ser exibido de maneira harmoniosa em um celular com resolução de 320x480 pixels pelo contrário, as letras ficarão muito grandes na tela ocupando muito espaço e "empurrando" o restante do conteúdo para baixo :(

Para resolver isto surgiu então a ideia de "design-responsivo" criando mais de uma sequencia de regras para o mesmo documento fazendo assim o layout receber a regra mais adequada a resolução do aparelho que está visualizando este documento (página).

Como dito anteriormente hoje existem inúmeras ferramentas para o desenvolvimento responsivo além de muitas regras distintas, por hora não há/não existe uma padronização o que existe são conjuntos de regras.

As mais conhecidas são os frameworks, conjuntos de regras pré definidas em uma (ou várias) folhas de estilho aonde o desenvolvedor simplesmente deve montar seu layout utilizando tags de marcação do framework que ele está trabalhando para que esta estilizações e todos os elementos pré definidos por ela sejam chamados/incorporados ao seu documento.

Existem dezenas de frameworks por ai, citarei apenas o mais utilizados. Quando falamos de framework para desenvolvimento responsivo o Bootstrap&nbsp;que foi desenvolvido pelo Twitter e hoje é gerenciado pela comunidade que se formou em volta dele no Github&nbsp;é o mais difundido.

Más além deste temos o Foundation, o KickStart e vários outros e o melhor, são Open Source ou seja, de código aberto e que podem ser utilizados por qualquer pessoa.

Más nem só de frameworks se faz um layout responsivo o desenvolvedor pode também criar suas próprias regras para aplicar a cada tipo de resolução ou pelo menos as mais comuns :)



Tudo bem, está deve ser a parte aonde voçê se pergunta más como eu faço isso?!?

Com css é claro :)



É possível fazer a chamada de regras distintas para o mesmo documento de inúmeras formas. As mais usuais são na chamada da folha de estilo no próprio documento html ou então utilizando as propriedades media queries do css na própria folha de estilo...veremos abaixo como fazer isto.


Para chamar folhas de estilo distintas no próprio documento html devemos intender o que são media queries.

Media Queries ou simplesmente "consulta de mídia" são parâmetros das regras de css3, atualmente o css3 está sob construção más inúmeras das suas regras já estão aptas ao uso pois já estão definidas e serão lançadas na versão final do css3.
Esta consulta consiste em verificar o escopo da folha de estilo usando a verificação do tipo de mídia, largura, altura, cor, etc...que o dispositivo que esta visualizando o documento possuí, fazendo assim a incorporação da regra apropriada.
Media queries possuí sintaxe e operadores lógicos, abaixo trago um exemplo e posteriormente iremos "desmembrar" este exemplo.






No exemplo acima a atributo "link" do html indica ao navegador que deva procurar o documento fora do atual html.

O atributo "rel=stylesheet" indica tratar-se de uma folha de estilo externa ou seja, que a regra de estilo esta fora do documento html.

Já o atributo "href" indica ao navegador o caminho aonde está o documento (a folha de estilo).

Já "media" é um atributo html que indica ao navegador o tipo de dispositivo no caso o dispositivo que está fazendo a leitura do html.

A expressão "All" dentro de "media" é um valor e no caso "All" significa todos ou seja, todos os dispositivos que estão visualizando o documento irão incorporar a folha de estilo "mobile.css".

Os valores para o atributo "media" são vários e abaixo veremos eles.



All -&gt; para todos os dispositivos



braile -&gt; para dispositivos táteis



embossed -&gt; para dispositivos que "imprimam" em braile



handheld -&gt; para dispositivos de mão. Que normalmente tem telas pequenas e banda limitada



print -&gt; para dispositivos que façam impressões em papel



projection -&gt; para dispositivos que façam projeções



screen -&gt; para monitores e dispositivos com tela colorida de diversas resoluções



speech -&gt; para dispositivos sintetizadores de voz (NOTA: o css2 possui uma especificação chamada "Aural")



tty -&gt; para dispositivos que possuam grade fixa para exibição de caracteres como "teletypes", "terminais" e dispositivos portáteis com display limitado



tv -&gt; para dispositivos como televisores que tem baixa resolução e quantidade de cores e "scroll" limitados



Assumindo que nosso exemplo acima só traga a incorporação de uma folha de estilo (mobile.css) veremos abaixo como podemos diferenciar dispositivos na tag de "chamada" fazendo com que o navegador aplique mais de uma folha de estilo...claro que não simultaneamente ao mesmo navegador.




Neste segundo exemplo notem que substituímos o valor "All" para "screen" e para diferenciarmos entre uma tipica visualização através do computador ou de um celular adicionamos a sintaxe "and" que significa "e" literalmente e em seguida entre parenteses os valores de tela ao quais serão a base para esta "seleção".
Notem que "max-width:480px" é um "agente de seleção" que irá verificar se o dispositivo que está acessando o documento possui (ou não) largura de tela máxima de 480px...caso sim, caso o dispositivo tenha tamanho máximo de width de 480px (ou inferior) a folha de estilo css "mobile.css" será aplicada.

Neste mesmo exemplo definimos uma folha de estilo chamada "style.css" e o agente de seleção" será "min-width:1024px" ou seja se o dispositivo que esta acessando o documento (html) tiver a largura de tela de no minimo 1024px a folha de estilo a ser incorporada será "style.css".

É possível realizar inúmeras combinações para fazer está "verificação" e atribuir praticamente uma folha de estilo para cada dispositivo, para cada resolução diferente más deve ser notada a vasta gama de dispositivos e resoluções diferentes para ver que isso não é uma tarefa fácil e caso o dispositivo que esta acessando o documento não esteja na lista logo a renderização de estilo do documento não será realizada e o usuário irá ver uma página toda bagunçada.

Para contornar isto podemos fazer por exemplo três chamados diferentes...veja o exemplo abaixo:




Neste novo exemplo note que chamamos as folhas de estilo em três links.
O primeiro faz a já citada verificação se o dispositivo tem tela inferior (ou igual) a 480 pixels e aplica a folha de estilo "mobile.css".
O segundo verifica se a tela possui resolução maior que 1152 pixels e aplica a folha de estilo "big.css".
Más caso o dispositivo não se enquadre em nenhuma destas então apresentamos (fazemos o uso) a folha de estilo padrão "style.css".

Veremos agora como fazer esta verificação na própria folha de estilo, e esta é a prática mais recomendada pois a primeira prática dada como exemplo acima é funcional más acaba por fazer três requisições diferentes ao servidor enquanto que se realizarmos esta verificação no próprio css faremos apenas uma e o css nativamente irá ignorar as queries as quais o dispositivo não se enquadre.




Neste exemplo acima chamamos no documento html apenas uma folha de estilo e indicamos ao navegador que ela serve a todos os tipos de dispositivos através do atributo "media" e seu respectivo valor "All".
Agora veremos como realizar queries dentro do documento "style.css".




Explicando o exemplo acima...
Neste exemplo na linha 1 definimos um charset e entre as linhas 3 e 7 um css reset setando margin e padding para 0. Não se preocupe em reproduzi-los...eles não são obrigatórios para realizar queries só os coloquei ai por serem uma boa prática na construção de folhas de estilo ;)

Notem que "@media" tem a mesma função de "media" do html verificando o tipo de dispositivo que esta visualizando o documento.
Também adicionamos "only" que é um dos operadores lógicos utilizados em media queries a função de "only" é especificar que "apenas" um determinado valor será empregado...no nosso exemplo será "screen".
Notem também que atribuímos um valor minimo e um valor máximo de largura de tela para cada querie utilizada.

Este exemplo é muito simplista e deve ser usado somente como referencia de estudo.
Abaixo deixo mais um exemplo de css esse por sua vez pode ser usado como uma base simples para se desenvolver a partir do mesmo.




Bom o exemplo acima por si só já esta comentado más não custa nada ressaltar suas funções...
neste exemplo entre as linhas 2 e 10 realizamos a criação de regras para o documento html, damos as dimensões que o documento deva ocupar na tela através de porcentagens (%) além de definirmos uma imagem de plano de fundo (background), a fonte que deve ser usada por ele além dos tamanhos da fonte no documento e em especifico no cabeçalho "h1".
Se repararem estas regras estão fora das queries então podemos assumir que estas regras serão padrão do documento, caso um dispositivo não se enquadre em uma querie ele recebera estas regras.
Agora vamos falar das queries contidas neste exemplo.
Antes de mais nada reparem que retiramos o operador lógico "only" e deixamos "screen" para que todos os dispositivos que se encaixem nesta verificação recebam as regras contidas na querie.
Seguindo este raciocínio vemos que as duas primeiras queries são destinadas a dispositivos de baixa resolução e por isso retiramos das regras o uso de uma imagem de background assim como definimos outros valores em pixels para fonte do documento assim como fonte do "h1".
Já a terceira querie é destinada par dispositivos com resoluções maiores entre 1024 pixels e 1152 pixels e se repararmos nesta querie ela possui background assim como suas fontes são maiores.

Vale lembrar novamente que este é um exemplo&nbsp;básico&nbsp;&nbsp;e que muitos outros comandos podem ser mesclados na querie como por exemplo (orientation : portrait) para dispositivos em modo retrato ou então (orientation : landscape) para dispositivos em modo paisagem além também de usar "@import" dentro das queries para importar uma folha de estilo separada.

A conclusão óbvia é que fazer um layout responsivo dá trabalho rsrsrsrs e voçê provavelmente vai optar pelo uso de algum framework más caso queira mesmo criar um layout responsivo com as próprias mãos saiba pelo menos que deves criar uma estrutura html de fácil intendimento criando divs que englobem cabeçalhos, colunas, rodapé, barra de navegação de modo que possa reproduzi-las de forma fácil em cada querie assim como também definir a que tipos de resoluções seu layout ira atender.
Uma humilde sugestão minha é que faças um layout para desktop como base e aplique queries para duas resoluções mobile (celulares e tablets) assim como uma querie especifica para uma resolução alta de desktops deste modo bem minimo seu layout já irá atender a uma gama considerável de dispositivos!

Deixo abaixo alguns links que talvez possam lhe ser uteis para estudo ;)

Link para recomendações de media queries pela W3C.&nbsp;(site em ingles)!

Links para extensões para Google Chrome que ajudam no desenvolvimento responsivo !!!

Extensão Cameleon lhe permite vizualizar em uma janela do Chrome como um layout fica em diversas resoluções (com opção de criar novas resoluções)

Breakpoint media-queries lhe permite verificar uma boa gama de tamanhos de dispositivo entre monitores, celulares e tablets (além de lhe apresentar a sintaxe de uso destes em queries)

Bom acho que é isso por hora, este post será usado como complemento a serie web espero que tenham gostado \o/ !!!

Para me despedir deste post deixo aqui o convite para curtir e compartilhar além é claro do convite ao grupo Projeto Open no Facebook é isso pessoal até o próximo post ;)