As caixas do InDesign são tão simples quanto clicar e arrastar. As camadas do Photoshop permitem que os pintores coloquem pixels em qualquer lugar que desejarem. Mas o layout com HTML e CSS é um jogo de cutucadas e em cascata.

Isso acontece todos os dias: diretores de arte experientes em Photoshop simulam designs, aprimorando seu espaçamento, escolhendo cuidadosamente fontes e cores apropriadas. Eles entregam seu trabalho a um ansioso desenvolvedor de HTML, que anuncia que o design provavelmente demorará dias para se transformar em HTML / CSS. Pior, eles farão alterações para contabilizar diferentes tamanhos de tela. O tempo é um mistério para ambas as partes. Será que o desenvolvedor demorará uma hora ou uma semana para transformar seu PSD em HTML / CSS funcional?

Os fundamentos do layout da web - o possível, o prático, as possibilidades - são fáceis de entender. Como o próprio design, a compreensão dos princípios ajudará qualquer designer a produzir designs melhores e agilizar o processo de construção de um site.

Pilha de elementos de bloco, fluxo de elementos em linha

Tudo em uma página da web, de parágrafos a imagens, a links para texto em negrito, fica em caixas invisíveis. Estas caixas vêm em duas variedades: bloco e inline. A diferença entre inline e block reside em seu comportamento.

• Elementos de bloco são retângulos. Eles adoram preencher o espaço horizontal.
• Elementos inline são retangulares, exceto que eles podem envolver.

Elementos de bloco empilham uns sobre os outros. A menos que seja dito o contrário, eles ocupam tanto espaço horizontal quanto possível, empurrando tudo ao seu redor para cima ou para baixo. Para o design, os elementos de bloco são a principal ferramenta de layout.

Elementos inline são baseados em formatação de texto. Eles não quebram o fluxo de texto e suas dimensões se expandem para se adequar ao conteúdo. Contar um elemento inline para manter uma largura de 200 pixels não funcionará. Preenchendo com texto vai.

Por padrão, todos os elementos no é um elemento inline ou block. Os designers podem mudar sua natureza com um pouco de CSS - digamos, transformar uma pilha de itens de lista (blocos nativos) em uma linha ou uma série de links horizontais (nativamente inline) em uma pilha vertical. Isso significa que qualquer elemento visível pode ser usado para layout. Se eles devem depende do layout em questão.

Os elementos de bloco nativos incluem:

• Divisões
• Parágrafos

• Listas
  • Itens em uma lista
  • Cabeçalhos

    -

  • Tabelas
    Citações em bloco

    Organizadores em HTML5

    , ,
    O próprio corpo

    Elementos inline incluem:

    • Âncoras (hyperlinks)
    • Negrito e
    • itálico e
    • Imagens
    • Citações
    • Tipo de estilo
    • Rótulos de formulário
    • Você decide

    Tags comuns que não são nem em bloco nem em linha:

    • O título do documento