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 atende a um público mais amplo como deveria.
A crença antiga 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, é necessário olhar além do design responsivo. Em vez disso, o foco deve ser garantir um desempenho responsivo. Este post é sobre o mesmo.
Então, a grande questão é o que fazer?
Descartar o conceito de design que prioriza a área de trabalho
Um contribuinte significativo para esse problema persistente é que ainda o foco 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 o problema de 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 na qual o objetivo será oferecer apenas as informações pretendidas para o 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 demore uma fração de segundo, pode 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 tela de baixa resolução, seu objetivo é sempre acessar o conteúdo do site, mas o que ele vivencia é um pesadelo. Isso ocorre devido à dificuldade em navegar pelos anúncios desnecessários sem fim. 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. Oferecer uma versão somente 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 forma a reduzir seu alcance potencial?
Você certamente aceitará o fato de que esperar infinitamente apenas para verificar um site não entusiasma ninguém. De acordo com algumas pesquisas da Akamai e Gomez.com, aproximadamente 50% dos usuários da web esperam que um site carregue 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? O botão curtir do Facebook sozinho exige um código compactado de 270 KB! Também requer várias solicitações HTTP. Em vez de,
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 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 deliciar com as 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 apenas de desktop foram reduzidos para 10,6 por cento.
Precisa dizer mais alguma coisa para convencer?
Assegurar a 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 normal implica que, mesmo que um recurso não funcione com êxito, ele deve falhar de forma a facilitar uma usabilidade aceitável. Isso significa criar um design de site para um desktop e, gradualmente, migrar para tablets, smartphones e telefones comuns. O desempenho de um design responsivo no qual o site está se degradando graciosamente certamente será alto, pois a experiência do usuário é sempre de alto nível. O site permanecerá funcional, apesar de quaisquer deficiências, e o visitante certamente ficará impressionado com a qualidade geral.
Agora, você pode ter essa pergunta em mente: o que há de tão fascinante na degradação graciosa? A resposta é simples. Isso ocorre 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 tornam-se quadrados, o texto é agrupado em vez de correr em uma única linha, gradientes tornam-se cores planas e muito mais.
Vamos dar 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 desativados no lado do cliente. Então, o que você pode fazer para obter o conteúdo? Bem, nesse caso, a degradação normal permite que seu navegador exiba o conteúdo dentro da tag "noscript".
Isso você pode entender melhor com a codificação fornecida abaixo:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>Há mais um exemplo de degradação normal que gostaria de compartilhar, e é o uso de HTML5 pelo YouTube para reproduzir vídeos. Suponha que seu navegador não suporte HTML5, o vídeo será exibido usando o Flash e, mesmo que o Flash não esteja 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 resolver o problema.
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. Às vezes pode ser dois ou três mesmo. A ferramenta que uso com mais frequência 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 página. No entanto, será uma boa prática analisar quais bibliotecas estão em uso e até que ponto.
Verifique a disponibilidade de recursos
Você pode verificar se o seu dispositivo suporta um determinado recurso ou não antes de ativá-lo. 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 está exibindo 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 pare de responder. 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 em dispositivos e ainda a criação de sites ou aplicativos resultou em alguns problemas perceptí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 na prateleira como novos em qualquer uma das lojas de celulares. Muitos usuários móveis também enfrentam o mesmo problema de desempenho com o aplicativo YouTube e Twitter. Mesmo uma atualização do serviço Webview do sistema Android 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 cerca de 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 sozinho. Use uma técnica de compactação inteligente e retire-a de quaisquer metadados redundantes. Converter gráficos em PNG, imagens ricas em cores em JPEG e imagens animadas em 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 aos seus stakeholders. Isso pode parecer legal à primeira vista, mas se você focar seus esforços nos cenários mais desafiadores, no começo, você conseguirá um bom resultado.
Por exemplo, uma página da web com alguns artigos, blogs e comunicados à 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 Design de Site 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 rendem 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 tantos dispositivos reais quanto possível.
Você também pode usar 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ê é 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 fornecer um site que exiba desempenho responsivo.