O design responsivo é uma área que continua sempre a renovar-se e a trazer novas pistas de reflexão, frequentemente acompanhadas por exemplos concretos de código para demonstrar a relevância delas. Vamos nos concentrar hoje na questão das guias, da legibilidade e no comprimento das linhas de texto, nos diferentes usos dos dispositivos e no tamanho do ecrã deles, antes de dar uma olhada no que o futuro nos prepara.
Usamos por vezes termos que parecem pertos mas que cobrem realidades diferentes, como a semelhança aparente dos designs fluídos e elásticos. Um design fluído expressa-se em percentagem, é o tamanho da viewport que define a exibição. Um design elástico expressa-se em em, é a escolha pelo usuário, isto é, os seus parâmetros de exibição como o tamanho da fonte ou o nível de zoom, que são predominantes.
As guias podem exibir uma grande quantidade de conteúdo de uma só vez na mesma página navegando horizontalmente. É aí que está o busílis quando se tenta adaptá-las a uma experiência móvel, onde o espaço horizontal é frequentemente reduzido. O que fazer neste caso?
Podemos passar as guias em itens de menu. Onde uma página exibia numa grande quantidade delas, o resultado é uma série de páginas (ou de cartas/div/camadas empilhadas na mesma), com somente a primeira visível. Desta maneira, as guias tornam-se acordeão. A solução do Chris Coyer permite separar o menu das guias do menu de navegação principal para que eles não entrem em conflito.
O idioma inglês tem duas palavras para conceitos diferentes que o português traduz geralmente numa só: a legibilidade. Em inglês, readability (ou lecturabilidade) é relativa a compreensão do texto e do significado dele (podemos calcular diferentes fórmulas de legibilidade, incluindo para a língua portuguesa). A respeito da legibility (legibilidade), aborda a dimensão física da legibilidade: qual fonte usar para que cada letra (ou glifo) seja inequívoca durante a leitura, de modo que a leitura seja fácil. Estamos a falar aqui desta legibilidade. O artigo do Sandro Lopes, legibilidade vs. lecturabilidade, explica isto de uma maneira mais detalhada.
A velocidade de leitura de um leitor casual é equivalente entre 35 e 95 caracteres por linha. Porém, o comprimento otimo das linhas varia entre 50 e 75 caracteres por linha.
Classicamente, os breakpoints, ou limiares de comutação, de su design podem ser restringidos pela largura do ecrã usado (embora o espaço útil nem sempre seja este).
Outra abordagem é a de ter em conta o seu conteúdo para definir os seus breakpoints, muitas vezes larguras de imagem, mas o comprimento de suas linhas de texto também pode ser integrado nas suas fórmulas dependendo do seu tipo de conteúdo. Marie Guillaumet chama isto web design proporcional, as proporções dos textos e dos blocos mantendo-se sempre.
Existem várias ferramentas para tornar a sua vida mais fácil sobre a exibição desta margem de manobra de optimização dos comprimentos de linhas.
Chris Coyer (outra vez ele) propõe um bookmarklet bem prático para mostrar esta fronteira de 25 caracteres onde pôr o seu breakpoint.
FlowType é um script javascript para redimensionar o tamanho da fonte e a altura da linha de um texto que cai dentro da largura definida por seu elemento pai.
Note-se também que a altura da linha (line-height) definida sem unidade de medida (nem px, nem em) pode ser lido como um multiplicador para todos os elementos descendentes. Removando a unidade, os cálculos complexos para saber a altura relativa das linhas dos elementos em cascata desaparece magicamente.
Depois, a tipografia responsiva entra em jogo: altura das linhas, tamanho das fontes, hifenização automática…
Extrapolar a distância de leitura a partir do tamanho do ecrã é outra opção que está disponível para você. Entre o telefone segurado na mão, o tablet nos joelhos, na sua cama ou na mesa do pequeno-almoço, o ecrã do laptop, do computador pessoal ou da televisão na parede da sala de estar (sem falar dos Google Glass), cada dispositivo tem os seus próprios usos aos quais devemos nos adaptar.
Bibliotype é definida por seu autor Craig Mod como uma biblioteca (muito) simples baseada no HTML, nas CSS e no javascript para uma prototipagem rápida da tipografia aplicada ao conteúdo comprido e à leitura em tablet. Seu menu propõe um conjunto de parâmetros tipográficos pré-definidos correspondentes ao modo de leitura atual do usuário (e às preferências pessoais dele): o tamanho da fonte em situação, ou melhor, o tamanho global dos elementos da página, sejam textos ou imagens (isto é cama, joelhos e pequeno-almoço), a justificação do texto (justificado ou não), a família da fonte (Georgia ou Helvetica), o contraste da página (baixo ou alto), e a hifenização automática (aplicada ou não). Dando ao usuário o poder de decisão sobre estes parâmetros (salvá-los no perfil dele para as conexões siguientes é uma necessidade), esta biblioteca fornece uma visão geral muito útil do que pode ser feito para se adaptar plenamente ao uso real do dispositivo, e particularmente os tablets.
Cada dispositivo também tem seus próprios meios de interação (teclado, mouse, ecrã táctil) com os quais devemos compor. Ferramentas como Modernizr fornecem uma visão geral das funcionalidades suportadas.
A luz ambiente em que o dispositivo é usado pode fazer a sua leitura muito difícil. O nível 4 das media queries fornece o parâmetro luminosity que pode levar três valores discretos (dim, normal e washed, respectivamente, para um ambiente mal iluminado, ideal ou muito luzente). A idéia aqui é poder ajustar o contraste e a luminosidade do design para se adaptar ao ambiente do utilizador, o que já existe no mundo das aplicações. Porém, a luminosidade do ecrã é geralmente já tratada pelo próprio dispositivo, e ainda mais, cada dispositivo tem a sua própria sensibilidade, o que torna esta funcionalidade difícil de usar por si.
Lembre-se da experiência da edição vespertina: todos os dias às 6 da tarde, a exibição muda para refletir a hora do dia. Uma idéia muito boa, mas o que vai acontecer se o usuário tiver instalado f.lux para gerenciar o calor de sua ecrã? O ambiente configurado do dispositivo vai entrar em conflito com o design do site, e o resultado pode não ser o esperado.
Ao detetar a distância entre a face do usuário e o ecrã para acomodar tanto a altura da linha como o tamanho da fonte, Marko Dugonjić oferece uma maneira de pensar muito fora da caixa. Headtrackr, a biblioteca javascript dele, utiliza a webcam para detetar a cabeça do usuário, a API webRTC (web Real-Time Communication) e o padrão HTML5 getUserMedia, então apenas suportado no momento por Firefox e Chrome.
Um ponto de vocabulário
Usamos por vezes termos que parecem pertos mas que cobrem realidades diferentes, como a semelhança aparente dos designs fluídos e elásticos. Um design fluído expressa-se em percentagem, é o tamanho da viewport que define a exibição. Um design elástico expressa-se em em, é a escolha pelo usuário, isto é, os seus parâmetros de exibição como o tamanho da fonte ou o nível de zoom, que são predominantes.
Guias
As guias podem exibir uma grande quantidade de conteúdo de uma só vez na mesma página navegando horizontalmente. É aí que está o busílis quando se tenta adaptá-las a uma experiência móvel, onde o espaço horizontal é frequentemente reduzido. O que fazer neste caso?
Podemos passar as guias em itens de menu. Onde uma página exibia numa grande quantidade delas, o resultado é uma série de páginas (ou de cartas/div/camadas empilhadas na mesma), com somente a primeira visível. Desta maneira, as guias tornam-se acordeão. A solução do Chris Coyer permite separar o menu das guias do menu de navegação principal para que eles não entrem em conflito.
Legibilidade e comprimento das linhas
O idioma inglês tem duas palavras para conceitos diferentes que o português traduz geralmente numa só: a legibilidade. Em inglês, readability (ou lecturabilidade) é relativa a compreensão do texto e do significado dele (podemos calcular diferentes fórmulas de legibilidade, incluindo para a língua portuguesa). A respeito da legibility (legibilidade), aborda a dimensão física da legibilidade: qual fonte usar para que cada letra (ou glifo) seja inequívoca durante a leitura, de modo que a leitura seja fácil. Estamos a falar aqui desta legibilidade. O artigo do Sandro Lopes, legibilidade vs. lecturabilidade, explica isto de uma maneira mais detalhada.
A velocidade de leitura de um leitor casual é equivalente entre 35 e 95 caracteres por linha. Porém, o comprimento otimo das linhas varia entre 50 e 75 caracteres por linha.
Classicamente, os breakpoints, ou limiares de comutação, de su design podem ser restringidos pela largura do ecrã usado (embora o espaço útil nem sempre seja este).
Outra abordagem é a de ter em conta o seu conteúdo para definir os seus breakpoints, muitas vezes larguras de imagem, mas o comprimento de suas linhas de texto também pode ser integrado nas suas fórmulas dependendo do seu tipo de conteúdo. Marie Guillaumet chama isto web design proporcional, as proporções dos textos e dos blocos mantendo-se sempre.
Existem várias ferramentas para tornar a sua vida mais fácil sobre a exibição desta margem de manobra de optimização dos comprimentos de linhas.
Chris Coyer (outra vez ele) propõe um bookmarklet bem prático para mostrar esta fronteira de 25 caracteres onde pôr o seu breakpoint.
FlowType é um script javascript para redimensionar o tamanho da fonte e a altura da linha de um texto que cai dentro da largura definida por seu elemento pai.
Note-se também que a altura da linha (line-height) definida sem unidade de medida (nem px, nem em) pode ser lido como um multiplicador para todos os elementos descendentes. Removando a unidade, os cálculos complexos para saber a altura relativa das linhas dos elementos em cascata desaparece magicamente.
Depois, a tipografia responsiva entra em jogo: altura das linhas, tamanho das fontes, hifenização automática…
Tamanho dos ecrãs e usos
Extrapolar a distância de leitura a partir do tamanho do ecrã é outra opção que está disponível para você. Entre o telefone segurado na mão, o tablet nos joelhos, na sua cama ou na mesa do pequeno-almoço, o ecrã do laptop, do computador pessoal ou da televisão na parede da sala de estar (sem falar dos Google Glass), cada dispositivo tem os seus próprios usos aos quais devemos nos adaptar.
Bibliotype é definida por seu autor Craig Mod como uma biblioteca (muito) simples baseada no HTML, nas CSS e no javascript para uma prototipagem rápida da tipografia aplicada ao conteúdo comprido e à leitura em tablet. Seu menu propõe um conjunto de parâmetros tipográficos pré-definidos correspondentes ao modo de leitura atual do usuário (e às preferências pessoais dele): o tamanho da fonte em situação, ou melhor, o tamanho global dos elementos da página, sejam textos ou imagens (isto é cama, joelhos e pequeno-almoço), a justificação do texto (justificado ou não), a família da fonte (Georgia ou Helvetica), o contraste da página (baixo ou alto), e a hifenização automática (aplicada ou não). Dando ao usuário o poder de decisão sobre estes parâmetros (salvá-los no perfil dele para as conexões siguientes é uma necessidade), esta biblioteca fornece uma visão geral muito útil do que pode ser feito para se adaptar plenamente ao uso real do dispositivo, e particularmente os tablets.
Cada dispositivo também tem seus próprios meios de interação (teclado, mouse, ecrã táctil) com os quais devemos compor. Ferramentas como Modernizr fornecem uma visão geral das funcionalidades suportadas.
Dêmos uma olhada para o futuro
A luz ambiente em que o dispositivo é usado pode fazer a sua leitura muito difícil. O nível 4 das media queries fornece o parâmetro luminosity que pode levar três valores discretos (dim, normal e washed, respectivamente, para um ambiente mal iluminado, ideal ou muito luzente). A idéia aqui é poder ajustar o contraste e a luminosidade do design para se adaptar ao ambiente do utilizador, o que já existe no mundo das aplicações. Porém, a luminosidade do ecrã é geralmente já tratada pelo próprio dispositivo, e ainda mais, cada dispositivo tem a sua própria sensibilidade, o que torna esta funcionalidade difícil de usar por si.
Lembre-se da experiência da edição vespertina: todos os dias às 6 da tarde, a exibição muda para refletir a hora do dia. Uma idéia muito boa, mas o que vai acontecer se o usuário tiver instalado f.lux para gerenciar o calor de sua ecrã? O ambiente configurado do dispositivo vai entrar em conflito com o design do site, e o resultado pode não ser o esperado.
Ao detetar a distância entre a face do usuário e o ecrã para acomodar tanto a altura da linha como o tamanho da fonte, Marko Dugonjić oferece uma maneira de pensar muito fora da caixa. Headtrackr, a biblioteca javascript dele, utiliza a webcam para detetar a cabeça do usuário, a API webRTC (web Real-Time Communication) e o padrão HTML5 getUserMedia, então apenas suportado no momento por Firefox e Chrome.
Design responsif : des pistes à suivre (em francês)
Responsive Web Design: some paths to follow (em inglês)
Diseño responsivo: unos caminos a seguir (em espanhol)
Sem comentários:
Enviar um comentário