Camilla Martins
Camilla Martins, Desenvolvedora Thoughtworks

Vantagens de um site responsivo

Recentemente o google lançou uma otimização para dispositivos móveis como um critério importante para avaliar os sites em seu ranking. Essa alteração afeta tanto as buscas através de telefones móveis quanto as buscas em geral em todas as línguas do mundo. Como resultado, espera-se que os sites que estejam otimizados serão melhor ranqueados do que aqueles que não estiverem. Por isso, agora é o momento de fazer essa otimização e tornar seu site responsivo.

Hoje em dia, mais de 50% das buscas no Google são realizadas através de telefones celulares e o Google quer entregar um serviço melhor para essas pessoas (faz sentido, não é?). Esse tema teoricamente deveria estar na cabeça da galera, não?

Jim Carrey What GIF - Find & Share on GIPHY

 

Na verdade não. As pessoas não são obrigadas a saber tudo sobre programação, mas nunca é tarde pra aprender, ainda mais quando isso facilita bastante a vida de quem acessa seu site, dando mais chances pra pessoa voltar! 🙂

Jim Carrey Lol GIF - Find & Share on GIPHY

 

Segundo a empresa de inteligência SEMrush, mais de 50% do tráfego do Brasil é realizado na internet através dos smartphones. No Brasil, mais de 55% das buscas realizadas no google são feitas através dos dispositivos móveis. Outros países como Itália, Estados Unidos, Reino Unido, Espanha e Índia também não ficam muito para trás.

Sendo assim, está mais do que na hora de tornarmos nossos sites responsivos, possibilitando que ele seja acessado de qualquer forma, de qualquer lugar. Vamos lá?!

PWAs

Os Progressive Web Apps (PWA) são aplicações web desenvolvidas com um conjunto de tecnologias que adicionam progressivamente funcionalidades e uma experiência móvel, antes possíveis somente em apps nativos. É este conjunto de tecnologias/técnicas, como: push notifications, service workers, geolocalização, offline first, responsividade, que o tornam PWA tão importante. Os PWAs permitem que sites se tornem “aplicativos” do seu celular, salvando apenas o ícone do site na “área de trabalho” do seu aparelho. Ele tem o mesmo comportamento de aplicativo, mas ainda é o site “responsivo” e disponibilizado em larga escala.

Mas eu não vou me aprofundar em PWAs. Não hoje. Então se você quer saber mais sobre essa aplicação, fique de olho aqui no blog que vai ter mais conteúdo ensinando como utilizar e dando algumas dicas bem legais sobre. E, se você não quiser trabalhar com PWAa, existem ainda as clássicas estruturas do CSS, que podem te ajudar muito nesse processo de tornar um site mobile. Vamos dar algumas dicas para você construir um site responsivo legal!

Por que responsivo?

Algumas vantagens de um site responsivo são:

A importância de incluirmos o maior número de pessoas no acesso do seu site, pensando em todos os seus usuários. Isso é importante pois melhora a experiência do usuário, fortalecendo sua identidade visual.

Sites responsivos aparecem em melhores colocações nas buscas do Google. Para melhorar as colocações, não apenas o site responsivo adianta, mas também pensar muito em técnicas de SEO. Pensando nisso, a Umbler preparou um e-book com tudo que desenvolvedores precisam saber sobre SEO

Temos que dar atenção também para o Mobilegeddon, um projeto interno do Google que facilita esses resultados mais fortes pra quem tem sites responsivos. 🙂

Sites responsivos carregam mais rápido. Um dos famosos sites para verificar o carregamento do seu site (e muito utilizado pela galera da Umbler no suporte) é o WebPageTest.

Melhor acessibilidade em todos os navegadores. Sabemos que, atualmente, o navegador mais utilizado do mundo é o Google Chrome. Porém, não é só ele que existe e muitas pessoas acessam diversos navegadores. É importante sempre ter um site que seja compatível com os principais navegadores: Firefox, Chrome, Opera, Safari, Internet Explorer e Edge. Nem sempre o site fica 100% em todos, mas quanto maior a facilidade de visualização, mais visitantes você terá na sua página.

Diminuição da taxa de rejeição. Por que? Porque se o site é bonito e legal de olhar, a pessoa não vai sair dele se lá tiver a informação que ela precise. Sites que dificultam a legibilidade, que o usuário precise dar zoom para ler, ou que tenha formulários impossíveis de preencher e informações confusas, são facilmente rejeitados pelos usuários.

Gerenciamento fácil, pois agora eu não preciso de um app mobile e de um site. Muitas vezes a pessoa não consegue baixar, porque tem pouco espaço no telefone ou nem sabe que aquele site tem uma versão mobile para instalar, etc. Por isso a facilidade do site responsivo e dos PWAs: você tem um único projeto para gerenciar.

Bacana, né? O pior é que por mais recorrente que seja o assunto, até hoje entramos em vários sites sem responsividade. Inclusive, sites importantes, como bancos, governos, serviços, etc.

Vamos para o segredinho disso tudo?

Tornando meu site responsivo

Existe uma parte bem simples no CSS que pode facilitar sua vida, que são as media queries.


/* Em telas com tamanho máximo de 1024px, colocar a cor do fundo do site azul */
@media screen and (max-width: 1024px) {
body {
background-color: blue;
}
}

/* Em telas com no máximo 600px, colocar o fundo cor oliva */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}

/* Em telas com no mínimo 1025px, colocar o fundo cor rosa */
@media screen and (min-width: 1025px) {
body {
background-color: pink;
}
}

/* Em telas com no mínimo 1025px, colocar o fundo cor rosa */
@media screen and (min-width: 1025px) {
body {
background-color: pink;
}
}

/* Em telas com no mínimo 600px e máximo 900px, colocar fundo vermelho */
@media screen and (max-width: 900px) and (min-width: 600px) {
body {
background-color: red;
}
}

 

Lembrando que estes códigos são exemplos isolados, porém é geralmente assim que trabalho para construir sites responsivos.

Dentro de cada tamanho de tela, você vai construindo os elementos. Por exemplo, se quero que a minha div id=”menu” seja responsiva, eu tenho que chamar ela dentro dos media queries.

 


/* Em telas com no mínimo 600px e máximo 900px, colocar fundo vermelho */
@media screen and (max-width: 900px) and (min-width: 600px) {
#menu {
/* conteúdo aqui */
}
}

 

Uma coisa que é importante também para responsividade é não usar muito tamanhos fixos em pixels como width: 400px;. Procure substituir por tamanhos em porcentagens, como 50%. Isso já é uma mão na roda e auxilia bastante. Procure colocar também alturas em porcentagem ou automáticas (height: auto).

Para saber mais sobre Media Queries, existe um ótimo tutorial na W3Schools, que eu uso como manual desde que comecei no mundo dev.

Eu uso WordPress, e aí?

Apesar de eu não recomendar muito utilizar plugins para “responsivar” os sites, existe o WP Touch, que já utilizei e é o melhor deles. Porém, ele faz isso de forma automática e com poucos recursos de customização. Por isso, acho que o melhor é quando você tem controle do que pode mudar, pois fica com uma identidade visual mais autêntica.

Tá responsivo mesmo, Camilla?

Um site bom para ver se está responsivo e quais são as resoluções mais utilizadas do mercado é o Responsive do Codeorama. Você coloca seu site e testa as resoluções. Também tem como testar não só a resolução, como também alguns sistemas operacionais aqui no Responsive Design Test.

Tem algo ainda mais mágico que tudo isso, que seria aplicar testes de interface para diferentes browsers. Existe um framework que pode te ajudar nisso, que é o Selenium.

Não podemos esquecer que dá pra ver responsividade em navegadores como o Chrome e o Firefox de maneira bem simples, através do F12 (Ferramentas para Desenvolvedores).

Seguindo esses passos você terá um site responsivo e bem rankeado no google. No próximo conteúdo falaremos mais sobre as PWAs. Ficou com alguma dúvida? Tem algum tema que gostaria de ler aqui no blog? Deixe seu comentário.

Camilla Martins
Camilla Martins, Desenvolvedora Thoughtworks

Crie sua conta na Umbler e ganhe até R$ 100 em créditos para sites e e-mails!

Ganhe até R$ 100 em créditos para sites e e-mails. Cadastre-se na Umbler sem compromisso ;)