Classes de visibilidade
Quando pensamos em gerar conteúdos para os meios digitais devemos levar em consideração que eles precisam se adaptar a diversos cenários de resoluções, pois temos a nossa disposição diversos modelos de aparelhos (devices), como computadores desktops, tablets e smartphones, o que nos leva a abordar o conceito "Layout responsivo".
Projetar um layout responsivo é pensar nas suas possíveis versões de acordo com a resolução na qual está sendo renderizado, a fim de projetar uma melhor usabilidade na experiência do usuário, procurando contornar possíveis problemas de perda de informações e frustração na execução de tarefas.
Muitas dessas adaptações podem ser executadas de uma forma mais automatizada, porém outras requerem um procedimento manual para a adaptação possa acontecer, como é o caso do Tile de Banner. As imagens inseridas não apresentam um comportamento responsivo adequado, pois o tamanho da imagem permanece o mesmo, gerando prejuízo muitas vezes na exibição das informações presentes nele.
A fim de contornar essa situação, 3 classes foram projetadas a fim de proporcionar a troca de imagens de acordo com a resolução em exibição:
a) Visibilidade - Ocultar em desktop
b) Visibilidade - Ocultar em tablet
c) Visibilidade - Ocultar em phone
Essas classes se aplicam a qualquer elemento da capa: linhas, colunas e qualquer tipo de tile.
Elas ocultam a exibição do elemento da tela escolhida. Para que o elemento seja exibido em apenas um tipo de dispositivo, é necessário combinar o uso de duas classes ao mesmo tempo. Por exemplo, para exibir um banner apenas em smartphones, deve-se aplicar as classes para ocultá-lo em desktops e tablets.
Uma grande utilidade destas classes é possibilitar o uso de imagens diferentes de acordo com o tamanho da tela, com composições diferentes. Ao lado estão as imagens utilizadas no exemplo abaixo, redimensione a janela do seu navegador para ver o banner em outros tamanhos, se adequando aos 3 diferentes cenários.
Como configurar?
A imagem abaixo retrata a configuração correta para a exibição das imagens de acordo com os intervalos de resoluções pré-definidas:
Repare no canto superior direito de cada Tile que existem 3 ícones, cada um deles está relacionado àquelas classes citadas anteriormente, clique em cada um deles para definir a exibição correta de acordo com cada modelo.