Design Responsivo: flexibilidade que otimiza a navegação – parte 2

8 de novembro de 2012
responsivo 2

Já mostramos no nosso último post o que é o Design Responsivo e como ele é importante no período atual, onde mídias convergem e a internet chega a diversos dispositivos: cada um com suas particularidades, resoluções, etc.

 

Hoje falaremos sobre a diferença entre o Design Adaptável e o Design Responsivo.  De acordo com o designer Manoel dos Santos em matéria da Revista Wide, já citada no nosso último post, apesar do Design Responsivo se adaptar às diferentes resoluções de tela, há uma diferença entre os sites de fato responsivos e os que são apenas adaptáveis.

 

Segundo ele, o site responsivo é aquele que altera todo o seu conteúdo, em um layout fluido, tentando sempre utilizar o máximo da área disponível para apresentar o conteúdo. Já o site adaptável possui um layout fixo que muda somente nos marcos de resolução determinados nas media queries.

 

Exemplificando:

Abrindo este site, que mostramos também no nosso último post, e redimensionando a janela do navegador, é possível ver que as imagens chegam a mudar de tamanho – sendo substituídas por imagens menores ou em posições diferentes. Este é o Design Responsivo.

designrespons

De forma diferente, este outro site muda apenas a posição das imagens. É o que seria o Design Adaptável.

designadapt

Ao fazer o teste podemos ver como o site responsivo se adapta de forma mais eficiente: não importa o quanto redimensionemos a janela, o conteúdo sempre se encaixa de maneira visualmente agradável – o ideal para as numerosas resoluções diferentes de tela de notebooks, tablets e smartphones.

 

Com o boom da internet móvel, é hora de cada vez mais pensar em formas de transmitir o conteúdo de maneira eficaz entre uma diversidade de dispositivos.  É hora de pensar móvel.

Compartilhe:

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>