Por que eu devo ler este artigo:Esse artigo tem o objetivo de dar ao leitor uma compreensão geral e completa sobre as técnicas e conceitos mais importantes para o planejamento e desenvolvimento de sites responsivos.

Através da criação de um exemplo de interface e menu de navegação responsivos, nós abordaremos desde os conceitos de desenvolvimento móvel, mobile first, as meta tags que o HTML5 usa para incutir responsividade, até um comparativo com a forma como esse tipo de recurso era implementado antigamente.

Veremos ainda também o que são media types, breakpoints e como eles se encaixam no ciclo de vida da criação de projetos totalmente responsivos.

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 milhares 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.

Mobile First

O Mobile First é uma estratégia de desenvolvimento que diz que todo o planejamento de um projeto web deve iniciar pelos dispositivos móveis e somente depois gradualmente para os outros dispositivos, até chegar nos notebooks e desktops.

Em um passado recente, a prática de planejar e desenvolver projetos web voltados para dispositivos como computadores era bastante comum, até por questões históricas, para atender a demanda dos computadores, e onde se concentrava a web até então.

Começar pelos dispositivos móveis permite que a atividade de priorização do conteúdo seja feita de forma mais intuitiva, uma vez que em um dispositivo móvel somente as principais informações e funcionalidades de um projeto web serão disponibilizadas por conta do pouco espaço disponível e também pelas diferentes condições de uso e necessidades.

O processo de criação dos layouts também é beneficiado pelo uso da estratégia. Primeiramente serão produzidas versões mais simples voltadas para os dispositivos móveis, estas versões irão conter somente as informações principais, pois não há espaço disponível o suficiente para exibir tudo que teríamos na versão desktop.

Outrossim, se isso for um pré-requisito por parte do cliente, então uma estratégia de design, estruturação e usabilidade deverá ser iniciada visando reduzir as dificuldades por trás da mesma.

Posteriormente serão produzidas versões mais complexas voltadas para outros dispositivos, estas versões poderão conter mais informações de acordo com o espaço disponível proveniente de cada um.

Podemos dizer que para os dispositivos móveis é essencial que o layout seja objetivo e focado totalmente no conteúdo.

Segundo a 9ª pesquisa TIC Domicílios divulgada pelo CETIC.br (Centro Regional de Estudos para o Desenvolvimento da Sociedade da Informação), somente em 2013 o número de brasileiros que acessaram a internet por meio de celular ou tablet atingiu 52,5 milhões, o que corresponde a 31% da população do país.

O percentual mais que dobrou nos últimos 2 anos, quando em 2011 esse número era apenas de 15%.

A Necessidade de Adaptatividade

Como a web em landscape (modo paisagem de visualização) torna-se cada vez mais complexa, está se tornando extremamente importante oferecer experiências web sólidas para um crescente número de contextos. Felizmente, o web design responsivo dá aos criadores web algumas ferramentas para fazer layouts que respondam a qualquer tamanho de tela.

Desde grades fluídicas, imagens flexíveis até consultas de mídia para obter bons layouts, independentemente do tamanho de dimensões da tela do dispositivo.

No entanto, o contexto móvel é muito mais do que apenas o tamanho da tela. Os nossos dispositivos móveis estão conosco onde quer que vamos, desbloqueando novos casos de uso todos os dias. Porque temos constantemente nossos dispositivos móv ...

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo