Design Responsivo (by:Shine Musick)

O que é design responsivo?

O design responsivo nada mais é do que uma técnica utilizada entre o HTML e o CSS na qual o site se adapta ao navegador utilizado sem precisar de uma definição diferente para cada tamanho de visualização. É uma definição complicado, mas o comum é que o desenvolvedor esteja acostumado a trabalhar com pixel como medida de referência.

Por que usar design responsivo?

Nos dias atuais, quando falamos em layout de site ou web design, quase que por obrigação deve ser pensado sobre o lado responsivo do layout. Tudo atualmente está conectado a internet e é inevitável mais cedo ou mais tarde acabar entrando em algum site, e uma mudança drástica que temos é o modo em que olhamos tudo.

A cerca de 2 anos atrás o que se dizia ou o que se via era a febre dos computadores. Atualmente a visão já é totalmente diferente, a população começou a optar pela praticidade e mobilidade, adotando aparelhos eletrônicos de menor porte como os tablets e celulares.

Até pouco tempo atrás se utilizava uma medida fixa que a maioria dos designers adotavam que era o desenvolvimento no tamanho fixo de 960 pixels de largura, independente do monitor usado, porém com o tempo foi visto que isto deixou de ser útil já que cada dia cresce o número de computadores com monitores maiores, e nesse caso acabava existindo muito “espaço em branco”. A ideia era criar exatamente um site que possa ocupar boa parte de sua tela e ao mesmo tempo causar uma boa impressão independentemente de onde fosse utilizada foi onde passamos a ter o conceito de design responsivo.

Com o design responsivo, se consegue obter um único resultado de diversas formas, claro que isto ainda não é perfeito, mas digamos que o caminho a se seguir esta correto.

Quando se fala neste conceito, se deve levar em conta um layout contendo todos os elementos que podem modificar de tamanho, então é extremamente recomendável que se crie o layout utilizando apenas componentes vetorizados (Que não perdem qualidade independente do zoom aplicado).

Exemplos

Você pode ver exemplos de sites responsivos clicando aqui e aqui.

Design responsivo na prática

Utilizando algumas gifs nós conseguimos ver algumas diferenças entre os modelos de design existente s e como eles funcionam.

(OBS: Para visualizar clique sobre a imagem)

O conceito de mobile first tem ganho muita atenção, pois é uma forma diferente de visualizar o processo de criação de um site. Ao invés de fazer um site para computadores e depois adaptar ele para as telas menores, no mobile first você cria primeiro a versão de celular e depois adapta ela ao desktop.

Uma questão comum dentro deste tipo de projeto é se ele terá um tamanho máximo (a grande maioria dos sites têm). Você pode construir o site de uma forma que ele irá sempre se adaptar ao tamanho da tela ou pode fazer de uma forma que ele se adapte até determinado tamanho, depois deste tamanho, ele sempre irá se manter da mesma forma (ou seja, deixará de ser responsivo após determinada largura).

Dentro do layout de um site você pode definir breakpoints, que podemos traduzir como “pontos de interrupção”. Estes pontos definem se algum objeto deve mudar alguma propriedade caso atinga determinado parâmetro. Espere, vou explicar melhor. Você pode criar um destes “pontos” para que, caso a tela seja maior ou igual a 1024px, o fundo troque de cor. Qualquer valor menor que este, mantém a cor original. Esta técnica é muito comum em sites responsivos, pois através destes breakpoints você consegue modelar os objetos do seu site dependendo do tamanho da tela do dispositivo que está sendo utilizado.

Uma mudança de conceito muito importante para quem vai começar a trabalhar com design responsivo é que utilize o máximo possível de unidades de medida relativas, ou seja, unidades que mudam de acordo com o tamanho da tela. Ao invés de definir que o tamanho do objeto é 1000px (que é uma unidade fixa), você irá definir que ele terá 100% (que é uma unidade relativa). Unidades relativas se adaptam ao contexto em que estão e isso é a essência do design responsivo.

Objetos fixos tem tamanho definidos (por unidade estáticas), enquanto os objetos fluídos tem tamanho variável (por unidades relativas).

Nesta animação você consegue ver a diferença entre usar bitmaps ou vetores. Dentro do design responsivo, isso acaba fazendo bastante diferença, pois quando possível você deve usar vetores, que podem ser redimensionados automaticamente, independente de quanto zoom você der. Por isto é muito comum utilizar “fontes de ícones”, que são fontes que funcionam como vetores. Uma das mais utilizadas é o Font Awesome(baixe a pasta completa aqui), mas existem dezenas de outras. Um ícone feito em imagem pode perder qualidade, dependendo da densidade e tamanho da tela em que ele for visualizado, um vetor (ou fonte de ícone) não tem esse problema.

Para finalizar

Um ponto que deve ser levado em conta não apenas em um design responsivo, mas é essencial para qualquer tipo de webdesign é a questão de fonte tipográfica utilizada, já que dependendo do sistema utilizado as fontes existentes podem mudar, existe uma lista de fontes em comum dentro de todos os sistemas operacionais e dentre estas pode se utilizar sem ter nenhum tipo de problema interno no site.

As fontes comuns entre todos os sistemas pode ser encontrada clicando aqui.