9 princípios de design de web responsivo

De 1989 até os primeiros telefones inteligentes apareceram vida para a web. Designer e desenvolvedor eram muito simples. Foi o suficiente para dominar CSS, Javascript e Flash às vezes e entender como funcionavam as tabelas. RWD.

Tudo isso entrou para a história em 2007. Quando a Apple lançou o primeiro iPhone e os usuários começaram a se conectar à internet e visitar páginas da web de um celular: a tela foi infinitamente menor do que o computador, a conexão mais lenta, os pixels começaram a tornar-se percentagens e apareceram muito mais Inglês palavras no jargão.

• Os 9 princípios de RWD

RWD (webdesign responsivo) traz muitas vantagens, mas ao mesmo tempo, muita confusão. Pela frente, temos estes 9 termos que quem projeta ou programas para computadores e celulares devem saber.

• RESPONSIVO VS ADAPTATIVA WEB DESIGN

Pode parecer o mesmo, mas não é. “Sensível” significa que ele tem a capacidade de reagir automaticamente para o que rodeia, dando uma resposta ajustada à situação e “adaptável”, que o servidor detecta o dispositivo e envia o conteúdo adaptado para isso.

A primeira permite que você tenha um projeto único para todo o site, enquanto o segundo irá exigir um design extra para cada dispositivo, fato que aumenta o desenvolvimento e o tempo que deve ser gasto.

• O FLUXO (THE FLOW)

Quando o tamanho da tela é menor, isso torna tudo mais vertical do que horizontal (imagine uma tela de computador e seu celular), que faz com que o conteúdo a ser empurrado para baixo.

• UNIDADES RELATIVAS (RELATIVE UNITS)

A tela não é mais uma tela de computador de mais de 1000 pixels. Agora falamos sobre o projeto da web que funciona bem em qualquer tamanho de tela. Cada celular que é lançado tem seu próprio tamanho de tela e resolução. Continuando a programação com pixels começa a soar absurdo, uma vez que você teria que criar um CSS para cada dispositivo (que é um suicídio).

Os pixels (unidades de estáticas) são convertidos em porcentagens (unidades relativas). Veja a diferença:

• PONTOS DE INTERRUPÇÃO (BREAK POINTS)

Ponto do qual altera o layout do projeto. Pode ser que no computador 3 colunas de conteúdo são mostradas, mas quando eles são passados para uma largura mais estreita, eles são exibidos sob outro e não do lado.

• VALOR MÁXIMO E MÍNIMO (MAXIMUM AND MINIMUM VALUE)

O tamanho máximo e mínimo que pode ocupar esse elemento dentro da tela. É especialmente útil em computadores, desde que em grandes telas se não há nenhum limite, o projeto seria demasiado prolongado e iria ser distorcido. Eles também servem para controlar as margens e estofamentos.

• OBJETOS ANIMADOS (ANIMATED OBJECTS)

Se nós programar com divs que incluem mais conteúdo. Iremos assegurar que a aparência é sempre o mesmo, porém muito altera o tamanho da tela. Podemos transformá-los em um tipo de “pacote” que garante que nós não são movidos:

• A PRIMEIRA MESA DE MOBILE (MOBILE THE FIRST DESK)

É o primeiro conhecido”móvel” ou “primeiro desktop”. É usado para indicar em qual tela você incidirá primeiro para projetar desde a colocação do conteúdo não será o mesmo.

• FONTES DO SISTEMA OU FONTES WEB (SOURCES OF THE SYSTEM OR SOURCES WEB)

Para desenhar você pode usar as fontes já em cada computador (Verdana, Arial, Trebuchet, Courier e mais alguns). Ou arriscar-se a usar uma futura, helvetica, etc. Acho que cada tipografia que não sejam os quatro primeiros significa que você terá que carregar o servidor mais, que retarda o processo de carregamento na web.

• MAPA DE BITS OU VETORES (MAP OF BITS OR VECTORS)

Bitmaps, como o nome indica, são feitas com bits. Quer dizer que se você aumentar o tamanho de arquivo muito, você vai ver pixelizada. Os vetores de evitar esse problema, uma vez que eles são capazes de se adaptar a qualquer tamanho. Para um bitmap usar jpg, png ou gif; Para os vetores, SVG.