12, Jul 2015
Trabalhando com Design Responsivo em HTML5

Em um passado recente, os sites eram desenvolvidos visando atender a um público oriundo, em sua grande maioria, de computadores. Os computadores eram a grande maioria.

A variação existente entre os modelos de monitores utilizados era muito pouca, o que tornava possível a definição de uma estratégia que visava definir uma largura máxima que não comprometesse a experiência dos usuários.

Essa estratégia foi bastante satisfatória até pouco tempo atrás, mas atualmente ela se tornou obsoleta devido ao fato de não conseguirmos mais definir uma largura máxima, em função da existência de uma grande variedade de dispositivos utilizados para navegar na internet.

São celulares, tablets, netbooks, notebooks, computadores, videogames, televisores, etc., o que torna a tarefa de proporcionar uma boa experiência para todos esses tipos de dispositivos um grande desafio.

Como podemos desenvolver um site que atenda a cada um desses milayout Responsivolhares de dispositivos? Uma resposta pode ser a criação de versões especificas e independentes voltadas a atender cada tipo utilizado separadamente.

Porém, a evolução constante e a criação de novos dispositivos a todo momento tornam essa tarefa inviável tanto pelas constantes mudanças quanto pelo altíssimo custo de criação/manutenção.

Buscando uma solução para isso, Ethan Marcotte publicou no site “A List Apart” um artigo com o nome de “Responsive Web Design”. Neste artigo, entre outras coisas, Ethan diz que devemos aceitar que diferentemente do design impresso (restrito a limitação física de uma página ou superfície), no design para internet essas restrições físicas não existem.

Ademais, também não devemos nos sustentar em soluções que restrinjam a internet, pelo contrário, devemos projetar soluções flexíveis e adaptativas. Esse artigo deu origem a uma nova forma de se enxergar o design e o desenvolvimento de sites, resultando no conceito hoje conhecido como: design responsivo.

O design responsivo visa solucionar esse problema apresentando um layout que seja adaptável aos mais diversos tipos de dispositivos existentes hoje no mercado. Essa adaptação acontece através da detecção de algumas características presentes nos mesmos que possibilitam a criação de regras especificas para cada um, possibilitando, assim, a manipulação do layout e oferecendo uma navegação mais simples, intuitiva e contável aos seus usuários de acordo com o dispositivo utilizado.

Tornar um site que não é responsivo em um site responsivo não significa somente diminuir ou aumentar o tamanho dos elementos para que se encaixem nos mais variados tamanhos de tela, pois isso comprometeria toda a experiência do usuário.

Dentre as características essenciais a um site responsivo, destacam-se:

  • · Adaptar o layout da página de acordo com a resolução em que está sendo visualizada;
  • · O layout deve ser fluido e não deve fazer uso de medidas fixas, possibilitando a adaptação natural ao dispositivo em questão;
  • · Simplificar elementos da tela para dispositivos móveis, onde o usuário normalmente tem menos tempo e menos atenção durante a navegação;
  • · Redimensionar as imagens e vídeos para que não sobrecarreguem a transferência de dados e também para que se adaptem ao dispositivo garantindo que os mesmos se apresentem de forma nítida, sem cortes e que não façam uso da barra de rolagem para serem visualizados;
  • · Ocultar ou remover elementos desnecessários nos dispositivos menores;
  • · Adaptar o tamanho de botões, links e menus para interfaces touch onde o ponteiro do mouse é substituído pelo dedo do usuário.

Deixe um comentário

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