Eae, tudo bele?
Não tem para onde fugir! A maioria dos clientes hoje em dia quando pensam em construir um site já desejam que o mesmo seja acessado pelo celular, tablet e outros diversos dispositivos que temos por aí. E eles tem razão em querer isto, pois segundo dados da 27º Pesquisa Anual de Administração e uso da Tecnologia nas Empresas realizada pela Fundação Getúlio Vargas, a projeção de celulares em uso chegará a 236 milhões até 2018.
E é aí que o design responsivo vem como importante conceito na hora de pensar em construir sites para diferentes dispositivos e resoluções de telas. Se você é leitor assíduo do blog é bem provável que já tenha um conhecimento prévio sobre o assunto caso tenha baixado nosso E-book de Design Responsivo (se ainda não fez, CLIQUE AQUI e baixe agora!!).
Neste artigo vou falar sobre a famosa técnica de consulta de mídia chamada Media Queries que atribui diferentes estilos CSS para diferentes resoluções de tela possibilitando assim fornecer um visual diferente a cada resolução detectada.
Então? Pronto para começar? Let’s Go!
Neste artigo você verá:
Primeiro passo – Media Types
A questão de pensar em design responsivo não é tão somente se preocupar com resoluções de tela. Antes mesmo de surgir as medias queries houve um esforço para que pudéssemos disponibilizar estilos com responsividade para atender dispositivos como a impressora, por exemplo.
E para entendermos melhor, o que digo, imagine-se no lugar de uma dona de casa que se interessa por uma bela receita de bolo que vi na internet e que deseja imprimir a receita para utilizá-la depois.
O que você acha de fornecermos a ela um estilo CSS que oculta, banners, logos e todo aspecto visual desnecessário para que ele possa visualizar e imprimir um texto clean? Isso tudo é possível! Com Media Types do CSS.
Media Types vem do inglês e significa “tipos de mídias”. Sua especificação define CSS para alguns tipos de dispositivos como braille, apresentações do Powerpoint, impressoras, entre outros.
Conheça agora os tipos de acordo com a norma da W3C para Media Types:
- all: Para todos os dispositivos.
- braille: Para dispositivos táteis.
- embossed: Para dispositivos que imprimem em braille.
- handheld: Para dispositivos de mão, com telas pequenas e banda limitada.
- print: Para impressoras.
- projection: Para apresentações projetadas. Por exemplo projetores.
- screen: Para monitores ou outros dispositivos com telas coloridas.
- tty: Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.
- tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.
- speech: Para sintetizadores de voz.
Voltando ao caso da dona de casa e sua receita… Como poderíamos ajudar nessa questão? Como seria a aplicação na prática? E a resposta é simples, Galucho. Você pode simplesmente criar uma folha especifica para a impressão e no atributo “media” dentro da tag HTML link colocar o valor “print”.
<link rel="stylesheet" href="print.css" type="text/css" media="print">
Ou dentro de um arquivo CSS:
@media print {
/* Aqui vai as declarações desejadas */
}Apesar dos tipos de medias citados, a tecnologia empregada em dispositivos com acesso a internet evolui muito rápido e dezenas de novos tipos de celulares, tablets e Tvs cada vez mais parrudos e diferenciados surgem a todo momento.
Muitos destes dispositivos são pequenos no tamanho mais possuem resoluções iguais, quiçá melhores, a de um PC. Parece confuso pois não podemos usar uma media type para dispositivo de mão já que não se enquadra no tipo, muito menos screen já que é para desktops. E agora quem poderá nos ajudar?
Evolução – Media Queries
Media Querie significa “consulta de mídia” e se utiliza de uma expressão lógica para verificar os tipos de dispositivos cobertos pelas media types e também a capacidade deles. A expressão lógica efetua consultas ao dispositivo que o usuário está usando para acessar o site e checar característica como resolução de tela, altura e largura de browser, entre outras coisas. A partir daí é possível especificar o estilo desejado conforme a características do dispositivo consultado. Mas como proceder?
Existe uma lista de características de mídia (Media Features) que você pode utilizar para selecionar os dispositivos que você quiser. Veja:
- aspect-ratio;
- color;
- color-index;
- device-aspect-ratio;
- device-height;
- device-width;
- grid;
- height;
- monochrome;
- orientation;
- resolution;
- scan;
- width;
Para efetuar uma consulta de mídia é necessário usar um ou um conjunto destas características para que, de forma lógica, se especifique os estilos desejados. Imagine o seguinte cenário:
Queremos que a cor de fundo de um site tenha a seja vermelho quando acessado por um dispositivo com largura de até 480 pixels, e que tenha a cor de fundo branco em dispositivos com largura acima de 480 pixels. Veja como ficaria código:
/* Estilos aplicados a larguras acima de 480 pixels */
body {
background-color: #fff;
}
/* Estilos aplicados a larguras até 480 pixels */
@media screen and (max-width: 480px) {
body {
background-color: #ff0;
}
}Com o tempo você pode perceber que algumas características são mais utilizados que outros. Comece observar os códigos fontes de sites e verá que muitos estilos usam o “width”, como fiz no exemplo anterior, aplicando o prefixo min/max (min-width para largura mínima e max-width para máxima largura).
Esta característica tem como valores medidas de comprimento e durante a consulta eae verifica a largura da janela do browser (largura do viewport) que é um dado comum e de fácil utilização.
Na hora que for desenvolver basta ter o valor da largura de um dispositivo em mente e executar a consulta com medias queries, especificando as declarações CSS para o dispositivo nesta largura.
Mas quais são as larguras mais comuns para que você possa estabelecer o ponto exato da consulta?
Para isso vou mostrar as resoluções de alguns dispositivos do mercado e o conceito de breakpoints.
Breakpoints
Breakpoints são “pontos de quebras” onde determina-se as larguras que o desenvolvedor deseja efetuar em uma consulta através de medias queries. Para isso basta que ele conheça a resolução de um dispositivo, que é a largura e altura em pixels, e a partir do valor da largura ele especifique como valor do breakpoint.
Existem alguns valores bastante utilizados por desenvolvedores, mas não é uma regra absoluta já que existem milhares de dispositivos e estes valores, claro, não cobrem todos. Veja um exemplo utilizado no framework Bootstrap:
/* Telefones em paisagem e abaixo */
@media (max-width: 480px) {
/* estilos aqui */
}
/* Telefones em paisagem a tablet em retrato */
@media (max-width: 767px) {
/* estilos aqui */
}
/* Tablet em retrato a paisagem e desktop */
@media (min-width: 768px) and (max-width: 979px) {
/* estilos aqui */
}
/* Desktop grande */
@media (min-width: 1200px) {
/* estilos aqui */
}Clique aqui para aprender mais sobre o framework Bootstrap.
Content-driven breakpoints
Em um excelente artigo escrito por Sérgio Lopes onde ele prega que qualquer lista de media queries padrão é muito pobre quando pensamos na situação atual ,e futura, dos diferentes dispositivos, pois não garante que seu design funcionará em todos os dispositivos.
Ele sugere que utilizemos o “content-driven breakpoints”, que seria encontrar as medias queries a partir do conteúdo e design do site. No processo ele utiliza unidades flexíveis “em” e porcentagem redimensionando o navegador até que se perceba que algo no layout não está legal. A partir disso ele cria uma nova media query com o valor no CSS e executa as devidas alterações. Com isso os breakpoints será baseados no conteúdo e no design de um site e não em valores padrões que não atendam a todos dispositivos.
Esta é melhor forma de pensar e agir para que um site atenda a diferentes resoluções de tela. No eBook sobre Design Responsivo eu sigo essa linha de pensamento. Nele eu falo que devemos utilizar em projetos responsivos a máxima do “conteúdo first”.
Testando
Depois que você desenvolveu o design responsivo, você vai precisar saber se realmente está tudo funcionando para uma boa gama de dispositivos existentes, certo?
Existem algumas ferramentas emuladoras online que simulam a aparência do seu site em diferentes dispositivos e resoluções. Uma delas é a Codeorama:
Basta digitar o seu site e selecionar as resoluções. Veja algumas consultas no Codeorama aplicada ao Chief of Design.
Resolução 320 x 480:
Resolução 600 x 1024:
Outra opção é o Screenfly que possibilita testar simulando diferentes dispositivos.
Você também pode utilizar extensões no seu navegador como o Window Resizer, por exemplo.
E por fim, utilizar a ferramenta de desenvolvimento do seu navegador. O Google Chorme e o Mozila Firefox tem ferramentas avançadas para verificação de resoluções.
Conclusão
Com este artigo você já tem uma boa base introdutória para mexer com CSS3 medias queries. Atualmente a grande maioria dos navegadores dão suporte, portanto você já pode começar agora. Tudo o que você precisa é ter um bom conhecimento de CSS (caso não tenha você pode adquirir o nosso eBook Fluência em HTML & CSS, clicando aqui!) e ter em mente todos os conceitos do design responsivo.
Não há mais espaço para sites fixos que não funcionam bem em celulares. Pensar em Design Responsivo é pensar na experiência do usuário. E a utilização das medias queries é aliada de quem pretender fornecer a melhor experiência ao usuário.
Muito bem Galucho! E você se preocupa em construir sites responsivos?
Então não deixe de acessar também o nosso guia completo sobre design responsivo. Acesse agora o site https://www.designresponsivo.com.br/
E você galucho? Já desenvolve com medias queries? Nos diga suas experiências.
Forte abraço
Até mais
Referências
http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/
http://sergiolopes.org/media-queries-conteudo/
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
http://tableless.com.br/introducao-sobre-media-queries/
https://www.w3.org/TR/CSS21/media.html
Also published on Medium.