![\"Jim](\"https:\/\/media0.giphy.com\/media\/BjeiL8WnqByKY\/giphy.gif\")
<\/a><\/p>\nNa verdade n\u00e3o. As pessoas n\u00e3o s\u00e3o obrigadas a saber tudo sobre programa\u00e7\u00e3o, mas nunca \u00e9 tarde pra aprender, ainda mais quando isso facilita bastante a vida de quem acessa seu site, dando mais chances pra pessoa voltar! \ud83d\ude42<\/p>\n
Segundo a empresa de intelig\u00eancia SEMrush, mais de 50% do tr\u00e1fego do Brasil \u00e9 realizado na internet atrav\u00e9s dos smartphones. No Brasil,\u00a0mais de 55% das buscas realizadas no google s\u00e3o feitas atrav\u00e9s dos dispositivos m\u00f3veis. Outros pa\u00edses como It\u00e1lia, Estados Unidos, Reino Unido, Espanha e \u00cdndia tamb\u00e9m n\u00e3o ficam muito para tr\u00e1s.<\/p>\n Sendo assim, est\u00e1 mais do que na hora de tornarmos nossos sites responsivos, possibilitando que ele seja acessado de qualquer forma, de qualquer lugar.\u00a0Vamos l\u00e1?!<\/p>\n Os Progressive Web Apps (PWA) s\u00e3o aplica\u00e7\u00f5es web desenvolvidas com um conjunto de tecnologias que adicionam progressivamente funcionalidades e uma experi\u00eancia m\u00f3vel, antes poss\u00edveis somente em apps nativos. \u00c9 este conjunto de tecnologias\/t\u00e9cnicas, como: push notifications, service workers, geolocaliza\u00e7\u00e3o, offline first, responsividade, que o tornam PWA t\u00e3o importante. Os PWAs permitem que sites se tornem \u201caplicativos\u201d do seu celular, salvando apenas o \u00edcone do site na \u201c\u00e1rea de trabalho\u201d do seu aparelho. Ele tem o mesmo comportamento de aplicativo, mas ainda \u00e9 o site \u201cresponsivo\u201d e disponibilizado em larga escala.<\/p>\n ]Mas eu n\u00e3o vou me aprofundar em PWAs. N\u00e3o hoje. Ent\u00e3o se voc\u00ea quer saber mais sobre essa aplica\u00e7\u00e3o, fique de olho aqui no blog que vai ter mais conte\u00fado ensinando como utilizar e dando algumas dicas bem legais sobre. E, se voc\u00ea n\u00e3o quiser trabalhar com PWAa, existem ainda as cl\u00e1ssicas estruturas do CSS, que podem te ajudar muito nesse processo de tornar um site mobile. Vamos dar algumas dicas para voc\u00ea construir um site responsivo legal!<\/p>\n Algumas vantagens de um site responsivo s\u00e3o:<\/p>\n Bacana, n\u00e9? O pior \u00e9 que por mais recorrente que seja o assunto, at\u00e9 hoje entramos em v\u00e1rios sites sem responsividade. Inclusive, sites importantes, como bancos, governos, servi\u00e7os, etc. Existe uma parte bem simples no CSS que pode facilitar sua vida, que s\u00e3o as media queries<\/em>.<\/p>\n Lembrando que estes c\u00f3digos s\u00e3o exemplos isolados, por\u00e9m \u00e9 geralmente assim que trabalho para construir sites responsivos.<\/p>\n Dentro de cada tamanho de tela, voc\u00ea vai construindo os elementos. Por exemplo, se quero que a minha div id=\u201dmenu\u201d seja responsiva, eu tenho que chamar ela dentro dos media queries<\/em>.<\/p>\n Uma coisa que \u00e9 importante tamb\u00e9m para responsividade \u00e9 n\u00e3o usar muito tamanhos fixos em pixels como width: 400px;. Procure substituir por tamanhos em porcentagens, como 50%. Isso j\u00e1 \u00e9 uma m\u00e3o na roda e auxilia bastante. Procure colocar tamb\u00e9m alturas em porcentagem ou autom\u00e1ticas (height: auto).<\/p>\n Para saber mais sobre Media Queries, existe um \u00f3timo tutorial<\/a> na W3Schools, que eu uso como manual desde que comecei no mundo dev.<\/p>\n Apesar de eu n\u00e3o recomendar muito utilizar plugins para \u201cresponsivar\u201d os sites, existe o WP Touch<\/a>, que j\u00e1 utilizei e \u00e9 o melhor deles.\u00a0Por\u00e9m, ele faz isso de forma autom\u00e1tica e com poucos recursos de customiza\u00e7\u00e3o. Por isso, acho que o melhor \u00e9 quando voc\u00ea tem controle do que pode mudar, pois fica com uma identidade visual mais aut\u00eantica.<\/p>\n Um site bom para ver se est\u00e1 responsivo e quais s\u00e3o as resolu\u00e7\u00f5es mais utilizadas do mercado \u00e9 o Responsive do Codeorama<\/a>. Voc\u00ea coloca seu site e testa as resolu\u00e7\u00f5es. Tamb\u00e9m tem como testar n\u00e3o s\u00f3 a resolu\u00e7\u00e3o, como tamb\u00e9m alguns sistemas operacionais aqui no Responsive Design Test<\/a>.<\/p>\n![\"Jim](\"https:\/\/media2.giphy.com\/media\/UZA15w44oCT1m\/giphy.gif\")
<\/a><\/p>\nPWAs<\/h2>\n
Por que responsivo?<\/h2>\n
\n
\nVamos para o segredinho disso tudo?<\/p>\nTornando meu site responsivo<\/h2>\n
\r\n\/* Em telas com tamanho m\u00e1ximo de 1024px, colocar a cor do fundo do site azul *\/\r\n@media screen and (max-width: 1024px) {\r\nbody {\r\nbackground-color: blue;\r\n}\r\n}\r\n\/* Em telas com no m\u00e1ximo 600px, colocar o fundo cor oliva *\/\r\n@media screen and (max-width: 600px) {\r\nbody {\r\nbackground-color: olive;\r\n}\r\n}\r\n\/* Em telas com no m\u00ednimo 1025px, colocar o fundo cor rosa *\/\r\n@media screen and (min-width: 1025px) {\r\nbody {\r\nbackground-color: pink;\r\n}\r\n}\r\n\/* Em telas com no m\u00ednimo 1025px, colocar o fundo cor rosa *\/\r\n@media screen and (min-width: 1025px) {\r\nbody {\r\nbackground-color: pink;\r\n}\r\n}\r\n\/* Em telas com no m\u00ednimo 600px e m\u00e1ximo 900px, colocar fundo vermelho *\/\r\n@media screen and (max-width: 900px) and (min-width: 600px) {\r\nbody {\r\nbackground-color: red;\r\n}\r\n}\r\n<\/code><\/pre>\n\r\n\/* Em telas com no m\u00ednimo 600px e m\u00e1ximo 900px, colocar fundo vermelho *\/\r\n@media screen and (max-width: 900px) and (min-width: 600px) {\r\n#menu {\r\n\/* conte\u00fado aqui *\/\r\n}\r\n}\r\n<\/code><\/pre>\nEu uso WordPress, e a\u00ed?<\/h2>\n
T\u00e1 responsivo mesmo, Camilla?<\/h2>\n
![\"\"](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/06\/2d7d004315901ef0dd61591a61174fdb.jpg\")