Mobile (mais ou menos) first

por Antonio Hermida

A maior parte das publicações digitais têm como base a versão impressa e, nestas, o projeto gráfico representa um conjunto de escolhas que conversam diretamente com aquele conteúdo. E quando digo “conversam com aquele conteúdo”, não me refiro apenas aos elementos narrativos, mas ao conjunto de elementos que compõem o livro em si. Em suma, as definições de um projeto gráfico também abrangem o orçamento disponível e isso se reflete na escolha do papel, cores, tamanho da fonte, entrelinhas, margens, e assim por diante.

Quando passamos ao digital, certas limitações orçamentárias desaparecem enquanto outras, as limitações tecnológicas, abundam. Se por um lado não precisamos, necessariamente, usar as imagens em PB, por exemplo, torna-se obrigatório testar o contraste das cores nas telas monocromáticas dos e-readers [1].

Uma parcela expressiva das limitações enfrentadas pelos ebooks reside no fato de cada app renderizar o código interpretado (quando um pouco mais complexo) à sua maneira [2], impelindo-nos a buscar fluidez, coerência e identidade gráfica diante de um cenário com  variáveis que vão além de tamanho e contraste entre telas. Vida que segue.

Bases replicáveis e o Mobile + ou – first

A primeira coisa que definimos por aqui foram os padrões gerais e um manual de estilos [3] para fornecedores que abarca tudo que é comum a todos os ebooks assim como a maneira como o código deve ser declarado para evitar surpresas [4]. Apesar disso, cada livro ou coleção possui suas próprias especificidades. Por exemplo, as apostilas do SENAI têm um template padrão com pouquíssima variação, para tal, mantenho uma pasta com as fontes (testadas), CSSs já preenchidos e HTMLs institucionais que serão usados sempre. O mesmo vale para coleções. Tendo esses arquivos à mão, fica fácil simplesmente adicionar os conteúdos da pasta “Base-SESI-Colec_Sombra” e apenas mover os arquivos dentro do epub para seus respectivos pontos de exibição.

A plataforma de leitura que mais cresce ao longo dos últimos anos é o celular e, em decorrência de seus tamanhos e resoluções, repensar as proporções e distribuição de conteúdo para essas telas é, no mínimo, necessário.

Alguns pontos que considero fundamentais ao redefinir as proporções de ebook são:

• Tamanho máximo para as fontes
  • ex.: Capitulares, títulos, subtítulos, etc. (eu dificilmente uso algo acima de 2em).

• Tipo de fonte
  • Fontes embutidas podem variar de tamanho em proporção bem distinta da base de redimensionamento de fontes do dispositivo.
    Dessa forma, uma fonte que esteja com o tamanho de 2em, por exemplo, pode parecer muito menor do que a fonte padrão do app e, como nem sempre o usuário marca a opção “fonte da editora”, pode ser as coisas fiquem bastante quebradas.

• Soma das alturas de margens (levando em conta que a valor básico para tamanho  do texto vai influenciar a escala de valores) em páginas que devem ser exibidas como bloco
  • ex.: Folha de rosto, imagens com legendas, fichas catalográficas.

• Legibilidade
  • Aquela fonte com light ou com as serifas bem finas podem dificultar a leitura.

• Coerência de valores
  • Para manter a harmonia do conjunto de elementos, o ideal é que a base de valores entre espaçamentos, recuos e tamanho das fontes sejam definidos na mesma escala.

• Tabelas
  • Quando a reorganização de elementos não é possível e nos resta usar uma imagem, que esta esteja em uma boa resolução para o uso do zoom.[5]

• Alinhamento: não force o alinhamento em justificado.

“OK,OK, Hermida, entendi… mas esse título ficou meio sem pé nem cabeça, né não? O mobile tá vindo depois do impresso…”

Bem… sim… quer dizer, mais ou menos. O que vejo como demanda urgente é que todo projeto de ebook tenha em seus padrões primários o mobile como prioridade. Afinal, via de regra, se um ebook se comportar bem nos apps de leitura para celular, dificilmente não estará funcionando bem num e-reader. Já o caminho contrário…

[1] Um pouco sobre cores: http://colofao.com.br/772/as-capas-e-suas-gradacoes-de-cores-nas-telas-e-ink/
[2] Exemplo ilustrativo:
https://medium.com/@antoniohermida/a-crueza-digital-dos-irm%C3%A3os-grimm-blog-da-cosac-naify-604000ff279a
[3] +Sobre manual de estilos http://colofao.com.br/675/porque-um-codigo-bom-e-um-codigo-limpo/
[4] Um código bom é um código limpo
http://colofao.com.br/675/porque-um-codigo-bom-e-um-codigo-limpo/
[5] Exemplos de reorganização de conteúdo:
https://medium.com/@antoniohermida/pixels-fatiados-blog-da-cosac-naify-21e6b47d9d96
https://twitter.com/antonio_hermida/status/894898763805843456

Antonio Hermida trabalha com o desenvolvimento de livros digitais desde 2009 tendo passado pela editora Zahar, Simplíssimo Livros e Cosac Naify. Atualmente é Editor de Mídias Digitais das editoras SENAI e SESI-SP. [+] hermida.info