{"id":16415,"date":"2019-06-24T11:35:30","date_gmt":"2019-06-24T14:35:30","guid":{"rendered":"https:\/\/blog.hostinger.io\/pt-tutoriais\/?p=16415"},"modified":"2024-09-26T12:57:41","modified_gmt":"2024-09-26T15:57:41","slug":"como-deixar-um-site-responsivo","status":"publish","type":"post","link":"\/pt\/tutoriais\/como-deixar-um-site-responsivo","title":{"rendered":"Como deixar seu site responsivo \u2013 o guia definitivo"},"content":{"rendered":"<p>Se voc&ecirc; n&atilde;o tem a menor ideia de como fazer um site responsivo para dispositivos m&oacute;veis ou deseja converter o seu <a href=\"\/tutoriais\/como-criar-um-site-passo-a-passo\/\"><strong>site j&aacute; criado<\/strong><\/a> e estabelecido, est&aacute; no lugar certo!<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-1024x283.png\" alt=\"\" class=\"wp-image-30339\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-300x83.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-150x41.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-768x212.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-1536x425.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>Ter um site amig&aacute;vel para dispositivos m&oacute;veis &eacute; uma obriga&ccedil;&atilde;o para todo blogueiro ou dono de website no planeta. Isso vai aumentar o seu tr&aacute;fego de maneira significativa e portanto voc&ecirc; ter&aacute; uma maior chance de prosperar sobre os seus competidores.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-deixar-seu-site-responsivo-tutorial-em-video\">Como Deixar seu Site Responsivo &ndash; Tutorial em V&iacute;deo<\/h2><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"&#10145;&#65039;Site Responsivo&#11013;&#65039; (2024) Saiba O que &Eacute; &amp; Como Criar o Seu\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/ZllSEARi-Fs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-brasil.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Subscrever Para mais v\u00eddeos educacionais!<\/span>\n          <span class=\"channel-name\">Hostinger Brasil<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCFtySEk9ArhCuuD22FNWa0g?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>Subscrever<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-o-seu-site-precisa-de-um-design-responsivo\"><strong>Por Que o seu Site Precisa de um Design Responsivo?<\/strong><\/h2><p>Desde o surgimento da &ldquo;era dos smartphones&rdquo;, muitas pessoas preferem acessar a internet atrav&eacute;s de seus dispositivos m&oacute;veis. Afinal, &eacute; poss&iacute;vel fazer isso de qualquer lugar e a qualquer momento.<\/p><p>Portanto, <a href=\"\/pt\/criador-de-sites\">criar sites<\/a> responsivos vai automaticamente abrir portas para uma maior audi&ecirc;ncia online. De fato, <a href=\"https:\/\/www.ciodive.com\/news\/70-of-internet-traffic-comes-from-mobile-phones\/510120\/\" target=\"_blank\" rel=\"noopener\">70% de todo o tr&aacute;fego da internet hoje<\/a> vem de smartphones.<\/p><p>Adicionalmente, <a href=\"https:\/\/www.brightedge.com\/resources\/research-reports\/mobile-first-57-traffic-now-mobile\" target=\"_blank\" rel=\"noopener\">51% dos consumidores<\/a> diz que usa os seus dispositivos m&oacute;veis para descobrir novas marcas e produtos. Esse n&uacute;mero mostra que otimizar um site amig&aacute;vel para mobile se traduz diretamente na expans&atilde;o de seu neg&oacute;cio para um n&iacute;vel totalmente novo.<\/p><p>Al&eacute;m disso, <a href=\"https:\/\/www.thinkwithgoogle.com\/consumer-insights\/consumer-mobile-brand-content-interaction\/\" target=\"_blank\" rel=\"noopener\"><strong>89% das pessoas<\/strong><\/a> se mostram propensas e recomendar uma determinada marca ap&oacute;s uma experi&ecirc;ncia positiva no seu site para smartphones.<\/p><p>Outro fator que &eacute; v&aacute;lido de ser mencionado: a Google atualizou o sistema de avalia&ccedil;&atilde;o de websites para proporcionar melhores resultados de busca para usu&aacute;rios de dispositivos m&oacute;veis.<\/p><p>Em outras palavras, se o seu site n&atilde;o possui excelente otimiza&ccedil;&atilde;o para mobile, ele pode ser exclu&iacute;do dos resultados de busca do Google para smartphones ou ter <a href=\"\/tutoriais\/como-gerar-trafego-para-sites\/\"><strong>menor ranking na P&aacute;gina de Resultados<\/strong><\/a> (SERP ou Search Engine Results Pages).<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/pt\/hospedagem-barata\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-a-importancia-de-um-site-com-layout-responsivo\"><strong>A Import&acirc;ncia de um Site com Layout Responsivo<\/strong><\/h3><p>Conseguir um site amig&aacute;vel para dispositivos m&oacute;veis come&ccedil;a atrav&eacute;s da cria&ccedil;&atilde;o de um layout responsivo.<\/p><p>Um site &ldquo;responsivo&rdquo; &eacute; um website que &eacute; capaz de responder da maneira ideal quando um usu&aacute;rio acessa a p&aacute;gina usando dispositivos m&oacute;veis. Em outras palavras, esse site ir&aacute; ter o visual certo e funcionar bem, n&atilde;o importa o tipo de dispositivo que o estiver acessando.<\/p><p>Aqui est&atilde;o algumas vantagens de ter um website responsivo:<\/p><h3 class=\"wp-block-heading\" id=\"h-1-melhor-seo\"><strong>1. Melhor SEO<\/strong><\/h3><p>O design responsivo de sites usa a mesma URL e o mesmo HTML, independente do dispositivo que for usado para acessar a p&aacute;gina. Essa configura&ccedil;&atilde;o permite que a Google explore, indexe e gerencie o conte&uacute;do do site de maneira mais f&aacute;cil e eficiente. Como resultado, o seu website ter&aacute; <a href=\"\/tutoriais\/dicas-basicas-de-seo\/\"><strong>melhor qualidade de SEO<\/strong><\/a>!<\/p><h3 class=\"wp-block-heading\" id=\"h-2-nao-ha-necessidade-de-criar-um-novo-design-para-seu-site\"><strong>2. N&atilde;o H&aacute; Necessidade de Criar um Novo Design para seu Site<\/strong><\/h3><p>Websites responsivos n&atilde;o precisam de um novo visual ou design feito especificamente para dispositivos m&oacute;veis. Em outras palavras, a exibi&ccedil;&atilde;o de seu site ir&aacute; permanecer inalterada, mesmo que ele seja acessado de v&aacute;rios tipos diferentes de dispositivos.<\/p><p>Se n&atilde;o tiver que criar dois designs distintos, voc&ecirc; poder&aacute; economizar muito tempo e dinheiro.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-mais-facil-de-gerenciar-e-economicamente-eficiente\"><strong>3. Mais F&aacute;cil de Gerenciar e Economicamente Eficiente<\/strong><\/h3><p>Um site responsivo &eacute; f&aacute;cil de gerenciar e de desenvolver. Todas as atualiza&ccedil;&otilde;es que voc&ecirc; fizer v&atilde;o aparecer em todo dispositivo que acessar o website. Ou seja, n&atilde;o h&aacute; diferen&ccedil;a no conte&uacute;do que aparece tanto no PC quanto em laptops, tablets e smartphones.<\/p><p>Mais do que isso, os custos operacionais de um site responsivo s&atilde;o mais eficientes, j&aacute; que voc&ecirc; n&atilde;o precisa desenvolver sites no PC e em dispositivos m&oacute;veis separadamente.<\/p><h2 class=\"wp-block-heading\" id=\"h-7-dicas-para-deixar-seu-site-responsivo\"><strong>7 Dicas Para Deixar seu Site Responsivo<\/strong><\/h2><p>Primeiramente, voc&ecirc; precisa entender que fazer um site amig&aacute;vel para dispositivos m&oacute;veis requer um pouco de conhecimento t&eacute;cnico.<\/p><p>Enquanto n&oacute;s apreciamos sua curiosidade e desejo de aprender coisas novas, otimizar um site para dispositivos m&oacute;veis pode deixar um iniciante muito sobrecarregado. Desta forma, talvez seja melhor contratar um desenvolvedor para ajud&aacute;-lo a realizar essa tarefa.<\/p><p>Dito isso, aqui est&atilde;o as sete dicas para deixar o seu site responsivo:<\/p><h3 class=\"wp-block-heading\" id=\"h-1-comece-com-uma-filosofia-de-priorizar-o-mobile\"><strong>1. Comece com uma Filosofia de Priorizar o Mobile<\/strong><\/h3><p>A maioria das pessoas come&ccedil;a desenvolvendo um website para um dispositivo de tela grande, como um laptop ou PC. Enquanto isso n&atilde;o &eacute; necessariamente algo errado, esse m&eacute;todo pode causar alguns problemas quando voc&ecirc; for otimizar o seu site para usu&aacute;rios mobile.<\/p><p>A melhor maneira de fazer isso &eacute; come&ccedil;ar a partir de um design mobile. Tente primeiro criar um site belo e totalmente funcional para usu&aacute;rios de dispositivos m&oacute;veis, e ent&atilde;o fa&ccedil;a seu caminho at&eacute; chegar nas telas maiores.<\/p><p>Otimizar para uma tela menor, como de um smartphone ou tablet, &eacute; mais dif&iacute;cil do que para uma tela maior. Portanto, seria mais inteligente come&ccedil;ar da&iacute;.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-converta-o-seu-site-de-desktops-para-uma-versao-mobile\"><strong>2. Converta o seu Site de Desktops para uma Vers&atilde;o Mobile<\/strong><\/h3><p>Caso voc&ecirc; j&aacute; tenha um site para computadores de mesa que &eacute; totalmente funcional, mas que ainda n&atilde;o est&aacute; otimizado para uso mobile, a primeira coisa que voc&ecirc; precisa fazer &eacute; convert&ecirc;-lo para dispositivos m&oacute;veis.<\/p><p>Por sorte, existem ao menos dois m&eacute;todos muito bons para fazer isso: converter o seu site usando um servi&ccedil;o online ou atrav&eacute;s de plugins CMS.<\/p><h4 class=\"wp-block-heading\" id=\"h-como-converter-o-seu-site-desktop-atraves-de-um-servico-online\"><strong>Como Converter o seu Site Desktop Atrav&eacute;s de um Servi&ccedil;o Online<\/strong><\/h4><p>Primeiramente, voc&ecirc; pode usar um conversor de sites online. Dois dos mais populares conversores do tipo que voc&ecirc; pode usar s&atilde;o <strong>bMobilized<\/strong> e <strong>Duda Mobile<\/strong>.<\/p><p>O <a href=\"https:\/\/bmobilized.com\/\" target=\"_blank\" rel=\"noopener\"><strong>bMobilized<\/strong><\/a> oferece uma convers&atilde;o instant&acirc;nea com ajuste autom&aacute;tico de imagens e de conte&uacute;dos. A companhia alega que o resultado da convers&atilde;o ir&aacute; suportar mais de 13.000 dispositivos m&oacute;veis de diversas marcas.<\/p><p>Voc&ecirc; precisa pagar <strong>US$ 19,99 por m&ecirc;s <\/strong>para aproveitar os servi&ccedil;os deles. Fora converter seu site para desktops, a bMobilized tamb&eacute;m providencia suporte profissional para desenvolvedores.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"543\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/bMobilized-conversao-sites.png\" alt=\"servi&ccedil;o de convers&atilde;o de sites bmobilized\" class=\"wp-image-46006\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/bMobilized-conversao-sites.png 1020w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/bMobilized-conversao-sites-300x160.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/bMobilized-conversao-sites-150x80.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/bMobilized-conversao-sites-768x409.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n<\/div><p>Outro &oacute;timo conversor online &eacute; o <a href=\"https:\/\/www.dudamobile.com\/mobile-website\" target=\"_blank\" rel=\"noopener\"><strong>Duda Mobile<\/strong><\/a>. Esse construtor de sites foca na cria&ccedil;&atilde;o de p&aacute;ginas totalmente funcionais e amig&aacute;veis para dispositivos m&oacute;veis.<\/p><p>Esse <em>website builder<\/em> pode ser usado gratuitamente. Contudo, voc&ecirc; precisa pagar uma taxa de assinatura de <strong>US$ 19 por m&ecirc;s <\/strong>se deseja usar alguns de seus recursos premium, como suporte para emails, dom&iacute;nios customizados ou servi&ccedil;os de backup.<\/p><p>Al&eacute;m disso, o Duda Mobile tamb&eacute;m oferece uma s&eacute;rie de recursos avan&ccedil;ados para ajudar os usu&aacute;rios a desenvolverem um <a href=\"\/tutoriais\/exemplos-de-ecommerce\"><strong>site responsivo de e-commerce<\/strong><\/a> com suporte para m&uacute;ltiplas l&iacute;nguas. Entretanto, voc&ecirc; tem que pagar entre <strong>US$ 22 e US$ 46 por m&ecirc;s<\/strong> para ter acesso a esses incr&iacute;veis recursos.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"468\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/duda-mobile-construtor-sites.png\" alt=\"construtor de sites Duda Mobile\" class=\"wp-image-46007\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/duda-mobile-construtor-sites.png 1020w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/duda-mobile-construtor-sites-300x138.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/duda-mobile-construtor-sites-150x69.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/duda-mobile-construtor-sites-768x352.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n<\/div><h4 class=\"wp-block-heading\" id=\"h-como-converter-seu-site-com-um-plugin-cms\"><strong>Como Converter seu Site com um Plugin CMS<\/strong><\/h4><p>A segunda op&ccedil;&atilde;o para transformar seu site para desktops numa p&aacute;gina amig&aacute;vel para mobile &eacute; usando um plugin. Apesar disso, esse m&eacute;todo ir&aacute; funcionar melhor para usu&aacute;rios de CMS que j&aacute; possuem um site para as plataformas Joomla, Drupal ou <a href=\"\/tutoriais\/o-que-e-wordpress\">WordPress<\/a>.<\/p><p>Para usu&aacute;rios WordPress, os plugins <a href=\"http:\/\/www.wptouch.com\/\" target=\"_blank\" rel=\"noopener\"><strong>WPtouch<\/strong><\/a> e <a href=\"http:\/\/jetpack.me\/support\/mobile-theme\/\" target=\"_blank\" rel=\"noopener\"><strong>JetPack<\/strong><\/a> s&atilde;o as melhores ferramentas para a tarefa.<\/p><p>Caso seu site esteja no Joomla, voc&ecirc; pode contar com o <a href=\"http:\/\/extensions.joomla.org\/extension\/responsivizer\" target=\"_blank\" rel=\"noopener\"><strong>Responsivizer<\/strong><\/a> e o <a href=\"http:\/\/www.joomlashine.com\/joomla-extensions\/jsn-poweradmin-joomla-admin-extension.html\" target=\"_blank\" rel=\"noopener\"><strong>JoomlaShine<\/strong><\/a>.<\/p><p>Enquanto isso, se o seu neg&oacute;cio &eacute; o Drupal, n&oacute;s recomendamos os plugins <a href=\"https:\/\/www.drupal.org\/project\/themekey\" target=\"_blank\" rel=\"noopener\"><strong>ThemeKey<\/strong><\/a> e <a href=\"https:\/\/www.drupal.org\/project\/mobile_theme\" target=\"_blank\" rel=\"noopener\"><strong>MobileTheme<\/strong><\/a>.<\/p><p>Entretanto, tenha em mente que alguns desses plugins n&atilde;o est&atilde;o dispon&iacute;veis gratuitamente. Voc&ecirc; precisar&aacute; pagar uma taxa de assinatura para us&aacute;-los. Por exemplo, pode ser necess&aacute;rio pagar at&eacute; <strong>US$ 359 <\/strong>por ano para usar o plano Enterprise do <a href=\"https:\/\/www.wptouch.com\/pricing\/bundles\/\" target=\"_blank\" rel=\"noopener\"><strong>WPtouch pro<\/strong><\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-use-um-tema-responsivo\"><strong>3. Use um Tema Responsivo<\/strong><\/h3><p>O design responsivo ir&aacute; automaticamente fazer com que o seu website seja amig&aacute;vel para dispositivos m&oacute;veis. Voc&ecirc; ter&aacute; um site que ir&aacute; exibir conte&uacute;do similar e consistente com a vers&atilde;o desktop.<\/p><p>Atualmente, existem <a href=\"\/pt\/criador-de-sites\" target=\"_blank\" rel=\"noopener\"><strong>servi&ccedil;os de web design<\/strong><\/a> profissionais que voc&ecirc; pode contratar para o seu site ou muitos temas responsivos para o WordPress que voc&ecirc; pode experimentar. Muitos deles n&atilde;o est&atilde;o dispon&iacute;veis gratuitamente, mas eles possuem excelente desempenho.<\/p><p>Um dos mais r&aacute;pidos &mdash; talvez o mais r&aacute;pido &mdash; <a href=\"\/tutoriais\/temas-wordpress-mais-rapidos\/\"><strong>temas responsivos do WordPress<\/strong><\/a> &eacute; o <a href=\"https:\/\/avada.theme-fusion.com\/professional-demos\/\" target=\"_blank\" rel=\"noopener\"><strong>Avada<\/strong><\/a>. Esse tema pode carregar o seu site em menos de um segundo, o que &eacute; perfeito se voc&ecirc; quer fazer um website responsivo.<\/p><p>Para verificar se um tema &eacute; responsivo e carrega rapidamente, recomendamos que voc&ecirc; use o <a href=\"https:\/\/www.pingdom.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Pingdom<\/strong><\/a>.<\/p><p>O Pingdom &eacute; a melhor ferramenta a oferecer dados abrangentes sobre a velocidade de seu website. Tudo o que voc&ecirc; precisa fazer &eacute; copiar o link da sua p&aacute;gina e ent&atilde;o col&aacute;-lo na coluna de URL. Escolha onde voc&ecirc; quer iniciar o teste do seu website e aperte o bot&atilde;o Start Test (Iniciar Teste).<\/p><p>O Pingdom ir&aacute; mostrar a nota do seu site com base no desempenho em geral, o tempo de carregamento e muitos outros elementos importantes.<\/p><p>Ele tamb&eacute;m ir&aacute; dar alguns apontamentos relacionados a como melhorar a velocidade.<\/p><p>Aqui est&aacute; o resultado de um teste com o <a href=\"https:\/\/avada.theme-fusion.com\/home-portfolio-style\/\" target=\"_blank\" rel=\"noopener\"><strong>estilo home portfolio do Avada<\/strong><\/a> (&eacute; uma demonstra&ccedil;&atilde;o ao vivo):<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"536\" height=\"311\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/avada-resultado-teste.png\" alt=\"resultado do teste do avada\" class=\"wp-image-46008\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/avada-resultado-teste.png 536w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/avada-resultado-teste-300x174.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/avada-resultado-teste-150x87.png 150w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/figure>\n<\/div><p>Como voc&ecirc; pode ver, o Avada marcou impressionantes <strong>953 milisegundos <\/strong>no carregamento do site.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-nunca-use-flash\"><strong>4. Nunca Use Flash<\/strong><\/h3><p>Diversos desenvolvedores para web &ldquo;abandonaram&rdquo; o Flash porque ele usa muitos recursos de hardware, podendo levar a uma resposta mais lenta da p&aacute;gina e maior tempo para carregamento.<\/p><p>Adicionalmente, o Flash tamb&eacute;m pode afetar de maneira negativa a qualidade do seu SEO.<\/p><p>Para al&eacute;m disso, nem Android e nem iOS suportam Flash, ent&atilde;o esse software em particular &eacute; uma p&eacute;ssima escolha se voc&ecirc; quiser ter um website amig&aacute;vel para dispositivos m&oacute;veis.<\/p><h3 class=\"wp-block-heading\" id=\"h-5-mantenha-a-velocidade-do-seu-site\"><strong>5. Mantenha a Velocidade do seu Site<\/strong><\/h3><p>A velocidade de um website &eacute; fortemente influenciada pela qualidade do servidor e da hospedagem que voc&ecirc; utiliza. Com isso, voc&ecirc; precisa de um <a href=\"\/pt\/hospedagem-barata\"><strong>servidor de hospedagem<\/strong><\/a> r&aacute;pido e confi&aacute;vel. Essa ideia tamb&eacute;m vale se voc&ecirc; optar por um <a href=\"\/pt\/alojamento-wordpress\" target=\"_blank\" rel=\"noopener\">servidor WordPress<\/a>.&nbsp;<\/p><p>N&oacute;s recomendamos que voc&ecirc; use a VPS ou a <strong><a href=\"\/pt\/alojamento-cloud\">hospedagem de sites Cloud<\/a> <\/strong>para um melhor desempenho. Eles proporcionam as melhores respostas de velocidade de servidor, o que &eacute; a coisa que mais influencia a velocidade de carregamento do seu site.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/pt\/alojamento-cloud\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Cloud-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-32925\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Cloud-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Cloud-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Cloud-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Cloud-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Cloud-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>Outra coisa que voc&ecirc; precisa fazer para otimizar a velocidade do seu site &eacute; limitar o n&uacute;mero de conte&uacute;dos que precisam de um plugin adicional para rodar.<\/p><p>Ademais, voc&ecirc; tamb&eacute;m necessita otimizar a sua p&aacute;gina inicial para acelerar o seu site. Aqui est&atilde;o algumas dicas para garantir que a sua <em>homepage<\/em> n&atilde;o est&aacute; deixando seu website mais lento:<\/p><ul class=\"wp-block-list\">\n<li>Diminua o n&uacute;mero de posts na p&aacute;gina inicial (limite para entre <strong>5-10<\/strong> posts).<\/li>\n\n\n\n<li>Remova widgets desnecess&aacute;rios.<\/li>\n\n\n\n<li>Remova plugins desnecess&aacute;rios, inativos ou irrelevantes.<\/li>\n\n\n\n<li>Mantenha tudo limpo e organizado.<\/li>\n<\/ul><p>No final das contas, n&oacute;s acreditamos plenamente que uma p&aacute;gina inicial limpa e bem otimizada n&atilde;o apenas far&aacute; seu website ficar bonito como tamb&eacute;m carregar mais r&aacute;pido.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-6-preste-atencao-na-aparencia-do-seu-site\"><strong>6. Preste Aten&ccedil;&atilde;o na Apar&ecirc;ncia do seu Site<\/strong><\/h3><p>Os primeiros 15 segundos s&atilde;o <a href=\"http:\/\/time.com\/12933\/what-you-think-you-know-about-the-web-is-wrong\/\" target=\"_blank\" rel=\"noopener\"><strong>momentos decisivos para os usu&aacute;rios<\/strong><\/a> decidirem se querem ficar no seu website ou deix&aacute;-lo. Portanto, voc&ecirc; precisa deixar uma boa impress&atilde;o o mais r&aacute;pido poss&iacute;vel para passar uma imagem positiva do seu site.<\/p><p>Enquanto o conte&uacute;do &eacute; o que atrai mais visitantes, a apar&ecirc;ncia do seu site &eacute; o que far&aacute; eles ficarem por mais de 15 segundos.<\/p><p>Garanta que voc&ecirc; desligou o corretor autom&aacute;tico do formul&aacute;rio de sua p&aacute;gina de login (preencher formul&aacute;rios na internet em dispositivos m&oacute;veis costuma ser algo problem&aacute;tico), use bot&otilde;es e <a href=\"\/tutoriais\/melhores-fontes-html\"><strong>fontes grandes<\/strong><\/a> e refa&ccedil;a o design de seus popups (se voc&ecirc; tem algum) para deix&aacute;-los mais amig&aacute;veis para mobile.<\/p><p>Voc&ecirc; pode usar a <a href=\"https:\/\/search.google.com\/test\/mobile-friendly?utm_source=mft&amp;utm_medium=redirect&amp;utm_campaign=mft-redirect\" target=\"_blank\" rel=\"noopener\"><strong>ferramenta de testes de responsividade<\/strong><\/a> para dispositivos m&oacute;veis para checar se o seu site est&aacute; bem otimizado para mobile ou n&atilde;o.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"500\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/mobile-friendly-test-tool-google.png\" alt=\"teste de responsividade m&oacute;vel de sites do google\" class=\"wp-image-46009\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/mobile-friendly-test-tool-google.png 1020w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/mobile-friendly-test-tool-google-300x147.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/mobile-friendly-test-tool-google-150x74.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/mobile-friendly-test-tool-google-768x376.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-7-habilite-accelerated-mobile-pages-amp\"><strong>7. Habilite Accelerated Mobile Pages (AMP)<\/strong><\/h3><p>O Accelerated Mobile Pages (AMP ou P&aacute;ginas Mobile Aceleradas) &eacute; um dos projetos da Google que busca aumentar a velocidade de carregamento dos sites ao usar dados comprimidos para obter p&aacute;ginas mobile com tamanho at&eacute; 8 vezes menor. Os desenvolvedores da tecnologia alegam que ela &eacute; capaz de aumentar a velocidade do seu site em at&eacute; quatro vezes. Isso tamb&eacute;m faz com que ele seja mais otimizado para dispositivos m&oacute;veis.<\/p><p>O AMP tem sido amplamente usado por diversas companhias de grande relev&acirc;ncia no mundo, como Twitter, The New York Times e Adobe. Esses s&atilde;o os motivos porque ele &eacute; t&atilde;o popular:<\/p><h4 class=\"wp-block-heading\" id=\"h-acelera-a-velocidade-de-carregamento-do-site-em-dispositivos-moveis\"><strong>Acelera a Velocidade de Carregamento do Site em Dispositivos M&oacute;veis<\/strong><\/h4><p>De acordo com a Google, cerca de <strong>53% de usu&aacute;rios de smartphones<\/strong> v&atilde;o sair de um site que <a href=\"https:\/\/www.marketingdive.com\/news\/google-53-of-mobile-users-abandon-sites-that-take-over-3-seconds-to-load\/426070\/\" target=\"_blank\" rel=\"noopener\"><strong>leve mais do que 3 segundos para carregar<\/strong><\/a>.<\/p><p>Por sorte, carregamento r&aacute;pido &eacute; o principal benef&iacute;cio do AMP. Usar essa tecnologia ir&aacute; aumentar a velocidade do seu site, evitando que voc&ecirc; perca aquele precioso tr&aacute;fego org&acirc;nico.<\/p><h4 class=\"wp-block-heading\" id=\"h-melhora-a-visibilidade-do-seu-site-entre-os-usuarios\"><strong>Melhora a Visibilidade do seu Site Entre os Usu&aacute;rios<\/strong><\/h4><p>A Google ir&aacute; exibir um site AMP em pesquisas mobile com um s&iacute;mbolo de raio. A ideia &eacute; permitir que os usu&aacute;rios possam facilmente distinguir entre sites impulsionados por AMP e sites sem a tecnologia.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"527\" height=\"691\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/amp-logo-on-mobile-device.jpg\" alt=\"logo de empresa que opta pelo amp no dispositivo m&oacute;vel\" class=\"wp-image-46010\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/amp-logo-on-mobile-device.jpg 527w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/amp-logo-on-mobile-device-229x300.jpg 229w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2019\/06\/amp-logo-on-mobile-device-114x150.jpg 114w\" sizes=\"(max-width: 527px) 100vw, 527px\" \/><\/figure>\n<\/div><p>O s&iacute;mbolo AMP nos resultados de busca pode de fato ter um impacto positivo e lhe dar uma grande vantagem. Seu site ir&aacute; se destacar j&aacute; que muitos usu&aacute;rios sempre procuram por p&aacute;ginas com o logo do AMP para economizar seu tempo (elas carregam mais r&aacute;pido!)<\/p><h4 class=\"wp-block-heading\" id=\"h-utiliza-o-cache-do-google-amp-para-melhorar-a-performance-do-seu-servidor\"><strong>Utiliza o Cache do Google AMP para Melhorar a Performance do seu Servidor<\/strong><\/h4><p>O cache do Google AMP &eacute; uma rede de entrega de conte&uacute;dos (CDN) baseada em proxy que &eacute; utilizada para facilitar o processo de transfer&ecirc;ncia de documentos AMP v&aacute;lidos para usu&aacute;rios.<\/p><p>Em palavras mais simples, o Google AMP Cache ir&aacute; manter os dados do seu site armazenados. Esse m&eacute;todo permite que sua p&aacute;gina carregue mais rapidamente, o que a tornar&aacute; mais amig&aacute;vel para dispositivos m&oacute;veis.<\/p><p>Aqui est&atilde;o alguns recursos do Google AMP Cache que podem melhorar o desempenho do seu servidor:<\/p><ul class=\"wp-block-list\">\n<li>Ele pode salvar dados de fontes e de imagens.<\/li>\n\n\n\n<li>Ele automaticamente limita as dimens&otilde;es m&aacute;ximas da imagem.<\/li>\n\n\n\n<li>Ele ir&aacute; converter formatos de imagem em op&ccedil;&otilde;es mais leves para dispositivos m&oacute;veis.<\/li>\n\n\n\n<li>Ele poder&aacute; reduzir a qualidade das imagens para acelerar o processo de carregamento.<\/li>\n\n\n\n<li>Ele usa canais seguros (HTTPS) e os mais recentes protocolos da internet (SPDY, HTTP\/2).<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Buscar sucesso online significa que voc&ecirc; precisa se adaptar para as mais recentes tend&ecirc;ncias na tecnologia.<\/p><p>Considerando o qu&atilde;o grande &eacute; o n&uacute;mero de usu&aacute;rios mobile, pode ser inteligente colocar otimiza&ccedil;&atilde;o para dispositivos m&oacute;veis como sua atual prioridade.<\/p><p>Para resumir tudo, aqui est&atilde;o as melhores maneiras de fazer com que o seu website seja responsivo:<\/p><ul class=\"wp-block-list\">\n<li>Sempre construa o seu site com uma mentalidade de priorizar o design para mobile.<\/li>\n\n\n\n<li>Converta seu website para desktop numa p&aacute;gina amig&aacute;vel para mobile usando servi&ccedil;os online, como <strong><a href=\"https:\/\/bmobilized.com\/\" target=\"_blank\" rel=\"noopener\">bMobilized<\/a><\/strong> e <strong><a href=\"https:\/\/www.dudamobile.com\/mobile-website\" target=\"_blank\" rel=\"noopener\">Duda Mobile<\/a><\/strong>, ou use um plugin de otimiza&ccedil;&atilde;o mobile para seu CMS.<\/li>\n\n\n\n<li>Use um tema responsivo no seu site e teste-o usando o <strong><a href=\"https:\/\/tools.pingdom.com\/\" target=\"_blank\" rel=\"noopener\">Pingdom<\/a><\/strong> para verificar sua performance.<\/li>\n\n\n\n<li>N&atilde;o use Flash!<\/li>\n\n\n\n<li>Garanta que a velocidade do seu site &eacute; bem mantida usando um <strong><a href=\"\/\">servi&ccedil;o de hospedagem web r&aacute;pido e confi&aacute;vel<\/a><\/strong>.<\/li>\n\n\n\n<li>Certifique-se que a apar&ecirc;ncia do seu website tem um bom design.<\/li>\n\n\n\n<li>Tente usar Accelerated Mobile Pages (AMP) para melhorar a performance de seu website em dispositivos m&oacute;veis.<\/li>\n<\/ul><p>Finalmente, otimizar seu site para dispositivos m&oacute;veis &eacute; algo que d&aacute; bastante trabalho. Independente disso, n&oacute;s acreditamos fortemente que todo esse esfor&ccedil;o n&atilde;o ser&aacute; uma perda de seu tempo.<\/p><p>Na verdade, ao aplicar as dicas acima, n&oacute;s acreditamos que o seu site ter&aacute; uma maior chance de prosperar e produzir melhor tr&aacute;fego org&acirc;nico no futuro. Boa Sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc&ecirc; n&atilde;o tem a menor ideia de como fazer um site responsivo para dispositivos m&oacute;veis ou deseja converter o seu site j&aacute; criado e estabelecido, est&aacute; no lugar certo! Ter um site amig&aacute;vel para dispositivos m&oacute;veis &eacute; uma obriga&ccedil;&atilde;o para todo blogueiro ou dono de website no planeta. Isso vai aumentar o seu tr&aacute;fego [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/como-deixar-um-site-responsivo\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Se voc\u00ea n\u00e3o tem a menor ideia de como fazer um site responsivo para mobile ou deseja converter o seu website, vem c\u00e1 que a gente te ensina!","rank_math_focus_keyword":"como deixar um site responsivo","footnotes":""},"categories":[4941],"tags":[6749,6750,6751,5508],"class_list":["post-16415","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-como-deixar-um-site-responsivo","tag-como-tornar-um-site-responsivo","tag-design-responsivo","tag-layout-responsivo"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-deixar-um-site-responsivo","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-deixar-um-site-responsivo","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/16415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=16415"}],"version-history":[{"count":25,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/16415\/revisions"}],"predecessor-version":[{"id":46012,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/16415\/revisions\/46012"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=16415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=16415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=16415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}