Blog da iSimples

Blog da iSimples

WEB, Tecnologia e café.

Fale Conosco

9 GIFs que explicam de forma brilhante o Design Responsivo
postado em 27/01/2016

Voltar


Não sabe se um site é responsive ou meramente adaptativo? Estes GIF's irão esclarecer.

O que é design responsivo? Algumas pessoas devem no mínimo entender que isso significa que um site funcionará tão bem em um desktop quanto em smartphones, mas há muito mais do que isso, levando à confusão generalizada.



Mas os princípios de design responsivo não são difíceis de entender, e graças a esta incrível coleção de GIFs animados da Froont, uma empresa de São Francisco na Califórnia especializada no desenvolvimento ferramentas para criação de projetos responsivos. Gaste apenas alguns minutos com estes GIFs, então você vai saber indentificar facilmente bem a diferença entre um site responsivo e um adaptativo.



Os GIFs abaixo mostram muitos dos princípios básicos de design responsivo.



 





Projetos responsivos respondem de forma fluida a ação de redimensionamento da tela ou janela, enquanto o adptadivo responde de forma mais "seca".



 



 





Por exemplo, ao posicionar os elementos usando pixels você terá um site concebido para um determinado tamanho de tela e possivelmente em outra tela menor isso se comportará de forma estranha.

Use unidades relativas, como por cento da tela, em vez de unidades estáticas como pixels .



 



 





 



Com os tamanhos de tela tornando-se menores, o conteudo começa a ocupar mais espaço vertical e com isso os elementos após o conteúdo são empurrados para baixo, no responsive a propriedade 'flow' cuida bem disso.



 



 





Os 'breakpoints' permitem que os elementos mudem de posição para pontos pré-definidos, ou seja, ter três colunas em um desktop, mas apenas uma coluna em um dispositivo móvel.



 



 





'Elementos aninhados',funcionam da forma que ao redimensionar uma tela, todo um grupo se move junto ao invés de cada um individualmente.



 



 





O contéudo ocupar toda a largura de uma tela fica perfeito em disposivitos móveis, mas imagine o contéudo ocupar 100% de largura de uma tela de 40". Para isso temos o 'Max width'.



 



 





Tecnicamente não existe muita diferença se um projeto é iniciado a partir de uma tela menor (Mobile First) ou uma tela maior (Desktop First) ou vice-versa. Mas se você usar o 'Mobile First', certamente terá algumas limitações iniciais.



 



 





Seu icone tem muitos detalhes e efeitos? Use bitmap, caso contrário use vetor. O vetor pode mais propriamente se adaptar a diferentes resoluções.



 



 



iSimples Internet Inteligente
Rua Osvaldo Cruz, 01
Ed. Vidal - 10º andar - sala 101/102
Centro - Araçatuba/SP
(18) 3301.7336

www.isimples.net