5 Principais tipos de responsividade

Opa, beleza?!

Hoje em dia temos diversos tipos de dispositivos de tamanhos variados, portanto é indispensável para um sistema, site, blog, para qualquer ambiente web de modo geral, a utlização de responsividade para adequar a estes diversos tamanhos de telas.

Como muita gente diz, e nesse contexto eu concordo, "Uma imagem vale mais que mil palavras", então vamos à um resumo de 5 tipos de responsividade de layout com poucas palavras e imagens explicativas.

Eu convido à todos a lerem o artigo Padrões de Web design responsivo, escrito por Pete LePage , fonte de onde tirei estes conceitos. O artigo do Pete, deixam exemplos de sites, código fonte e a definição de cada tipo de responsividade muito bem explicados.

Outra dica sobre o assunto é visitar o artigo do Luke Wroblewski, fonte original e referenciado no artigo do Pete.

Mostly fluid

• Possui um limite máximo de tamanho do layout, passando do limite, somente as margens laterais são adequadas;
• Em telas menores as grids se organizam de colunas para linhas;
• Possuem poucos pontos de interrupção, normalmente possui um ou dois pontos de interrupções. No exemplo abaixo são dois pontos.

Column drop

• Em telas grandes o conteúdo é organizado em colunas;
• Para as telas menores as grids vão se organizando em linhas de acordo com os tamanho dos conteúdos;
• Os pontos de interrupção varia de acordo com os conteúdos das colunas.

Layout shifter

• Diversos pontos de interrupção;
• Customização de componentes conforme o tamanho da tela.

Tiny tweaks

• Poucas mudanças no layout conforme os diferentes tamanhos de telas;
• Quando há mudanças, geralmente são relacionadas às fontes ou ajuste de imagens.

Off canvas

• As adequações do layout envolve em remoção de grids menos relevantes.

A imagem do thumbnail foi criado por Mudassar Iqbal, Pixabay