Sobre a estrutura do designer em web design e produção

"Framework" é uma palavra da moda no desenvolvimento web atualmente. Por exemplo, os frameworks JavaScript YUI, JQuery e Prototype atraíram grande atenção, e os frameworks de aplicações web Rails e Dojo atraíram ainda mais atenção. Parece que todo mundo usa algum tipo de framework para desenvolver seus próprios sites. Mas o que exatamente é um framework? Os frameworks são úteis apenas para programadores? Os designers podem se beneficiar deles?

O que é uma estrutura?

Para facilitar a comunicação, damos uma definição unificada de “framework” (pelo menos neste artigo): um conjunto de ferramentas, bibliotecas de funções, convenções e módulos gerais que tentam abstrair tarefas comuns e podem ser reutilizados. e os desenvolvedores devem se concentrar em aspectos exclusivos do projeto da tarefa e evitar a duplicação do desenvolvimento. De modo geral, frameworks são o framework JavaScript e o framework de aplicativos da Web mencionados acima.

É importante ressaltar que não precisamos falar sobre construção, embalagem e distribuição. Em vez disso, uma estrutura pode ser utilizada apenas por você ou sua equipe.

Estrutura CSS

Às vezes, você pode experimentar os benefícios do código CSS abstrato e semelhante, o que é mais óbvio entre designers que criam vários sites semelhantes ao mesmo tempo. Além disso, os designers da equipe se beneficiaram muito com a abordagem do framework. Por exemplo, eu trabalho para um jornal e todos os mais de 20 sites têm muito em comum. Com base nas características dos sites de notícias, eles tendem a ser mais semelhantes do que diferentes. Mas mesmo um único designer trabalhando em um projeto que parece muito diferente superficialmente pode abstrair algumas pequenas peças comuns da estrutura CSS.

No Lawrence Journal-World, onde trabalho, construímos recentemente uma estrutura CSS e descobrimos que ela é um enorme multiplicador de eficiência. Claro, levamos dias para criar uma estrutura CSS, mas depois que a estrutura foi concluída, o desenvolvimento de páginas da web de alta qualidade foi extremamente rápido. Além do mais, como cada designer da equipe agora usa essa estrutura, quando um designer modifica a página web de outro membro da equipe, ele não precisa mais gastar 20 minutos entendendo as ideias de construção de outras pessoas e pode começar imediatamente.

Há algum que possa ser ignorado?

Ao investir em uma estrutura CSS muito holística, o que você deseja procurar é um código comum que se repete continuamente em cada projeto. O objetivo é consolidar a posição central desses códigos e seguir o “Não se repita”. t Repeat Yourself)" método de codificação. Isso torna a manutenção muito mais fácil e economiza custos de largura de banda para seus visitantes.

Em quase todos os projetos em que trabalho, há alguns problemas de CSS que devo declarar:

“Redefinição extensiva” do estilo padrão do navegador, por exemplo, definindo a margem e o preenchimento de todos os elementos como 0, removendo as bordas de conjuntos de quadros e imagens, etc.

Alinhe com a linha de base. Isso inclui coisas como definir margens para elementos de nível de bloco, como parágrafos, cabeçalhos e listas, com a mesma (ou múltiplas) alturas de linha de base.

Crie o estilo básico do formulário.

Crie várias classes CSS comumente usadas, por exemplo, .hide (defina a exibição como nenhuma, ou seja, oculte o elemento), .mute (defina para uma fonte menor e uma cor mais brilhante).

E aqui está o mais engraçado: muitos designers de sites reutilizam a mesma estrutura básica continuamente, então por que não torná-la sua, de uma forma que seja muito flexível e possa ser usada em vários sites? O Yahoo fez isso? YUI. Quando estávamos construindo a estrutura CSS para o site Lawrence Journal-World, comecei observando como o Yahoo fez isso. Temos certeza de que não é isso que queremos, mas serve como um bom exemplo e nos dá muitas ideias para pensar e como construir nossa própria estrutura. Decidimos por um problema de 16 células que fosse flexível o suficiente para funcionar em cada um dos nossos sites, mesmo que cada site parecesse um pouco diferente do outro. Além disso, a maioria dos sites compartilha widgets, como menus suspensos, menus de navegação, botões, etc. Esses também são os principais objetos que precisam ser abstraídos. Além disso, você pode ter nomes de conteúdo comuns, como miniaturas para listas de imagens. Você pode padronizar a nomenclatura CSS, como "lista de miniaturas", para que todas as miniaturas que exibem miniaturas usem essa classe CSS.

Outra coisa a fazer pode ser extrair hacks (como compatibilidade com navegadores antigos) e adicionar seu próprio módulo de estilo estendido. Eu mesmo tentei, mas descobri que o hack era proprietário demais para ser extraído em uma estrutura geral.

Quais são os benefícios reais?

O verdadeiro benefício da estrutura é que ela pode começar a funcionar rapidamente. Você pode criar um novo arquivo (X)HMTL e apresentar sua estrutura. Você não precisa mais lidar com a redefinição de preenchimento e margens. Widgets válidos, etc. Obviamente, obviamente, você definitivamente precisa personalizar a aparência de cada site. Para conseguir isso, tudo que você precisa fazer é substituir e adicionar ao estilo padrão quando necessário.

Obviamente, embora seja necessário personalizar a aparência de cada site, tudo o que você precisa fazer para conseguir isso é adicionar algumas linhas de código aos estilos padrão. Por exemplo, se você definir um estilo de navegação horizontal básico para todas as tags UL com o atributo de classe "tabs" em seu quadro e tiver uma borda cinza, precisará apenas de algumas linhas de código CSS para personalizá-lo. site está em conformidade.

A lista flutua para a esquerda e os links são colocados na forma de blocos na lista. Os links também flutuam para a esquerda e a fonte é centralizada para ajudá-lo a realizar essas tarefas como anúncios irritantes em seu site. trabalho de design, concentre-se apenas em Concentre-se nos detalhes específicos e interessantes do seu site, em vez de escrever código CSS que já foi escrito um milhão de vezes antes.

Como construir uma estrutura CSS?

Existem várias maneiras possíveis de construir uma estrutura, mas a mais comum, e sem dúvida a mais útil, é abstrair CSS comum em um arquivo de folha de estilo independente que contém apenas uma parte específica do todo. Por exemplo, você pode ter um identificador de tipografia de estilo e outro identificador de redefinição em massa. Este bom método permite introduzir seletivamente os estilos necessários. Pode haver seis ou sete arquivos de estilos diferentes em sua estrutura, mas você não precisa de um ou dois deles, desde que não sejam importados. O framework criado por nossa equipe consiste em 5 arquivos de estilo:

reset.css —lida com redefinição

type.css — lida com tipografia

grid.css — lida com o layout

widgets.css — lida com widgets como menus de guias, menus suspensos e botões "mais"

base.css — Contém todos os outros arquivos de folha de estilo, de modo que só precisamos fazer referência a base.css em (X)HTML para usar todo o framework CSS. Em seguida, armazenamos o framework em um local separado para que cada site importe esse quadro. É claro que cada site também precisa de uma folha de estilo exclusiva, e o estilo exclusivo torna os complementos necessários à estrutura.

conselho

Esse método é bom, mas também traz novos problemas: aumenta o número de links http para cada página. Para sites com tráfego grande e médio, se mais de 5 conexões HTTP forem adicionadas a cada página, o administrador do sistema poderá ter grandes problemas. Duas soluções possíveis:

Coloque todos os estilos em um arquivo em vez de dividi-los em vários módulos. O problema aqui é que a flexibilidade da estrutura para incluir apenas arquivos específicos é perdida e a manutenção se torna complicada.
Existe um programa do lado do servidor que processa dinamicamente vários arquivos únicos em uma resposta. Ainda não vi isso ser feito, mas deve ser muito eficiente se bem feito. Tomando minha estrutura acima como exemplo, esse processo de processamento dinâmico é acionado quando base.css é solicitado, não quando type.css, grids.css, etc. Dessa forma, os arquivos individuais continuam disponíveis e todo o framework é válido na versão da plataforma.
Em resumo, é importante notar que nosso objetivo não é ser o mais abstrato possível. Em vez disso, o objetivo é fornecer um início rápido e um processo de design mais eficiente que seja definitivamente possível. Se você for muito abstrato, as coisas podem ficar confusas e muitos links HTTP podem afetar o desempenho do seu site. Lembre-se: uma boa estrutura não significa tornar as coisas mais difíceis e complicadas, mas sim começar do zero.

Resumir

Nós, web designers, tendemos a nos repetir o tempo todo e, como meus amigos do mundo da programação, redefinimos estilos padrão do navegador, layouts de design e menus de navegação repetidamente - em quase todos os projetos. Gastar um pouco de tempo classificando a estrutura CSS permitirá que você inicie cada projeto de site rapidamente, mantenha o site com mais facilidade e ajude outros designers da equipe a entender seu trabalho. Ressalta-se que estes benefícios devem ser obtidos sem afetar o desempenho do site.