9 regras essenciais para galerias de imagens responsivas
O design responsivo é uma parte essencial e necessária do desenvolvimento da web. Um dos maiores problemas com o web design responsivo ultimamente tem sido as imagens. Muitos debatem a melhor maneira de exibir imagens em um site responsivo. E então, e as galerias de imagens?
As galerias de imagens apresentam muito mais complexidade do que imagens únicas; Há ainda mais variáveis e coisas em que pensar ao implementar galerias de imagens responsivas em seu site. Vamos dar uma olhada em algumas dicas úteis para implementar galerias de imagens responsivas da maneira certa.
1) Slideshows: esconder nav sempre que possível
Talvez você não tenha elementos de navegação em um tablet ou dispositivo móvel, mas em uma área de trabalho, é uma boa ideia ocultar esses elementos até que sejam necessários. Itens como setas para frente e para trás e pontos de navegação devem ser definidos para serem exibidos somente quando alguém passar o mouse sobre a galeria de imagens deslizantes. Isso evita distrações e você evita conflitos entre conteúdo e elementos de navegação. Toda a experiência parece menos confusa.
2) Evite muitas imagens de retrato
Se você estiver implementando uma galeria que seja uma grade de imagens, você desejará escolher imagens orientadas por paisagem ou quadradas, se possível. Isso facilita a visualização em uma tela pequena. As imagens de retrato ficariam bem em um telefone inteligente no modo retrato, mas a ampla área de visualização de um telefone orientado para paisagem dificulta a visualização de imagens em retrato. A paisagem é melhor, mas você pode se contentar com o quadrado se a paisagem não for uma opção. Todas as imagens podem ser ajustadas para caber dentro de uma área de visualização, mas imagens de retrato em uma tela de paisagem parecerão muito pequenas. Suas imagens não serão vistas tão intensamente quanto imagens quadradas ou de paisagem, que preencherão mais áreas da tela e parecerão maiores. Ao selecionar imagens, lembre-se de mantê-las em mente.
3) Use gestos em tablets e dispositivos móveis
As pessoas adoram usar gestos em suas telas sensíveis ao toque. Eles se sentem mais capacitados quando sentem que estão deslizando uma imagem, porque a experiência é mais imersiva. Tentar tocar pequenas setas ou pontos de navegação em um dispositivo móvel é muito entediante. É muito mais natural poder levar o dedo e deslizar uma imagem para cima, para baixo, para a esquerda ou para a direita.
4) Evite mesas de luz: desative-as no celular
Se você tem imagens de produtos, como máquinas ou itens que devem ser vistos com mais detalhes (tecidos, jóias, etc.), então uma mesa de luz com imagens maiores faz sentido. Mesmo assim, eles só devem ser usados na área de trabalho. Quando você divide os tamanhos de tela do tablet e do celular, as mesas de luz devem ser desativadas. Eles podem causar vários problemas de experiência do usuário. Se algo acontecer e a área de luz não for dimensionada corretamente, talvez eles não consigam acessar o botão de saída ou as imagens podem não ser exibidas corretamente.
5) Ao usar elementos nav, torne-os discretos
Se você tem uma galeria de imagens deslizante com um número significativo de slides, a navegação faz sentido. Você não quer que os usuários esperem para percorrer tudo. Eles podem clicar facilmente em sua própria velocidade, entrar, obter o que precisam e sair. Ao usar esses elementos, certifique-se de dobrá-los em lugares que estão fora do caminho. Não tem pontos de navegação passando por texto ou outros links. Além disso, evite controles excessivamente complexos. Eles ocupam muito espaço, distraem os usuários do conteúdo e criam um visual desordenado. Ter pontos nos quais os usuários podem clicar para percorrer ou pular para determinadas imagens e ter setas para frente e para trás é suficiente. Não exagere!
6) Não misture imagens e vídeos
Misturar mídias diferentes geralmente é bom, mas misturar vídeos em locais não esperados pode causar problemas. Você não quer que um usuário acidentalmente inicie um vídeo, que reproduz som para todos ouvirem. Separe vídeos e imagens para que eles saibam o que esperar. Ninguém gosta desses tipos de surpresas.
7) Certifique-se de que as imagens não ultrapassem a largura máxima
Isso é importante, porque você pode evitar o dimensionamento pixelizado de imagens que são muito pequenas para um espaço. As imagens devem ser grandes o suficiente para preencher 100% de um dispositivo móvel (na maioria dos casos), mas os sites do tamanho da área de trabalho devem definir apenas a largura máxima para 100%. Eu já vi alguns casos em que alguém tem um desses grandes displays de 27 ”, e quando eles arrastam a largura do navegador, a imagem é dimensionada com ela, além do tamanho pretendido.
8) Escala de imagem
Se você tiver escala de imagens, reduza a escala, não para cima. É melhor definir as dimensões exatas das suas imagens. Muitas vezes, uma porcentagem é usada para uma dimensão, enquanto a outra dimensão é definida como automática. Por exemplo, se você quiser que uma imagem alcance 50% da largura do navegador, defina a largura da imagem como 50% e a altura como automática .
9) Evite usar legendas de imagens
As legendas de imagens ou qualquer outro texto que as acompanhe podem causar todos os tipos de problemas para você e seus usuários. O primeiro problema é que é difícil encaixar o texto em um dispositivo móvel. Com os smartphones, você tem espaço limitado, mas tentar adicionar texto pode fazer com que toda a experiência pareça confusa e confusa. Outro problema é que você está limitado na quantidade de texto que você pode usar. Adicionando uma legenda, ou qualquer texto extra, adiciona a variável de texto responsivo na mistura. Você tem que considerar as quebras de palavras e como várias linhas de texto acabarão aparecendo com sua imagem. Se o texto for usado como uma sobreposição, você também deve se preocupar com o local em que a imagem é colocada. O texto claro sobre a área clara da imagem tornará o texto ilegível. O contraste é fundamental e toda imagem é diferente.
Conclusão
A linha de fundo quando se trata de qualquer aspecto do web design é que ele tem que funcionar bem e ter o usuário em mente. Se ninguém puder usar seu site, ele não voltará. Seguir esses simples prós e contras de galerias de imagens responsivas fará com que os usuários não tenham problemas comuns ao visualizar suas imagens.