Tarde da noite, em novembro, sobrevoei minha cidade natal, Tucson, Arizona. Fiquei impressionado com o layout em forma de grade desta cidade. Tucson é uma das cidades construídas através do planejamento nos Estados Unidos. parece uma grade. Foi cuidadosamente desenhado pelo designer (Figura 1). Acabei de voltar de Londres. O traçado urbano de Londres (Figura 2) tem reviravoltas e parece mais com o que veio. fora da natureza.
Figura 1: Tucson, Arizona
Figura 2: Londres
Há muito tempo que penso neste artigo. A vista aérea destas duas cidades lembra-me o web design. A tecnologia de hoje permite-nos implementar livremente designs baseados em grelha, ou saltar completamente para fora da grelha. impacto sobre os web designers Não há dúvida sobre o impulso, mas o verdadeiro desafio é como podemos abandonar esses pensamentos de mente fechada e pensar fora da grade.
sensação de cidade
Se você comparar o planejamento urbano ao web design, as semelhanças entre os dois são interessantes. Os layouts de grade são ótimos para criar sites previsíveis e fáceis de navegar. As grades são ótimas para ajudar os designers a planejar e facilitar o acesso dos usuários (Figura 3).
Figura 3: Ryan Brill
Do lado positivo, Tucson é certamente uma cidade fácil de visitar, um pouco de orientação ou um mapa de ruas é suficiente, os moradores dão instruções aos outros, basta dizer, estou na esquina sudoeste do cruzamento da Avenida Campbell e Prince Road Em qualquer lugar. O transporte público é direcionado para sul e norte ou leste e oeste, por isso é muito fácil identificar a estrada.
Por outro lado, os projetistas de Tucson planejaram originalmente uma expansão limitada, e surgiram problemas quando a cidade cresceu além dos limites planejados. As limitações da rede de Tucson impedem o surgimento de diferentes estilos de comunidades ou bairros. Muitos residentes de Tucson sentem que a cidade carece de um centro vibrante ou de vários bairros distintos. não se preocupe em procurá-lo.
Londres é diferente, é um mistério. Eu sei que os próprios londrinos contam com guias da cidade para se locomover. O sistema de transporte da cidade está cheio de desafios e os taxistas precisam passar por exames especiais antes de poderem trabalhar. O crescimento natural da cidade não a torna um lugar fácil para viajar.
No entanto, Londres está repleta de bairros emocionantes e bairros únicos, bem como centros culturais e bairros peculiares. Embora seja mais difícil viajar, devido à variedade de gostos, as pessoas estão mais dispostas a estar entre eles.
Essa metáfora também é adequada para web designs que tendem a ser naturais. Como as pessoas podem navegar facilmente por esses becos sinuosos? Por outro lado, um design bonito pode ser alcançado saindo das caixas em que vivemos. Na Figura 4 você pode ver como quebrar as regras do design da grade permite que o design permaneça utilizável e ainda pareça diferente.
Figura 4: AIGA Los Angeles
O mito do código de grade
Como uma pessoa que presta mais atenção ao código do que ao design, fico confuso ao descobrir como nosso design está preso ao código. Acredito que é o layout da tabela de longo prazo que nos faz traçar uma base sólida (Figura 5). o layout CSS mais recente, é fácil saber por quê.
Figura 5: k10k
Os layouts de tabela funcionam bem com designs de grade. O próprio código da tabela reproduz uma grade. Basta preencher as células com imagens, texto e elementos de interface para completar nosso design (Figura 6). Se quisermos implementar um design complexo e não estruturado, precisaremos usar um grande número de imagens no documento, fazendo com que todo o documento fique inchado.
Figura 6: Mudança de peso
O layout tabular tem algumas vantagens, mas, assim como o planejamento urbano, as vantagens às vezes podem se transformar em desvantagens. Uma grade baseada em tabela garante que todas as células sejam regulares. Você deseja que todas as colunas tenham a mesma largura? Muito simples, tal é a natureza das tabelas. Manter lacunas consistentes entre as células? Também é moleza. No entanto, e se você não quiser essa estrutura elegante? Infelizmente, você não pode.
CSS muda tudo isso, e é por isso que acho que ainda não aprendemos a projetar para a Web. Nós, especialmente aqueles que vêm de layouts de tabela de longa data para o CSS, estamos apenas começando a entender o quão útil o modelo visual do CSS pode ser para romper com as rotinas de design de grade. O layout CSS é perfeito? Não, além dos benefícios que o CSS traz, também perdemos alguma coisa. A expansão de colunas é um grande problema para o design CSS, assim como o espaçamento entre células.
CSS nada mais é do que arestas e caixas, que também são encontradas em grades. No entanto, a diferença essencial entre os dois é que CSS nos permite separar uma caixa do ambiente circundante e descartá-la à vontade (Figura 7).
Figura 7
Podemos usar atributos de posição ou float para posicionamento e podemos usar imagens leves como plano de fundo. Portanto, ao usar o Box, podemos implementar o layout de grade e o layout sem grade de forma mais eficaz. Você pode ver isso em Dave Shea's Blood. em Lust, um dos muitos designs que ele usou em seu CSS Zen Garden (Figura 8).
Figura 8: CSS Zen Garden: Blood Lust
A Figura 9 mostra o design não estruturado baseado em BOX usado no Blood Lust e também mostra como usar CSS e BOX para implementar grades não estruturadas independentes.
Figura 9
Depois de compreendermos as capacidades do BOX, podemos facilmente romper as restrições da rede. Um projeto altamente desestruturado e até mesmo livre é mostrado na Figura 10.
Figura 10: Universidade Kutztown: Departamento de Design de Comunicação
Estas BOX são posicionadas usando CSS:
Figura 11
O código não é apenas mais limpo, mas também mais intuitivo e simples para designers familiarizados com layout CSS. O design também é intuitivo, fácil de usar e pouco convencional.
Panorama
A beleza da tecnologia de layout moderna é que temos mais opções para escolher. Usando CSS podemos criar designs gerenciáveis, leves e visualmente ricos que podem ser baseados em grade se desejarmos, e podemos facilmente quebrar ou quebrar a grade.
Isso abre mais oportunidades para o web design contemporâneo, e não devemos cometer os mesmos erros só porque estamos mais familiarizados com o design de grade.
Para aqueles de nós que são obcecados pela disposição das mesas há muito tempo, as dificuldades são particularmente grandes. Para aqueles que são Web designers há muitos anos, isso significa romper com o que sempre usaram. Alguns podem não achar difícil, mas a maioria das pessoas achará isso intimidante. Precisamos aprender como funcionam os modelos CSS e ter coragem de dizer adeus às velhas regras.
É destes recém-chegados que esperamos ver mais avanços nos estereótipos de design, para os quais os nossos métodos anteriores são estranhos e rígidos.
A web está amadurecendo, a forma como criamos está mudando e temos mais inovação e criatividade pela frente. Não nos apegaremos às cidades planeadas, podemos alcançar designs únicos. Nós, os antigos designers, combinados com os recém-chegados de hoje, faremos a Web mudar a cada dia que passa.
Autor deste artigo:
Molly E. Holzschlag é uma conhecida defensora e evangelista dos padrões da Web. O mais vendido de seus mais de 30 livros é The Zen of CSS Design (Zen Web Design), de autoria dela com Dave Shea. Molly é especialista convidada nos grupos de trabalho do W3C e ex-diretora do Web Standards Project Group (WaSP). Molly trabalha com designers, desenvolvedores, profissionais e tomadores de decisão para conduzir uma Web que seja útil, bonita e significativa.
Pós-escrito
Este é um artigo publicado em A LIST APART em 2005. Em 2005, o layout CSS não era tão comum como é agora, e o layout da tabela sobrecarregou muitas pessoas. Como especialista sênior na área da Web, a autora Molly E. Holzschlag She. também é uma usuária de layout de tabela de longa data. Quando o CSS está se aproximando da maturidade e os layouts baseados em CSS são atualizados, ela tem sentimentos confusos sobre o design de grade baseado em tabela, como pode ser visto no artigo.
No entanto, em 2009, quando o CSS se tornou difundido e o layout do CSS se tornou familiar, é necessário que pensemos novamente no design da grade. A grade está morta ou as tabelas são más? A resposta não é tão simples. Não importa o quanto mude, a Web de hoje tem um propósito eterno. Além dos aplicativos da Web, a missão em constante mudança da Web é expressar e transmitir informações. Se você é um literato, você se apaixonará. com Londres. No entanto, se você fosse carteiro, escolheria Tucson. Portanto, seja um design de grade ou um design natural, não há vantagem ou desvantagem absoluta. O design da grade é mais claro e organizado, enquanto o design natural é mais elegante e refinado.
E as tabelas não são tão más como muitas pessoas dizem. Deve-se notar que as tabelas de hoje não são mais as tabelas do passado que podem ser combinadas com CSS, e as tabelas também podem ser usadas. conjunto de combinações e interações orgânicas, quando você não precisa do posicionamento preciso das células nela, a tabela é um contêiner mais perfeito que o BOX, porque é o mais compatível com todos os navegadores, não entrará em colapso e não entrará em colapso. não será diferente em comprimento, seu comportamento é mais fácil de atender às expectativas e, o mais importante, é a maneira mais direta de as pessoas organizarem as coisas.
Autor original Molly E. Holzschlag
Fonte de tradução chinesa: site oficial do COMSHARP CMS, tradutor de 35 quilômetros.