O Grid infinito

Sistemas de grids são o elemento-chave do design gráfico, e sempre foram projetados para áreas com dimensões fixas.

Isso até agora.

Hoje estamos projetando para outro meio, um meio cuja aparência se altera para atender melhor ao seu ambiente - um meio capaz de exibir um único layout em um smartphone, um outdoor na Time Square, ou qualquer outra coisa parecida.

Estamos projetando para diversos formatos - e para isso, é necessário um sistema de grids infinito.

É comum pensarmos no design responsivo como sendo apenas múltiplos layouts: mobile, tablet, desktop, etc. O problema é que os tamanhos "intermediários" tendem a serem prejudicados e acabamos desenvolvendo layouts que parecem ótimos em dimensões específicas (320, 720, 960), mas cujo resultado não é tão bom assim nas demais. Portanto, enquanto um site parece perfeito em seu IPhone 4 de 640x960, estará um pouco longe disso para o visitante com seu Nokia Lumia (480x960) ou na janela do navegador 685x308 que você abriu no desktop. Ele pode até parecer um pouco apagado naquele reluzente IPhone 5 (640x1136) que seu primo acabou de comprar, sem mencionar nos outros inúmeros dispositivos mais antigos ou menos populares por aí a fora.

À medida em que o leque de resoluções dos dispositivos torna-se maior e mais suavizado, focar nossa atenção nas "dimensões chave" de cada página, resultará em uma experiência abaixo da média para mais e mais usuários. Em vez disso, precisamos criar um sistema de grids que preencha a deficiência das dimensões fixas, resultando em um único layout com diferentes apresentações, que se ajuste discretamente de um estado para o outro, e que estruture nosso conteúdo independente do tamanho da tela.

O que é um sistema de grid infinito?

Grids não passam de uma ferramenta para solucionar um problema visual. Desenvolver um layout é como fazer um quebra-cabeça; você tem diversas peças na qual você tem que descobrir como devem ser encaixadas umas nas outras. Quando construímos um grid, estamos criando os limites do layout: conhecendo as relações e limitações que definem se a solução apropriada pode existir. Mas quando construímos um grid infinito, não estamos apenas atribuindo limites ao layout, mas sim um sistema de layout com muitas variáveis para que tudo seja resolvido. Se atribuirmos relações importantes, as lacunas serão preenchidas por si só.

Para um grid ser útil, ele deve ser baseado em coisas que conhecemos. Na mídia tradicional, as dimensões do canvas são limites conhecidos, então faz todo o sentido que comecemos pelas bordas e relacionemos um grid compatível para elas. Contudo, quando se trata do meio digital, o canvas é uma incógnita, tornando-o um fraco alicerce para sustentar um layout.

Em vez disso, precisamos construir com aquilo que conhecemos: o conteúdo.

"Para compreender como projetar layouts nativos para a web - independente do dispositivo - precisamos mudar a maneira como o criamos pensando no canvas. Devemos mudar o nosso raciocínio, e criar layouts a partir do conteúdo”. - Mark Boulton, "A Richer Canvas".

Ao projetar com base no canvas, suas dimensões são uma constante a qual todo o grid está vinculado. Tudo é dimensionado e posicionado proporcionalmente com referência ao canvas. Projetar com base no conteúdo corresponde a encontrar uma constante em seu conteúdo - seja a medida ideal de um parágrafo ou as dimensões de um box de anúncio - e construir seu grid a partir daí, preenchendo todo o espaço disponível.

Hoje em dia, layouts que expandem a fim de preencher espaços vazios não são mais novidade – Afinal de contas, layouts fluidos são basicamente um padrão na web – , entretanto, poucos layouts podem ser esticados e comprimidos inúmeras vezes sem quebrar a relação entre seus componentes, e é aí que entram os estados.

Estados 

Layouts fluidos são frequentemente comparados a água, mas a água não é sempre líquida. O H2O é visto em três estados diferentes e, dependendo da temperatura, pode vir a ser sólido, líquido ou gasoso, onde sua transição de um para o outro é similar em variáveis específicas (0°C, 100°C). Um grid infinito também possui diversos estados (coluna única, coluna múltipla, etc.), e as alterações entre eles também devem ser discretas nos específicos breakpoints. Por exemplo: assim como o gelo é um estado apropriado à água quando a temperatura está baixa, o layout de apenas uma coluna deverá ser o estado apropriado para um grid infinito em dispositivos pequenos.

A mudança do estado da água ocorre com a reorganização de suas moléculas. Quando há mudança de estado do grid infinito, nós reorganizamos seus componentes.

Componentes

Cada estado de um layout responsivo tende a ser desenvolvido com os mesmos componentes, assim como uma galeria de imagens ou um menu de navegação. Entretanto, como Ethan Marcotte recentemente anunciou, a forma que estes componentes assumem pode variar drasticamente entre um estado e outro, onde se costuma acarretar mudanças em uma ou mais características:

1. Hierarquia: O que é ordem e proeminência tratando-se de layout?

2. Densidade: Qual a quantidade de detalhes que você mostra?

3. Interação: O layout deve ser uma lista de links ou um dropdown? Um carrossel ou um grupo de imagens?

4. Largura: É fixa (largura específica), flexível (conjunto com largura máxima) ou fracional (conjunto com porcentagens)?

Entender como cada uma das características dos componentes podem mudar entre os estados, contribui para garantir que o sistema de grids gere o layout apropriado para o espaço disponível. Veja neste exemplo como os diversos componentes adequam suas larguras (entre fixa e flexível) e posicionamento entre os estados.

Desenvolvendo um sistema de grid infinito

Embora estejamos apenas começando a arranhar a superfície do design com grids infinitos, algumas técnicas já demonstram ser muito úteis. E para começar, aqui estão algumas orientações:

1. Use Unidades Proporcionais

Projetar um grid está relacionado em decidir o que deve ser proporcional a que. Quando você escolhe uma unidade, você associa uma dimensão a uma determinada variável:

• Pixels dimensionam um elemento com relação a uma determinada resolução;

• Ems dimensionam um elemento com relação ao tamanho de sua fonte; Os rems dimensionam com relação ao tamanho base da fonte do documento;

• As porcentagens dimensionam um elemento com relação ao seu recipiente;

• Unidades VH e VW dimensionam um elemento com relação ao viewport;

Unidades absolutas como o pixel efetivamente dão ao layout um prazo de validade, bloqueando-o a uma resolução de alcance limitado ao qual se vai "trabalhar". Unidades proporcionais (ems, rems e porcentagens) lhe possibilitam definir importantes interações entre os elementos e são o primeiro passo crucial rumo a resolução independente.

2. Comece com os Extremos, e então trabalhe com as áreas intermediárias

Todo layout tem uma variação natural “ideal” para o seu conteúdo. Quão largo você consegue esticá-lo até que ele comece a quebrar? Quão pequeno você consegue espremê-lo até que ele comece a desmoronar? Por exemplo: se a largura disponível é inferior a 45 caracteres por linha, seu layout começa a parecer apertado; se em cada lado de seu layout houver mais de uma coluna se valendo como espaço em branco, o conteúdo começa a parecer pequeno. Onde estes extremos ocorrem se diferem para cada design e dependem grandemente de seu conteúdo.

Pensar primeiramente nos extremos lhe força a considerar qual a melhor apresentação de seu conteúdo em qualquer extremidade do espectro. Considere a hierarquia, densidade, interação e a largura de cada componente no menor estado e então faça o mesmo com o de maior estado.

Por exemplo, digamos que meu maior estado tenha 75em de largura (qualquer outro maior e o espaço em branco diminuirá o conteúdo) e que meu menor tenha 34em (qualquer outro menor e a medida será menor que a ideal). Faz sentido que em meu maior estado, a navegação seja feita por uma lista horizontal (interação) no topo (hierarquia), mas no menor estado faz mais sentido passá-la para a parte inferior do layout (hierarquia) ou ocultá-la em uma lista show/hide (interação). Criá-los um independente do outro te ajuda a ser mais objetivo ao definir qual o melhor para cada estado, em vez de ir esticando uma solução de "tamanho único" entre todos os estados.

3. Mude de estado onde as relações se rompem

Uma vez que você tenha trabalhado com as extremidades, é chegado o momento de pensar em como e onde um estado deve fazer a transição para o outro. Assim como a água se transforma em vapor quando suas moléculas ficam muito afastadas, um estado deveria mudar para outro quando as relações entre seus componentes começarem a se desmembrar, como quando sua medida estiver ficando muito larga, ou o logo alinhado a esquerda começar a ficar tão afastado do menu a direita ao ponto de romper a conexão visual entre ambos.

É aí onde os protótipos vivos tornam-se convenientes. É incrivelmente difícil prever com exatidão em qual largura (em relação ao conteúdo) é necessário mudar o estado do layout. Um protótipo lhe auxilia a redimensionar facilmente seu navegador para descobrir o ponto exato onde as relações se rompem. Então você pode adicionar um breakpoint ali. Novas ferramentas (como Gridset e Responsive is) estão facilitando a criação e teste de protótipos responsivos como jamais visto, então não há desculpas para não usá-los.

O número de estados que você precisa depende de quantas mudanças de extremos ocorrem com seu layout. Por exemplo: meu menor estado tem uma única coluna com um menu retraído e meu maior estado tem três colunas e um menu expandido. Entretanto, nenhum dos estados é adequado entre 34em e 53em, então eu adicionei um estado "intermediário" que mantém a coluna única do estado menor, mas expande o menu e divide o rodapé em três colunas para esvaziar grande parte do espaço. Isto suaviza agradavelmente a transição de um extremo para o outro.

Com a mudança de cada estado, lembre-se de reconsiderar a hierarquia, densidade, interação e largura de cada componente. Por um acaso o conteúdo da coluna principal deveria passar a ter uma largura fixa para assegurar que a medida não fique muito ampla, ou possivelmente você tem espaço para incluir mais informação (densidade) a sua navegação?

4. Vá além dos extremos

Então agora temos um layout responsivo com diversos estados passando delicadamente do estado menor para o maior. Mas isto é apenas uma variação de 34 a 75em. E quando o espaço disponível for menor ou maior que estes estados? Como vamos obter um layout que realmente vá do zero ao infinito?

Na menor extremidade da escala o espaço é valioso, então precisamos fazer o máximo com aquilo que temos. Abaixo de 20em, reduzi (mas não removi) margens, reduzi o line-height e identei as listas de itens. Basicamente, fiz o que pude para otimizar a legibilidade, embora tenha uma quantidade de espaço disponível que não seja a ideal.

Na outra extremidade da escala, o problema é que há muito espaço, especificamente espaço em branco. Isso faz com que aparente ter pouco conteúdo, então precisamos encontrar maneiras de balanceá-lo. Infelizmente, apenas ir dimensionando um layout de forma imprecisa nem sempre funciona, como quando esbarramos em distâncias legíveis. Se você aumenta o seu tamanho de texto para manter aproximadamente 60 caracteres por linha, mas a fonte é tão grande que eu tenha que fisicamente virar minha cabeça para ler o texto, essa não é uma boa experiência.

Em vez disso, procure por elementos como cabeçalhos, divisores ou imagens que você possa aumentar com o canvas, e que sirvam de ajuda para unir visualmente sem estragar a legibilidade. Em meu exemplo, o elemento predominante que estica a largura total, ajuda a "ancorar" o design no espaço em branco, e a 75em passa a dimensionar os elementos proporcionalmente ao tamanho da viewport usando unidades VW. O texto do corpo começa a ficar estranhamente grande há 90em, então eu usei unidades rem para mantê-lo em um tamanho agradável a leitura, enquanto os outros elementos são dimensionados ao seu redor.

De qualquer maneira, o objetivo é utilizar ao máximo o espaço disponível para maximizar a legibilidade e apresentação com relação ao seu conteúdo.

Ao infinito e alé...

Na verdade, ao infinito já está bom.

"Utilizar um grid pré-definido parece fazer tanto sentido quanto utilizar uma paleta de cores pré-definida." - Jeremy Keith

Tentei ficar longe de especificidades neste artigo, pois elas não existem. Cada Layout é diferente e não existem números mágicos que irão funcionar todas as vezes.

Em vez disso, devemos resolver as relações entre os elementos e então deixar com que as especificidades cuidem de si mesmas. Ainda não temos todas as respostas, mas trabalhando desta maneira seremos capazes de fazer as perguntas certas.

Este é um problema que vale a pena ser resolvido. E não o estamos resolvendo para nós mesmos, mas para todos aqueles que criarão para a mídia digital no futuro - e estamos falando de inúmeras pessoas. Até mesmo de um número infinito.

---

Artigo traduzido com autorização da A List Apart Magazine.

Artigo original escrito por Chris Armstrong.

Acesse o artigo original na A List Apart Magazine.

---

27 mai
[value]