Como criar um Website responsivo #1

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:

    
        
        
    
    
        

            
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.