A necessidade do momento não é design responsivo, mas desempenho responsivo

O design responsivo exibiu vários problemas de desempenho nos últimos tempos. A ironia é que o design responsivo está indo muito bem na última linha de smartphones, mas nada além do mesmo.

Você pode estar confuso, pois a maioria dos usuários da web possui smartphones de última geração. No entanto, uma grande população ainda está usando dispositivos móveis com um tamanho de tela pequeno rodando em uma versão antiga do Android ou iOS e talvez apenas um telefone comum com pouca funcionalidade. Como resultado, o design responsivo não está atendendo a um público mais amplo como deveria.

A crença de longa data de que o design responsivo é para dispositivos móveis de qualquer tamanho de tela tem muito a ver com esse problema. Como o desempenho está caindo e a insatisfação está aumentando, há uma necessidade de olhar além do design responsivo. O foco deve ser, em vez disso, garantir um desempenho responsivo. Este post é sobre o mesmo.

Então, a grande questão é o que fazer?

Descarte o conceito de design para desktop

Um contribuinte significativo para esse problema persistente é que o foco ainda está em uma abordagem de design que prioriza a área de trabalho. A ênfase está em projetar um site para um desktop e, em seguida, projetar para outros dispositivos, como smartphones e tablets. Para qualquer funcionalidade ausente, os desenvolvedores usam shims e polyfills generosamente. Claro, existem vastas bibliotecas para garantir um rápido desenvolvimento. No entanto, isso não resolve a questão da incompatibilidade do navegador. É justificável se envolver em um conceito de design que não está produzindo os resultados desejados?

Não é muito difícil implementar uma abordagem de design mobile-first em que o objetivo seja oferecer apenas as informações pretendidas ao usuário móvel em sua tela, em vez de todas as coisas que estão matando o dispositivo. Luke Wroblewski conceituou essa abordagem de design pela primeira vez em 2011 e, desde então, muitos especialistas do setor elogiaram sua abordagem de design inovadora.

Mais dados, mesmo que levem uma fração de segundo, podem ter um impacto notável no tempo geral de carregamento. No entanto, também é verdade que os sites estão ficando mais pesados ​​com conteúdo rico em gráficos, e mais pessoas estão usando seus dispositivos móveis para acessar o mesmo. Quando um usuário digita a URL de um site em um celular com uma tela de baixa resolução, seu objetivo é sempre acessar o conteúdo do site, mas o que ele experimenta é um pesadelo. Isso se deve à dificuldade de navegar pelos intermináveis ​​anúncios desnecessários. Remova esses elementos de conteúdo evitáveis ​​para permitir que seu usuário acesse o conteúdo principal. Isso aumenta o tráfego do site, pois além dos usuários com smartphones de última geração, muitos acessarão seu site por meio de dispositivos móveis de baixa resolução. Entregar uma versão somente de texto faz todo o sentido se o celular tiver recursos limitados, mas, novamente, você pode dizer que a experiência do usuário fica comprometida. Bem, é, mas ainda é melhor do que não receber nenhum conteúdo. Pelo menos nesse caso, os usuários acessarão as informações básicas sobre seu site. Existe algum ponto em projetar um site de tal maneira que reduza seu alcance potencial?

Você certamente aceitará o fato de que esperar infinitamente apenas para verificar um site não excita ninguém. De acordo com algumas pesquisas da Akamai e Gomez.com, aproximadamente 50% dos usuários da web esperam que um site seja carregado em 2 segundos ou até menos. Há mais chances de abandono do site se um site não carregar no navegador em apenas 3 segundos! Além disso, a maioria dos sites de comércio eletrônico hoje em dia possui um grande número de botões de compartilhamento social como Facebook, Google Plus, Twitter, LinkedIn, etc. Você sabia que esses botões adicionam mais de 500 KB ao seu site responsivo e afetam seu desempenho? Só o botão curtir do Facebook exige um código compactado de 270 KB! Também requer várias solicitações HTTP. Em vez disso, use botões de compartilhamento social baseados em URLs, pois um tamanho tão grande inevitavelmente afeta o tempo de carregamento do seu site responsivo, mesmo que a conexão móvel seja rápida.

O desempenho de um site tem um impacto direto no desempenho de um negócio e um site responsivo lento nunca faz nada de bom para um negócio. Acredite ou não, a maioria dos usuários de dispositivos móveis não está interessada em fazer pesquisas ou ler artigos longos. A maioria deles usa seus dispositivos móveis para um fácil acesso ao Facebook, WhatsApp, Twitter e para se entregar ao prazer de fazer compras online. Além disso, o celular não é mais uma tendência, é o futuro.

De acordo com as estatísticas do ano passado da Comscore, o número de usuários de Internet somente móvel nos EUA aumentou acentuadamente, enquanto os usuários somente de desktop foram reduzidos para 10,6%.

Precisa dizer mais alguma coisa para convencer?

Garanta uma degradação graciosa

Nos últimos anos, você pode ter encontrado a nova palavra da moda no mundo do design responsivo, e é 'degradação graciosa'. Sim, a degradação graciosa implica que, mesmo que um recurso não funcione com sucesso, ele deve falhar de uma maneira que facilite uma usabilidade aceitável. Isso significa criar um design de site para um desktop e, em seguida, migrar gradualmente para tablets, smartphones e telefones com recursos. O desempenho de um design responsivo no qual o site está se degradando graciosamente deve ser alto, pois a experiência do usuário aqui é sempre de alto nível. O site permanecerá funcional apesar de quaisquer deficiências, e um visitante certamente ficará impressionado com a qualidade geral.

Agora, você pode ter esta pergunta em sua mente que é tão fascinante sobre a degradação graciosa. A resposta é simples. Isso porque torna seu conteúdo visível e legível independentemente do navegador, o que é um feito notável! Felizmente, se você estiver usando CSS3, a degradação graciosa torna-se um trabalho fácil, pois a maioria das propriedades do CSS3 se degradam automaticamente, ou seja, cantos arredondados se tornam quadrados, o texto é quebrado em vez de ser executado em uma única linha, gradientes se tornam cores planas e muito mais.

Vamos ter um exemplo de degradação graciosa. Suponha que você tenha projetado um site responsivo com recursos de JavaScript e esses recursos não são suportados pelo seu navegador ou podem estar desabilitados no lado do seu cliente. Então, o que você pode fazer para obter o conteúdo? Bem, nesse caso, a degradação graciosa permite que seu navegador exiba o conteúdo dentro da tag “noscript”.

Isso você pode entender melhor com a codificação fornecida abaixo:

[xhtml]
<noscript>
<h1>Prezado John, você encontrou um problema!</h1>
<p>Seu navegador não tem suporte para JavaScript ou está temporariamente desativado.
Visite nosso <a href="/support/browsers/">suporte do navegador</a> para obter ajuda.</p>
</noscript>
[/xhtml]

Há mais um exemplo de degradação graciosa que eu gostaria de compartilhar, e é o uso do HTML5 pelo YouTube para reproduzir vídeos. Suponha que seu navegador não seja compatível com HTML5, o vídeo será exibido usando Flash, e se mesmo o Flash não estiver instalado, você receberá uma mensagem para instalar o mesmo em seu dispositivo móvel. Em ambos os casos, você poderá assistir ao vídeo. No entanto, uma desvantagem dessa degradação graciosa é que, embora o desempenho seja bom, você precisa se comprometer com certos elementos de design se estiver usando navegadores desatualizados. Acho que determinar os elementos visuais essenciais do seu site de antemão pode fazer o truque.

Não há necessidade de manter bibliotecas não utilizadas

Uma prática recomendada pode ser não manter bibliotecas que não estão em uso. Sim, é verdade que acompanhar as bibliotecas usadas e as não utilizadas é muito demorado, mas vale a pena. Às vezes, você deve ter notado que está usando apenas uma única funcionalidade após a inclusão de uma biblioteca. Pode ser às vezes dois ou três mesmo. A ferramenta que mais utilizo para criar um design responsivo é o jQuery. Na verdade, existem muitas bibliotecas jQuery que ajudam os desenvolvedores a criar sites responsivos. A inclusão de várias bibliotecas, como as bibliotecas JavaScript, apenas porque você gostou de alguns widgets, aumentará significativamente o tempo de carregamento da sua página. No entanto, será uma boa prática analisar quais bibliotecas estão em uso e em que medida.

Verifique a disponibilidade de recursos

Você pode verificar se o seu dispositivo suporta um determinado recurso ou não antes de ativar o mesmo. Por exemplo, acontece que, embora você tenha instalado a versão mais recente do Google Chrome em seu telefone Android desatualizado, ele ainda não exibe seu site. Às vezes, na tentativa de carregar um site desse tipo, o navegador trava tanto que faz com que todo o dispositivo móvel não responda. Você precisa reiniciar o dispositivo, e esta é a última coisa que você deseja, não é? Muitos usuários de determinados aplicativos da web já estão sofrendo devido a esse problema.

A indisponibilidade de recursos nos dispositivos e, no entanto, o design de sites ou aplicativos resultou em alguns problemas visíveis, como a falha instantânea dos aplicativos Google Hangout em dispositivos Android em todo o mundo, independentemente do tipo de navegador. Isso apesar do fato de o aplicativo ser um aplicativo leve. Você pode argumentar que os usuários estavam usando uma versão mais antiga de smartphones Android, mas também é verdade que esses dispositivos ainda estão disponíveis nas prateleiras como novos em qualquer uma das lojas móveis. Muitos usuários de dispositivos móveis também enfrentam o mesmo problema de desempenho com o aplicativo YouTube e Twitter. Mesmo uma atualização do serviço Android System Webview do Google via Google Play congela muitos smartphones para se tornar uma espécie de pesadelo dos usuários.

Otimizar imagens

Incluir imagens grandes visualmente atraentes é sempre tentador para os designers. O problema surge quando eles não compactam essas imagens antes de carregá-las no CMS. Isso é especialmente verdadeiro com vários sites de comércio eletrônico na web. De acordo com a pesquisa recente da Radware, as páginas estão ficando maiores e aproximadamente 45% dos 100 principais sites de varejo não usam compactação de imagem. Isso torna esses sites mais volumosos e, como resultado, o tempo de carregamento aumenta, mas como designer, você pode evitar o problema.

Faça as imagens com tamanho menor usando uma ferramenta de otimização de imagem adequada. De fato, não há escassez de tais ferramentas na web. Alguns dos notáveis ​​que você pode usar são Dynamic Drive, Smush it e Riot. Se você é um profissional no Photoshop, também pode otimizar o tamanho da imagem por conta própria. Use uma técnica de compactação inteligente e retire-a de quaisquer metadados redundantes. Converter gráficos em PNG, imagens ricas em cores para JPEG e animadas para GIF também funciona.

Preparado para casos extremos

Quando você começa a desenhar, deve ter notado que fica tentado a desenhar as páginas que são mais fáceis. Pelo menos, isso permite que você mostre algo para seus stakeholders. Isso pode parecer bom à primeira vista, mas se você focar seus esforços nos cenários mais desafiadores, no começo, você obterá um bom resultado.

Por exemplo, uma página da Web com alguns artigos, blogs e comunicados de imprensa. Deve ter um título também. Agora, o que acontecerá se o espaço do título que você pensou em mostrar “Dicas de Web Design Responsivo” tiver que mostrar um título “10 Dicas e Técnicas Essenciais para um Web Design Responsivo de Sucesso”? Agora, este é um caso extremo.

Um esforço como o acima para otimizar o desempenho do seu site responsivo parece invisível. No entanto, esses esforços geram bons retornos com usuários felizes e satisfeitos. Você pode obter ajuda de várias ferramentas, como as ferramentas Pingdom, que permitem monitorar o tempo de carregamento do seu site responsivo sem esforço. Não pule o aspecto vital do teste para garantir que seu site responsivo esteja funcionando conforme o esperado. Teste-o em quantos dispositivos reais você puder.

Você também pode fazer uso de recursos como o Screenfly, que permite testar seu site em várias resoluções de tela. Você pode argumentar que todas essas estratégias precisam de uma quantidade significativa de tempo, mas, novamente, é preciso suar muito para colher os benefícios. Hoje em dia, criar um site responsivo com desempenho responsivo é essencial, ainda mais porque o Google classifica os sites com base em seu desempenho. Se você é um designer ou desenvolvedor, não se limite a nenhuma das práticas recomendadas acima. Você deve procurar mais soluções e pode se esforçar para entregar um site com desempenho responsivo.