{"id":8563,"date":"2019-05-13T12:00:40","date_gmt":"2019-05-13T15:00:40","guid":{"rendered":"https:\/\/novo.siteup.dev\/?p=8563"},"modified":"2024-01-26T15:13:59","modified_gmt":"2024-01-26T18:13:59","slug":"testar-site-responsivo","status":"publish","type":"post","link":"https:\/\/novo.siteup.dev\/en\/testar-site-responsivo\/","title":{"rendered":"Como testar a responsividade de um site"},"content":{"rendered":"<p><strong>Como testar a responsividade de um site pelo Google Chrome? <\/strong>Quais s\u00e3o os desafios envolvidos em testar sites em diferentes dispositivos? Como o teste de um site em um monitor de desktop \u00e9 diferente do teste em um dispositivo port\u00e1til, como um telefone celular? Quais ferramentas podemos usar para testar sites responsivos?<\/p>\n<p>Todas essas d\u00favidas s\u00e3o comuns. Afinal, a cria\u00e7\u00e3o de de <a href=\"https:\/\/novo.siteup.dev\/en\/site-responsivo-o-que-e\/\" style=\"font-weight:bold\">site responsivo<\/a> hoje em dia \u00e9 quase uma obriga\u00e7\u00e3o. Quer saber mais sobre o assunto e aprender como testar a responsividade de um site? Ent\u00e3o continue a leitura deste artigo.<\/p>\n<p>[toc]<\/p>\n<h2 id=\"o-que-e-site-responsivo\">O que \u00e9 site responsivo?<\/h2>\n<p>O <a href=\"https:\/\/novo.siteup.dev\/en\/web-designer\/\" style=\"font-weight:bold\">web design<\/a> responsivo (RWD) \u00e9 uma abordagem destinada a criar sites que sejam capazes de proporcionar uma experi\u00eancia de visualiza\u00e7\u00e3o ideal &#8211; f\u00e1cil leitura e navega\u00e7\u00e3o com o m\u00ednimo de redimensionamento, deslocamento e rolagem &#8211; em uma ampla gama de dispositivos (de monitores de computador a celulares).<\/p>\n<p>Um site projetado de forma responsiva adapta o layout ao ambiente de visualiza\u00e7\u00e3o usando grades fluidas, baseadas em propor\u00e7\u00e3o, imagens flex\u00edveis e consultas de m\u00eddia das seguintes maneiras:<\/p>\n<ul>\n<li>O conceito de grade fluida exige que o tamanho do elemento da p\u00e1gina esteja em unidades relativas, como porcentagens, em vez de unidades absolutas, como pixels ou pontos;<\/li>\n<li>Imagens flex\u00edveis tamb\u00e9m s\u00e3o dimensionadas em unidades relativas, para evitar que sejam exibidas fora do elemento;<\/li>\n<li>As consultas de m\u00eddia permitem que a p\u00e1gina use diferentes regras de estilo com base nas caracter\u00edsticas do dispositivo em que o site est\u00e1 sendo exibido, geralmente de acordo com a largura do navegador.<\/li>\n<\/ul>\n<p>Seu site n\u00e3o segue esses requisitos e tem carregamento lento ou outros problemas? Confira nosso artigo e descubra se <a href=\"https:\/\/novo.siteup.dev\/en\/criacao-de-site\/como-saber-se-o-seu-site-precisa-de-um-redesign\/\">seu site precisa de um redesign<\/a>.<\/p>\n<p>Agora que voc\u00ea entendeu melhor, saiba como testar a responsividade de um site com nossas dicas!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-8567 aligncenter\" title=\"teste site responsivo\" src=\"https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/teste_site_responsivo-1024x714.jpg\" alt=\"mulher testando site responsivo no notebook\" width=\"1024\" height=\"714\" srcset=\"https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/teste_site_responsivo-1024x714.jpg 1024w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/teste_site_responsivo-300x209.jpg 300w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/teste_site_responsivo-768x536.jpg 768w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/teste_site_responsivo-1536x1071.jpg 1536w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/teste_site_responsivo.jpg 1721w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 id=\"afinal-como-testar-site-responsivo\">Afinal, como testar site responsivo?<\/h2>\n<p>Como j\u00e1 falado anteriormente, muitas pessoas hoje em dia usam seus telefones celulares ou tablets para acessar sites, portanto, testar um design da web responsivo \u00e9 importante porque a <a href=\"https:\/\/novo.siteup.dev\/en\/papel-design-experiencia-usuario\/\" style=\"font-weight:bold\">experi\u00eancia do usu\u00e1rio<\/a> em dispositivos m\u00f3veis \u00e9 bem diferente dos desktops.<\/p>\n<p>Possivelmente, a parte mais desafiadora de testar um <a href=\"https:\/\/novo.siteup.dev\/en\/seo-responsividade\/criacao-site-responsivo\/\">website responsivo<\/a> \u00e9 garantir que o site funcione como esperado em v\u00e1rios dispositivos e plataformas. O problema \u00e9 que esse teste pode n\u00e3o ser algo f\u00e1cil para grande parte das pessoas.<\/p>\n<p>Normalmente, o teste da responsividade de um site \u00e9 feito redimensionando a janela do navegador para simular os tamanhos das telas de um telefone celular, tablet e computador.<\/p>\n<p>Essa t\u00e9cnica geralmente \u00e9 adequada para uma r\u00e1pida verifica\u00e7\u00e3o visual do site em diferentes locais e nos ajuda a identificar os principais problemas de renderiza\u00e7\u00e3o \u00e0 medida que encolhemos ou ampliamos o teste.<\/p>\n<p>No entanto, testar em dispositivos m\u00f3veis reais \u00e9 uma experi\u00eancia totalmente diferente, pois agora voc\u00ea tem gestos como passar o dedo, tocar, pin\u00e7ar para ampliar, retrato ou paisagem. Da mesma forma, nos desktops, voc\u00ea passa o mouse, clica com o bot\u00e3o direito do mouse, rola o mouse, etc.<\/p>\n<p>O design responsivo deve levar em considera\u00e7\u00e3o todas essas varia\u00e7\u00f5es.<\/p>\n<p>Confira a seguir 3 dicas de como testar a responsividade de um site.<\/p>\n<h3 id=\"1-usando-emuladores-para-testar-o-responsivo-do-site\">1. Usando Emuladores para testar o responsivo do site<\/h3>\n<p>Um emulador de dispositivos m\u00f3veis \u00e9 uma simula\u00e7\u00e3o sobre como sites e aplicativos aparecer\u00e3o e funcionar\u00e3o em um ambiente m\u00f3vel.<\/p>\n<p>Todos queremos oferecer suporte ao maior n\u00famero poss\u00edvel de dispositivos, portanto comprar ou usar servi\u00e7os de terceiros para obter acesso a dispositivos reais pode ser \u00fatil para ver como um site funciona em condi\u00e7\u00f5es do &#8220;mundo real&#8221;.<\/p>\n<p>Voc\u00ea pode, por exemplo, usar o emulador <a href=\"http:\/\/mobiletest.me\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Mobile Test.me<\/a> para emular a exibi\u00e7\u00e3o do site em v\u00e1rios dispositivos diferentes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-8564 aligncenter\" title=\"testar responsividade site\" src=\"https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/testar_responsividade_site-1024x502.jpg\" alt=\"testando responsividade de site no google chrome\" width=\"1024\" height=\"502\" srcset=\"https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/testar_responsividade_site-1024x502.jpg 1024w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/testar_responsividade_site-300x147.jpg 300w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/testar_responsividade_site-768x377.jpg 768w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/testar_responsividade_site-1536x753.jpg 1536w, https:\/\/novo.siteup.dev\/wp-content\/uploads\/2019\/05\/testar_responsividade_site.jpg 1911w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3 id=\"2-usando-o-devtools-no-google-chrome-para-testar-o-responsivo-do-site\">2. Usando o DevTools no Google Chrome para testar o responsivo do site<\/h3>\n<p>O <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/device-mode\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">DevTools<\/a>, do Google Chrome, tem um recurso chamado modo de dispositivo, o qual \u00e9 repleto de ferramentas \u00fateis para testar designs responsivos.<\/p>\n<p>Ao contr\u00e1rio da maioria das outras ferramentas de teste de design responsivo, as quais simplesmente redimensionam sua janela de visualiza\u00e7\u00e3o, o modo de dispositivo realmente mostra como acontece a experi\u00eancia do dispositivo m\u00f3vel, como tocar e deslizar, diretamente no navegador da web.<\/p>\n<p>Os recursos das ferramentas s\u00e3o:<\/p>\n<ul>\n<li>Teste seus designs responsivos, simulando diferentes tamanhos de tela e resolu\u00e7\u00f5es, incluindo telas de retina;<\/li>\n<li>Avalie o desempenho do seu site usando o emulador sem afetar o tr\u00e1fego para outras guias;<\/li>\n<li>Visualize e inspecione as consultas de m\u00eddia CSS;<\/li>\n<li>Simule com precis\u00e3o a entrada do dispositivo para eventos de toque, geolocaliza\u00e7\u00e3o e orienta\u00e7\u00e3o do dispositivo;<\/li>\n<\/ul>\n<p>Algumas regras gerais para testar a responsividade de um site:<\/p>\n<ul>\n<li>Texto, controles e imagens alinhados corretamente;<\/li>\n<li>\u00c1rea clic\u00e1vel adequada;<\/li>\n<li>Cor, sombreamento e gradiente consistentes;<\/li>\n<li>Verifique se h\u00e1 acolchoamento correto nas bordas;<\/li>\n<li>Texto, imagens, controles e quadros n\u00e3o executados nas bordas da tela;<\/li>\n<li>Tamanho da fonte, estilo e cor consistentes para cada tipo de texto;<\/li>\n<li>Texto de entrada (em campos de preenchimento) digitados e exibidos corretamente;<\/li>\n<li>As p\u00e1ginas devem ser leg\u00edveis em todas as resolu\u00e7\u00f5es;<\/li>\n<li>Nunca visualizar a barra horizontal na p\u00e1gina no navegador;<\/li>\n<li>O conte\u00fado definido como &#8216;importante&#8217; precisa ser vis\u00edvel.<\/li>\n<\/ul>\n<p>Cada parte do site requer uma adapta\u00e7\u00e3o do layout, com m\u00f3dulos que mudam sua posi\u00e7\u00e3o e regras. O layout do site precisa ser fluido, com textos e imagens que se ajustem proporcionalmente \u00e0 largura da p\u00e1gina.<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"3-modulos-de-conteudo-no-site-para-testar-o-responsivo-do-site\">3. M\u00f3dulos de conte\u00fado no site para testar o responsivo do site<\/h3>\n<p>Para testar a responsividade de um site com m\u00f3dulos de conte\u00fado, verifique a localiza\u00e7\u00e3o dos m\u00f3dulos de conte\u00fado no site ao reduzir e expandir a janela do navegador ou ao girar um dispositivo m\u00f3vel.<\/p>\n<p>M\u00f3dulos diferentes podem desaparecer \u00e0 medida que voc\u00ea vai do desktop para o celular, mas certifique-se de saber exatamente quais m\u00f3dulos devem ser exibidos ou n\u00e3o dependendo do dispositivo de acesso.<\/p>\n<h2 id=\"conclusao\">Conclus\u00e3o<\/h2>\n<p>Sendo assim, como voc\u00ea observou ao longo do artigo, saber como testar a responsividade de um site \u00e9 uma quest\u00e3o muito importante. Afinal de contas, voc\u00ea n\u00e3o pode se esquecer do fato de que muitas pessoas hoje utilizam, com certeza, seus smartphones para abrir tudo na internet, inclusive seu site!<\/p>\n<p><strong>Al\u00e9m disso, tenha em mente que \u00e9 poss\u00edvel contar com uma <a href=\"http:\/\/localhost\/projetos\/site_upsites\/siteold\" target=\"_blank\" rel=\"noopener\">ag\u00eancia de cria\u00e7\u00e3o de sites<\/a> para resolver da forma correta o processo de como testar a responsividade de um site. Gostou das nossas dicas? Ent\u00e3o deixe seu coment\u00e1rio!<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Como testar a responsividade de um site pelo Google Chrome? Quais s\u00e3o os desafios envolvidos em testar sites em diferentes dispositivos? Como o teste de um site em um monitor de desktop \u00e9 diferente do teste em um dispositivo port\u00e1til, como um telefone celular? Quais ferramentas podemos usar para testar sites responsivos? Todas essas d\u00favidas [&hellip;]<\/p>","protected":false},"author":2,"featured_media":8565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[480],"tags":[],"class_list":["post-8563","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsividade"],"acf":[],"_links":{"self":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts\/8563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/comments?post=8563"}],"version-history":[{"count":0,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts\/8563\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/media\/8565"}],"wp:attachment":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/media?parent=8563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/categories?post=8563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/tags?post=8563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}