|
|
|
100% escolheram Exclusividade de categoria. Já saiu na edição 104.
|
| {{subiu_orn | }} |
{{subiu_num | }} |
{{subiu_orn | }} |
{{subiu_caps | }}
{{subiu_linha | }}
|
|
A tabela que não cabe no polegar
Cinco colunas ficam limpas no desktop e viram rolagem lateral no iPhone; refeita em blocos empilhados, a comparação cabe inteira na tela.
|
A grade que sai da mesa e as fichas empilhadas
|
| ▼ | |
Uma tabela de cinco colunas pede cerca de 600 pixels de largura para cada coluna respirar, a largura padrão de uma edição aberta no computador. A tela do iPhone SE e do iPhone 13 mini entrega 375 pontos de largura lógica (a medida que a interface usa, antes da densidade de pixels da tela). Faltam 225 pontos, e eles precisam ir para algum lugar.
O aplicativo de email resolve a falta de duas maneiras, e nenhuma serve. Alguns encolhem a edição inteira até a grade caber, e o corpo do texto vira letra de bula que pede pinça com dois dedos. Outros mantêm a fonte no tamanho certo e deixam a tabela vazar para a direita, com rolagem lateral (o gesto de arrastar a tela para o lado).
A rolagem lateral quebra um acordo silencioso com quem lê no celular. O polegar desce, de cima para baixo, e ninguém espera ter que arrastar para o lado no meio de um email. A quarta e a quinta coluna ficam escondidas à direita, e boa parte de quem abre nem desconfia que elas existem.
Numa comparação, as colunas escondidas costumam ser justamente as que decidem. Preço, prazo e condição ficam no fim da linha por hábito de planilha, e o leitor vê as opções listadas, vê duas características e sai sem a informação que fazia a grade valer a leitura.
A saída que funciona troca a grade por blocos empilhados. Cada linha da tabela vira um cartão próprio, com a opção em negrito no topo e os atributos descritos um embaixo do outro, cada valor precedido do seu rótulo.
A comparação continua inteira. Muda a direção da leitura: em vez de cruzar o olho na horizontal, quem lê desce, e cada bloco cabe na largura do polegar sem pedir zoom.
A primeira faixa de hoje abre a tabela que motivou a troca, a lista de pacotes de patrocínio da News Makers, e mostra coluna por coluna onde ela quebrava na tela pequena.
Continue lendo ↓
|
|
|
|
|
I O Bastidor
Três pacotes, cinco colunas, uma tela estreita
|
| | |
A tabela de patrocínio da News Makers comparava três pacotes de anúncio: Rodapé, Miolo e Dedicado. As cinco colunas seguiam a ordem em que a operação pensava o produto, e não a ordem em que o anunciante decide: pacote, posição na edição, alcance por envio, preço e prazo de reserva.
No computador, a grade ocupava os 600 pixels da coluna de conteúdo com folga. Cada coluna ganhava cerca de 120 pixels, os rótulos cabiam numa linha e a leitura cruzada funcionava: o olho corria a linha do Miolo e parava no preço sem esforço.
No iPhone, a conta muda de figura. Descontadas as margens laterais de 24 pontos de cada lado, sobram 327 pontos de área útil. Divididos por cinco, dão 65 pontos por coluna, e numa fonte de 16 pixels cabem ali uns oito caracteres por linha.
Oito caracteres não comportam "Alcance por envio" nem "Prazo de reserva". Os rótulos quebravam em três linhas, o cabeçalho ficava mais alto que as linhas de dados e a palavra "Dedicado" era partida ao meio pelo próprio navegador do aplicativo.
Nos aplicativos que preservam a fonte, a tabela simplesmente saía da tela. A área visível mostrava pacote, posição e metade do alcance. O preço e o prazo moravam à direita, fora do enquadramento, sem nenhuma pista visual de que havia mais conteúdo ali.
A informação continuava na tabela, só não estava mais na tela, e para quem lê pelo celular as duas situações dão no mesmo. Uma grade que esconde a coluna do preço vira uma lista de nomes com descrição pela metade. |
A prova chegou pela caixa de respostas. Depois do envio com a tabela, a operação recebeu perguntas de anunciantes querendo saber quanto custava o Miolo, valor que estava impresso na quarta coluna da mesma edição que eles tinham acabado de abrir.
Nenhuma dessas mensagens reclamava da tabela. Elas pediam um dado que o remetente achava ter entregado, e a diferença entre o que foi enviado e o que foi visto só aparecia quando alguém se dava ao trabalho de escrever de volta.
A conferência veio em seguida, com a edição aberta num iPhone SE de verdade, sem simulador. A captura de tela mostrou a grade cortada exatamente onde o preço começava, e a equipe entendeu por que a pergunta se repetia.
A operação também olhou de onde vinham as aberturas daquela lista. O painel da plataforma de envio mostrava a maior parte delas em celular, o que tirava a tela pequena da categoria de exceção e a colocava como o caso principal a resolver.
|
|
|
|
|
II O Que a Gente Fazia
Encolher a letra e torcer
|
| | |
A primeira reação foi a mais comum entre quem monta email: fazer a grade caber à força. A fonte da tabela desceu de 16 para 12 pixels e os rótulos ganharam abreviações, com "Alc." no lugar de alcance e "Pz." no lugar de prazo.
A grade passou a caber na largura, e a leitura piorou. Letra de 12 pixels num celular segurado a um palmo do rosto exige esforço, e as abreviações transferiam para o leitor o trabalho de adivinhar o que cada coluna dizia.
A segunda tentativa foi transformar a tabela numa imagem. Um PNG com a grade desenhada mantinha o layout idêntico em qualquer aplicativo, e por uma semana pareceu a solução definitiva.
A imagem trouxe três problemas novos. Aplicativos que bloqueiam imagens por padrão mostravam um retângulo vazio no lugar do preço. O texto da imagem não podia ser selecionado nem copiado. E, reduzida para a tela pequena, a grade desenhada ficava tão miúda quanto a versão com fonte de 12 pixels.
“A perfeição é atingida não quando não há mais nada a acrescentar, mas quando não há mais nada a retirar.” Antoine de Saint-Exupéry, Terra dos Homens, 1939 |
A terceira tentativa usou media query (a regra de CSS que muda o layout conforme a largura da tela). A ideia era manter a grade no computador e, abaixo de 480 pixels, transformar cada linha em bloco empilhado por instrução de estilo.
No navegador, funcionou. Nos aplicativos de email, o comportamento variou: alguns respeitavam a regra, outros descartavam o bloco de estilo do cabeçalho e exibiam a grade original, sem aviso. A edição tinha dois layouts e ninguém sabia qual deles cada leitor recebia.
As três tentativas tinham o mesmo defeito de origem: todas partiam da grade como formato certo e tratavam o celular como problema de encaixe. Nenhuma perguntava se uma comparação de três opções precisava mesmo de cinco colunas lado a lado. |
Havia ainda um custo de manutenção escondido. Cada ajuste de preço exigia refazer a imagem ou revisar a regra de estilo, e a tabela passou a ser a parte da edição que mais consumia tempo por linha de conteúdo entregue.
A pergunta que destravou o impasse veio de fora do código. Se o anunciante lê no celular e decide pelo preço, por que o preço estava na quarta coluna, a última a aparecer e a primeira a sumir?
| |
|
