Web, tablet e telemóvel

Um ecrã tem três desenhos: web, tablet e telemóvel. Não são três ecrãs diferentes — são o mesmo ecrã, com posições próprias onde for preciso.

Como funciona a herança

O desenho web é a base e tem sempre todos os valores. Tablet e telemóvel guardam apenas diferenças, e herdam em cascata:

web  ->  tablet  ->  telemóvel

Um widget que nunca foi tocado no tablet usa a posição do web. Um que foi ajustado no tablet e não no telemóvel usa, no telemóvel, a posição do tablet.

Isto tem uma consequência prática útil: arrumar o tablet costuma arrumar também o telemóvel, e muitas vezes só é preciso ajustar dois ou três widgets no fim.

Porque é preciso ajustar

As 48 colunas existem nos três dispositivos — o que muda é a largura de cada coluna:

Dispositivo	Régua	Uma coluna
Web	1280 px	26,7 px
Tablet	768 px	16 px
Telemóvel	390 px	8,1 px

Quatro indicadores de 12 colunas ficam com 320 px cada no web, 192 no tablet e 97 no telemóvel. Noventa e sete píxeis não chegam para um número com um rótulo por cima.

É exactamente isto que se vê quando se muda para telemóvel sem ter ajustado nada:

Os indicadores sobrepõem-se, o texto corta e a tabela fica ilegível. Não é um defeito: é o desenho web aplicado a 390 px. A solução e dar-lhe um desenho próprio.

Como se ajusta

1. Escolha o dispositivo na barra de ferramentas do editor.
2. Mova e redimensione como faria no web.
3. Cada widget que tocar passa a ter uma posição própria nesse dispositivo; os outros continuam a herdar.

O editor mostra a tela a largura de referência do dispositivo escolhido, para que veja o que o utilizador vai ver.

Empilhar em vez de espalhar

A transformação mais comum e passar de linhas para coluna:

	Web	Tablet	Telemóvel
Quatro indicadores	4 x 12 colunas	2 x 24 colunas	4 x 48 colunas
Dois gráficos	24 + 24	24 + 24	48 e 48, um debaixo do outro
Tabela	28 colunas	48 colunas	48 colunas

Empilhar significa dar 48 colunas a cada widget e escalonar o Y. Como o eixo vertical é em píxeis, é preciso somar as alturas: se o primeiro widget está em Y=100 com ALT=200, o seguinte começa em Y=310 para deixar dez píxeis de folga.

Esconder num dispositivo

Cada widget pode ser escondido num dispositivo. É a ferramenta certa para:

• uma tabela de quinze colunas que só faz sentido no computador;
• um texto explicativo que ocupa espaço demais no telemóvel;
• um gráfico de detalhe que duplica o que o indicador já diz.

O contrário também funciona: um widget escondido no web e visível no telemóvel dá um resumo compacto que só aparece no telefone.

A propriedade escondido herda pela mesma cascata: escondido no tablet fica escondido no telemóvel, a não ser que lá seja explicitamente mostrado.

Esconder não e apagar

Um widget escondido continua no documento, continua a carregar a sua consulta e volta a aparecer se o dispositivo mudar. Para o eliminar, apague-o.

Verificar o resultado

O editor mostra o desenho, mas quem confirma é o dispositivo real. Duas formas práticas:

• reduzir a largura da janela do navegador na vista do dashboard;
• abrir o link público no telemóvel, se o dashboard estiver publicado.

Uma ordem de trabalho que poupa tempo

1. Termine o web primeiro. Ajustar tablet e telemóvel a meio do desenho é trabalho a dobrar.
2. Passe ao tablet e resolva por faixas. Normalmente basta transformar linhas de quatro em linhas de dois.
3. Va ao telemóvel e empilhe. Quase tudo com 48 colunas.
4. Esconda o que sobra. Se um widget não ajuda num ecrã pequeno, tirar é melhor do que encolher.