No passado dia 21 de Abril a Google começou a penalizar os Websites que não estão optimizados a dispositivos móveis, fazendo com que eles possivelmente cedam o primeiro lugar, no resultado das pesquisas, a um Website que esteja adaptado a estes dispositivos. Com a introdução do CSS3, é possível criar com bastante facilidade e sem nenhum conhecimento específico de programação um Website que esteja optimizado para uma vasta gama de dispositivos, desde os ecrãs de computadores até aos smartphones.
É isso que iremos demonstrar nesta nova rubrica semanal. Começaremos hoje numa página HTML em branco e acabaremos num site completo responsivo, cumprindo todos os padrões impostos pela Google.
Para melhor compreensão desta rubrica, é recomendável que tenha conhecimentos básicos de como funcionam páginas Web, uma vez que eu não irei abordar muito esse assunto.
Começaremos então por este simples ficheiro HTML:
Exemplo nº1
Hello world!
Para além do trivial, foi incluída uma div do tipo “wrapper”. Este elemento é utilizado para limitar a largura do conteúdo a 1200 píxeis, centrando-o na página.
Esta funcionalidade é implementada usando o seguinte ficheiro CSS:
body,html{
margin:0px;
padding:0px;
}
body{
background-color:#CCC;
}
.wrapper{
max-width:1200px;
width:100%;
background-color:white;
margin:auto;
box-sizing: border-box;
margin-top:20px;
padding:15px;
}
Poderá visualizar o código acima em acção clicando aqui ou descarregá-lo aqui.
Para quem já teve alguma experiência com CSS, nada disto é novo, pois nenhuma parte do código acima necessita de CSS3 para funcionar.
Este será o projeto base desta rúbrica, onde todas as semanas iremos juntar mais código e conteúdo, até que fique um Website completo, dentro das normas impostas pelo Google.
Depois desta introdução, na próxima semana começará a inclusão dos comportamentos únicos de CSS3 que estão presentes em todos os sites responsivos que visita (o nosso inclusive).
Sinta-se à vontade para colocar questões e apresentar sugestões do que gostaria que fosse debatido nesta rubrica. Até à próxima semana.