Como Otimizar um Site para Visualização em Smartphones
Autor: Herlan Santos | Publicado: 2016-08-01T14:05:00-03:00


Um estudo recente deixa claro a importância que os dispositivos móveis possuem no consumo de informação. De acordo com a pesquisa, mais de 60% do tempo gasto com mídias digitais se dá através de um smartphone ou tablet, contra 40% do tempo gasto atrás da tela de computadores. Vivemos em um mundo cada vez mais conectado entre tudo e todos, a todo momento.



Fica evidente a importância de se desenvolver websites que sejam responsivos a dispositiivos móveis. Nesse sentido, existem diferentes maneiras de oferecer uma boa experiência móvel aos usuários. Nem sempre é necessário reconstruir um site a partir do zero para isto. Dependendo da finalidade do site em questão, é possível adotar algumas medidas simples que irão transformar o modo como os seus visitantes podem interagir com o seu conteúdo.



Instalar um Tema ou Plugin Responsivo

A melhor forma de garantir uma experiência de acesso móvel de qualidade é planejando a versão mobile do site desde o início. A forma mais fácil e eficiente de fazer isso é através da instalação de um tema responsivo. O WordPress possui centenas de temas responsivos gratuitos, e existem outros milhares a venda que oferecem funções mais específicas, como integração com e-commerce e outras plataformas.



Caso se trate de um site mais antigo e com um tema instalado que não seja responsivo, uma alternativa é a instalação de um plugin responsivo, que adapta o conteúdo do site conforme a tela em que é exibido. Não é a solução ideal e não funciona perfeitamente em todos os sites, mas pode ser uma boa alternativa temporária até que se resolva por readequar o design do site por completo.



Algumas empresas de hosting oferecem a opção de realizar a instalação do WordPress e seus temas diretamente do painel de controle. É o caso da 1&amp;1, que oferece planos de hospedagem com domínios ilimitados. Com apenas alguns clicks é possível instalar o WordPress e configurar o tema escolhido em questão de minutos.&nbsp;



Utilizar Fontes e Botões de Tamanhos Adequados

O tamanho da fonte é um dos fatores mais importantes na visualização de um site em smartphones e tablets. O tamanho mínimo para uma leitura confortável é de 14px. Os únicos campos em que um tamanho menor é aceitável são etiquetas e formulários.&nbsp;

Quanto aos botões, é importante que sejam de um tamanho grande o suficiente para que os usuários não tenham dificuldade em pressioná-los ou ainda que pressionem o botão errado. O guia de desenvolvimento da Apple, por exemplo, recomenda que sejam de no mínimo 44px por 44px.&nbsp;



Oferecer a Opção de Visualização de Desktop

Não importa o quão bonito seja o design de um site responsivo, é importante que não se limite a experiência do usuário. É importante oferecer a opção “visualizar a versão para desktop” no rodapé do site mobile. Muitas pessoas podem estar acostumados com a versão completa do site, e podem ter alguma dificuldade em encontrar o que procuram ao acessá-lo através de um smartphone.&nbsp;



Determinar a Largura das Imagens Para 100%

Se o tema não for responsivo por natureza, as imagens podem apresentar problemas de visualização em dispositivos móveis, as vezes ultrapassando as margens do restante do conteúdo. Para contornar este problema, basta configurar o tamanho máximo de exibição das imagens para 100%. Assim, as imagens irão se adequar naturalmente a qualquer tela em que forem exibidas. Isso pode ser feito com apenas algumas linhas de código CSS, acrescentando “img { max-width: 100% }” ao arquivo da folha de estilos.



A Google oferece uma ferramenta que verifica se um site pode ser exibido sem problemas em dispositivos móveis, e informa os possíveis erros de visualização e maneiras de como podem ser corrigidos.