Veja aqui a Parte 1.

Simplicidade em código pode ser resumida em a menor coisa que funcionar. Se a intenção é exibir um conteúdo, exiba-o da maneira mais simples e direta possível, dentro dos limites do projeto.

Funcionar é a palavra variável do princípio. Texto puro com capturas de tela funciona muito bem para tutoriais, por exemplo. Para campanhas de marketing é geralmente preciso um pouco mais de apelo na aparência para funcionar.

Animações são excelentes exemplos de facas de dois gumes. Um alerta que aparece animado na tela pode funcionar melhor do que um alerta estático, mas muitos alertas animados podem irritar o visitante. Simplicidade, usabilidade e conforto estão intimamente relacionados.

Projetar HTML para o conteúdo é fácil. A princípio basta deixar de lado qualquer decoração de lado, incluindo fontes, tamanhos, cores e posição dos elementos. Sem essas preocupações, você estará apto a criar uma marcação pura e objetiva.

Nesse e nos próximos posts da série, utilizarei a página de contato do Tableless como base para nosso projeto simplificado. Eu poderia ter escolhido sites ruins com código sujo, contudo escolhi o Tableless, que já possui um código enxuto e bem-feito, para levar a técnica ao extremo.

Procure extrair o máximo de simplicidade da página. Por exemplo esse topo:

Barra Superior do Tableless.com.br

Vira um texto similar a isso:

Texto Puro da Barra Superior do Tableless.com.br

Note que ignorei a ordem em que os elementos são exibidos. O logo aparece depois da barra superior, mas seu texto é mais visível e importante, por isso coloquei Tableless lá em cima. Ignorei também quaisquer firulas no texto. O que estava em maiúsculo eu digitei como texto normal, porque sei que posso mudar isso por CSS depois.

Dá uma olhada na versão em texto puro, tomei a liberdade de remover algumas coisas redundantes do conteúdo da página (A parte “Nós também fazemos”, por exemplo).

Agora que temos um texto puro, precisamos começar a marcá-lo semanticamente. Nossas ferramentas na próxima parte serão:

• Tags de marcação de títulos: <h1>,<h2> e <h3> (tem<h4>,<h5> e<h6> mas não precisaremos desses)
• Parágrafos <p> e imagens <img>
• Formulários <form>
• Grupos de campos <fieldset> com legendas <legend>
• Campos de formulários <input>, <textarea> e <button>
• Listas sem ordem específica <ul> e itens de lista <li>

Apenas com esses elementos, iniciaremos a reconstrução da barra superior mantendo o foco na simplicidade. Se eu demorar pra publicar a parte 3, puxem minha orelha nos comentários ou no twitter @alganet