O que é e como planejar um layout responsivo para sua página na web
1 - Como planejar?
Para criar um layout responsivo é preciso usar técnicas de CSS a fim de que uma página da web adapte-se a diferentes tamanhos de tela e resoluções. Assim, um internauta consegue ver todo o conteúdo de um site em qualquer dispositivo. Há três ingredientes essenciais para chegar a este resultado.
Um deles é o layout fluído ou líquido, em que a largura das tabelas é definida em porcentagens, não em valores fixos. Outro ponto importante são as media queries, ou o uso de condições lógicas que acionam diferentes folhas de estilo de acordo com a resolução da tela em uso. O terceiro elemento são as imagens flexíveis, definidas para ocupar, no máximo, a largura total da tela.
2 - Use a criatividade
Se seu objetivo é começar um layout do zero, uma das melhores plataformas para a tarefa é o Adobe Edge Reflow. Disponível no pacote Creative Cloud desde 2013, o programa oferece uma série de ferramentas para adaptação dos itens de um template para várias resoluções. O diferencial do editor da Adobe está na interface intuitiva, que permite modelar os itens como desejado e gerar folhas de estilo (CSS) facilmente.
3 - Para personalizar
Os serviços online Gridpack e Responsify.it oferecem ferramentas com as quais é possível escolher o número de colunas, o espaço entre elas e até determinar os breakpoints de uma página, ou seja, os pontos em que o CSS muda de acordo com as resoluções definidas pelo usuário. Depois de configurar o template, basta baixar os arquivos com as especificações desejadas e customizá-los em seu servidor ou computador.
4 - Trabalhe com frameworks
Outra solução é usar frameworks, que trazem vários códigos, efeitos e até ícones prontos para adaptar em sua página da web. O Bootstrap, desenvolvido pela equipe do Twitter, é um dos mais completos sistemas desta categoria. Ele traz uma série de códigos e ferramentas prontas para criar páginas em todas as resoluções possíveis, inclusive com efeitos em JavaScript. Baixe e descompacte a versão mais recente do serviço em seu computador para começar a usá-lo.
5 - Adapte seu layout com CSS
Se você já tem um layout pronto e deseja apenas adaptá-lo a diferentes resoluções, a solução é acrescentar media queries ao seu arquivo CSS e relacionar cada condição lógica às propriedades que deseja customizar. Exemplo: se você deseja esconder a barra lateral do site na versão para smartphones com a tela no formato retrato, o código deverá ficar da seguinte forma:
/* Smartphone em modo retrato */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
#sidebar {
display: none;
}
}
Confira na página do desenvolvedor Stephen Gilbert as media queries prontas para vários dispositivos e adapte-as ao layout de seu site.
Escolha o melhor modelo
Conheça algumas das estratégias de criação de layouts responsivos mais usadas pelos desenvolvedores:
Mostly Fluid - A estrutura do layout mantém-se em diferentes resoluções, mudando somente em telas de tamanho muito reduzido.
Column Drop - Padrão popular para modelos de site em três colunas. Conforme a tela diminui, as colunas são realocadas, uma embaixo da outra.
Layout Shifter - É um dos mais complicados para editar, pois consiste em diferentes modelos de layout para cada resolução, que devem ser definidos e personalizados pelo desenvolvedor.
Tiny Tweaks - Formato indicado para quem deseja criar uma página minimalista que mantém sempre a mesma estrutura básica do conteúdo, alterando somente tamanhos de fontes, imagens e outros componentes.
Off Canvas - Padrão aproveita o espaço fora da tela para manter a navegação ou parte de um conteúdo escondido. Geralmente, o internauta aciona este conteúdo por um botão, gesto ou link. É o padrão adotado na versão móvel do Facebook, por exemplo.
About Fellipe
Blogger Comentar
Facebook Comentar