Responsive Web Design (RWD- Desenho de web responsivo) é a palavra da moda hoje, mas mesmo que tenha sido falado por mais de dois anos, em muitos aspetos ainda está no seu início. Os desenhadores enfrentam uma gama fragmentada e mutável de dispositivos, estruturas de código e capacidades de navegador – além, é claro, da necessidade de trabalhar de forma diferente com os clientes para gerir o processo de criação de sites responsivos.

Em particular, as páginas com design responsivo são inerentemente mais complexas do que a página média do site apresentada no telemóvel. Devido a essa complexidade, a RWD requer mais atenção no desempenho se queremos evitar a degradação da velocidade e aumentar o uso de dados por parte do utilizador. Como acontece com qualquer um de nós utilizadores frequentes de telemóveis, não pode haver nada mais frustrante do que as páginas que carregam lentamente e isso pode definir o sucesso ou falhanço de um canal online de um negócio já que os utilizadores que não são feitos para esperar muito tempo e vão rapidamente para outro site que funciona mais rápido.

Praticamente todas as empresas com quem falo, em todo o mundo, vão adotar a RWD, já a adotaram ou, pelo menos, estão a avaliá-la seriamente. Mas isso levanta uma questão, com todo esse alarido, quantos sites são realmente responsivos?

Recentemente, eu testei os primeiros 10.000 websites (de acordo com Alexa) para comprovar se eles são responsivos. Este teste foi uma repetição do teste que fiz no ano passado e baseia-se principalmente na presença de uma barra de deslocamento horizontal ao carregar a página numa tela pequena. Se a barra de deslocamento estiver presente, isso indica que o site não ajustou o seu design à tela e, portanto, não é responsivo. O que eu descobri é que a percentagem de sites responsivos entre os primeiros 100, 1.000 e 10.000 sites é bastante substancial, atingindo uma taxa de adoção de 18,7% em todo o conjunto de dados.

É claro que é uma tendência que as organizações estão a adotar, por isso vale a pena ter em consideração alguns dos principais conselhos ao embarcar num web design responsivo o que ajudará a superar melhor os riscos e ajudará a garantir o desempenho, otimização e uso de dados para os sites das organizações:

  1.      Descarregar imagens com um tamanho adequado para cada ecrã, uma técnica conhecida como «Imagens Responsivas».

Os sites responsivos normalmente exibem a mesma imagem em todos os tamanhos de ecrã (supondo que a imagem não esteja oculta), mas definem o tamanho de exibição da imagem usando um percentil para que se adaptar suavemente ao tamanho da tela. Esta técnica, conhecida como «Imagens Fluidas», é boa visualmente, mas cria desgaste no volume de dados descarregados. A melhor solução é criar múltiplas versões de cada imagem, cujo tamanho é redimensionado no servidor para obter a imagem certa e baixar a mais próxima das capacidades do ecrã, usando um carregador de imagens mais inteligente. Isto pode ser feito usando srcset, um novo modelo que já está a conseguir um bom apoio do navegador. Alternativamente, isso pode ser feito usando modelos que tenham menos suporte, por exemplo, o elemento imagem, auxiliado por JavaScript pollyfills. Redefinir o tamanho das imagens no servidor significa que a carga enviada para ecrãs pequenos é menor e a página é mais rápida. Para uma maior agilidade, basta armazenar a «melhor» imagem no servidor e utilizar serviços de transcodificação de imagens proxy, como o «Image Converter» da Akamai, para redimensionar a imagem imediatamente antes de ser entregue ao cliente.

  1.       Evitar descarregar imagens ocultas usando carregadores de imagens mais inteligentes. Além de tornar as imagens fluidas, sites responsivos usam regras de estilo para ocultar imagens, definindo seu estilo como «display:none». No entanto, ocultar uma imagem dessa forma não impede que o navegador a descarregue, resultando num download ineficiente da imagem. Como a maioria dos sites responsivos exibe muito menos imagens em telas menores, este problema compete com o nº 1 pela primeira razão, devido ao peso excessivo da página dos sites responsivos carregados numa única página. Use carregadores de elementos de imagem baseados em JS, como os descritos na dica nº1, para evitar o download dessas imagens ocultas.
  2.       Upload com JavaScript, e especialmente JavaScript de terceiros.

Os sites responsivos geralmente incluem componentes JavaScript que não são usados numa tela pequena. Por exemplo, no Twitter, mapas de localização, chats de agentes ao vivo e muito mais. Como os exemplos de imagens mencionados acima, ocultar a saída dessas imagens usando estilos não impede o navegador de descarregar e de executar os scripts. Embora tenham uma carga menor, os scripts têm um impacto muito maior byte a byte no tempo de carregamento da página, e scripts de terceiros também podem introduzir pontos de falha de confiabilidade numa página. Portanto, é melhor envolver esses scripts com um pequeno script alinhado que verifica as propriedades do dispositivo e somente adiciona os scripts à página se for realmente necessário, evitando assim riscos de lentidão e confiabilidade. É importante fazer isso cuidadosamente para evitar diminuir a velocidade da versão do site para telas maiores, por exemplo, adicionando dinamicamente elementos ao Document Object Model (DOM) sempre que possível em vez de usar a função «document.write()».

  1.       Use o RESS – REsponsive + Server Side – para otimizar seu site para clientes conhecidos.

O design responsivo é uma excelente ferramenta para suportar muitos tipos de clientes sem sequer saber da sua existência, mas muitas vezes isto leva a downloads desnecessários e excessivos. Alguns deles podem ser manuseados usando carregamento inteligente, mas outros tipos – como HTML e CSS excessivos – são muito mais difíceis de lidar no cliente. A única solução real é introduzir um componente no lado do servidor que identifique clientes conhecidos e populares e adapte o HTML de acordo com esses clientes. Outros clientes terão o site responsivo, que ainda deve funcionar, mesmo que seu desempenho seja menor. Um bom exemplo disso é cortar as partes maiores «só para tela grande» do seu HTML quando se identifica que um cliente é um smartphone conhecido, eliminando na maioria das vezes nas mesmas referências técnicas a arquivos JavaScript e CSS que não serão necessários.

  1.       Insira testes de desempenho para o seu QA ou processo de criação.

Afinal uma pessoa pode otimizar o que pode medir. Se quiser ser rápido e manter essa velocidade, é importante introduzir um teste de desempenho nos seus processos regulares de teste e qualidade, e fazê-lo o mais rápido possível no fluxo de trabalho. Ferramentas como o WebPageTest e muitas outras facilitam a adição de um simples teste de desempenho de páginas-chave na sua aplicação, e executar esses testes a partir de navegadores com tamanhos diferentes, dependendo do tamanho das janelas de visualização e simulando diferentes propriedades de proporção de pixels do dispositivo («Retina»). Dê uma olhadela na lista de comandos de scripts do WebPageTest para ver estas manipulações, que normalmente são realizadas no navegador Chrome. Um ponto de partida simples é medir o desempenho de uma página específica no seu site hoje 20 ou 30 vezes, comparar o tempo médio de carregamento da página e anotar o desvio padrão. De seguida, insira a mesma medida de desempenho no seu processo de criação e, se o tempo médio de carregamento da nova página em mais de um desvio padrão for maior do que a linha de referência, marque a criação como danificada. Isto irá ajudá-lo a evitar que o seu desempenho se degrade ao longo do tempo, e irá então permitir que se concentre em tornar esta linha de base mais pequena.

 

Mantenha-se informado das notícias mais relevantes em nosso canal Telegram