Você tem um "site responsivo"? Este é um site com um layout que muda com base no dispositivo do visitante e no tamanho da tela. Web design responsivo é agora uma das melhores práticas do setor. É recomendado pelo Google e encontrado em milhões de sites na Web. Há, no entanto, uma grande diferença entre ter um site que simplesmente “se encaixa” em diferentes tamanhos de tela e ter um site que seja realmente responsivo.
Eu costumo ver as empresas redesenharem seu site e lançar um comunicado de imprensa exaltando as virtudes de seu novo design otimizado para dispositivos móveis. Quando visito esses sites, o que eu geralmente encontro é um layout que, de fato, escala e altera para caber em telas diferentes, mas isso é tanto quanto eles tomam a idéia de capacidade de resposta. Isso não é o bastante. Um site verdadeiramente responsivo faz mais do que apenas dimensionar para caber uma tela menor ou maior. Nestes sites, você também encontrará as seguintes características importantes.
1. Desempenho Otimizado
Ninguém gosta de esperar pelo carregamento de um site e, quando alguém está usando um dispositivo móvel com uma conexão que pode ser menos que ideal, a necessidade de um site carregar rapidamente é ainda mais importante.
Então, como você otimiza o desempenho do seu site? Se você está começando com um novo site como parte de um novo design, deve criar um orçamento de desempenho como parte desse projeto. Se você está trabalhando com um site existente e não está começando do zero, a primeira etapa é testar o desempenho do seu site para ver onde está hoje.
Depois de ter uma linha de base de onde o seu site está em termos de desempenho, você pode começar a fazer as melhorias necessárias para aumentar a velocidade de download. Um ótimo lugar para começar é provavelmente com as imagens do seu site. Imagens muito grandes são a principal causa quando se trata de lentidão no carregamento de sites, então otimizar suas imagens para entrega na web pode realmente ajudar o seu site do ponto de vista do desempenho.
A realidade é que o desempenho aprimorado do site e as rápidas velocidades de download são um benefício que todos os visitantes apreciarão. Afinal de contas, ninguém jamais reclamou que um site tenha sido carregado "muito rápido", mas se um site demorar muito para ser carregado, ele irá, com certeza, afastar as pessoas, independentemente de elas se encaixarem ou não na tela.
2. Hierarquia de Conteúdo Inteligente
Quando um site é exibido em uma tela grande, você pode colocar o conteúdo de várias maneiras, devido à grande disponibilidade de tela disponível. Muitas vezes, você pode ajustar mensagens e imagens importantes, atualizações de notícias, informações sobre eventos e navegação no site na tela de uma só vez. Isso permite que um visitante varra com facilidade e rapidez o conteúdo da página inteira e decida o que é importante para ele.
Esse cenário muda drasticamente quando você cria o design do site e o transforma para dispositivos de tela pequena, como um telefone celular. De repente você está trabalhando com uma fração do espaço da tela que você tinha antes. Isto significa que você precisa decidir o que aparecerá primeiro no site, o que o seguirá, etc. Ao invés de tudo ser visto de uma vez, você provavelmente só tem espaço para mostrar uma ou duas coisas (uma delas é provável navegação). Isso significa que decisões de hierarquia precisam ser feitas. Infelizmente, o que geralmente determina o que vem primeiro na tela, e depois o segundo, etc., é o modo como a própria página é codificada. É mais fácil, ao criar um site responsivo, exibir o que estiver primeiro no código primeiro na tela, seguido pelo segundo item no código e assim por diante. Infelizmente, o que pode ser mais importante em um dispositivo pode não ser tão crítico em outro. Um site verdadeiramente responsivo entende que a hierarquia de conteúdo deve mudar dependendo de diferentes situações e deve ser inteligente quanto ao que exibe onde.
Melhorias nas técnicas de layout CSS, incluindo CSS Grid Layout, Flexbox e muito mais, permitem que designers e desenvolvedores da Web tenham mais opções quando se trata de criar conteúdo de forma inteligente, em vez de ficarem limitados pela ordem exata das áreas de conteúdo no código HTML. Aproveitar essas novas técnicas de layout se tornará ainda mais importante à medida que o panorama do dispositivo e as necessidades dos usuários de nosso site continuarem a evoluir.
3. Experiências que levam em consideração os pontos fortes e fracos de um dispositivo
Ficar no tópico de dispositivos - cada dispositivo que alguém pode usar para visitar seu site tem os pontos fortes e fracos inerentes a essa plataforma. Um ótimo site responsivo entende as capacidades e limitações de diferentes dispositivos e os utiliza para criar experiências personalizadas que são mais adequadas para qualquer dispositivo que um visitante possa estar usando naquele momento.
Por exemplo, um telefone celular inclui vários recursos que você não encontraria em um computador tradicional. O GPS é um exemplo de um recurso centrado em dispositivos móveis (sim, também é possível obter informações gerais de localização em desktops, mas o GPS do dispositivo é muito mais preciso). Seu site pode usar informações de GPS para enviar inteligentemente informações de direção passo a passo detalhadas e específicas ou ofertas especiais baseadas exatamente onde estão naquele momento.
Outro exemplo desse princípio na prática seria um site que entende que tipo de exibição de tela você está usando e envia imagens que são mais adequadas para essa exibição. Se você tiver uma tela com alta densidade de pixels, poderá decidir enviar imagens de maior qualidade para essa tela. Essas mesmas imagens seriam inúteis em uma tela menos capaz, no entanto, e a qualidade extra seria perdida, enquanto o tamanho extra do arquivo seria baixado sem nenhuma razão real.
Sites responsivos realmente excelentes consideram toda a experiência do usuário e trabalham para adaptar essa experiência com base não apenas em um tipo de dispositivo ou tamanho de sua tela, mas também em outros aspectos importantes do hardware.
4. Conteúdo com Contexto
Inicialmente, o design responsivo da web recebeu esse nome por causa da ideia de o layout de um site responder a diferentes tamanhos de tela, mas você pode responder muito mais do que apenas o tamanho da tela. Com base no exemplo anterior de usar os pontos fortes e fracos de um dispositivo, você poderia usá-los, assim como outros dados, como a data e a hora, para realmente personalizar a experiência de um website.
Imagine um site para um grande evento de feiras. Embora um website responsivo altere o layout das páginas do site para escalonar com telas diferentes, você também pode usar a data para determinar qual conteúdo é mais importante para exibir. Se for o período de tempo antes do evento, você provavelmente deseja exibir informações de registro em destaque. Se, no entanto, o evento realmente estiver acontecendo naquele momento, o registro pode não ser o conteúdo mais importante. Em vez disso, você pode decidir que a agenda de eventos do dia é mais importante, pois é mais relevante para as necessidades imediatas do usuário.
Levando as coisas um pouco mais longe, você pode usar o GPS de um dispositivo para determinar onde eles realmente estão na feira. Você pode fornecer a eles conteúdo interativo com base em sua localização, mostrando-lhes estandes próximos ou sessões para começar.
5. Acessibilidade
O exemplo final que analisaremos sobre como um site pode realmente responder às necessidades de um visitante é pensar na acessibilidade do site. Os sites devem poder ser usados por tantas pessoas quanto possível, incluindo aqueles com deficiência. Seu site deve poder ser usado por alguém que precise de um leitor de tela ou outro software assistido para acessar seu conteúdo. Dessa forma, seu site está respondendo às necessidades deles porque você garantiu que a experiência, embora diferente para os visitantes com deficiências, ainda é apropriada.
Respondendo a tantos pontos de dados quanto possível, e não apenas ao tamanho da tela, um site pode ser muito mais do que apenas "compatível com dispositivos móveis". Ele pode se tornar uma experiência realmente responsiva em todos os sentidos da frase.
