Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Dica Rápida: Pense um Pouco sobre Pontos de Parada Verticais

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Vimos isso acontecer algumas vezes, recentemente, em sites com navegação fixa na lateral esquerda. Eles possuem belos layouts fluidos, que se ajustam em telas grandes e se empilham em pequenas, mas ainda tem problemas com uma ponto de parada que poucos pensam. Falamos da parada vertical.


Por Exemplo

Vejamos um exemplo. Eis um simples layout responsivo: duas colunas que se comportam exatamente como esperado. O navegador aumenta ou diminui e sabemos o que acontece.

A couple of layouts dependant on the viewport width
Alguns layouts dependentes da largura da área de visualização

Esse layout inicia no mobile, com duas divs empilhadas uma na outra. Então divide-se em colunas, com sua coluna esquerda fixada em telas maiores que 800px.

O conteúdo principal rola para cima e para baixo, enquanto a primeira coluna permanece fixa à esquerda. Podemos colocar uma navegação ou um avatar na coluna esquerda.

Eis um Problema

Tudo parece bem, mas o que acontece quando reduzimos a tela verticalmente? A navegação fica escondida e torna-se inacessível.

The main content scrolls but I cant click on the lower menu items
O conteúdo principal rola, mas não podemos clicar nos itens inferiores do menu!

Eu não sei alguém que navegue assim, mas, ainda assim, não podemos assumir que uma tela larga será uma tela alta também.

A Solução

Consultas de mídia são capazes de identificar muito mais que a largura da página. Podem reagir a pixel-density, orientation, se a tela é color ou monochrome, ao aspect-ratio, muitas coisas.

Nesse caso, podemos depender da min-height, adicionando uma segunda condição às nossas consultas existentes:

Agora, nosso posicionamento de coluna fixa à esquerda apenas acontecerá se a tela tiver pelo menos 800px de largura e 500px de altura. Vejamos como a demo funciona.

Outra Solução

Não temos de alterar completamente o layout para tornar o menu acessível. Podemos adicionar uma barra de rolagem separada para a coluna da navegação quando a área não for alta suficiente para revelá-la por completo. Vejamos.

vertical-break-point-scroll

Trata-se de solucionar as coisas da melhor forma possível.


Conclusão

Uma área pequena pode realmente restringir o que é visível numa página. Vejamos como o Gmail reduz o espaçamento da tabela se tiver menos espaço vertical disponível:

Normal spacing
Espaçamento normal
Shrunken rows if theres less vertical space thanks to a min-height media query
Linhas encolhidas se houver pouco espaço vertical

O exemplo do Gmail prova que pontos de parada verticais não implicam em layout quebrado, mas que devemos aproveitar a oportunidade para aprimorar as coisas.

De qualquer forma, esperamos que o artigo tenha reiterado a importância de não assumir qualquer coisa em relação a pontos de parada. Diga-nos nos comentários se já usou alguma consulta de mídia min-height e para que!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.