Aqui também há um Passo a Passo sobre como usar o sistema de grade
O DIY Responsive Grid é uma solução sem estrutura para construir grades de design responsivo robustas e muito elegantes para a web. @lbertenasco e eu o desenvolvemos brevemente depois de ler os conceitos de grade de Thinking with Type , portanto, esteja avisado sobre gírias de design. @lbertenasco e eu somos desenvolvedores, não designers, então abaixo eu compartilho a história do porquê , que é uma parte importante do raciocínio por trás do DIY Responsive Grid. Acho que você pode ter empatia com nosso raciocínio.
Concentramos nossa atenção neste assunto após vários projetos conjuntos com Gonzalo Nogués , um designer amigo nosso. Esses projetos foram baseados em designs originais que ele fez, portanto, nosso framework de escolha na época (Bootstrap) não era uma opção. Ou qualquer estrutura, por falar nisso.
Dito isso, era meio difícil encontrar uma solução confiável para web grids sem usar nenhum framework. O Twitter Bootstrap faz um trabalho incrível que é fácil de ser tentado. Além disso, para um desenvolvedor, os frameworks podem facilmente fornecer não apenas uma ferramenta, mas também um guia de estilo muito necessário para evitar erros de design, portanto, os frameworks tendem a travar mesmo se não forem apropriados. Abandonamos as estruturas de qualquer maneira e começamos do zero.
Depois de portados para a web, os designs apresentavam vários desvios do original e ficamos surpresos com o quanto Gonzalo destacou a importância de corrigir esses desvios. Percebemos que não estávamos preparados para entender a importância de erros de espaçamento aparentemente menores. Então decidimos entrar um pouco no terreno do design e aprender a usar as ferramentas incríveis do HackDesign .
Nós fizemos. Então, nós experimentamos.
Discutimos esses tópicos abundantemente e chegamos à conclusão de que as soluções existentes eram incapazes de:
- Replique a robustez e a beleza dos designs impressos com base em grades modulares (principalmente uma falha de grades proporcionais).
- Seja suficientemente personalizado para produzir resultados orgânicos (principalmente uma falha de grades com poucos pontos de interrupção).
Além disso, as soluções de grade disponíveis são em sua maioria frameworks, que impõem a você a necessidade de carregar outra dependência em seus projetos e exigem que você aprenda mais uma API. Uma vez que a estrutura finalmente cai em desuso, esse conhecimento é inútil. Isso é ainda mais prejudicial para uma organização, que precisa manter todos atualizados – e o treinamento pode ser uma atividade que consome muito tempo.
Na minha opinião, evitar frameworks sempre que possível é o caminho a percorrer.
A abordagem atual (e por que não funciona)
Os sistemas de grade muito populares hoje geralmente empregam uma de duas abordagens:
Espaçamentos proporcionais (para grades de fluido)
Sob essa abordagem, as colunas e o espaçamento entre elas são determinados por pontos percentuais da largura do navegador, mantendo pouca ou nenhuma correlação com os espaçamentos verticais – a grade da linha de base. Na verdade, essa abordagem não permite nenhuma grade modular no sentido tradicional.
Exemplos: Twitter Bootstrap , Foundation .
A principal falha dessa abordagem é que o espaçamento horizontal invariavelmente é quebrado. Tradicionalmente, as interfaces da web deram menos atenção à relação de espaçamento horizontal-vertical por causa da falha fundamental do CSS que torna o espaçamento vertical proporcional quase impossível de ser alcançado. Portanto, os desenvolvedores podem ser dispensados. Há, no entanto, que embora seja difícil manter o espaçamento horizontal consistente, o espaçamento inconsistente simplesmente quebra o projeto. Mais por vir sobre isso.
Largura fixa (para grades estáticas)
“Na verdade, um tamanho não serve para todos”, Common Sense Jr.
Essa abordagem está mais próxima da era pré-responsiva do web design, quando layouts fluidos eram quase inexistentes. Os sistemas de grade de largura fixa geralmente derivam de uma largura de pixel estática (uma muito popular sendo 960, devido à sua divisibilidade) e formulam uma série de larguras de coluna possíveis para ir com o tamanho total do pixel.
Exemplos: sistema de grade 960 , Blueprint CSS
Fundamentalmente não responsivos, os layouts resultantes geralmente são responsabilizados posteriormente, voltando para um layout menor de coluna única para smartphones – e se você tiver muita sorte, um tamanho de tablet de médio prazo .
Essa abordagem baseada em dispositivos de usar tamanhos voltados para categorias de produtos está condenada devido às inevitáveis deficiências de suporte. Os fabricantes de dispositivos não estão limitados aos tamanhos aproximados tidos como garantidos pelas estruturas e, além disso, inovações como telas gigantescas não serão abordadas. Um nome mais apropriado para essa abordagem seria, não estático , mas statu quo .
Não deixe nenhum usuário para trás
Fazer uma bela peça de design é um trabalho árduo, e bastante difícil quando apenas um tamanho deve ser considerado. O designer precisa controlar muitas coisas: a tipografia deve ser grande o suficiente para ser legível, mas as larguras das linhas devem ser grandes o suficiente para acomodar pelo menos 50 caracteres para que o texto seja fácil de ler. O tamanho da fonte é difícil de determinar.
O fato é que, uma vez determinado, o desenho sofre rapidamente se a largura da linha variar. A maioria dos frameworks atuais permite que a largura da linha varie de muito longa a muito curta, tornando o texto difícil de ler em muitos dispositivos. Portanto, grades verdadeiramente fluidas não são realmente amigáveis ao usuário: elas inevitavelmente quebram a experiência.
Tente isto: imagine que por algum motivo você deseja ler um artigo da Wikipedia em uma janela de 550px. Há um contexto plausível para isso: imagine que você está pesquisando para um artigo na Wikipedia e trabalha lado a lado com seu editor de texto ocupando metade da tela e seu navegador ocupando a outra metade. Por que sua experiência deve piorar se você está redimensionando o navegador para uma largura incomum? Afinal, o redimensionamento do navegador é um recurso básico da web. Seu site deve habilitar esse poder para o usuário.
Eu chamo isso de teste “Eu só quero uma janela pequena” . Na verdade, a Wikipedia falha nisso.
Observação: eu geralmente acabo usando a versão móvel da Wikipedia no desktop apenas para poder redimensionar à vontade. Muitas pessoas nem sabem que a Wikipedia tem um.
A insistência do designer
Junto com o problema de legibilidade muito difundido em tamanhos arbitrários de navegadores, percebemos que a insistência de nosso amigo também estava relacionada ao cuidado que ele aplicava ao posicionamento no Photoshop. Ele não apenas jogou as coisas ao redor: tudo foi cuidadosamente colocado, pixel por pixel. Logo aprendemos que o efeito geral depende inteiramente da execução adequada dos detalhes. Como diz o ditado “são as pequenas coisas” .
Isso significava para nós que grades de largura proporcional não eram uma opção. Os espaçamentos entre as colunas devem ser mantidos em um tamanho igual ao tamanho da altura da linha para um bom ritmo – mas também as larguras das colunas devem ser mantidas conforme projetado para manter o ritmo e a legibilidade. O que um desenvolvedor deveria fazer?
Decidimos construir uma solução do zero .
Além dos layouts: grade e beleza
Normalmente, os web designers usam grades para alinhar os elementos estruturais, não os visuais. Considere um website com fundo branco: as imagens nele com um fundo branco grande podem estar perfeitamente alinhadas do ponto de vista técnico, mas também podem flutuar desajeitadamente ou desequilibrar o design do ponto de vista estético. Com essa diferença em mente, decidimos construir sobre as propriedades das grades existentes para beneficiar a estética, não apenas o posicionamento.
Uma observação notável de nosso amigo foi: realmente não importa se a largura da coluna mais o espaçamento entre colunas não somam exatamente a largura do contêiner. Não é isso que está quebrando seu design. O que está quebrando seu projeto é fazer colunas de tamanhos estranhos (por exemplo, duas colunas de tamanho 3 e uma coluna de tamanho 4 para somar 10), porque parecem fora de ritmo. Algum espaço você pode simplesmente armazenar nas bordas. Pensando nisso e pesquisando pela web sinto que existe uma espécie de horror vacui no web design atual: o layout preenche todos os espaços, mesmo quando não há necessidade disso.
Então foi isso que fizemos – protegemos. E esse foi o momento eureka.
Você vê, não há bala de prata para grades da web, pois não há bala de prata para grades tradicionais na mídia de impressão. A grade é uma parte formativa do projeto e, como tal, não pode ser adicionada posteriormente ou imposta como uma restrição pré-existente a um projeto sem prejudicar o produto final. Nossa grade inicial origina-se de um tamanho de fonte de 15 px e uma altura de linha de 18 px, fornecendo uma proporção tradicional de 1,2 – tudo bom e eficiente, mas por que deveríamos impor esses tamanhos e proporções a você? Por que deveríamos adicionar algumas restrições onde não existem?
Você deve ser capaz de adaptar sua grade às suas necessidades. Para isso, você precisa não apenas de um sistema de grade, mas também de um sistema de justificativa de grade : um que permita justificar por que está usando esta grade e não outra. Você precisa (e não posso enfatizar o suficiente) ser uma parte ativa do processo de design.
O DIY Responsive Grid origina-se de um tamanho de fonte de base e uma altura de linha de base. Esses dois tamanhos definir emà proporção, útil para a definição de tamanhos em CSS. A altura da linha também serve como referência para larguras de colunas, espaçamentos de colunas, larguras de contêineres e grade da linha de base. Semelhante a uma composição musical onde a proporção escrita perto da clave de sol define um tecido base para a peça, a proporção do tamanho da fonte sobre a altura da linha determina vários fatores-chave sobre o design. Depois de escolher esses dois valores, o resto pode ser determinado por fórmulas matemáticas simples.line-height
Você verá que, embora os valores finais possam ser expressos em termos de pixels, preferimos usar unidades de medida relativas, como
ems erems, devido às várias vantagens de clareza e acessibilidade. Fazemos isso até para consultas de mídia.
Então, o que acontece com os pontos de interrupção?
Bem, nós o convidamos a escolher quantos pontos de interrupção você acha que precisa. Obviamente, três parece um mínimo razoável: mas não pare aí, para o bem dos seus usuários, não pare aí. Execute o teste “Eu só quero uma pequena janela” em seu site em vez de usar simuladores de tamanho de dispositivo. Ajuste a quantidade de colunas e o tamanho da coluna uma vez por ponto de interrupção. Lembre-se de que, embora as imagens possam escalar bem, os textos se quebram facilmente ao redimensionar.
Além disso, depende muito de você. A filosofia DIY Responsive resume-se a:
- Certifique-se de que está ótimo,
- … em tantos tamanhos quanto você puder,
- … enquanto faz da grade seu aliado.
Verdadeiro compromisso
Há, é claro, uma abordagem mais radical para web grids que é uma verdadeira inovação da web, e digna de nota por sua beleza: isto é, personalize manualmente seu conteúdo para cada tamanho, com a maior precisão possível. Isso pode facilmente levar você ao TOC, mas os resultados são surpreendentes: veja o site de Trent Walton, por exemplo: ele se deu ao trabalho de adicionar uma quantidade incrível de pontos de interrupção que afetam o conteúdo parte por parte conforme você redimensiona o navegador, e o efeito é quase hipnotizando.
A List Apart , que você pode reconhecer como a revista onde o termo responsivo começou a se espalhar , apresenta um conceito de grade semelhante, embora não tão detalhado quanto o de Trent Walton.
Isso é o que você pode chamar de “verdadeiro compromisso” com a estética da web. Se você encontrar tempo, se puder pagar as sessões de terapia depois, recomendo sinceramente esta abordagem, que está mais próxima do “dao” do web design .
Mas para nós que vivemos em um mundo com menos controle do conteúdo e restrições mais difíceis dadas pelas necessidades de interface do usuário …
… Existe o DIY Responsive Grid.
Agora vá para o Passo a Passo para começar a usar a grade ou pegue a Calculadora