Se você já trabalha com desenvolvimento web está (ou pelo menos deveria estar) familiarizado com o termo design responsivo. Espero eu também que você já o entenda muito bem. Mas para quem está começando a trabalhar com desenvolvimento web é sempre começar a compreender o que realmente significa um site responsivo.

Olhando aqui nos links que deixo acumular para ler depois encontrei esse artigo interessante, que utiliza gifs para explicar 9 princípios básicos de design responsivo.

Design Responsivo vs Adaptável

01_Responsive-vs-Adaptive

Responsivo vs Adaptável

 

Olhe atentamente e você notará que não é o mesmo. Primeiro aqui não há certo ou errado, pois essas abordagens são complementares, o seu conteúdo é quem deve decidir o melhor a ser feito.

O Fluxo

04_Flow-vs-Static-2

Fluxo vs Estático

Uma coisa é certa, se você diminui seu espaço horizontal seu conteúdo começa a esticar, e ocupar mais espaço na vertical, empurrando todo o resto para baixo, chamamos isso de “fluxo”.

Unidades Relativas

02_Relative-Units-vs-Static-Units-1

Unidade Relativa vs Unidade Estática

Não temos o controle da tela em que nosso site vai aparecer, pode ser um desktop, um tablet, um celular, ou qualquer outra. Ainda tem outro problema que é a densidade de pixel que varia para diferentes dispositivos, a solução: Unidades Relativas.

Por exemplo, Entre as unidades relativas mais usadas está a porcentagem, ao declarar que algo terá 50% de largura, define que independente da mídia o seu conteúdo ocupará 50% da tela, ou janela de exibição.

Breakpoints

Com Breakpoints vs Sem Breakpoints

Com Breakpoints vs Sem Breakpoints

Breakpoints permitem alterar o layout em pontos pré-definidos, ou seja, ele pode ter três colunas em um desktop, mas apenas uma coluna em um dispositivo móvel. A maioria das propriedades CSS pode ser alterada a partir de um breakpoint para o outro. Não há uma regra universal para onde você deve adicionar breakpoints, isso vai depender do seu conteúdo.

Max e Min-Width

07_Max-width-vx-No-max-width

Max-width vs No Max-width

Aqui é outro ponto que irá ser totalmente dependente do seu conteúdo, em telas menores é ótimo ter o conteúdo que ocupe toda a tela, mas em telas maiores pode não ser a melhor pedida (Não esqueça que alguém pode chegar a ver seu site em uma tela de TV). Nesse ponto os valores de Mas. e Min. auxiliam. Por exemplo. ter uma largura de 100% (width: 100%;) e uma largura máxima de 1200px (max-width: 1200px;) garante que o conteúdo preencherá toda a tela, a menos que essa possua mais de 1200px de largura, nesse caso o conteúdo não mais ocupará toda a tela e ficará contido nos 1200 pixels que você determinou.

Objetos Filhos

Aninhado vs Não Aninhado

Aninhado vs Não Aninhado

Ter um monte de elementos soltos no seu código (position: relative;), um dependo do outro, pode ficar difícil de controlar. Aí entra o truque, agrupar elementos em um único recipiente (wrap) deixa tudo mais compreensível, limpo e arrumado. Aqui unidades estáticas como pixels podem ajudar, sendo úteis para o conteúdo que você não quer que escale conforme o tamanho da tela.

Mobile ou Desktop First

Desktop first vs Mobile first

Desktop first vs Mobile first

Já vi muitas discussões sobre o assunto, não há um melhor modelo de projeto. Seja iniciando a partir de uma tela menor (mobile first) ou uma tela maior (desktop first). Se você iniciar com mobile first terá mais limitações e vai ter que tomar mais decisões. Enfim o importante é você encontrar o que melhor funciona para você e para o seu conteúdo, não fique preso na caixa.

WebFonts vs Fontes do Sistema

Fontes de Sistema vs Webfonts

Fontes de Sistema vs Webfonts

Se for do seu agrado você pode usar fontes diferentes para valorizar o visual do seu site, porque não uma Futura, ou uma Lobster. Se esse é seu desejo use Webfonts. Apenas lembre-se que há um certo preço a se pagar por usá-las cada estilo )normal, light, bold, etc.) e cada família precisa ser baixada e quanto mais fontes e estilos você tiver, mais tempo demora para carregar sua página. Fontes de sistema são muito mais rápidas de carregar (a menos que o usuário não tenha aquela fonte instalada localmente, então ele vai acabar vendo outra fonte que possua no seu sistema.)

Imagens Bitmap vs Vetores

Vetor vs Imagem

Vetor vs Imagem

Vetor ou imagem? Seu ícone tem muitos detalhes e efeitos aplicados? Se sim, utilize um bitmap. Se não considere usar uma imagem vetorial. Para bitmaps opte por JPG., PNG., ou GIF., para vetores o mais recomendado seria um arquivo SVG ou uma fonte ícone. Cada um terá algumas vantagens em relação ao outro, você terá de fazer a melhor opção considerando tamanho do arquivo e suporte de navegadores. Mais uma vez seu conteúdo é quem definirá a melhor escolha.

Design Responsivo sempre.