Nov.05

3 princípios básicos do design responsivo que você deve dominar.

3 princípios básicos do design responsivo que você deve dominar.

Há alguns anos atrás, era relativamente fácil projetar e construir websites. Os sites eram mais simples, eram vistos em desktops e laptops com pouca variação de tamanhos de tela. Hoje os dispositivos móveis e smartphones evoluíram a experiência de navegação dos usuários, um site pode ser visto em um tablet, um Iphone ou em qualquer tamanho de tela disponível no mercado.

Dessa forma como você garante que o seu site abra corretamente em todos os tipos de dispositivos e tamanhos de tela?

A solução foi proposta pela primeira vez por Ethan Marcotte, quando ele explorou maneiras de fazer projetos de websites responsivos, ou seja, sites que mudam de acordo com o tamanho da tela. Um design de site adequado é aquele que faz uso inteligente do CSS para garantir que suas páginas se adaptem à uma ampla gama de tamanhos de tela – sem recorrer a URLs de redirecionamento ou através de um HTML diferente somado a outro código CSS. O que vou ensinar não é uma norma, mas sim um conjunto de princípios de design que ajudam a alcançar um resultado muito acima da média.

Nos últimos anos, muitos modelos de CSS responsivos e temas para WordPress surgiram. Porém, um webdesigner de verdade não está satisfeito  apenas utilizando temas. Ele vai fazer um esforço para compreender os elementos do webdesign responsivo a fim de usá-los de forma eficaz.

Então, hoje, nós vamos olhar para as três técnicas fundamentais que você precisa dominar, para que você se crie um design responsivo eficaz.

1. Mídia queries

Essas consultas permitem que você crie layouts diferentes para diferentes tipos de mídia, como monitores, impressoras, TV, dispositivos portáteis etc. Dependendo do tipo de mídia, você pode configurar o estilo, a fonte e outros elementos da página.

Introduzido no CSS3, as mídias queries deixam o designer personalizar a apresentação do conteúdo para atender uma gama específica de tipos de dispositivos de saída. Eles consistem de uma declaração de tipo de mídia e uma ou mais mídias apresentam expressões que resultam em verdadeiras ou falsas.

Essa variedade de tipos de mídia incluem portáteis, monitores, tv, impressoras e projetores. Essas características incluem, mas não estão limitadas à altura do dispositivo, a largura, a relação de aspecto, resolução, índice de cor, bem como a altura, a largura da janela de navegador.

Vamos dar um exemplo básico; imagine que você quer que seu tamanho do texto encolha em dispositivos menores, como telefones. A consulta seria algo parecido com:

Agora, o tamanho da fonte dos seus parágrafos será definido como 1em, a menos que a largura do navegador seja inferior a 400px, caso esse em que a fonte irá encolher para 0.8em.

Na minhas experiências, a melhor maneira de criar um layout responsivo é primeiro a criar uma folha de estilos padrão com os principais elementos estruturais. Então você pode adicionar as mídia queries para personalizar elementos com base no layout ou outros elementos do dispositivo.

Se forem mais do que algumas regras, talvez seja melhor movê-las para uma folha separada – que você pode carregar mais tarde. Funciona assim:

Este pedaço de código verifica se o dispositivo é um computador de mão no modo paisagem com dispositivo de largura inferior a 720px, e se assim for, ele carrega a folha de estilo ‘tablet_layout.css’.

Note que as características de largura, altura min max-width /, min / max-altura todos se referem a largura e altura da janela do browser. A largura do dispositivo e altura são controlados pelo dispositivo de largura, dispositivo de altura, min-width dispositivo max- /, min / dispositivo de altura max-. Se você quiser olhar mais exemplos de mídia queries é só clicar aqui.

2. Layouts fluidos

“Grid fluido” é um termo usado para descrever um layout que está codificado em proporções relativas entre seus vários elementos, ao invés dos valores de pixel fixos.

Layouts tradicionais usam CSS com grades de largura fixa para posicionar os elementos. A abordagem de largura fixa não funciona mais hoje agora que temos telas de dispositivos que variam de 3 polegadas a poucos metros. Em um design de grid fluido, tudo é codificado em termos de proporções em relação ao elemento base ou seja, em vez de especificar a altura e largura de cada elemento; é dado uma percentagem ou tamanho relativo.
 
Imagine que você tem quatro colunas. Para fazer com que elas sejam fluidas, em vez de especificar cada uma com 200 pixels de largura, você teria que especificar 0,2083% (ou seja, como 200/960). Pelo menos, esse é o princípio.

Criar uma grid inteiramente fluido requer muito cuidado. É um daqueles raros casos eu prefiro recomendar o uso de ferramentas personalizadas.

Tiny Fluid Grid, Variable Grid System e Fluid Baseline Grid são algumas ótimas alternativas para escrever sua própria grade de fluido a partir do zero.

3. Imagens flexíveis

As imagens são considerados flexíveis quando a imagem é processada em tamanho natural, em relação ao HTML onde ela está inserida, mas quando a janela de navegador encolhe, a imagem se ajusta ao tamanho.

Mesmo que o resto do projeto seja fluido e responsivo ele não vai renderizar bem se todos os componentes não forem interligados. Isso pode ficar complicado com imagens e vídeos. Uma imagem de largura 700 pixels ficará muito bem em um desktop, mas não se for cortada quando vista em um tablet de 320 pixel. A maioria dos projetos responsivos usam a propriedade de CSS ‘max-width’ para fazer imagens flexíveis. (Este método foi proposto pela primeira vez por Richard Butler.)

Estas poucas linhas irão assegurar que a imagem não seja cortada, definindo a largura da imagem no máximo a 100% do recipiente. Se a janela do navegador ou a tela torna-se menor, este pedaço de código CSS vai encolher a imagem proporcionalmente. A altura é automaticamente ajustada, enquanto se mantém a relação.

Você pode em vez disso, bloquear a imagem para ocupar uma determinada proporção vertical da tela assim:

(Certifique-se de não usar tanto max-height e max-width juntos.)

O tamanho da imagem também pode ser ligado ao tamanho do texto, ao invés do elemento pai dessa forma:

Se a imagem contiver texto, você pode querer limitar o / tamanho mínimo máximo, para garantir que o texto seja legível. Você pode especificá-lo assim:

As mesmas técnicas podem ser utilizadas para dimensionar vídeos, por exemplo:

Para fechar

Considerações finais

Design Responsive é o futuro da nossa indústria, mas com tantas técnicas diferentes voando por ai, muitas vezes é difícil escolher uma que sirva. Domine essas três técnicas simples, e você vai estar 90% na frente no caminho para ser um designer responsivo.

E o SurtoCriativo é totalmente responsivo galera!

Compartilhe isso:
  • facebook
  • twitter
  • gplus

Sobre R.Junior

Deixe um comentário