O que é design responsivo:
Design responsivo é o design web que se adequa a qualquer tipo de dispositivo com acesso à internet. Diferente de sites fluídos, que tem somente seu tamanho diminuído de acordo com a mídia que estamos usando para acessá-lo, os sites responsivos modificam seu layout de acordo com a resolução da tela ao qual estão sendo apresentados. Esse conceito não é recente, mas visa uma única coisa: O conteúdo legível em um site, esteja ele sendo visto através de um desktop, notebook, tablet ou smartphone.
Um bom exemplo de site responsivo:
Passo a passo: Como criar um layout responsivo:
Antes de mais nada, um passo que é considerado crucial para a criação de um website decente: A ESTRUTURAÇÃO!
Pesquise sobre o conteúdo que o seu site abordará, veja outros sites do segmento, estude seus layouts, verifique seus pontos fortes e fracos, busque saber qual a melhor forma de organizar a informação e finalmente vamos para a formação do nosso wireframe. O wireframe pode ser rabiscado, não é necessário que seja extremamente detalhado, a ideia aqui é que tenhamos uma visão de como as áreas de conteúdo ficarão distribuídas nas telas.
Como forma didática, começarei a mostrando um wireframe através do modelo desktop, então partirei para o tablet e posteriormente ao smartphone.
(Obs: as imagens utilizadas abaixo não são de minha autoria <s>preguiça</s>)
Este site é bem simples, como podemos ver teremos no <header> da página o logo e um <nav>. Abaixo uma <section> para o banner e em seguida 4 <articles> com foto e logo abaixo uma breve descrição de cada uma. Por último temos também o <footer>.
Uma vez tendo o desenho base em mãos, podemos partir para a modelagem no photoshop (ou em qualquer outro software de criação).
No monitor:
Assim ficará o nosso site após a sua concepção, ou melhor, essa será a estrutura das informações que conterão no nosso site quando ele estiver terminado. Aqui imaginamos um monitor de desktop ou notebook de resolução 1200.
Assim ficará o nosso site após a sua concepção, ou melhor, essa será a estrutura das informações que conterão no nosso site quando ele estiver terminado. Aqui imaginamos um monitor de desktop ou notebook de resolução 1200.
No tablet:
Como o tamanho do tablet é naturalmente menor (de 480px à 768px), para fazermos um site responsivo, teremos de dar uma realocada no conteúdo. O distanciamento entre os itens do menu diminui, o logo e o resto do conteúdo consequentemente também. Devemos nos atentar ao que acontece com as imagens que, antes eram 4, agora são somente 2 por bloco (dessa forma mantemos um tamanho legal para elas e isso não dificulta quando o usuário for clicar ou ler o conteúdo).
No mobile:
O modelo de site para mobile deve ser muito mais estreito que o de tablet, isso porque seus tamanhos podem variar de 320px à 480px. Como podem ver na imagem abaixo, o logo fica maior, como alternativa de poupar espaço o menu torna-se dropdown, as fotos que antes eram 2 por bloco são trocadas por uma só e suas áreas são divididas em mais de uma página (que se o usuário quiser mudar, basta passar a tela para o lado).
Uma vez imaginando e colocando em prática como o layout do site será, é hora de começar mexer com o HTML e o CSS da coisa!
Tendo criado o esqueleto das seções no html e posicionando-os corretamente, é hora de passar para o 1º fator da responsividade, a dinâmica do conteúdo!
Para que seu site saia de acordo com o planejado, existem regras que devem ser seguidas de forma bem estrita, são elas:
1ª: Altere unidades fixas para unidades relativas.
- Fontes que antes eram definidas como pt ou px, agora passam a ser ‘em’.
- Alturas, larguras e imagens que antes eram em px, serão trocadas por %.
A conversão de unidades fixas para relativas se dá pelo seguinte cálculo:
Tamanho em = tamanho px / contexto da página
Tamanho % = tamanho px / contexto da página
2ª Utilize as media-queries para adequar o layout ao dispositivo utilizado pelo usuário:
Ex: <link rel="stylesheet" href="smartphones.css" media="screen and (max-width:480px)">
No caso do código acima, o css será restringido ao tamanho do dispositivo. Se tiver até 480px de resolução, o estilo carregado será o “smartphones.css”.
Assim pode ser feito para todos os 3 tipos de tela mais usados, sejam eles de desktop, tablets ou mobile. Criando apenas um CSS por layout podemos abranger bem mais dispositivos, tudo através da media query.
3ª Faça variados testes até chegar à perfeição.
Bom, esse foi o humilde tutorial a respeito de design responsivo.
OBS: As imagens aqui utilizadas (dos wireframes) foram retiradas do site: tableless.com.br
0 comentários:
Postar um comentário