Você sabe o que é área-útil em um site?

Escrito por Matheus Rocha.

De maneira genérica, a área-útil de um site é a área apta à receber interação do usuário.

Todo o conteúdo que possa ser "clicado", deve integrar a área-útil:

 

area util websites

 

Como criar uma estrutura HTML simples, que aplique os conceitos de área-útil?

Trabalharemos com dois arquivos, home.html e custom.css

 

Neste exemplo trabalharemos com 990px de área útil. Este dado varia de acordo com a dimensão e complexidade do projeto, fatores como resolução mínima e máxima suportada são decisivos na escolha.

 

Começaremos com a estrutura HTML e ficará assim:

 

  1. <!DOCTYPE html>
  2. ...
  3. <body>
  4. <section>
  5. <div class="container">
  6. <h1>Meu Título de teste</h1>
  7. </div>
  8. </section>
  9. </body>
  10. ...
  11. </html>

 

 

Repare que existe uma div inserida em uma tag section. Todo conteúdo presente dentro da div classe container será "limitado" pela área útil. Importante lembrar de adicionar esta linha:

 

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

 

Dentro da tag head do nosso HTML para dizer aos navegador dos usuários que o site é preparado para Viewport, ou seja, pronto para o uso de recursos responsivos (Não é o foco do artigo) 

 

O nosso arquivo CSS fica assim:

  1. .container{
  2. margin: 0 auto;
  3. max-width: 990px;
  4. }

 

A propriedade margin: 0 auto centraliza nosso "segurador" enquanto a propriedade max-width: 990px define a largura máxima em px para a área receptiva à ações do usuário (área útil).

 

Websites com Full área útil

Estes tipos de site, utilizam de toda a área do monitor para exibir o conteúdo. A engenharia dos componentes é um pouco mais complexa, visto que existirá uma área útil de largura DIFERENTE para cada um dos dispositivos onde o site será exibido. Não é uma má-prática, só não é o foco do presente artigo.

 

 

 

Espero ter ajudado você a entender melhor como funciona a área útil presente nos Websites. 

 

Obrigado!