SETIS- III Seminário de Tecnologia Inovação e Sustentabilidade 4 e 5 de novembro de 2014.

Melhores práticas na utilização de media queries para sites responsivos Andre Sandes Farias andre.sandes@gmail.com Resumo: Esse artigo tem como objetivo mostrar dentro do ambiente de desenvolvimento de websites responsivos, refletir acerca das melhores práticas na utilização dos Media Queries. Será realizada uma pesquisa bibliográfica para identificar as características das especificações sobre Media Queries considerando conceitos como: experiência do usuário na utilização de dispositivos movéis; Definição básica do termo Responsive Web Design; Definições técnicas e práticas dos Media Queries, falando de sua origem nos Media Types, seus atributos, operadores, breakpoints. Palavras-chave: Sites Responsivos. Media Queries. Experiência Mobile. Responsive Web Design. Media Type. Breakpoints. 1. Introdução A cada ano que passa pode-se ver que a tecnologia cresce de forma exponencial, principalmente, quando o foco é a internet, basta observar na evolução e no surgimento de novas tecnologias, linguagens de programação, hardwares, tablets, smartphones, além adaptação de produtos existentes para ter acesso a internet ( TVs, relógios, geladeiras ). Com isso, fazendo que o acesso à internet não esteja mais restrito apenas ao computador desktop. Outro marco importante foi o crescimento da utilização da internet mobile, tendo uma grande ajuda devido ao lançamento do iphone. Pois, com a grande popularidade, fez com que toda empresa quisesse que o seu site aparecesse corretamente nele. Hoje, não temos só o iphone, mas sim uma gama de aparelhos com resoluções, tamanhos e recursos diferentes. Por conta disso, existe cada vez mais a preocupação em adequar o layout do um site, para ter uma melhor experiência quando acessado via um desses dispositivos. Pode-se ver esse aumento através de dados do estudo divulgado no dia 26 de Junho de 2014, pelo Centro Regional de Estudos para o Desenvolvimento da Sociedade da Informação, que mostram que em dois anos dobrou o número de brasileiros que acessam a internet por meio de celulares, comparado ao mesmo estudo feito nos anos 128

anteriores. Sendo 4% em 2010, 15% em 2011, 20% em 2012 e chegando a 31% em 2013 (CETIC, 2013). Considerando questões como as apresentadas, este artigo tem como objetivo mostrar dentro do ambiente de desenvolvimento de websites responsivos, as melhores práticas na utilização dos Media Queries. Para tanto, será realizada uma pesquisa bibliográfica para identificar as características das especificações sobre Media Queries. Nesse sentido, também serão discutidos os seguintes conceitos: A experiência do usuário na utilização de dispositivos móveis; Definição básica do termo Responsive Web Design; Definições técnicas e práticas dos Media Queries, falando de sua origem nos Media Types, seus atributos, operadores, breakpoints, entre outras coisas mais. 2. Experiência mobile A questão está em contemplar a quantidade de informação apresentada em um site acessado via um computador desktop em um aparelho que além de ter um hardware inferior, também tem uma tela de médio ou pequeno porte. Isto porque o usuário móvel tem menor capacidade de processar e absorver conteúdo que um usuário que está sentado em frente a um computador de mesa (RISCHPATER, 2000, p.33, apud CYBIS, 2010, p.257) Segundo Hiltunen (2000), a experiência do usuário móvel é definida como uma composição de cinco fatores. Utilidade, Usabilidade, Disponibilidade do sistema, Estética e Processo off-line. Estes fatores são apresentados na figura 1. Figura 1- Experiência de usuários com dispositivos móveis Fatores Utilidade Usabilidade Disponibilidade do sistema Estética Descrição Refere-se à percepção do usuário móvel em relação ao fato de o serviço lhe agregar algum valor dentro de seu contexto, ou seja, quão vantajosa é a opção de utilizá-lo em relação a outras opções. Segundo a norma ISO 9241:11 é definida como à eficácia, eficiência e satisfação do usuário na realização de seus objetivos com o sistema interativo. É o fator mais importante para o usuário móvel. O serviço deve estar sempre on-line e funcionando perfeitamente. Longos períodos de espera na transmissão das informações, ausência de sinal, interrupções ou quedas de conexão são extremamente frustrantes. Refere-se ao apelo visual da aplicação, à sua atratividade para o usuário. As limitações físicas das telas podem restringir as opções do designer em relação à quantidade e a qualidade gráfica da informação que está disponível. 129

Processo off-line Complementa a experiência do usuário. Assim como para os serviços fornecidos pela web, há diversos elementos que contribuem para a experiência do usuário, mas que não estão relacionados ao projeto da interação, por exemplo, a confiança no nome da empresa que ofereçe o serviço, a segurança dos dados, além de todo o processo de retaguarda, como o suporte ao usuário ou a rapidez e a qualidade na entrega de uma mercadoria. Fonte: Adaptado de Hiltunen (2000) A partir desses fatores, vimos que não é somente uma questão de melhorar a usabilidade do website, e sim, deve-se ter uma preocupação com toda a experiência com o dispositivo. Pois, segundo Norman (2004), nós não usamos simplesmente o produto, mas nos tornamos emocionalmente envolvidos por ele, sendo que no caso de computadores de mão é muito mais intenso. 3. Responsive web design Com o surgimento cada vez mais rápido de diferentes tipos de aparelhos e resoluções, fez com que se torne uma prática inviável para os designers e desenvolvedores criarem versões dos websites específica para cada modelo de dispositivo. Na busca de uma solução que ajudasse no desenvolvimento para essas diferentes versões de um website, surgiu o Responsive Web Design (MARCOTTE, 2011). Responsive Web Design é a abordagem que tem como base não criar projetos desconectados, como uma versão adaptada para cada tipo, dispositivo ou navegador, e sim devemos tratá-los como versões de uma mesma experiência. A concepção e o desenvolvimento deve responder ao comportamento do usuário e também as características do meio ambiente aonde esta sendo acessado, como o tamanho da tela, plataforma e orientação (MARCOTTE, 2011). Segundo Ethan (2011), na prática pode-se dividir o conceito de Responsive Web Design em três principais itens, Grid Flexível (Layout fluído), imagens e mídias flexíveis e o uso inteligente dos Media Queries CSS. Pois, quando o usuário muda de seu notebook para o seu smartphone, o site deve mudar, automaticamente, ajustando os elementos a nova resolução. Em outras palavras, o site deve ter a tecnologia para identificar, automaticamente, essa mudança. Eliminando a necessidade de uma concepção diferente e o desenvolvimento para cada novo aparelho no mercado. 130

4 Media Queries CSS Seguindo o conceito sugerido por Ethan (2011), os 2 primeiros itens, Grid Flexível e Imagens/Mídias flexíveis, fazem com que os componentes do seu website tenham valores de largura flexíveis e trabalhem de forma a se ajustar de acordo com a resolução do dispositivo que está sendo acessado, com isso, faz com que o terceiro item seja um ponto chave dentro do processo de desenvolvimento, pois através do uso do Media Queries, o desenvolvedor tem o controle de como cada componente do seu website vai aparecer em cada tamanho de resolução. O Media Queries é uma recomendação da W3C que foi incluída na nova versão do CSS (CSS3). Mas, antes de aprofundar mais sobre o Media Queries, é interessante falar um pouco sobre os Media Types. (RIVOAL,et al 2012) 4.1 Media type O Media Types também é uma recomendação da W3C, que já existe desde a versão 2 do CSS. Com Media Types, é possível apresentar o site de maneira diferente, dependendo da media aonde ele é acessado. Segue a tabela com as propriedades que a função de Media Types disponibiliza: Figura 2 - Definição dos tipos de Media Types Tipo All Braille Embossed Handheld Print Projection Screen Speech Descrição A folha de estilo serve para todos os dispositivos. Para dar feedback quando se usa algum dispositivo tátil. Impressoras em braille paginadas. Dispositivos móveis (comumente com tela pequena e largura de banda limitada). Para material paginado e para documentos visualizados na tela no modo Visualização de Impressão. Destinado a apresentações projetadas como, por exemplo, projetores. Destinado, principalmente, para telas coloridas de computador. Para sintetizadores de voz TTY Dipositivos de grade fixa para exibição de caracteres, com o teletypes, terminais e alguns outros. TV Aparelho tipo TV (baixa resolução, cores, scroll limitado, som). 131

Fonte: Adaptado de site W3C Através desse recurso o desenvolvedor tem a possibilidade de fazer com que o site utilize o CSS específico de acordo com o dispositivo que o mesmo está sendo acessado, como por exemplo: <link rel="stylesheet" type="text/css" media="print" href="print_style.css" /> No exemplo o atributo de Media Type está especificando como print, assim somente quando alguém quiser imprimir o documento que levam esta tag é que o arquivo CSS print_style.css entrará em ação, sendo que para os demais tipos de media ele não é ativado. 4.2 Definição Com o surgimento de novos tipos de dispositivos, sendo que muitos deles podem se encaixar em duas ou mais tipos de Media Types, a utilização de tipo de recurso começou a não atender mais as necessidades atuais dos websites. Um exemplo bem conhecido é o iphone, que tem características tanto de handheld, quanto de desktop. Analisando essa situação a W3C trouxe no CSS3 as especificações do Media Queries, que consiste na escolha do tipo de mídia, seguindo a base do Media Type, e pode conter zero ou mais expressões que verificam as condições de um determinado recurso de mídia. Para a criação dessas condições é possível utilizar "largura", "altura", "cor", entre outros. Assim, o conteúdo vai se adaptar de acordo com expressões feitas (RIVOAL, et al 2012). Figura 3 - Definição dos tipos de Media Queries e exemplos Condição Descrição Exemplo Width Largura do viewport (janela do browser incluindo a barra de rolagem). Valor: medidas de comprimento. <link rel="stylesheet" media="print and (min-width: 25cm)" href="http:// " /> Height Altura do viewport (janela do browser incluindo @media screen and (max-width: 132

a barra de rolagem). Valor: medidas de comprimento. 995px), screen and (max-height: 700px) { } Device-width Device-height Orientation Aspect-ratio Device-aspectratio Color Color-index Monochrome Resolution Scan Grid Largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha. Valor: medidas de comprimento. Altura da mídia. Valor: medidas de comprimento. Orientação da mídia. Valor: portrait (retrato) ou landscape (paisagem) Aceita prefixo min/max: Não. Proporção. Razão entre os valores do width e height. Apenas aplicável a mídias do tipo bitmap. Aceita prefixo min/max: Não. Proporção da tela do dispositivo. Aceita prefixo min/max: Não. Número de bits por cor. Se o valor for zero o dispositivo é monocromático. Valor: numérico Número de entradas na tabela de pesquisa de cores do dispositivo de saída. Se o dispositivo não utiliza uma tabela de pesquisa de cor, o valor é igual a zero. Valor: numérico Este recurso de mídia descreve o número de bits por pixel em um buffer de quadros monocromáticos. Se o dispositivo não é um monocromático o valor será 0. Valor: numérico Resolução do dispositivo (densidade por pixel). Apenas aplicável a mídias do tipo bitmap. Valor: número em DPI ou DCM Tipo de formação de imagens especifico para televisores. Valor: progressive (progressivo) ou interlace (entrelaçado) Aceita prefixo min/max: Não. Determina se o dispositivo é baseado em bitmap ou em um grid (exemplo: um terminal @media screen and (device-width: 800px) { } <link rel="stylesheet" media="screen and (device-height: 600px)" /> @media all and (orientation:portrait) { } @media all and (orientation:landscape) { } @media screen and (min-aspectratio: 1/1) {... } @media screen and (device-aspectratio: 16/9) { } @media all and (color) { } @media all and (min-color: 1) { } @media all and (color-index) { } @media all and (min-color-index: 1) { } @media all and (monochrome) { } @media all and (minmonochrome: 1) { } @media print and (min-resolution: 300dpi) { } @media tv and (scan: progressive) { } @media handheld and (grid) and (max-width: 15em) { } 133

tty ou um telefone com apenas uma fonte fixa). Valor: Se o dispositivo de saída é baseada em Grid o valor será 1. Caso contrário, o valor será 0. Aceita prefixo min/max: Não. Fonte: Adaptado de site W3C @media handheld and (grid) and (device-max-height: 7em) { } 4.3 OPERADORES LÓGICOS Com a utilização desses operadores, os desenvolvedores vão ter maior controle sobre as expressões para a criação do layout. Quais são esses operadores: Figura 4 - Tipos de operadores lógicos Operadores Descrição Exemplo and e or not only Várias Media Queries podem ser combinadas em uma lista (separada por vírgulas) de consultas. Se uma ou mais das consultas são verdadeiras, toda a lista é verdadeira; do contrário, é falsa. Na sintaxe de media queries, a palavra and expressa o operador lógico AND e a vírgula expressa o operador lógico OR. O operador lógico NOT é indicado pela palavra not. A presença da palavra not no início da consulta nega o resultado, ou seja, se a consulta de mídia for verdadeira, sem o not ela se torna falsa (e vice-versa). Os navegadores que suportam somente Media Types não irão reconhecer a palavra-chave not e a folha de estilo associada, portanto, não será aplicada. A palavra-chave only pode ser usada para esconder as folhas de estilo de agentes de usuáriomais antigos. Os agentes devem começar a processar as consultas de mídia com only como se a palavra-chave only não estivesse presente. @media screen and (color), print and (color) {... } <link rel="stylesheet" media="not screen and (color)" href="style.css"> <link rel="stylesheet" media="only screen and (color)" href="example.css"> 4.4 BREAKPOINTS Fonte: Adaptado de site W3C Apesar da grande quantidade de parâmetros para criação das condicionais do Media Queries, para a necessidades dos sites atuais, pouco deles são realmente utilizados, sendo a largura e altura do display e a orientação do dispositivo. Através deles podemos declarar regras de CCS especificas de acordo com o tamanho do dispositivo ou do navegador (ZEMEL, 2012). A configuração desses pontos de interrupção, também chamados de breakpoints, é um fator muito importante para o desenvolvimento de um website layout responsive, 134

pois com a definição deles o desenvolvedor vai fazer com que o layout se adapte melhor a cada tamanho de tela. Como é feita a definição desses breakpoints? No início dos estudos sobre Responsive Web Design, alguns desenvolvedores escolheram seguir os tamanhos dos dispositivos existentes (ZEMEL, 2012), por exemplos: Smartphones - @media only screen and (min-device-width : 320px) and (maxdevice-width : 480px) Notebooks e Desktops - @media only screen and (min-width : 1224px) Mas, em pouco tempo foi constatado que esse método não era uma boa solução, pois, o lançamento de novos dispositivos era cada vez mais rápido e com diversos tamanhos de telas, assim fazer um breakpoint para cada tamanho seria inviável. Ainda hoje não existe um consenso geral sobre qual o melhor ou mais eficiente modelo de utilização dos breakpoints (ZEMEL, 2012). Com o fato de não ser possível especificar um conjunto de breakpoints que sejam os melhores, pois cada projeto web tem suas próprias peculiaridades e pede uma implementação diferenciada dos demais. Mas, é possível chegar em uma estrutura base, aonde o desenvolvedor pode ir apenas ajustando os itens principais do projeto. Segue abaixo alguns dos principais frameworks usados no mercado (ZEMEL, 2012). Figura 5 - Exemplos de frameworks Framework Estrutura 320 and Up @media print { } @media only screen and (min-width: 480px) {... } @media only screen and (min-width: 600px) {... } @media only screen and (min-width: 768px) {... } @media only screen and (min-width: 992px) {... } @media only screen and (min-width: 1382px) {... } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {... } Less Framework /* Tablet Layout */ @media only screen and (min-width: 768px) and (max-width: 991px) {... } /* Mobile Layout */ @media only screen and (max-width: 767px) {... } /* Layout largo de mobile */ @media only screen and (min-width: 480px) and (max-width: 767px) {... } /* Retina display */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min- 135

device-pixel-ratio: 2) {... } Skeleton /* Menor que 960 */ @media only screen and (max-width: 959px) {... } /* Tablet Portrait ao padrão 960 */ @media only screen and (min-width: 768px) and (max-width: 959px) {... } /* Todos tamanhos de mobile */ @media only screen and (max-width: 767px) {... } /* Mobile em landscape a tablet Portrait */ @media only screen and (min-width: 480px) and (max-width: 767px) {... } /* Mobile em portrait a mobile em landscape */ @media only screen and (max-width: 479px) {... } Twitter Bootstrap /* Telefones em landscape e abaixo */ @media (max-width: 480px) {... } /* Telefone em landscape a tablet em portrait */ @media (max-width: 767px) {... } /* tablet em portrait a landscape e desktop */ @media (min-width: 768px) and (max-width: 979px) {... } /* Desktop grande */ @media (min-width: 1200px) {... } Fonte: Adaptado de Zemel (2012) A partir dos exemplos citados acima é possível verificar que apesar de alguns breakpoints em comum, existem várias diferenças entres a estrutura de cada um deles. Assim, dependendo das especificações do projeto, o desenvolvedor pode criar seus próprios breakpoints ou escolher um framework que se encaixe melhor na estrutura definida a ser desenvolvida (ZEMEL, 2012). 5 Melhores práticas para utilização dos Media Queries Conhecendo a estrutura e o funcionamento dos Media Queries, o desenvolvedor já pode começar a montar o CSS e sair criando vários breakpoints? Antes disso é preciso levar em consideração algumas questões de organização muito importantes sobre seu uso. 5.1 Criar arquivos separados ou em um arquivo único É possível fazer a chamada do Media Queries seguindo os padrões do CSS, assim pode-se incluir todo o conteúdo em um único arquivo ou em vários de acordo com os parâmetros de breakpoints definidos. 136

@media all and (min-width:500px) { body { background: blue; font-family: serif; } } @media all and (min-width:700px) { body { background: red; color: white; } } @media all and (min-width:500px) and (maxwidth:699px) { body { background: blue; font-family: serif; } } @media all and (min-width:700px) { body { background: red; color: white; font-family: serif; } } Fonte: Adaptado de Zemel (2012) Analisando a figura acima, vemos que no caso da sobreposição, quando a tela for do tamanho de 800px, as duas opções estarão ativas, então o background será vermelho. Pois, como vem depois, ele vai se sobrepor ao azul, já na opção do empilhamento as condições não ficam ativas ao mesmo tempo, porque uma começa aos 500px e termina no 699px e a outra começa em 700px. A principal questão é que o desenvolvedor tenha que repetir algumas propriedades, como no exemplo contem o font-family (ZEMEL, 2012). Figura 8 - Prós e Contras Prós Sobreposição Tamanho de arquivo menor (não é preciso repetir regras) Fácil de atualizar regras compartilhada (já que são declaras só uma vez) Contras Tamanhos de arquivos maiores Imagens substituídas/escondidas em partes posteriores do código continuam sendo baixadas por navegadores baseados em WebKit Empilhamento Browsers somente baixam imagens condizentes ao breakpoint atual Fonte: Adaptado de Zemel (2012) Arquivos maiores, já que algumas regras são repetidas em vários breakpoints Em atualizações, é mais fácil de esquecer de atualizar regras repetidas em alguns breakpoints Sobrepor estilos pode deixar o código mais enxuto, porém, com a manutenção do código, mais complexos. Já empilhar deixa o código maior, só que mais fácil de se entender. Então, quando os estilos entre os breakpoints são bastante diferentes é aconselhado o empilhamento, em outras situações a sugestão seria a sobreposição. 5.3 Versões antigas do Internet Explorer 138

Em versões antigas de alguns navegadores não há suporte para Media Queries, aonde temos como principal problema as versões do Internet Explorer anteriores a 9. Porém, como uma solução alternativa é possível usar Comentários Condicionais ou soluções em JavaScript. Sobre os comentários condicionais, a Microsoft disponibiliza o método de utilização em seu blog oficial. Um exemplo seria: <link rel="stylesheet" media="all" href="global.css"> <link rel="stylesheet" media="all and (max-width: 700px)" href="mobile.css">  Em relação às soluções em JavaScript, existem uma grande variedade de opções, abaixo alguns exemplos mais conhecidos (ZEMEL, 2012): Respond - Suporte somente os parâmetros min-width and max-width, mas é bastante eficiente no que se propõe. css3-mediaqueries.js - É mais pesado e mais lento que o Respond, suporta mais parâmetros de Media Queries. Figura 9 - Prós e Contras Comentários Condicionais Prós Funciona sem JavaScript Todos os prós de Media Queries em vários arquivos Contras Usa somente um estilo para IEs antigos Todos os contras de usar Media Queries em vários arquivos JavaScript Vários breakpoints para IE (inclusive mudando em tempo real) Todos os prós em se usar um só arquivo para Media Queries Fonte: Adaptado de Zemel (2012) Não funciona quando o JavaScript está desabilitado Todos os contras em se usar 1 só arquivo para Media Queries É visto que a cada ano o uso dessas versões antigas dos navegadores esteja diminuindo, ainda deve demorar alguns anos para esse tipo de validação não ser mais utilizada. A forma mais comum é um misto dessas duas opções, aonde é utilizado as 139

soluções em JavaScript para o problema de não-suporte a Media Queries em IEs, mas, ela é aplicada dentro de um comentário condicional, para não ser carregada nos navegadores que já tem o suporte. 6 Considerações finais Como mostrado nas pesquisas na parte de introdução do artigo, tanto a quantidade de dispositivos e de acessos tende a crescer de forma exponencial. Com isso, a questão do desempenho no carregamento das informações, principalmente nos websites que tem um volume muito grande acessos. Na figura abaixo segue alguns exemplos. Amazon Yahoo! Mozilla Google Microsoft Shopzilla Experiência mobile Figura 10 Exemplos de desempenho 1s a mais no carregamento da página custa 1,6 bilhão de dólares por ano O tráfego do aumentou 9% a cada 400ms de melhora na velocidade; Ao cortar 2,2s da landing page do Firefox, o número de downloads aumentou em 15%; Na aplicação de um experimento, fez com que o carregamento da página tivesse um aumento de 0,4s para 0,9s. O que acarretou uma queda de 20% no tráfego de buscas; Desde 2010, a velocidade de carregamento dos sites é um dos fatores no ranking de buscas. A empresa mostrou que 2s a mais de latência no Bing diminuíam o faturamento em 4,3%; Uma diminuição no tempo de carregamento de 6s para 1,2s na página, proporcionou um aumentou nas vendas em 12%; 50% dos usuários mobile abandonam um site se ele não abre em até 10s. E 3 em cada 5 não voltam mais; Fonte: Adaptado de Lopes (apud ZEMEL, 2012, p.144) Mas só o conhecimento técnico mostrado não é suficiente para conseguir esse tipo de melhoria no desempenho. Segundo Zemel (2012) o desafio maior não é dominar a parte técnica do web design responsivo; o maior desafio é saber como, quando, se, onde e saber explicar todos os porquês de usar uma ou outra técnica responsiva.. Para conseguir essas respostas é preciso um bom planejamento e uma excelente análise para o desenvolvimento do website. Referências CYBIS, Walter. Ergonomia e Usabilidade: Conhecimentos, métodos e aplicações. São Paulo: Novatec Editora, 2010. ICT. Pesquisa sobre o uso das tecnologias de informação e comunicação no Brasil: TIC Domicílios e Empresas 2012. [coordenação executiva e editorial / Alexandre F. 140

Barbosa ; tradução/translation DB Comunicação(org.)]. São Paulo: Comitê Gestor da Internet no Brasil, 2013. Disponível em: < http://www.cetic.br/pesquisa/domicilios/publicacoes> Acesso em: 8 out. 2013. MARCOTTE, Ethan. Responsive Web Design. New York: A Book Apart, 2011. RIBEIRO, Paulo. Análise socioeconômica. Revista Soci@l, São Paulo, ano 5, n.20, set. 2000. Disponível em: <www.social.net.br/analise>. Acesso em: 5 set. 2002. ZEMEL, Tárcio. Web Design Responsivo: páginas Adaptáveis para todos os dispositivos. São Paulo: Casa do Código, 2012. 141