Os dois tipos de zoom do navegador

Desde o início da Web, pelo menos desde o Netscape Navigator 4.x, é possível redimensionar o texto em uma página da Web. Normalmente, isso é feito por meio do menu Exibir.

netscape 4.x Exibir, menu Fonte

Isso era bom nos primeiros dias primitivos da Web, quando os layouts de página eram simples e não sofisticados. O senhor quer que a fonte seja três vezes maior? Não tem problema! Aumente-a até seus olhos sangrarem; é improvável que o senhor quebre o design, pois há muito pouco design de forma alguma.

yahoo-homepage-circa-1998.png

Mas isso foi muito antes de a Web ter se tornado uma plataforma para aplicativos completoscom designs complexos, densos e quase semelhantes a GUIs.

A orientação aceita para web design é que o senhor deve produzir layouts de páginas da Web que funcionem em:

  1. o tamanho padrão da fonte (obviamente)
  2. um tamanho abaixo o tamanho padrão da fonte
  3. um tamanho acima o tamanho padrão da fonte

Concordo, e o senhor deve testar isso em seus próprios sites. Os equivalentes práticos do teclado na maioria dos navegadores são:

Ctrl + 0 Redefinir o tamanho da fonte para o padrão

Ctrl + + Aumentar a fonte em um tamanho

Ctrl + - Tornar a fonte um tamanho menor

(sim, mantendo pressionada a tecla Ctrl e depois rolar a roda de rolagem do mouse também funciona, mas nenhum programador de verdade usaria isso.)

É importante permitir que o usuário controle sua experiência de navegação. Mas acho que o o método tradicional de dimensionamento do navegador somente para fontes é uma solução cujo tempo chegou e se foi. Há uma maneira melhor. O Opera foi o primeiro navegador a introduzir o zoom de página inteira como uma alternativa ao dimensionamento tradicional de fontes, mas é no Firefox 3 que a maioria das pessoas realmente o experimenta. De fato, no Firefox 3, é o padrão modo de dimensionamento de página.

Menu Exibir, Zoom do Firefox 3

Observe que a opção “Zoom Text Only” está desmarcada. E por um bom motivo. Compare o senhor mesmo. Aqui está a página inicial do Digg usando o estilo antigo de dimensionamento de fontes do Netscape 4.x.

Escala de fontes do navegador: Padrão

digg-text-zoom-default-thumb.png

Dimensionamento de fontes do navegador: Tamanho +1

digg-text-zoom-plus-1-thumb.png

Dimensionamento de fontes do navegador: Tamanho +2

digg-text-zoom-plus-2-thumb.png

O Digg segue a regra prática de design que sugeri acima: ele é dimensionado para o tamanho de fonte +1, mas, além disso, todas as apostas estão canceladas. Com as fontes em +2, o menu superior está amassado, a caixa de pesquisa está cortada e os números do Digg estão se espalhando pelas caixas. O elemento de navegação “mais recente” desapareceu completamente! Agora compare isso com o método mais recente de zoom de página inteira:

Escala de zoom de página inteira do navegador: Padrão

digg-page-zoom-default-thumb-256.png

Escala de zoom de página inteira do navegador: Tamanho +1

digg-page-zoom-plus-1-thumb-256.png

Escala de zoom de página inteira do navegador: Tamanho +2

digg-page-zoom-plus-2-thumb-256.png

Embora a página fique mais larga, o método de zoom de página inteira tem enormes vantagens:

  1. O zoom de página inteira funciona em quase todas as páginas da Web do mundo, sem nenhuma alteração por parte dos web designers
  2. O zoom de página inteira é muito maior, longe além dos tamanhos +1/-1 que o senhor pode razoavelmente esperar das abordagens tradicionais de dimensionamento de fontes do navegador.

Para provar que o zoom de página inteira é dimensionado como ninguém, aqui está uma captura de tela que fiz do Digg dimensionada para caber em toda a largura do meu monitor 1920 x 1080. Em comparação, aumentar as fontes além de +2 resulta em uma bagunça ilegível e confusa.

Sinceramente, não vejo muita utilidade para o dimensionamento de fontes tradicional do navegador. Ele é cada vez mais frágil na Web de hoje. Gostaria que mais navegadores seguissem o exemplo do Firefox 3 e do adotassem o zoom de página inteira como o novo método padrão de dimensionamento de página.