Dicas para sites e aplicativos responsivos

Dicas para sites e aplicativos responsivos

Leve, Rápido e Responsivo

Desenvolvimento do Projeto:
Design de ponta e padrões de usabilidade modernos, atrativo e envolvente

Recursos Inovadores:
Seu projeto é preparado e adaptado para funcionar de forma rápida em computadores, celulares e tablets

Super Flexível:
Conteúdo se move livremente em todas as resoluções de tela e todos os dispositivos

O instituto Nielsen apontou que no Brasil são cerca de 68,4 milhões de pessoas utilizando smartphones no primeiro trimestre de 2015. Para entender o impacto disso nas vendas, outra pesquisa realizada entre consumidores americanos apontou o seguinte: 55% das pessoas dos participantes desconsiderariam o uso de um site que não é otimizado para mobile se estivessem navegando em seus smartphones ou tablets . Todos esses dados apontam para uma realidade: o desenvolvimento mobile é uma necessidade.

Inspirados pelos resultados dessas pesquisas, buscamos informações para ajudá-lo a otimizar o desenvolvimento mobile. Sejam aplicativos nativos ou híbridos, esses pontos podem garantir uma melhor performance aos projetos mobile e, por consequência, melhorar a experiência dos usuários ao utilizá-lo.

Confira 9 dicas de desenvolvimento mobile:

  • 1 – Em primeiro lugar, carregue a visualização da página

Assim que acessam o site, usuários ficam mais pacientes ao reconhecerem a página que estão navegando, portanto sempre mostre o view da página antes de carregar os dados do servidor. Alguns exemplos de apps com esse comportamento: Netflix e hulu.

  • 2 – Rolagem infinita ou paginação no desenvolvimento mobile

Em dispositivos móveis, a rolagem é mais envolvente e natural do que a paginação. Porém, se a paginação se adapta melhor ao seu conteúdo, certifique-se de que os leitores podem usar o swipe para acessar a próxima página, em vez de ter que clicar em um pequeno link. De qualquer forma, para aplicativos que mostram listas de dados, carregue de 10 a 20 registros por página ou seção, adicionando limites para cada consulta. Nunca envie todos os dados de uma só vez, assim você otimiza o tempo de carregamento da página.

  • 3 – Sempre que possível, use o cache

Sempre que possível utilize cache, evitando fazer requests ao servidor. Dados estáticos, por exemplo, podem ser guardados no local storage. Alguns aplicativos que utilizam essa função são o Facebook e o Twitter, uma vez que o usuário faz uma consulta de dados, o resultado fica guardado no cache e o usuário pode consultar novamente sem realizar nova request ao servidor.

  • 4 – Evite o evento click no seu código

Durante o desenvolvimento mobile, no lugar do evento click utilize o touchend. Na maioria dos casos há um atraso considerável após o click do usuário em sites mobile. Para superar este atraso, no evento touchend a informação é enviada quando o utilizador levanta o seu dedo da superfície da tela. Para a tecnologia Jquery, você pode otimizar a navegação facilmente através do plugin fast click.

  • 5 – CSS3 + hardware acelerate

Para animações (use com moderação), troque as transições em CSS3 pelo uso combinado de CSS3 + hardware acelerate. Como consequência, o seu código ficará mais rápido. Para não precisar utilizar o acelerador de hardware direto no código, você pode usar o plugin Page Slider.

  • 6 – Mantenha seu aplicativo simples e flat

Mesmo sendo utilizados via CSS3, elementos de estilo como gradiente, bordas arredondadas e outros podem piorar a performance do seu aplicativo quando em excesso. Para verificar se é o caso, comente o código onde foram declarados os estilos e verifique se há melhora no carregamento.

  • 7 – Reduza o tempo de renderização

Browser reflow é o nome do processo do navegador web que recalcula as posições e elementos gráficos da sua página, com a finalidade de “re-renderizar” parte ou a totalidade do documento. Esse processo custa caro em termos de performance, especialmente para o desenvolvimento mobile.

  • 8 – Conheça outros frameworks

Nem sempre o framework da moda será o melhor para o seu projeto. Dois exemplos para levar em consideração são o XUI e o Zepto, ambos frameworks enxutos e, dependendo do caso, mais apropriados para o desenvolvimento mobile.

  • 9 – Tenha uma build otimizada

A organização dos arquivos e pastas farão uma grande diferença no tempo de carregamento do projeto. Evite aquivos múltiplos, reunindo tudo em apenas um arquivo JS, um HTML e um CSS e utilize hierarquia para organizar as pastas do seu projeto.

Share

Programador, Webmaster, Empresário e Consultor Web. Criador de vários projetos de sucesso na internet entre cursos, produtos, blogs e também alguns e-books com um alto grau de satisfação dos seus leitores.

Deixe uma resposta

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