Segundo pesquisa feita pela GlobalWebIndex, realizada com 170 mil adultos em 32 mercados e divulgada pelo site TechCrunch, 80% dos adultos de todo o mundo utilizam Smartphones.

Pensando nisso, os desenvolvedores precisam ter uma preocupação muito maior de tornar seus sites disponíveis também para esse público. É aí então que surge a necessidade de um site ser acessível independente da sua resolução de tela, que no desenvolvimento web chamamos de site responsivo.

Em um site responsivo, são utilizadas técnicas que dá a capacidade do mesmo adaptar-se a diferentes tamanhos de telas através da reorganização do conteúdo, imagens, simplificação do menu, com o objetivo principal de deixar as informações sempre bem visíveis, botões de ação fáceis de ser acionados através do touch screen, e etc.

Seguindo este propósito, segue 5 dicas para você desenvolver um site responsivo de qualidade:

1 - Utilize o conceito mobile first em seu projeto

Ao desenvolver um site, o mais normal, que ainda muito acontece em diversas empresas, é desenvolver os sites pensando no desktop como tela principal. Mas hoje em dia, como muitas vezes os acessos dos usuários estão muito maiores nos dispositivos móveis em relação ao Desktop, foi criado o conceito de Mobile First, que seria começar um projeto pensando primeiramente na experiência, performance e usabilidade do site nos dispositivos móveis, e posteriormente adaptar para o desktop.

Para auxiliar neste conceito, atualmente existem diversos frameworks front-end que trabalham a disposição dos elementos em cima de grids responsivas respeitando o mobile first, são eles:

2 - Mantenha seu código limpo

Esta dica pode parecer um pouco desnecessário neste post, mas acredite em mim, não é. Vejo muitos sites por aí desenvolvidos com códigos sujos, usando atributos HTML e propriedades CSS de forma errônea.

É extremamente importante que você faça um código limpo, utilize somente as propriedades CSS necessárias para realizar o efeito que você precisa.

Tente evitar:

  • Usar CSS position e float para qualquer elemento (nem sempre elas são as melhores opções);
  • Tags HTML desnecessárias, vazias, e etc;
  • Usar tags HTML genéricas para tudo  (div, span);
  • Estilos CSS inline ou através da tag (sempre use um arquivo externo);

Procure:

  • Usar um reset CSS, para você não ter surpresas de propriedades CSS aplicadas por padrão pelos browsers;
  • Desenvolver um código semântico, simples, objetivo e limpo;
  • Usar HTML5 à vontade!

3 - Respeite os limites de resolução

As resoluções de tela podem variar muito de acordo com o dispositivo que a pessoa possui, mas alguns padrões precisam ser definidos para seu projeto, até para facilitar a manutenção do código. Então, no mínimo, você precisa ter estes limites:

  • <360px (Aplicável para smartphones antigos de baixa resolução);
  • <480px (Aplicável para telas de smartphones menores);
  • <768px (Aplicável para smartphones mais largos e tablets menores);
  • <992px (Aplicável para tablets grandes);
  • >1200px (Aplicável para monitores de Desktop, TV's e etc).

4 - As MEDIA QUERIES são nossas amigas!

CSS media queries é um recurso do CSS3 que dá o poder ao desenvolvedor de especificar propriedades CSS específicas apartir de um determinado limite de tela. Com elas, poderemos ajustar nossos tamanhos dos conteúdos, larguras, posicionamentos de acordo com o dispositivo que se encaixar no limite de tela que você definir. Não há como construir um site responsivo sem elas. Deixo aqui um link de um vídeo da Origamid ensinando como aplicar as media queries da forma certa.

5 - Testes e mais testes

A melhor forma de você saber que seu site está ficando bem responsivo, é testando. pegue seus smartphones disponíveis e teste em todos! Compare item a item em cada um, navegue em todos eles e veja se a experiência está boa, peça para alguém que nunca viu o projeto acessar, e peça um feedback do que pode melhorar. Se estiver tudo ok, é sinal que você está no caminho certo!

Segue abaixo algumas ferramentas que utilizo para testar sites:

E a ferramenta que eu particularmente mais gosto, por dar uma visão geral do site em questão de performance, SEO, acessibilidade e muitos outros itens, é a Lighthouse.

Espero ter ajudado você com estas dicas, e continue acompanhando nosso blog pois em breve terá mais posts sobre front-end! =D

Até mais.