{"id":1317,"date":"2017-12-08T00:00:00","date_gmt":"2017-12-08T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2017\/12\/08\/como-criar-uma-pagina-web-responsiva\/"},"modified":"2017-12-08T00:00:00","modified_gmt":"2017-12-08T00:00:00","slug":"como-criar-uma-pagina-web-responsiva","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/","title":{"rendered":"5 dicas para criar uma p\u00e1gina web responsiva"},"content":{"rendered":"\n<p>H\u00e1 alguns anos, quando a Internet n\u00e3o era mais que um sonho fora do alcance, a ideia de comprar ou consumir atrav\u00e9s da tela de um Smartphone ou computador parecia uma loucura. Hoje tudo isso \u00e9 feito por meio do <a href=\"https:\/\/rockcontent.com\/br\/blog\/marketing-digital\/\" target=\"_blank\" rel=\"noopener noreferrer\">Marketing Digital<\/a>.<\/p>\n\n\n\n<p>A verdade \u00e9 que hoje em dia, mais de 40% da popula\u00e7\u00e3o mundial tem acesso \u00e0 Internet e o faz atrav\u00e9s de diferentes dispositivos. E \u00e9 aqu\u00ed o&nbsp; momento em que&nbsp;o esbo\u00e7o de web responsive entra na jogada!<\/p>\n\n\n\n<p>Conseguir que um site na web possa ser visto em qualquer tela n\u00e3o \u00e9 por acaso e neste post vamos te contar tudo o que precisa saber sobre isso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 uma p\u00e1gina web responsiva&nbsp;e por que \u00e9 t\u00e3o importante?<\/h2>\n\n\n\n<p>Hoje em dia s\u00e3o muitos os usu\u00e1rios que navegam na Internet atrav\u00e9s de tablets, smartphones, notebooks e outros dispositivos.<\/p>\n\n\n\n<p>Por isso, conseguir que as p\u00e1ginas sejam exibidas da mesma forma nos dispositivos m\u00f3veis e no desktop \u00e9 o que conhecemos como&nbsp;<a href=\"https:\/\/rockcontent.com\/br\/blog\/web-design-responsivo\/\" target=\"_blank\" rel=\"noopener noreferrer\">p\u00e1ginas web responsivas<\/a>.<\/p>\n\n\n\n<p>O design&nbsp;responsivo \u00e9 uma t\u00e9cnica de design&nbsp;na web que d\u00e1 a um site a capacidade de adaptar-se a diferentes tamanhos de telas atrav\u00e9s da reorganiza\u00e7\u00e3o do conte\u00fado, imagens e simplifica\u00e7\u00e3o do menu.<\/p>\n\n\n\n<p>Este tipo de <a href=\"https:\/\/rockcontent.com\/br\/blog\/web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">web design<\/a> tornou-se muito popular e est\u00e1 sendo utilizado na Internet por tr\u00eas raz\u00f5es muito simples: \u00e9 econ\u00f4mico, r\u00e1pido e funciona.<\/p>\n\n\n\n<p>De fato, o pr\u00f3prio Google recomenda o design web responsivo&nbsp;antes de criar uma p\u00e1gina web m\u00f3vel como uma maneira de otimizar a&nbsp;<a href=\"https:\/\/rockcontent.com\/br\/blog\/experiencia-do-usuario\/\" target=\"_blank\" rel=\"noopener noreferrer\">experi\u00eancia do&nbsp;usu\u00e1rio<\/a>, evitar as duplica\u00e7\u00f5es de conte\u00fado e, al\u00e9m disso, oferecer uma imagem consistente.<\/p>\n\n\n\n<p>Criar uma p\u00e1gina&nbsp; com web design responsivo \u00e9 importante devido a:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Quando voc\u00ea cria uma p\u00e1gina&nbsp;com web design responsivo, ou seja, com uma s\u00f3 vers\u00e3o de HTML e <a href=\"https:\/\/rockcontent.com\/br\/blog\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a>, ela cobre todas as resolu\u00e7\u00f5es de tela e evita criar p\u00e1ginas web espec\u00edficas para cada tipo de dispositivo e permite reduzir o tempo de desenvolvimento.<\/li><li>Quando voc\u00ea cria uma p\u00e1gina com design responsivo voc\u00ea se adapta de forma autom\u00e1tica \u00e0 navega\u00e7\u00e3o e leitura de cada usu\u00e1rio especificamente.<\/li><li>Do ponto de vista do&nbsp;<a href=\"https:\/\/rockcontent.com\/br\/blog\/o-que-e-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>, as p\u00e1ginas responsivas&nbsp;conseguem posicionar-se muito mais r\u00e1pido, uma vez que gra\u00e7as a esta t\u00e9cnica de design voc\u00ea evita ter p\u00e1ginas duplicadas ou redirecionamentos.<\/li><li>O design responsive favorece a&nbsp;viraliza\u00e7\u00e3o dos conte\u00fados, uma vez&nbsp;que permite compartilh\u00e1-los de uma maneira muito mais simples e natural.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Como criar uma p\u00e1gina com design web responsivo: 5 dicas<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Decida quando fazer a mudan\u00e7a<\/h3>\n\n\n\n<p>Se voc\u00ea j\u00e1 tem uma&nbsp;<a href=\"https:\/\/blog.hotmart.com\/pt-br\/produtores\/o-que-e-landing-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">landing page<\/a>, blog ou site com design convencional e deseja&nbsp;torn\u00e1-lo responsivo,&nbsp;este \u00e9 o momento de decidir de uma vez por todas. Por isso, o primeiro passo para&nbsp;<strong>criar uma p\u00e1gina web com design responsivo \u00e9 decidir quando fazer a mudan\u00e7a.<\/strong><\/p>\n\n\n\n<p>N\u00e3o tenha medo de dar esse passo nem sinta que todo o trabalho que voc\u00ea fez antes est\u00e1 perdido. Introduzir o design responsivo em&nbsp;um site convencional \u00e9 poss\u00edvel sem necessidade de descartar todo o conte\u00fado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Monitore o tr\u00e1fego do seu site<\/h3>\n\n\n\n<p>Antes de se aventurar na cria\u00e7\u00e3o de uma p\u00e1gina web responsiva, o que voc\u00ea acha de dar uma olhada nas estat\u00edsticas e no n\u00famero de pessoas que acessam sua p\u00e1gina atrav\u00e9s do celular?<\/p>\n\n\n\n<p>Conhecer esses dados pode te ajudar a projetar o sucesso que voc\u00ea ter\u00e1&nbsp;com a ado\u00e7\u00e3o desse tipo de design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Inspire-se!<\/h3>\n\n\n\n<p>No momento de criar sua pr\u00f3pria p\u00e1gina web responsivo&nbsp;sempre \u00e9 v\u00e1lido olhar o outro lado para buscar inspira\u00e7\u00e3o.<\/p>\n\n\n\n<p>Navegue na Internet, investigue as URLs de neg\u00f3cios ou sites similares ao&nbsp;seu, visite-os de v\u00e1rios dispositivos e selecione aqueles que s\u00e3o mais f\u00e1ceis para navegar ou que requerem menos zooming ou scrolling.<\/p>\n\n\n\n<p>As URLs que n\u00e3o precisam de muitas adapta\u00e7\u00f5es de zoom ou de utiliza\u00e7\u00e3o frequente da barra de rolagem&nbsp;s\u00e3o consideradas mais&nbsp;f\u00e1ceis de navegar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Utilize ferramentas de web design<\/h3>\n\n\n\n<p>Para criar um site na web voc\u00ea pode usar diferentes ferramentas de design que est\u00e3o dispon\u00edveis na Internet.<\/p>\n\n\n\n<p>Voc\u00ea n\u00e3o precisa ser um especialista para <a href=\"https:\/\/blog.hotmart.com\/pt-br\/guias-e-tutoriais\/como-criar-um-blog\/\" target=\"_blank\" rel=\"noopener noreferrer\">criar seu pr\u00f3prio blog<\/a>, desenvolver sua pr\u00f3pria landing page ou site de Internet. Basta ter&nbsp;paci\u00eancia, disciplina, alguns conhecimentos b\u00e1sicos e saber usar&nbsp;as ferramentas que te mostraremos a seguir:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/www.sketchapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch<\/a><\/h4>\n\n\n\n<p>\u00c9 um programa desenvolvido especialmente para criar interfaces e trabalha 100% em vetorial e de forma n\u00e3o destrutiva. \u00c9 uma plataforma ideal e muito completa para construir sites e aplicativos. Al\u00e9m disso, ela tem uma interface amig\u00e1vel e f\u00e1cil de entender.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/www.adobe.com\/es\/products\/muse.html\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Muse<\/a><\/h4>\n\n\n\n<p>Adobe Muse \u00e9 o tipo de programa criado para \u201cDummies\u201d. Se voc\u00ea n\u00e3o \u00e9 um especialista em web design e quer criar seu pr\u00f3prio site ou simplesmente economizar verba nisso, Muse \u00e9 a ferramenta que voc\u00ea procura.<\/p>\n\n\n\n<p>\u00c9 um programa com a interface simples e intuitiva, ideal para criar p\u00e1ginas responsivas, simples e din\u00e2micas que carregam r\u00e1pido e parecem geniais. O Muse se encarrega de que tudo funcione e&nbsp;voc\u00ea s\u00f3 precisa preocupar-se com que tudo&nbsp;esteja apresent\u00e1vel!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/www.adobe.com\/creativecloud\/catalog\/desktop.html\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Edge Reflow<\/a><\/h4>\n\n\n\n<p>O Adobe Edge Reflow \u00e9 uma plataforma pensada para designers que querem criar sites adapt\u00e1veis e com estandares Html5 e Css3. Essa solu\u00e7\u00e3o oferece um espa\u00e7o de trabalho baseado em grids adapt\u00e1veis a qualquer resolu\u00e7\u00e3o e tamanho de tela.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/froont.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Froont<\/a><\/h4>\n\n\n\n<p>\u00c9 um aplicativo gratuito e parecido com o Adobe Muse. Com ele&nbsp;voc\u00ea pode criar seu pr\u00f3prio site web responsivo&nbsp;diretamente do seu navegador sem necessidade de instalar ou comprar nada. Vale a pena test\u00e1-lo!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Apoie-se em&nbsp;especialistas em programa\u00e7\u00e3o e design responsivo<\/h2>\n\n\n\n<p>Neste post explicamos&nbsp;<a href=\"https:\/\/blog.hotmart.com\/pt-br\/produtores\/como-criar-design-responsivo\/\" target=\"_blank\" rel=\"noopener noreferrer\">como criar uma p\u00e1gina de vendas com design&nbsp;responsivo,<\/a>&nbsp;mas se definitivamente voc\u00ea sente que n\u00e3o est\u00e1 preparado para programar sites de internet,&nbsp;<strong>n\u00e3o se sinta mal por deixar este trabalho para os especialistas<\/strong>.<\/p>\n\n\n\n<p>Afinal, eles s\u00e3o formados nesta \u00e1rea e tem como profiss\u00e3o desempenhar esse tipo de tarefa.<\/p>\n\n\n\n<p>Contrate designers com experi\u00eancia em design responsivo, procure na Internet suas refer\u00eancias e pe\u00e7a as URLs dos sites que foram feitos previamente. N\u00e3o se esque\u00e7a, tamb\u00e9m, de acess\u00e1-los em\u00a0<strong>diversos dispositivos prestando aten\u00e7\u00e3o aos detalhes, a apar\u00eancia e como funcionam.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conselhos para criar sites com design responsive<\/h3>\n\n\n\n<p>Anote estes conselhos que voc\u00ea n\u00e3o deve esquecer no momento de criar seu site com design responsivo! Vejamos:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cuidado com a velocidade de carregamento<\/h3>\n\n\n\n<p>A velocidade de carregamento de um site \u00e9 um elemento decisivo. A&nbsp;maioria dos usu\u00e1rios n\u00e3o est\u00e3o dispostos a esperar muito tempo para carregar os elementos da sua p\u00e1gina.<\/p>\n\n\n\n<p>Quando se trata de criar uma p\u00e1gina web responsiva, \u00e9 recomend\u00e1vel selecionar muito bem os recursos utilizado. Lembre-se que menos \u00e9 mais!<\/p>\n\n\n\n<p>Evite utilizar itens desnecess\u00e1rios e escolha apenas aqueles que convidem \u00e0 a\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Evite os efeitos<\/h3>\n\n\n\n<p>Os efeitos nos sites costumam ser muito atrativos quando algu\u00e9m acessa atrav\u00e9s de um desktop, mas no caso do acesso em dispositivos m\u00f3veis ou tablets ocorre o contr\u00e1rio.<\/p>\n\n\n\n<p>\u00c9 importante que no momento de desenvolver a p\u00e1gina voc\u00ea me\u00e7a continuamente quais s\u00e3o os efeitos que funcionam e s\u00e3o apreciados pelos usu\u00e1rios.<\/p>\n\n\n\n<p>Ou seja, se em suas avalia\u00e7\u00f5es voc\u00ea perceber que os efeitos que voc\u00ea est\u00e1 usando na sua p\u00e1gina n\u00e3o funcionam bem em dispositivos m\u00f3veis&nbsp;ou se por acaso voc\u00ea perceber que com os efeitos seu n\u00famero de convers\u00f5es diminuiu, certamente \u00e9 o momento para repens\u00e1-los.<\/p>\n\n\n\n<p>N\u00e3o se esque\u00e7a nunca da premissa: menos \u00e9 mais!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilize imagens flexiveis<\/h3>\n\n\n\n<p>As imagens pesadas e est\u00e1ticas s\u00e3o coisas do passado. Quando se trata de desenhar um site adapt\u00e1vel \u00e9 necess\u00e1rio que voc\u00ea use&nbsp;<a href=\"https:\/\/rockcontent.com\/br\/blog\/melhores-bancos-de-imagens-gratuitos\/\" target=\"_blank\" rel=\"noopener noreferrer\">imagens<\/a>&nbsp;leves; ou seja, que possam ser carregadas em qualquer dispositivo.<\/p>\n\n\n\n<p>Evite definir a altura e a largura fixa para as imagens que voc\u00ea vai colocar no seu site para que assim seja poss\u00edvel adaptar \u00e0s diferentes tamanhos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Medidas fluidas<\/h3>\n\n\n\n<p>As medidas fluidas s\u00e3o aquelas que v\u00eam dimensionadas em porcentagens. Quando voc\u00ea faz esse tipo de medida na constru\u00e7\u00e3o do seu desenho, \u00e9 poss\u00edvel que ela se adapte de forma autom\u00e1tica ao tamanho da tela em que ela se carregue.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Legibilidade nos textos<\/h3>\n\n\n\n<p>As telas dos dispositivos m\u00f3veis s\u00e3o pequenas, portanto garanta que os\u00a0textos de seu site sejam sempre leg\u00edveis para o usu\u00e1rio. \u00c9 recomend\u00e1vel colocar os textos em 16px para evitar que o usu\u00e1rio tenha que fazer zoom constantemente.<\/p>\n\n\n\n<p>Precisando de uma ajuda para otimizar o seu site? Deixa que a gente cuida disso! <a href=\"https:\/\/stage.rockcontent.com\/br\/fale-com-consultor\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Marque uma consultoria com nossos especialistas (abre numa nova aba)\">Marque uma consultoria com nossos especialistas<\/a> e comece a alcan\u00e7ar melhores resultados com sua p\u00e1gina!<\/p>\n\n\n[rock-convert-cta id=&#8221;35331&#8243;]\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Oferecer um site web adapt\u00e1vel ao usu\u00e1rio deixou de ser uma op\u00e7\u00e3o para ser um pr\u00e9-requisito indispens\u00e1vel.<\/p>\n\n\n\n<p>No mundo em que cada dia mais pessoas acessam a internet atrav\u00e9s de seus telefones celulares, tablets ou notebooks, oferecer um site web responsivo permitir\u00e1 que voc\u00ea esteja&nbsp;mais pr\u00f3ximo dos seus usu\u00e1rios, gere&nbsp;mais leads e consiga&nbsp;tr\u00e1fego para&nbsp;sua p\u00e1gina.<\/p>\n\n\n\n<p>E, al\u00e9m disso, a chance de que o seu conte\u00fado tenha sucesso e seja visto por mais pessoas&nbsp;\u00e9 muito maior do que sem a adapta\u00e7\u00e3o para dispositivos m\u00f3veis.<\/p>\n\n\n\n<p>Voc\u00ea est\u00e1 pronto para come\u00e7ar a criar sua pr\u00f3pria p\u00e1gina web responsiva?<\/p>\n\n\n\n<p>Se voc\u00ea j\u00e1 tem um blog ou site, mas ainda n\u00e3o conseguiu ter sucesso, neste poste te ensinamos&nbsp;<a href=\"https:\/\/blog.hotmart.com\/pt-br\/produtores\/gerar-trafego-marketing-de-conteudo\/\" target=\"_blank\" rel=\"noopener noreferrer\">como gerar tr\u00e1fego ao seu site atrav\u00e9s de uma estrat\u00e9gia de Marketing de Conte\u00fado<\/a>. Esperamos voc\u00ea!<\/p>\n\n\n\n<p><em>Este artigo foi produzido pela equipe da <a href=\"https:\/\/blog.hotmart.com\/pt-br\/\" target=\"_blank\" rel=\"noopener noreferrer\">Hotmart<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Criar uma p\u00e1gina Web Reponsiva \u00e9 uma \u00f3tima forma de atrair pessoas e ter mais sucesso na Internet. Descubra agora mesmo como criar a sua!<\/p>\n","protected":false},"author":1,"featured_media":11916,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-1317","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aprenda a criar uma p\u00e1gina web responsiva em 5 passos<\/title>\n<meta name=\"description\" content=\"Criar uma p\u00e1gina Web Reponsiva \u00e9 uma \u00f3tima forma de atrair pessoas e ter mais sucesso na Internet. Descubra agora mesmo como criar a sua!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aprenda a criar uma p\u00e1gina web responsiva em 5 passos\" \/>\n<meta property=\"og:description\" content=\"Criar uma p\u00e1gina Web Reponsiva \u00e9 uma \u00f3tima forma de atrair pessoas e ter mais sucesso na Internet. Descubra agora mesmo como criar a sua!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-08T00:00:00+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/\",\"name\":\"Aprenda a criar uma p\u00e1gina web responsiva em 5 passos\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2017-12-08T00:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"Criar uma p\u00e1gina Web Reponsiva \u00e9 uma \u00f3tima forma de atrair pessoas e ter mais sucesso na Internet. Descubra agora mesmo como criar a sua!\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 dicas para criar uma p\u00e1gina web responsiva\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Aprenda a criar uma p\u00e1gina web responsiva em 5 passos","description":"Criar uma p\u00e1gina Web Reponsiva \u00e9 uma \u00f3tima forma de atrair pessoas e ter mais sucesso na Internet. Descubra agora mesmo como criar a sua!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/","og_locale":"pt_BR","og_type":"article","og_title":"Aprenda a criar uma p\u00e1gina web responsiva em 5 passos","og_description":"Criar uma p\u00e1gina Web Reponsiva \u00e9 uma \u00f3tima forma de atrair pessoas e ter mais sucesso na Internet. Descubra agora mesmo como criar a sua!","og_url":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/","og_site_name":"Pingback","article_published_time":"2017-12-08T00:00:00+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/","url":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/","name":"Aprenda a criar uma p\u00e1gina web responsiva em 5 passos","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#primaryimage"},"thumbnailUrl":"","datePublished":"2017-12-08T00:00:00+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"Criar uma p\u00e1gina Web Reponsiva \u00e9 uma \u00f3tima forma de atrair pessoas e ter mais sucesso na Internet. Descubra agora mesmo como criar a sua!","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/como-criar-uma-pagina-web-responsiva\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"5 dicas para criar uma p\u00e1gina web responsiva"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/1317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=1317"}],"version-history":[{"count":0,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/1317\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=1317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=1317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=1317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}