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

7 de novembro de 2012
responsivo 1

 

Com o avanço das tecnologias de internet móvel, usar a internet no desktop ou notebook tem sido menos freqüente. Os tablets e smartphones fazem dos seus usuários pessoas conectadas o tempo todo. Pra se ter uma ideia, uma pesquisa conjunta do Google e do Instituto Ipsos apurou que, até maio deste ano, 27 milhões de brasileiros já possuíam um smartphone. No mundo, estima-se que o número chegue a 1 bilhão de usuários.

 

É claro que a tela de um smartphone ou tablet é diferente de um desktop ou de um notebook, o que traz o problema: como adequar o design dos sites para diferentes plataformas? Fazer um design para cada uma é inviável, daí a necessidade de uma solução universal.

 

Para o designer Ethan Marcotte, autor do livro “Responsive Web Desgin” essa solução é o design responsivo. Como o próprio nome diz, ele “responde”, ou seja, se adapta a novas situações, como a mudança no tamanho da tela ou do navegador. Nada melhor do que imagens para exemplificar:

inflexioninteractive
oliverrussell

Pra entender como funciona, basta clicar nas fotos acima e entrar nos sites. Depois, tente redimensionar a janela do seu navegador e ver como a página se adapta. Em uma matéria da Revista Wide, Manoel dos Santos, pós-graduado em Design de Interação pelo Instituto Faber-Ludens, resume as principais características do Responsive Web Design:
 

  • Adaptar o layout para a resolução da tela do dispositivo;
  • Redimensionar as imagens de acordo com a resolução e exibir imagens menores quando acessado via dispositivo móvel;
  • Esconder elementos supérfluos em telas menores;
  • Adaptar tamanhos de link e botões de acordo com a forma de interação (mouse ou touch).

O assunto é amplo. Por isso, continuaremos com o assunto em novos posts. Afinal, na internet, novidades não param de surgir.

 

Fontes:

Ig

G1

Web Designers Blog

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>