Saiba por que e como ter 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.

Fonte: https://blog.umbler.com/br/vantagens-de-um-site-responsivo/

200 Fatores de classificação do Google: a lista completa

Você provavelmente já sabe que o Google usa cerca de 200 fatores de classificação em seu algoritmo… Mas o que diabos são eles? Bem, hoje você entenderá porque juntamos uma lista completa. Alguns estão comprovados, outros são controversos e alguns são especulações de...

Como um bom site ajuda a gerar mais negócios locais

Você já ouviu o termo “dá um Google“? Essa prática faz parte do dia a dia de praticamente todas as pessoas e as pesquisas são as mais variadas possíveis. As buscas na internet vão desde receitas culinárias a letras de música, passando por resultados de jogos...

Como criar um site profissional em Belém?

Se você esta procurando uma empresa para desenvolver o seu novo web site, mas está procurando mais qualidade e profissionalismo. Então, vou te apresentar a maneira que os profissionais de São Paulo e das grandes capitais criam sites modernos e que realmente funcionem,...

Criação de Site em Belém

Sua empresa precisa criar um site que seja adaptado para o celular, moderno, rápido e que converta visitantes em clientes. Temos experiência para produzir seu projeto em pouco tempo e com qualidade profissional. Em Belém, poucas agências digitais entregam no prazo...

Como começar a desenvolver sites em WordPress?

Muitas pessoas querem ter um site próprio, seja para uso de uma empresa ou uso pessoal, mas não sabem por onde começar. Com o WordPress seus problemas estão resolvidos – ou parte deles. Que um bom site é fundamental para alavancar seus negócios, todos já sabem. Mas as...

Criar um site pode salvar o seu negócio da falência

O seu modelo de negócio esperava que o seus clientes entrassem pela porta de entrada da sua loja para ver os seus serviços ou você tinha que ir até os seus clientes para mostrar o seu serviço ou produto? Esta na hora de você repensar o seu modelo e evoluir. “Os...

Falta de presença no ambiente digital prejudica a atração de clientes de pequenas e médias empresas

Mesmo com consumidores cada vez mais adeptos às pesquisas de preços e às avaliações online, a maior parte das pequenas e médias empresas (PMEs) ainda não investe no ambiente digital. A falta de estratégias online e a preferência por uma publicidade mais tradicional...

Configr Webinar #1 – Tudo sobre o PageSpeed Optimizer da Configr

Webinar sobre a nova funcionalidade da Configr: o PageSpeed Optimizer, que faz, automaticamente, várias das melhorias sugeridas pelo Google, com CEO Arthur Furlan. Quer saber mais sobre a Configr e nosso serviço? Somos parceiros da Configr, temos um painel exclusivo...

Agende uma Reunião Virtual e converse com um especialista em Web Sites, para evitar a disseminação do novo Coronavírus

Sua empresa precisa de um site responsivo, otimizado, intuitivo e dinâmico. Sua presença digital é fundamental para o fortalecimento da sua marca, divulgação de seus produtos ou serviços e relacionamento com seu público-alvo. A Futturu é uma agência ou produtora...

Otimização de sites para SEO: um resumo completo

Melhorar o posicionamento de uma página no Google é um dos melhores investimentos de marketing a longo prazo que você pode fazer pelo seu negócio, seja ele um comércio eletrônico ou um blog que vive de publicidade. E como o Google usa muitos fatores de ranqueamento,...
×