Nº 36 - 25 de Maio de 2010

Web Design Responsivo - Responsive Web Design
Uma tradução para o português pelo Curso iLearn

por Ethan Marcotte

Artigo original do Alist Apart

O controle conhecido pelos designers no meio de impressão e, muitas vezes, desejado no meio virtual é simplemente uma função da limitação da página impressa. Nós devemos aceitar o fato de que a web não tem as mesmas restrições e design para essa flexibilidade. Mas primeiro nós temos que aceitar o fluxo e refluxo das coisas.”

John Allsopp, A Dao of Web Design

O arquiteto britânico Christopher Wren uma vez afirmou que o seu campo escolhido "tem como objetivo a Eternidade,” e que existe algo interessante sobre tal fórmula: Diferente da web que muitas vezes está direcionada para os objetivos da próxima semana, a arquitetura é uma disciplina muito bem definida por sua permanência. Uma fundação de um prédio define sua marca, que define sua estrutura, que forma sua fachada. Cada fase do processo arquitetônico é mais imutável, mais inalterável que a fase anterior. Decisões totalmente criativas, literalmente formam um espaço físico, definindo a maneira com que as pessoas se movimentam dentro dessas restrições por décadas ou até séculos.

Trabalhar na web, entretanto, é um assunto totalmente diferente. Nosso trabalho é definido por sua transitoriedade, muitas vezes refinada ou substituída em um ou dois anos. Janelas com larguras inconsistentes, resolução de tela, preferências de usuários e as fontes dos usuários instaladas, são apenas algumas dos intangíveis fatos com as quais negociamos quando publicamos nosso trabalho e com os anos, nos tornamos perfeitamente aptos para fazer isso.

Mas o panorama está mudando, talvez mais rapidamente do que gostaríamos. É esperado que a navegação por dispositivos móveis ultrapasse os acessos de computadores entre três a cinco anos. Dois dos três consoles de video games dominantes tem navegadores (e um deles é excelente). Nós estamos desenhando para mouses e teclados, para teclados T9, controles manuais de jogos e para interface de toque. Em resumo, nós enfrentamos um grande número de dispositivos, modos de input e navegadores melhores do que antes.

Nos últimos anos, eu estive reunido com mais empresas pedindo “websites para IPhone” como parte do projeto. É uma frase interessante: O valor declarado certamente refere-se a uma qualidade de conjunto móvel do WebKit como um navegador, assim como um poderoso negócio para se pensar além do desktop. Porém, como designers, eu penso que muitas vezes nós nos sentimos confortáveis com tais exigências explícitas, como eles nos permitem compartimentabilizar os problemas diante de nós. Nós podemos colocar em quarentena a experiência móvel em subdomínios diferentes, espaços distintos e separados do “website que não são IPhone.” Mas o que vem depois? Um site no IPad? Um site N90? Será que nós podemos continuar comprometidos com o suporte de cada novo agente do usuário com sua própria experiência sob medida? Em algum ponto, isso começa a se parecer com um jogo da soma zero. Mas como nós e nossos designers se adaptam?

Uma base Flexível

Vamos considerar um exemplo de design. Eu criei uma página simples para uma revista hipotética; é um layout simples de duas colunas com uma grade fluido, com muitas imagens flexíveis espalhadas em todos os lugares. Como um proponente de longa data de layouts não fixos, eu senti por muito tempo que eles eram “comprovação do futuro” simplesmente porque era layout agnóstico. E de certo modo, isso é verdade: designs flexíveis não fazem nenhuma pretensão sobre a largura da janela do navegador e adapta-se perfeitamente a um dispositivo que tenha os modos de retrato ou paisagem.

Imgens grandes são grandes. Nosso layout, apesar de flexível, não responde bem as mudanças de resolução ou do tamanho da janela de visualização.

Mas, nenhum design, fixo ou fluido, tem sua dimensão continuamente extendida para além do contexto para o qual foi originalmente feito. O exemplo do design dimensiona perfeitamente com as mudanças das janelas de navegadores, mas o ponto de tensão aparecem rapidamente nas resoluções baixas. Quando visto em viewport (janelas de visualização) menores do que 800 x 600, a ilustração atrás do logo rapidamente aparece cortada, o texto de navegação pode se apresentar de uma maneira inadequada e as imagens localizadas na parte mais baixa tornam-se muito compactas e ilegíveis. E não é somente o extremo inferior do espectro da resolução que é afetado: quando o design é exposto na tela widescreen, as imagens rapidamente aumentam para tamanhos estranhos, amontoando-se ao contexto de seu entorno.

Em resumo, nosso design flexível funciona bem no contexto da área de trabalho do computador para o qual foi concebido, mas não está otimizado para se estender muito além disso.

Tornando-se responsivo

Recentemente, uma disciplina emergente chamada “arquitetura responsiva” começou a questionar como espaços físicos podem responder a presença de pessoas passando por eles. Através de uma combinação de robótica embutida e materiais elásticos, arquitetos estão experimentando com instalações de arte e estruturas de parede que se dobram, flexíonam e expandem quando pessoas se aproximam. Sensores de movimento podem se juntar ao controle de sistemas climáticos para se ajustar a temperatura da sala e luz ambiente com a presença de pessoas. Empresas já têm produzido “tecnologia de vidro inteligente” que pode automaticamente tornar se fosca quando os ocupantes de uma sala chegam a certa densidade limiar, apresentando mais uma camada de privacidade.

No livro Arquitetura Interativa, Michael Fox e Miles Kemp descrevem essa aproximação mais adaptativa como “um múltiplo sistema de circuito em que uma pessoa participa da conversa; uma contínua e construtiva troca de informação.” Eu enfatizo que isso é uma distinção sutíl, entretanto poderosa: ao invés de se criar imutabilidade, espaços sem modificações que definam uma experiência particular, eles sugerem estruturas que e habitam podem e devem se influenciar mutualmente.

Essa é caminho a seguir. Ao invés de moldar a partir de designs desconectados para um número crescente de dispositivos da web, nós podemos tratá-los como faceta de uma mesma experiência. Nós podemos desenhar para uma ótima experiência visual, mas embutir padrões com base de tecnologias em nosso design para torná-los não apenas flexíveis, porém mais adaptavéis a mídia que os fornece. Em resumo, nós precisamos praticar web design responsivo. Mas como?

Conheça media query

Desde os dias da CSS 2.1, a folha de estilo tem se beneficiado de alguma medida de conscientização de dispositivo atento através dos tipos de mídia. Se você já escreveu uma folha de estilo em cascata(CSS) para impressão, você está familarizado com o conceito:


<link rel="stylesheet" type="text/css" href="core.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
media="print" />

Na esperança de criar design de páginas formatadas de impressão, a especificação CSS nos fornece com vários tipos de mídia aceitáveis, cada deisgn é feito para uma classe específica de dispositivo pronto para a web. Porém, a maioria dos navegadores e dispositivos realmente nunca aderiram ao espírito da especificação, criando muitos tipos de mídia implementadas incorretamente, ou completamente ignoradas.

Felizmente, o W3C criou media query como parte da especificação do CSS3, melhorando os tipos de mídia. Um media query nos permite atingir não só algumas classes de dispositivo, mas inspecionar de fato as características físicas do dispositivo fazendo nosso trabalho. Por exemplo, seguindo o crescimento recente do dispositivos móvel baseados no WebKit, media queries (questionamentos sobre a mídia) tornaram-se uma técnica popular para o lado cliente para uma entrega, sob medida, do estilo em cascata(CSS) para o IPhone, telefones baseados em Android e similares. Para fazer isso, nos podemos incorporar uma consulta em uma folha de estilo(CSS) ligado a um tipo de mídia:


<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

A query contém dois componentes:

  1. o tipo de mídia (tela), e
  2. a pergunta verdadeira dentro do parênteses, contendo uma funcionalidade de uma mídia particular (max-device-width) para ser pesquisada, seguido por um valor (480px).

Em Inglês simples, nós estamos perguntando se o dispositivo de resolução horizontal (max-device-width) é igual ou menor do que 480px. Se passarmos no teste, em outras palavras, se nós estivermos visualizando nosso trabalho em um dispositivo de tela pequena como o IPhone, então o dispositivo irá carregar o shetland.css. Caso contrário, o link será totalmente ignorado.

Designers experimentaram layouts com a resolução-consciente no passado, a maioria dependendo das soluções JS-Driven como do roteiro excelente de Cameron Adams. Mas a especificação da media query fornece uma série de recursos de características de mídia que extende-se imensamente além da resolução da tela, aumentando o escopo do que nós podemos testar com nossas perguntas. O que mais, você poderia testar? Múltiplas propriedades de valores em uma única pergunta concatenando-as a palavra-chave:


<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

Além disso, nós não estamos limitados a incorporar media query aos nossos links. Nós podemos incluí-los ao nosso CSS como parte da regra @media:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Ou como parte da diretriz @import:

@import url("shetland.css") screen and (max-device-width: 480px);

Porém, em cada caso, o efeito é o mesmo: se o dispositivo passar no teste da media query, o pertinente CSS é aplicado as nossas instruções. Media Queries são, em resumo, comentários condicionais para os outros. Melhor do que focalizar um alvo de navegador com versão específica, nós podemos corrigir de forma precisa os problemas em nosso layout, assim como as medidas além da inicial resolução idealizada.

Adaptar, responder e superar

Vamos prestar atenção às imagens da base da página. No layout padrão, o atual CSS se parece como isso:

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

Eu omito um número de propriedades de tipografia para focalizar no layout: cada elemento .figure é medido em mais ou menos um terço da coluna contida, com a margem direita zerada para as duas imagens no final de cada linha (li#f-mycroft, li#f-winter). E isso funciona razoavelmente bem, até que a janela de visualização seja vista de forma menor ou mais larga do que o design original. Com a media query nós podemos aplicar resoluções específicas aos alvos fixos, adaptando nosso design para melhor responder às mudanças nas telas.

Primeiramente, vamos linearizar nossa página uma vez que a janela de visualização mostra-se abaixo a uma certa resolução limiar, quero dizer, 600px. Então, na parte final do nosso estilo em cascata(CSS), vamos criar uma novo bloco @media, como abaixo:

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

Se você observar nossa página atualizada em um navegador moderno de computador e reduzir o tamanho de sua janela abaixo de 600px, a media query irá desabilitar a flutuação dos elementos (float) principais do design, empilhando cada bloco sobre outros no fluxo do documento. Então, nosso design miniatura está se estruturando bem, mas as imagens ainda não dimensionam para abaixo de modo inteligente. Se nós introduzimos media query, nós podemos alterar o layout adequadamente:

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }

  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}
Nossas figuras podem mudar o layout para se adaptarem a telas menores.

Nossas figuras podem mudar o layout para se adaptarem a telas menores. Não se preocupe com as porcentagens discrepantes, nós estamos simplesmente recalculando a largura da grade fluida para informar o novo layout linearizado. Em resumo, nós estamos mudando de um layout de três colunas para um layout de duas colunas quando a largura da janela de visualizacao registra abaixo de 400px, tornando as imagens mais proeminentes.

Nós, na verdade, também podemos realizar a mesma abordagem para as telas widescreen. Para resoluções maiores, nós podemos adotar um tratamento de seis imagens de forma linear, posicionando-as em uma mesma linha:

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

Agora nossas imagens estão funcionando perfeitamente em ambas as extremidades de resolução, optimizando o layout para mudanças de largura de janelas e resolução de dispositivos semelhantes.

Para especificar uma largura minima min-width em uma nova media query, nós podemos mudar as imagens com um layout de uma única linha.

Entretanto, isso é somente o começo. A partir de media queries embutimos dentro do nosso CSS, nós podemos alterar muito mais do que a posição de algumas imagens: nós podemos introduzir layouts novos e alternativos ajustadados para cada variação de resolução, talvez tornando a navegação mais destacada numa tela ampla ou reposicionando-o acima do logo em telas menores.

Por meio do design responsivo, nós podemos não só linearizar nossos conteúdos para pequenos dispositivos, mas também optimizar a apresentação através de uma variação de telas.

Entretanto, um design responsivo não está limitado a mudanças do layout. Media queries nos permitem praticar um ajuste de precisão perfeita de acordo com as mudanças das páginas: nós podemos aumentar a área clicável nos links das telas menores, obedecendo a Lei de Fitts nos dispositivos de toque; seletivamente mostram ou escondem elementos que podem melhorar a navegação das páginas; nós podemos até praticar formatação de texto receptivo para gradualmente alterar o tamanho e a formatação do nosso texto, optimizando a experiência da leitura a ser exibida no dispositivo.

ALGUMAS ANOTAÇÕES TÉCNICAS

Deve ser percebido que media queries desfrutam do suporte consistente entre navegadores modernos. Navegadores de computador como Safari 3+, Chrome, Firefox 3.5+, e Opera 7+, todos aceitam nativamente as media queries, como fazem os mais recentes navegadores móveis como Opera Mobile e WebKit móvel. Certamente, versões mais velhas dos navegadores de computador não suportam as media queries. Enquanto Microsoft tem se engajado “ao suporte de media queries no IE9, Internet Explorer não oferece uma implementação nativa.

Entretanto, se você está interessado em implementar suporte ao legado do navegador para media queries, existe uma solução com base em JavaScript:

  1. Mais recentemente, foi lançado o css3-mediaqueries.js, uma biblioteca que promete “fazer no IE 5+, Firefox 1+ e o Safari 2, o parsing de forma transparente, testar e aplicar a CSS3 Media Queries”, quando incluido pela @media. Eu particularmente achei a versão 1.0 bastante robusta e pretendo acompanhar seu desenvolvimento.

Mas se a utilização de JavaScript não lhe agradar, isso será perfeitamente compreensível. Entretanto, isso reforça o caso de se construir seu layout em cima de uma grade flexível, assegurando seu design que se beneficia de alguma medida da flexibilidade em navegadores e dispositivos não perceptíveis no codigo @media.

Como prosseguir

Grades fluidas, imagens flexíveis, e media queries são três ingredientes técnicos para um web design responsivo, porém ele também exige uma maneira diferente de se pensar. Ao invés de colocar nosso conteúdo em quarentena distinta, experiências com o dispositivo específico, nós podemos usar media queries para melhorar o andamento do nosso trabalho dentro de diferentes contextos visuais. Isso não quer dizer que não existe um caso de negócio para sites independentes voltados para dispositivos específicos; por exemplo, se o objetivo do usuário para o seu site móvel é mais limitado dentro do escopo do que o equivalente ao computador, daí o conteúdo diferente para cada um pode ser a melhor abordagem.

No entanto, esse tipo de pensamento de design não precisa ser o nosso padrão. Agora mais do que nunca, nós estamos projetando um trabalho que deve ser visto com uma inclinação para diferentes experiências. Web design responsivo nos oferece uma maneira de prosseguir, finalmente permitindo "desenhar para o fluxo das coisas."

Ilustrações de Kevin Cornell