Então, sabe quando alguém te pede pra fazer um layout pra um site ou até mesmo um aplicativo e você tem que explicar o que é um design responsivo? E você acaba se enrolando todo, confundindo nomes e termos, chamando uma coisa de outra e no final ainda não conseguiu explicar nada?
Quem já passou por isso sabe o quanto é complicado explicar algo que, para profissionais da área, é extremamente comum mas que poucos clientes tem conhecimento.
Para facilitar essa comunicação a Froont, empresa que provê uma ferramenta especifica para desenvolvimento de sites responsivos, criou uma serie de GIF's animados que explicam alguns conceitos de design.
Muito parecidos porém diferentes. No modelo responsivo o conteúdo se adapta a medida que a tela muda de tamanho enquanto no modelo adaptativo o conteúdo tem certos tamanhos pré-definidos que ele pode assumir. Ambas as abordagens se complementam e não existe certo ou errado. Deixe que o conteúdo decida.
A medida que telas se tornam menores o conteúdo passa a ter menos espaço vertical e começa a empurrar o conteúdo. Pode ser bem complicado de se utilizar se você estiver acostumado a usar valores fixos como pixels e pontos, mas faz todo sentido quando você desenvolve experiencia.
Unidades Relativas vs Unidades Fixas
O quadro (canvas) pode ser um desktop, um celular ou um tablet. A densidade de pixels também pode variar, por isso precisamos de unidades que sejam flexíveis e funcionem em qualquer lugar. Por isso unidades relativas só tao uteis, um elemento com 50% de largura sempre vai ocupar 50% do espaço disponível.
Breakpoints (Pontos de controle)
Breakpoints permitem que o layout mude de forma definida, por exemplo, um conteúdo disposto em 3 colunas no desktop quando visualizadas em um dispositivo móvel são exibidas em apenas 1 coluna. Use com cautela – É difícil entender o que está errado quando você não consegue entender o que interfere com o que.
As vezes é interessante que o conteúdo ocupe a largura da tela por completo mas, por exemplo, o mesmo conteúdo em um computador não precisa ocupar todo o espaço disponível. Exatamente neste senário as propriedades de largura máxima e mínima entram em cena. Por exemplo um conteúdo com 100% de largura e largura máxima de 200px significa que este conteúdo irá ocupar toda a tela desde que sua largura não ultrapasse 200 pixels.
Quando falamos sobre breakpoints vimos que é possível termos elementos de reordenando a medida do necessário. Ter vários elementos dependendo uns dos outros é realmente complicado de manter controle do que está acontecendo na tela, por isso envolver elementos em contêineres ajuda a manter a organização limpa e arrumada. Geralmente este é o melhor lugar para se utilizar unidades estáticas especialmente para conteúdo que você não gostaria de redimensionar, como logos e botões.
Desktop primeiro vs Móvel primeiro
Tecnicamente não existe muita diferença se um projeto é feito de uma tela menor para maior (Móvel primeiro) ou vice versa (Desktop primeiro). Mesmo assim pode gerar complicações dependendo de como você decide começar. Normalmente começamos ambas as partes ao mesmo tempo, então vá e descubra qual a melhor opção para você
Fontes do sistema vs Webfonts
Especificamente para websites quando queremos uma fonte customizada podemos usar as fontes do próprio sistema operacional ou fontes customizadas que devemos disponibilizar. A principal diferença vem do fato que webfonts devem ser baixadas para serem usadas então abusar na quantidade de fontes customizadas pode deixar o site bem lento neste caso fontes do sistema são bem mais rápidas em comparação, exceto quando o sistema não possui aquela fonte, neste caso o sistema escolhe uma fonte padrão.
Vetores vs Imagens bitmap
Seu ícone possui muitos detalhes e efeitos elaborados? Caso sim, use bitmap. Se não, considere usar uma imagem vetorizada. Para bimaps escolha jpg, png ou gif, para vetores a melhor escolha seria SVG ou uma fonte de ícone. Cada uma tem seus benefícios e inconvenientes. Entretanto tenha em mente o tamanho -- nenhuma imagem deve ser publicada sem otimização. Vetores são comummente pequenos, mas browsers mais antigos não os suportam. Também se seu vetor possui muitas curvas ele pode ser mais pesado que uma imagem, então escolha com cuidado.
ellievsbear
amandla
stormborns
romaincrisis
areudirty
