Vamos falar a fundo sobre Layouts Responsivos (Responsive Design) para Blogs.
Antigamente ao desenvolver um website ou blog você devia tomar cuidados com os tamanhos de telas, geralmente tomávamos como padrão um valor que seria utilizado para qualquer tipo de resolução de tela do visitante. Com a grande variação de dispositivos moveis e resoluções de telas que encontramos hoje em dia, fica praticamente impossível ter um padrão e ao mesmo tempo apresentar com qualidade o conteúdo do blog/site para os todos que acessam.
Para resolver este problema, desenvolvemos hoje blogs e sites responsivos que poderão servir e se ajustar para qualquer tipo de dispositivo de uma forma a proporcionar uma boa experiência para os nossos usuários.
SIGA o agora e mantenha-se mais atualizado!
Participe e GANHE: Participe da pesquisa e ganhe um e-book exclusivo -
Clique AGORA!Quer ter um blog mais profissional no WordPress.org ou migrar do Blogger para o WordPress.org? Nós podemos te ajudar. Criamos um super serviço de hospedagem, a custo baixo, totalmente especializado em Blogs, com suporte que nenhum outro serviço oferece. Conheça e veja mais detalhes:
Caso você não sabia o que é um Layout Responsivo (Responsive Design), recomendo você ler este artigo:
A ideia é fazer com que que o layout de seu blog ou site reconheça que tipo de tela o seu visitante está usando para acessar o conteúdo do Blog/site, ajustando automaticamente, sem plugins ou redirecionamentos para endereços especiais.
Introdução desta serie de posts:
Este post é uma introdução para uma serie de posts que estarei escrevendo com o intuito de ensinar e informar nossos leitores como funciona um layout responsivo e como desenvolve-lo. O conteúdo dessa séria será técnico, mas também muito informativo e prático para blogueiros em todos os níveis.
Para o melhor aproveitamento e entendimento do que estaremos estudando nos próximos posts desta serie, é de vital importância que você tenha conhecimento em:
- HTML/XHTML básico
- CSS básico
Estudaremos a construção de layouts e a adaptação com exemplos práticos e tudo que for estudado aqui será possível aplicar ao Blogger ou WordPress.
Além do funcionamento, você aprenderá como criar novos elementos com jQuery que serão apresentados apenas para os tamanhos de tela que você escolher e ainda como fazer o Media Queries funcionar no Internet Explorer 7 e 8 (caso seja necessário o funcionamento deles nestes navegadores).
Para não terminar este post aqui apenas como introdução ao que estaremos estudando, vou aproveitar e introduzir alguns conceitos que serão requisitos para os futuros artigos desta serie.
O que são Media Types e como funcionam?
Como todos já sabemos o HTML foi desenvolvido para marcar o conteúdo de uma página HTML e o CSS para formatar a apresentação da página. São os códigos por trás de praticamente todos os tipos de blogs e sites.
Utilizando o Media Types podemos avisar ao dispositivo interpretador qual será a folha de estilos utilizada e como será a apresentação.
Um exemplo clássico de sua utilização é a seguinte:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Media Types</title>
<link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />
<link href="estilos-impressao.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body>
<!-- Conteúdo do site -->
</body>
</html>
Na primeira linha estamos indicando uma folha de estilos para monitores utilizandomedia=”screen” e na segunda CSS para impressão definindo media=”print”.
É possível declarar também o tipo de “media” utilizando @import do CSS:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Media Types</title>
<style type="text/css">
@import url("estilos.css") screen;
@import url("estilos-impressao.css") print;
</style>
</head>
<body>
<!-- Conteúdo do site -->
</body>
</html>
Também como anternativa inserir no cabeçalho do site ou em folhas de estilo:
@media screen {
/* Estilos para monitores aqui */
}
@media print {
/* Estilos para impressão aqui */
}
Conheça todos os tipos de “media” que você pode detectar para exibir folhas de estilos para cada um.
- all: todos os tipos de dispositivos
- braille: dispositivos de leitura tátil
- embossed: impressão para leitura tátil (braille)
- handheld: dispositivos portáteis (tela pequena e largura de banda limitada)
- print: impressão comum em papel
- projection: apresentações (exemplo: powerpoint)
- screen: telas coloridas (computadores, tabletes, smartphones e etc)
- speech: dispositivos com sintetizadores de voz
- tty: dispositivos que utilizam uma grade fixa de caracteres (como teletipos, terminais, ou dispositivos portáteis com capacidades de exibição limitadas)
- tv: televisores
Estas propriedades foram introduzidas no
CSS 2 e são recomendadas pelo
W3C.
O que são Media Queries e como funcionam?
Utilizando apenas os Medias Types não é possível detectar um tablet, por exemplo. Mesmo que ele tenha algumas características de um dispositivo handheld, ele não funciona na pratica como um, pois existem tablets com resoluções similares a monitores comuns e ao mesmo tempo alguns smartphones com largura de tela pequena estarão sendo servidos com esta folha de estilos.
Para que seja possível detectar telas realmente pequenas foi criado com o CSS3 asMedia Queries.
Utilizando Media Queries é possível detectar altura e largura.
O Media Queries surgiu com o CSS3 e é destinado a detectar características do dispositivo do visitante, como por exemplo: largura de tela, altura, cor e etc. Tudo o que for necessário para que o layout de seu blog ou site se ajuste àquele tipo de resolução.
Desta forma podemos inserir várias folhas de estilo, uma para cada tipo de dispositivo: uma folha de estilos para monitores com alta resolução, uma para tablets, uma para smartphones e outras quantas você julgar necessário (por exemplo: telas coloridas e telas monocromáticas).
Aqui um exemplo de como podemos utilizar para detectar vários tipos de dispositivos com larguras e características diferentes:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Media Types</title>
<!-- todos os dispositivos -->
<link href="estilos.css" rel="stylesheet" type="text/css" media="all" />
<!-- dispositivos com largura máxima de 800px (por exemplo tablets) -->
<link href="estilo-tablets.css" rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" />
<!-- dispositivos com largura máxima de 320px (por exemplo smartphones) -->
<link href="estilo-smartphones.css" rel="stylesheet" type="text/css" media="screen and (max-width:320px)" />
<!-- dispositivos monocromaticos (preto e branco) -->
<link href="estilo-monocromatico.css" rel="stylesheet" type="text/css" media="screen and (monochrome)" />
<!-- monitores com aspecto 16/9 (widescreen) -->
<link href="estilo-monocromatico.css" rel="stylesheet" type="text/css" media="screen and (device-aspect-ratio: 16/9)" />
</head>
<body>
<!-- Conteúdo do site -->
</body>
</html>
É possível ainda utilizar condições de exibição utilizando os valores: “only”, “and” e “not”:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Media Types</title>
<!-- todos os dispositivos -->
<link href="estilos.css" rel="stylesheet" type="text/css" media="all" />
<!-- monitores e com largura máxima de 600px (por exemplo tablets) -->
<link href="estilo1.css" rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" />
<!-- apenas para monitores coloridos -->
<link href="estilo2.css" rel="stylesheet" type="text/css" media="only screen and (color)" />
<!-- não aparece em monitores coloridos -->
<link href="estilo3.css" rel="stylesheet" type="text/css" media="screen and (not color)" />
<!-- para dispositivos que não são monitores e são coloridos -->
<link href="estilo4.css" rel="stylesheet" type="text/css" media="not screen and (color)" />
<!-- apenas monitores widescreen -->
<link href="estilo4.css" rel="stylesheet" type="text/css" media="screen and (only device-aspect-ratio: 16/9)" />
<!-- impressão -->
<link href="estilos-impressao.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body>
<!-- Conteúdo do site -->
</body>
</html>
Podemos utilizar com o @import e em arquivos css, aqui um exemplo de como utilizar:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Media Types</title>
<style type="text/css">
/* Exemplo utilizando @import para monitores com largura máxima de 600px */
@import url(estilos1.css) screen and (max-width: 600px);
/* Exemplo utilizando o css diretamente na página ou folha de estilos para monitores com largura máxima de 400px */
@media screen and (max-width: 400px) {
/* Estilos aqui */
}
/* Estilos para impressão com no mínimo 300dpi */
@media print and (min-resolution: 300dpi) {
/* Estilos de impressão aqui */
}
</style>
</head>
<body>
<!-- Conteúdo do site -->
</body>
</html>
Conheça a lista completa de características que é possível inspecionar:
Dispositivos visuais e táteis:
- width: Largura do browser
- height: Altura do browser
- device-width: Largura do dispositivo
- device-height: Altura do dispositivo
- grid: Verifica se o dispositivo de saída utiliza grade ou bitmap
Mídias de bitmap (imagens):
- orientation: Orientação do bitmap. Exemplo: retrato (portrait) e paisagem (landscape)
- aspect-ratio: Descreve a relação de aspecto da área de exibição de destino do dispositivo de saída (largura e altura)
- device-aspect-ratio: Descreve a relação de aspecto do dispositivo de saída (largura e altura)
- resolution: Resolução do dispositivo de saída
TV:
- scan: Descreve o processo de digitalização do dispositivo
Todas as mídias visuais:
- color: Mídia colorida (sendo possível definir valores para o máximo ou mínimo de cores suportadas)
- color-index: Verifica a existência de uma tabela de cores do dispositivo
- monochrome: Mídia monocromática (preto e branco)
Considerações:
Aqui tivemos uma explicação técnica de como funcionam os Media Types e Media Queries, como funcionam e o que são capazes de fazer.
Para desenvolver um layout responsivo não é necessário utilizar tudo o que foi visto neste post, por este motivo vocês não precisam decorar tudo isso.
Exatamente por este motivo não entramos em detalhes de todos as funcionalidades. Caso seja de seu interesse uma leitura mais detalhada e técnica do que foi aprendido aqui hoje, sugiro consultar os seguintes links:
Fontes:
Agora, esperem por mais. Esta série será muito completa. Deem sugestões, façam perguntas e comentem aqui mesmo para que os próximos artigos da série também contemplem as dúvidas mais comuns dos blogueiros e desenvolvedores sobre Layouts Responsivos.
