Nove princípios básicos do Design responsivo
Autor: Claudia Braga | Publicado: 2014-11-14T15:24:00-02:00




O Webdesigner americano&nbsp;Sandijs Ruluks escreveu um artigo bem interessante sobre a diferença entre design adaptativo versus responsivo. O que chama bastante atenção são os gifs animados que ilustram bem o ganho de um sobre o outro.&nbsp;

Design responsivo é uma ótima solução para nossos problemas multi- telas. Projetar layouts para desktops e mobile também são coisas do passado, à medida que mais e mais gadgets podem abrir um site.
Por isso, vamos esclarecer alguns princípios básicos de web design responsivo, para abraçar a fluidez, em vez de combatê-la .Por isso vamos nos concentrar em layouts.



Responsivo vs web design Adaptativo&nbsp;

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







O fluxo

Como os tamanhos de tela tornam-se menores, o conteúdo começa a ocupar mais espaço na vertical e abaixo nada será empurrado para baixo, chama-se o fluxo. Isso pode ser complicado de entender se você está acostumado a desenhar com pixels e pontos, mas faz total sentido quando você se acostuma com isso.











Unidades relativas



A tela pode ser um desktop, tela do celular ou de outro dispositivo. A densidade de pixels também pode variar, por isso precisamos de unidades que sejam flexíveis e funcionem em todos os lugares.

É aí que unidades relativas como porcentagens vEmm a calhar. Assim, fazer alguma coisa 50% ampla significa que sempre vai tomar a metade da tela (ou janela de exibição, que é o tamanho da janela de navegador aberto).









Breakpoints



Breakpoints permitem mudar o layoutem pontos pré-definidos, ou seja, ter três colunas em um desktop, mas apenas uma coluna em um dispositivo móvel. A maioria das propriedades CSS podem ser alteradas de um breakpoint para outro. Normalmente o local da coloção vai depender do conteúdo. Se uma sentença de quebra, você pode precisar adicionar breakpoint. Mas procure usá-los com cuidado.














Valores Max e Min&nbsp;




Às vezes, é ótimo que o conteúdo ocupe toda a largura da tela, mas em um dispositivo móvel esse preencher a toda a largura da tela, muitas vezes não faz muito sentido. É por isso que valores Min/Max valoriza ajudam.

Por exemplo, ter largura de 100% e Max largura de 1000px significaria que o conteúdo irá preencher a tela, mas não passar por cima de 1000px.







Objetos aninhados



Lembre-se a posição relativa? Ter um monte de elementos, dependendo uns dos outros seria difícil de controlar, portanto, elementos agrupados em um recipiente torna-se uma maneira mais compreensível, limpo e arrumado.

Este é o lugar onde as unidades estáticas como pixels podem ajudar. Eles são usados para o conteúdos que você não quer redimensionar, como logos e botões.







Mobile ou Desktop first?



Tecnicamente, não há muita diferença, se um projeto é iniciado a partir de uma tela menor que um (mobile first) maior ou vice-versa (desktop first). No entanto, ele adiciona limitações extras e ajuda a tomar decisões, se você começar com o mobile first.

Algumas pessoas começam a partir de ambas as extremidades de uma vez, então veja o que funciona melhor para você.





Webfonts vs System fonts



Quero ter uma Futura ou Didot em seu site? Então use WebFonts. Mas lembre-se que cada uma será baixada e quanto mais você tiver no site, mais tempo levará para carregar a página.

Fontes do sistema (System fonts), por outro lado, são muito rápidas, exceto quando o usuário não as tem localmente, fazendo-o cair de volta à fonte padrão.







As imagens bitmap vs Vetores



Será que o seu ícone tem muitos detalhes e efeitos aplicados? Se sim, use um bitmap. Se não, considere o uso de uma imagem vetorial.

Para bitmaps use um jpg, png ou gif, para vetores a melhor escolha seria uma SVG, EPS ou uma fonte ícone. Cada um tem algumas vantagens e algumas desvantagens.

No entanto, tenha em mente o tamanho - sem imagens deve ir on-line sem otimização. Vetores, por outro lado, muitas vezes são pequenas, mas alguns navegadores mais antigos não irão suportá-lo.

Além disso, se ele tem muitas curvas, pode ser mais pesado do que um bitmap, então escolha sabiamente.







Fonte: Blog Froont