Conteúdo VIP
Coloque seu e-mail aqui para receber antes de todo mundo e gratuitamente as atualizações do blog!
Entenda como funciona o Web Design Responsivo com essa série de gifs

Entenda como funciona o Web Design Responsivo com essa série de gifs

Webdesign e UX 0 comentários

O conceito de design responsivo não é uma grande novidade, mas tem chamado bastante atenção nos últimos tempos com o crescimento do mercado de dispositivos móveis, principalmente por conta dos tablets e celulares de tamanhos e resoluções cada vez mais variadas. Portanto, é preciso esclarecermos alguns princípios básicos a respeito do web design responsivo. Para facilitar o processo, vamos apenas nos concentrar nos layouts.

Design Responsivo vs Design Adaptativo

Pode parecer o mesmo, mas não é. Ambas as abordagens se complementam, por isso não há maneira certa ou errada de fazê-la. Deixe o conteúdo decidir.

 

O fluxo

Quando a tela diminui de tamanho, o conteúdo começa a ocupar mais espaço vertical e tudo o que estiver abaixo, será jogado ainda mais pra baixo. Esse processo é denominado fluxo. Isso pode ser complicado de entender se você está acostumado a projetar com pixels e pontos, mas faz todo o sentido quando você se acostuma com isso.

 

Unidades relativas

Imagine a tela de um desktop ou de um celular. Agora pense que a densidade dos pixels pode variar, por isso precisamos de unidades que sejam flexíveis e trabalhem em qualquer lugar. Posicionar os elementos usando pixels faz com que ele funcione em apenas uma tela.

 

Pontos de interrupção

Os pontos de interrupção permitem que a disposição do layout mude em pontos pré-definidos, ou seja, você pode ter 3 colunas em um desktop, mas apenas uma coluna em um dispositivo móvel. A maioria das propriedades CSS podem ser alteradas de um ponto de interrupção para outro. Normalmente o lugar onde você coloca um ponto de interrupção depende do conteúdo. Se uma sentença quebra, pode ser necessário adicionar um ponto de interrupção. Mas use-os com cuidado, pois você pode ficar confuso rapidamente caso não entenda o que está influenciando o que.

 

Valores mínimos e valores máximos

Às vezes, é ótimo que o conteúdo ocupe toda a largura de uma tela, como em um dispositivo móvel, por exemplo. Mas fazer com que esse mesmo conteúdo se estenda a toda largura de uma tela de TV muitas vezes não faz sentido. É por isso que valor mínimos e máximos ajudam bastante. Por exemplo, uma largura de 100% e largura máxima de 1000px significa que o conteúdo irá preencher a tela, mas não passar por cima de 1000px.

 

Objetos aninhados

Você lembra da posição relativa? Ter um monte de elementos dependendo de outro seria difícil de controlar, portanto, manter esses elementos bem envolvidos os torna mais compreensíveis, limpos e arrumados. É aí que as unidades estáticas, como pixels, podem ajudar. Eles são bastante úteis para o conteúdo que você não quer manter escala, como logotipos e botões.

 

Mobile ou Desktop - Qual primeiro?

Tecnicamente não existe muita diferença de um projeto iniciado em mobile que passa para desktop, ou vice-versa. No entanto, há algumas limitações adicionais caso você comece primeiro pelo dispositivo móvel. Algumas pessoas iniciam o projeto simultaneamente por mobile e desktop. Decida o que funciona melhor para você.

 

Fontes da web vs fontes do sistema

Quero usar uma fonte super diferente em seu site? Use fontes da web! Mas lembre-se que embora fique lindo, cada fonte dessas deverá ser carregada, levando mais tempo para carregar a página. Fontes do sistema, por outro lado, são bem mais rápidas, exceto quando o usuário não as possui, fazendo com que a página seja carregada com uma fonte padrão.

 

Imagens bitmap vs Vetores

Os ícones da sua página possuem muitos detalhes? Se sim, utilize imagens bitmap. Se não, considere o uso de uma imagem vetorial. Para bitmaps use imagens em jpg, png ou gif, já para vetores, a melhor escolha seria SVG ou alguma fonte ícone. Cada um tem algumas vantagens e algumas desvantagens. No entanto, tenha em mente o tamanho - toda imagem postada deve ser otimizada. No caso dos vetores, atente-se que alguns navegadores antigos não irão dar suporte por essas imagens muitas vezes serem pequenas. Além disso, caso o vetor tenha muitas curvas, ele pode ser ainda mais pesado que um bitmap, então escolha sabiamente.

Seu site é responsivo? Se você ainda tem dúvidas, clique no banner abaixo e solicite sua avaliação grátis.

Teste se seu site é responsivo

Webdesign e UX 0 comentários

Igor Barazzetti
Sobre o Autor
Igor Barazzetti é Diretor da Hit Marketing Digital e Publicitário, concluindo pós-graduação em Comunicação Digital. Eterno estudante de marketing, acredita no empreendedorismo como forma de transformação pessoal e profissional.