Você sabe o que é área-útil em um site?
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:
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:
-
<!DOCTYPE html> -
... -
<body> -
<section> -
<div class="container"> -
<h1>Meu Título de teste</h1> -
</div> -
</section> -
</body> -
... -
</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:
- <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:
- .container{
- margin: 0 auto;
- max-width: 990px;
- }
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!
