Dicas para a criação de um site para a era móvel

Design responsivo. Essa é a regra da vez quando o assunto é internet e mobilidade. Até poucos anos atrás ninguém se preocupava muito em como seu site abriria em celulares. A maioria dos grandes sites possuíam uma versão para celular muito limitada e simples, mostrando somente alguma informação básica realmente necessária para quem estava acessando através da telinha.

Porém as coisas mudaram, e o mercado de dispositivos móveis cresce mais do que o de PCs. Estima-se que até o final desse ano, 1.75 bilhão de pessoas estarão usando um smartphone regularmente.

Muita gente usa smartphones hoje em dia, seja para acessar redes sociais, ver emails e ler notícias. E é muito conveniente quando se clica em algum link, e o site abre confortavelmente na tela do aparelho. Seguindo a mesma lógica, é extremamente irritante visualizar um site não otimizado, pois é preciso dar e tirar zoom e ficar movendo a tela para poder visualizar o conteúdo.

E o que faz um site abrir bem tanto em desktops quanto em smartphones e tablets, ou seja, adaptar-se a qualquer tamanho de tela? É a tal da responsividade, um conjunto de técnicas utilizando javascript e CSS, que fazem o layout da página se esticar e encolher de acordo com o tamanho, ou até carregar uma folha de estilos diferente.

Responsividade

Essa é a primeira dica, e a base de tudo. A maneira mais fácil e eficiente de criar um site com design responsivo é utilizando frameworks já consolidados para tal. Os frameworks são livrarias em Javascript que criam estilos visuais otimizados para os principais elementos de um site, como menus, diálogos, listas, formulários, etc.

Além de proporcionar uma melhor experiência de uso entre os diferentes dispositivos, o design responsivo consolida o website, pois você não precisa utilizar uma URL diferente para cada plataforma, além de trazer benefícios de SEO (Search Engine Optimization - otimização para mecanismos de busca), e de ser mais fácil de gerenciar somente um site.

Eles são muito fáceis de implementar e customizar, além de muitos serem open-source e estarem sempre em desenvolvimento para oferecer mais recursos e performance.

Dois frameworks muito bons são o JQuery Mobile e o Bootstrap.

Tenha sempre em mente o dedo

Para não dizer todos, a grande maioria dos usuários possui smartphones com tela sensível ao toque, ou seja, usa os dedos para navegar.

Tendo em mente esse fato, todos os elementos da página devem ter tamanho suficiente para serem ativados pelo toque de um dedo, e também não podem ser dispostos de maneira a confundir o toque.

O principal é tornar menus, botões, links e formulários otimizados para o toque, algo que os frameworks fazem com facilidade.

Essa é uma das dicas mais importantes para qualquer site móvel, pois seu objetivo deve ser que os usuários naveguem pelo site utilizando apenas uma mão. Além disso, se o usuário tiver que dar zoom, significa que seu conteúdo é muito pequeno ou não está otimizado para aquele dispositivo.

Mantenha o design simples

Essa dica é importante para todos os sites. Os dias das páginas animadas, com flash, som e vídeo acabaram. Um design simples e direto mantém o foco na mensagem que sua empresa deve passar ao cliente. E quanto menos elementos supérfluos a página tiver, mais rápido o usuário visualiza a informação.

Além disso, sites com muitas animações e carregados de imagens tendem a ser pesados, o que é péssimo para quem acessa a partir de um celular.

O conteúdo deve ser sucinto

Textos muito grande desanimam o leitor. Você deve fazer o possível para expressar suas ideias da maneira mais curta e sucinta possível, de forma que o visitante precise de apenas alguns segundos para tomar conhecimento da informação a ser passada.

Além disso, sempre que possível utilize ícones, pois podem traduzir determinadas mensagens mais rapidamente.

Otimize as imagens para dispositivos móveis

Internet móvel costuma ser bem mais lenta do que banda larga convencional, cabeada. Você deve ter isso em mente na hora de colocar imagens no site. Elas devem ser otimizadas para terem o menor tamanho possível, seja através de compressão ou utilizando CDNs.

Evite javascript excessivo

Javascript é excelente pois traz diversas funcionalidades e recursos que o HTML sozinho não pode oferecer, porém você deve utilizá-lo com cautela. Os frameworks para responsividade utilizam Javascript, e a cada dia são aprimorados para consumirem menos recursos. Mas os seus próprios scripts devem ser criados com cautela, tendo isso em mente também.

Vale lembrar que cada navegador pode interpretar os scripts de maneira diferente, deixando seu site suscetível a problemas de compatibilidade sérios, então deve-se testar exaustivamente o site com uma ampla gama de aparelhos e navegadores.

Deixe as informações de contato com fácil acesso

Não é incomum abrirmos um site e ter dificuldades em encontrar o contato da empresa, principalmente telefone e endereço. Deixe essas informações bem visíveis, com fácil acesso.

Normalmente, quem acessa o site da sua empresa pelo celular está procurando alguma informação sobre ela, principalmente o telefone e endereço, para chegar até lá ou entrar em contato com o local.

Outras informações importantes são o horário de funcionamento do estabelecimento, caso haja, preços dos serviços e meios de pagamento aceitos.

Utilize vídeos, mas com sabedoria

Vídeos são elementos fundamentais a qualquer site para dispositivos móveis. Isso porque consumidores que utilizam dispositivos móveis são três vezes mais propícios a assistir um vídeo do que quando acessam pelo computador.

Com isso em mente, você deve utilizar tecnologias que reduzam a quantidade de banda usada, além de players leves que utilizem HTML5, para otimizar os recursos dos aparelhos.

Formulários devem ser otimizados para dispositivos móveis

Formulários são outros elementos básicos para qualquer site, sejam eles de pesquisa, cadastro, login ou contato.

A primeira medida é pedir o mínimo de informações possível. Por exemplo, em um formulário de cadastro, não peça 20 campos - nome, email, senha, endereço, número, complemento, CEP, bairro, cidade, estado, telefone, celular. É desgastante. No primeiro momento, peça apenas email e senha, por exemplo, para tornar o cadastro rápido. Após o usuário fazer o login, poderá ser encaminhado a completar outras informações fundamentais.

Outra medida interessante é utilizar as APIs de login/cadastro do Facebook e Google, que agilizam muito o processo e podem aumentar em até 20% o número de cadastros em seu site, de acordo com pesquisa do Facebook.

Os frameworks mencionados no início já otimizam automaticamente os formulários, inclusive aplicando estilos visuais que suavizam a experiência de uso, dando um aspecto bem mais profissional.

Utilize a geolocalização

Apesar desse recurso não ser muito preciso em desktops, os smartphones e tablets possuem GPS e outros métodos para saber a localização exata do aparelho, e isso é muito útil pois você pode utilizar esse dado para exibir um mapa inteligente, que leva em conta onde o cliente está para exibir um passo a passo de como chegar ao seu estabelecimento, se for o caso.

Além disso, existem várias estratégias de marketing que podem ser usadas levando em conta a localização do visitante.

Teste sua página em vários dispositivos

Essa é a dica fundamental para garantir que seu site será compatível com o maior número de dispositivos possível. Cada navegador e sistema operacional interpreta javascript e CSS de maneira diferente. Claro que de uma maneira geral, a maioria das instruções segue um padrão determinado, para garantir a compatibilidade dos sites. Porém, estilos e scripts específicos podem não funcionar direito em determinada plataforma, normalmente por erro do próprio desenvolvedor. Então é importante testar, para evitar que usuários sejam prejudicados.