Cuidados com responsividade (parte 1)

Layouts responsivos se tornaram comuns nos últimos anos pela possibilidade de ajustar o mesmo website para diferentes resoluções de tela. Porém designers e desenvolvedores que utilizam esta técnica desconhecem (ou esquecem) que o planeta mobile é diferente do planeta desktop e que existem grandes implicações na performance de acesso em smartphones e tablets. Assim, o que fazer?

A melhor solução em questão de performance seria criar um layout que atenda somente as requisições feitas de dispositivos móveis ou até mesmo um aplicativo específico. Porém esta solução possui custos elevados e não são todos os que podem arcar com ela. Neste momento entra a responsividade que permite um mesmo layout ser mostrado em diferentes tamanhos de tela.

Mas a plataforma mobile é diferente da plataforma desktop e não somente no tamanho do dispositivo, mas nas funções que serão executadas, nas informações que serão oferecidas e principalmente na velocidade da conexão. Aqui na Europa existem boas conexões de internet para dispositivos móveis mas creio que não ocorre o mesmo no Brasil. Com isso os sites se tornam mais demorados frustrando o usuário que muitas vezes precisa acessar somente uma informação específica mas precisa carregar megabytes de imagens e conteúdo que não deseja.

A situação é tão grave que pesquisa apontam que 50% dos usuários mobile saem do site se ela não for carregada em até 10 segundos e mais da metade deles nunca mais retornam.

Fonte: http://www.onlinegraduateprograms.com/

Fonte: http://www.onlinegraduateprograms.com/

Olhos na arquitetura do projeto

Antes de qualquer projeto web é necessário saber se ele deve dar suporte para a plataforma mobile. Se a resposta é sim, o melhor a fazer é criar primeiro o estudo de usabilidade para esta plataforma e depois para o desktop, eliminado as informações que não são necessárias nesta plataforma e aquelas que pouco trazem vantagens para o usuário. Perguntas como “será que o usuário precisa de um slideshow no mobile?” ou “não é melhor mostrar nosso telefone e twitter em primeiro” devem ser respondidas nesta fase.

Com este estudo pronto, descobre-se quais os arquivos e elementos que devem ser carregados, como imagens e scripts JavaScript que conhecidamente deixam um site mais lento, reduzindo-os, utilizando outras opções mais rápidas ou até mesmo eliminando-os. Com esta atitude é possível ter um website rápido na plataforma mobile sem estragar a plataforma desktop e no término do desenvolvimento da plataforma mobile, testes de performance mostrarão se o estudo é válido ou não pela percepção do usuário. Quanto mais rápido o site for carregado com as informações necessárias, melhor será.

Antes de continuar, um comentário: a melhor forma de descobrir quais são as informações necessárias para o usuário é se colocar em seu lugar como um usuário de seu website ou serviço. Testes A/B também ajudam muito!

Tome cuidado com o que eliminará na versão da plataforma mobile. Alguns arquivos serão necessários na plataforma desktop e não podem ser deixados para trás. Porém, como dito, muito se pode conseguir na redução do tempo de resposta sem alterar nenhuma linha de código ou mesmo configurações na infra-estrutura. Somente com o estudo de usabilidade e apresentação de informações é possível ter um grande incremento na performance.

Em meu próximo artigo comentarei algumas técnicas de artifícios que podem ser usados para melhorar o tempo de resposta na plataforma mobile depois do estudo de usabilidade. Elas basicamente tratarão os assuntos de imagens e código performáticos. Enquanto isso uma dica: se você quer saber a performance de seu website na plataforma mobile, faça o teste gratuito clicando aqui.

Até lá.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

5 × 1 =

Post Navigation