Adaptando um sistema aos dispositivos móveis na prática, com CSS3 e Javascript

  1. Utilizaremos Javascript para ativar esta camada de visualização através de um overlay (uma sobreposição das telas).
  2. Utilizando as facilidades do Flexbox layout module para adaptar o layout da barra lateral em um overlay com uma navegação vertical, amigável nos dispositivos móveis.

Pegando um estudo de caso

Um dos problemas quando nos deparamos com uma necessidade de oferecer uma versão mobile de qualquer página web, é que quando procuramos referências, elas muitas vezes são versões simplistas e teóricas, então vou focar aqui numa situação real, não para resolver o seu problema específico, mas para ajudar a você pensar melhor quando se deparar com um caso específico seu em que você precise repensar seu layout sem grandes mudanças, mas sim desenvolver em novas “camadas”, muitas vezes sem muitas complicações.

Uma maneira de adaptar duas colunas

Quando você tem espaço em uma tela maior, geralmente na resolução acima de 480px, é natural que haja mais espaço para o conteúdo e em mais colunas, geralmente uma de navegação e outra com o conteúdo. No mobile, precisamos de uma experiência diferente, ainda mais para plataformas que lidam com muito conteúdo, como exemplo abaixo de uma carteira online de um sistema financeiro.

Um modelo de layout em duas colunas de uma carteira virtual utilizando CSS e layout.

Adaptando para mobile

Temos o código aqui totalmente desktop:

Transformando a barra lateral em um Overlay

A solução que vamos adotar aqui é transformar a barra lateral, que ocupa parte da tela em uma coluna própria no desktop em uma tela fixa e criar um efeito de overlay. O usuário então irá navegar pelas opções em uma navegação vertical, típica de celular, graças ao Flexbox.

Retirando elementos fixos do layout.

Para trabalhar com desenvolvimento mobile, uma das primeiras regras é mudar o paradigma do layout fixo. Devemos evitá-lo ao máximo. A primeira vista pode parecer mais complicado, ainda mais quando temos que lidar com fontes externas que exigem Iframe, como serviços de propaganda, que muitas vezes não são nem um pouco amigáveis quando você quer desenvolver de forma responsiva.

Layout adaptado, agora os breakpoints

Depois do layout adaptado, temos que decidir pelos Breakpoint, que é bem abordado neste post do Sérgio Lopes. E isto não significa que temos que decidir um tamanho pequeno, 320px, por exemplo, para a tela “quebrar”, o breakpoint é um ponto de quebra do layout, como o próprio nome já diz. No desenvolvimento Mobile First, pensamos no breakpoint quando a página precisa criar uma nova acomodação, depois de crescer fluidamente.

Resultado final:

Temos abaixo então o resultado:

http://codepen.io/alexanmtz/pen/apKZxN

Overlay

Agora que temos o layout dividido no breakpoint, é hora de colocar os estilos do overlay, e que irá ditar como o layout vai ficar quando o usuário acionar com um botão no celular:

Com o Flexbox podemos adaptar o layout nos celulares de uma forma elegante

Graças aos novos recursos do Flexbox, que é muito mais bem suportado hoje em dia pelos Browsers dos aparelhos, nos possibilita usar recursos novos, e juntamente com os Media Queries, conseguimos unir os dois para oferecer uma melhor (e realista) experiência no mobile. Adaptamos ao contexto, que é bem diferente e precisamos de novas formas de oferecer nossa funcionalidade bem adaptada.

http://codepen.io/alexanmtz/pen/apKZxN

No fim, atenda ao seu público

Este caso, como mencionei antes, faz parte de uma página de gerenciamento dos guias da Truppie, que possuem uma “carteira virtual” para gerenciar as reservas dos passeios. Inicialmente, a página seguiu este modelo e com o passar do tempo percebemos que o cliente visualizava principalmente no celular, então seguimos nesta linha para adaptação nos dispositivos móveis sem modificar a visualização já consolidada no Desktop.

--

--

Citizen Scientist and Software Engineer, looking for the limits beyond mind and machine exploring the world

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store