{"id":11631,"date":"2017-07-05T08:27:17","date_gmt":"2017-07-05T11:27:17","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=11631"},"modified":"2017-07-05T08:27:17","modified_gmt":"2017-07-05T11:27:17","slug":"desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/","title":{"rendered":"Desenvolvimento Mobile: como ficar responsivo"},"content":{"rendered":"<p><span style=\"font-size: 14pt;\">At\u00e9 pouco tempo atr\u00e1s, a \u00fanica forma de acessar a internet era por meio dos desktops. O primeiro celular capaz de fazer consultas na internet foi lan\u00e7ado em 1996 pela Nokia, mas o servi\u00e7o era muito limitado. <\/span><br \/>\n<span style=\"font-size: 14pt;\">Com o passar dos anos, as tecnologias foram evoluindo e, atualmente, at\u00e9 os modelos mais simples de smartphones conseguem navegar na internet.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Em\u00a02014, o acesso \u00e0 internet por meio de dispositivos m\u00f3veis ultrapassou os feitos com computadores no <a href=\"https:\/\/www.brasil.gov.br\/infraestrutura\/2016\/04\/pela-primeira-vez-celulares-superaram-computadores-no-acesso-a-internet-no-pais\" target=\"_blank\" rel=\"noopener noreferrer\">Brasil<\/a>. <\/span><\/p>\n<ul style=\"list-style-type: square;\">\n<li><span style=\"font-size: 14pt;\">Entre os domic\u00edlios conectados \u00e0 internet, a taxa de uso do computador caiu de <strong>88,40%<\/strong> para <span style=\"color: #ff0000;\"><strong>76,60%<\/strong><\/span>, de 2013 para 2014. <\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Nesse mesmo per\u00edodo, os usu\u00e1rios que utilizavam a internet a partir de celulares aumentaram de <strong>53,60%<\/strong> para <span style=\"color: #3366ff;\"><strong>80,40%<\/strong><\/span>.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">Esses n\u00fameros evidenciam uma mudan\u00e7a no comportamento dos usu\u00e1rios de internet e exp\u00f5em a import\u00e2ncia de uma boa qualidade de acesso aos sites pelos dispositivos m\u00f3veis.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Devido \u00e0 infinidade de resolu\u00e7\u00f5es e propor\u00e7\u00f5es de tela de computadores, celulares e tablets, surgiu um problema de compatibilidade dos sites com os diversos dispositivos. A vers\u00e3o de uma p\u00e1gina para desktops pode exigir que o usu\u00e1rio do dispositivo m\u00f3vel tenha que realizar o movimento de pin\u00e7a para aumentar a visibilidade do conte\u00fado. Essa situa\u00e7\u00e3o pode fazer com que a pessoa deixe de navegar na p\u00e1gina.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Para solucionar o problema dos dispositivos m\u00f3veis, despontou o <strong>desenvolvimento mobile<\/strong>, cuja finalidade \u00e9 elaborar aplica\u00e7\u00f5es e sistemas especificamente para os aparelhos m\u00f3veis. Entretanto, isso n\u00e3o resolvia completamente o problema. As empresas tinham que manter mais de um site para se ajustar aos variados tamanhos de telas.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-size: 14pt;\">Assim, o design responsivo surge como uma solu\u00e7\u00e3o para o problema de multi-telas. Esse conceito n\u00e3o \u00e9 uma simples tend\u00eancia do design, mas um conjunto de ferramentas e t\u00e9cnicas avan\u00e7adas que determina como o layout ser\u00e1 apresentado para o usu\u00e1rio.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">O que \u00e9 design responsivo?<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">O termo design responsivo foi publicado pela primeira vez em 2010, no blog\u00a0<a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">A List Apart<\/span><\/a>, pelo web designer <strong>Ethan Marcotte<\/strong>. O autor faz uma compara\u00e7\u00e3o do web design com projetos arquitet\u00f4nicos responsivos, nos quais h\u00e1 um ajuste autom\u00e1tico de um espa\u00e7o de acordo com o n\u00famero e fluxo de pessoas dentro dele. Afinal, o que \u00e9 design responsivo?<\/span><br \/>\n<span style=\"font-size: 14pt;\">O\u00a0<a title=\"5 raz\u00f5es para ter um site com design responsivo\" href=\"https:\/\/www.impacta.com.br\/blog\/2015\/05\/14\/5-razoes-para-ter-um-site-com-design-responsivo\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">design responsivo<\/span><\/a>\u00a0\u00e9 um m\u00e9todo de estrutura\u00e7\u00e3o <a title=\"E-book Gratuito: Posicionamento, dimens\u00f5es e outros elementos de HTML5 e CSS3\" href=\"https:\/\/www.impacta.com.br\/blog\/2015\/06\/03\/e-book-posicionamento-dimensoes-e-outros-elementos-de-html5-e-css3\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML e CSS<\/a>, em que o site consegue se adequar ao browser do visitante. O layout \u00e9 flex\u00edvel, adaptando a sua apar\u00eancia de acordo com o tamanho e resolu\u00e7\u00e3o da tela.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Quando esse tipo de design \u00e9 adotado, o servidor envia o mesmo\u00a0<a href=\"https:\/\/developers.google.com\/webmasters\/mobile-sites\/mobile-seo\/responsive-design?hl=pt-br\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">c\u00f3digo HTML<\/span><\/a>\u00a0para todos os tipos de dispositivo e o CSS \u00e9 usado para modificar o processamento da p\u00e1gina no aparelho espec\u00edfico.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Dessa forma, o site consegue identificar quais s\u00e3o as dimens\u00f5es de cada dispositivo e assim ajusta os elementos presentes na p\u00e1gina para que eles fiquem enquadrados na tela do aparelho utilizado. Ou seja, o mesmo layout adapta-se a qualquer resolu\u00e7\u00e3o, de modo que o usu\u00e1rio possa ter a melhor experi\u00eancia independente do dispositivo.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">O que esse design inclui?<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">O design responsivo compreende diversos fatores, como:<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\">adequa\u00e7\u00e3o do layout do site conforme a tela e a resolu\u00e7\u00e3o do dispositivo utilizado;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">utiliza\u00e7\u00e3o de imagens flex\u00edveis, por meio de\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2015\/03\/21\/conheca-o-flexbox-do-css3-e-suas-funcionalidades\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">media queries<\/span><\/a>\u00a0\u2013 essa t\u00e9cnica permite a manuten\u00e7\u00e3o da qualidade das imagens enquanto elas s\u00e3o redimensionadas e ajustadas ao layout da p\u00e1gina;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">redu\u00e7\u00e3o de elementos da tela e retirada de dados desnecess\u00e1rios para os dispositivos m\u00f3veis, j\u00e1 que quanto menor o dispositivo, menos tempo o usu\u00e1rio gasta durante a navega\u00e7\u00e3o; e<\/span><\/li>\n<li>\n<p style=\"text-align: left;\"><span style=\"font-size: 14pt;\">adapta\u00e7\u00e3o das dimens\u00f5es de bot\u00f5es e links para interfaces touch nos dispositivos em que o ponteiro do mouse \u00e9 substitu\u00eddo pelo dedo do utilizador.<\/span><\/p>\n<\/li>\n<\/ul>\n<h3 style=\"text-align: left;\"><strong><span style=\"font-size: 14pt;\">Diferen\u00e7as entre o design responsivo e mobile template<\/span><\/strong><\/h3>\n<p><span style=\"font-size: 14pt;\">O site responsivo \u00e9 aquele compat\u00edvel com todos os tamanhos de tela. Ele reposiciona os elementos da p\u00e1gina com a finalidade de garantir a melhor visualiza\u00e7\u00e3o do conte\u00fado.<\/span><br \/>\n<span style=\"font-size: 14pt;\">J\u00e1 o mobile template, \u00e9 um site desenvolvido apenas para dispositivos m\u00f3veis com a inten\u00e7\u00e3o de melhorar a navegabilidade nesses tipos de aparelho.<\/span><br \/>\n<span style=\"font-size: 14pt;\">\u00c9 importante destacar que os sites em geral podem ser acessados em qualquer dispositivo, entretanto, se a p\u00e1gina tiver sido desenvolvida de forma convencional, a usabilidade ser\u00e1 prejudicada.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">Vantagens em atualizar o site para responsivo<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">\u00c9 poss\u00edvel perceber que o design responsivo \u00e9 uma \u00f3tima op\u00e7\u00e3o para o desenvolvimento mobile, por isso vale entender melhor as diversas vantagens existentes.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Devido \u00e0 flexibilidade do conte\u00fado de se adaptar a diferentes resolu\u00e7\u00f5es, o usu\u00e1rio tem uma experi\u00eancia agrad\u00e1vel de navega\u00e7\u00e3o, podendo ter um acesso de qualidade por meio de qualquer dispositivo. Al\u00e9m disso, como o site \u00e9 mais leve e otimizado para os dispositivos m\u00f3veis, h\u00e1 uma maior rapidez no carregamento de dados desse site do que na vers\u00e3o para desktop.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Por sua vez, como o conte\u00fado consegue se ajustar a todos os tipos de tela, \u00e9 necess\u00e1rio apenas um site, e \u00e9 mais f\u00e1cil gerir um site do que uma p\u00e1gina para dispositivos m\u00f3veis e outro para desktop. Sem considerar que existem v\u00e1rios tipos de celulares e tablets, o que exigiria mais de um site para atender esses aparelhos.<\/span><br \/>\n<span style=\"font-size: 14pt;\">O\u00a0<a title=\"Conhe\u00e7a mais sobre o Google e a import\u00e2ncia do SEO\" href=\"https:\/\/www.impacta.com.br\/blog\/2015\/05\/05\/conheca-mais-sobre-o-google-e-a-importancia-do-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Google<\/span><\/a>\u00a0privilegia os sites que operam da melhor forma para a praticidade do usu\u00e1rio, al\u00e9m de penalizar aqueles que n\u00e3o s\u00e3o adaptados para diferentes dispositivos. Desse modo, um site responsivo aparece melhor posicionado nas buscas.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Outra vantagem \u00e9 que um site responsivo reduz o n\u00famero de usu\u00e1rios que entram e saem do site sem intera\u00e7\u00e3o, j\u00e1 que permite uma melhor usabilidade, al\u00e9m de proporcionar maior\u00a0<a href=\"https:\/\/www.impacta.com.br\/blog\/2015\/04\/13\/aprenda-7-elementos-que-devem-ser-observados-para-criar-um-design-responsivo\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">facilidade de compartilhamento<\/span><\/a>\u00a0do conte\u00fado, pois existe apenas uma URL para qualquer dispositivo de acesso e, consequentemente, <strong>maior capta\u00e7\u00e3o de Leads.<\/strong><\/span><br \/>\n<span style=\"font-size: 14pt;\">Como a navegabilidade \u00e9 melhor nos sites responsivos, essa maior gera\u00e7\u00e3o de Leads pode gerar <strong>aumento no n\u00famero de vendas<\/strong>.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Se voc\u00ea utiliza as redes sociais para promover seus produtos, \u00e9 fundamental que as p\u00e1ginas sejam responsivas. Como o acesso \u00e0 internet por meio dos dispositivos m\u00f3veis \u00e9 significativo, \u00e9 importante considerar que o usu\u00e1rio provavelmente estar\u00e1 utilizando um smartphone quando visualizar seu link no feed de not\u00edcias.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">Conceitos necess\u00e1rios para desenvolver um site responsivo<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Para fazer um design responsivo, \u00e9 necess\u00e1rio desenvolver um c\u00f3digo utilizando a\u00a0<a href=\"https:\/\/www.impacta.com.br\/curso\/Desenvolvimento-de-Aplicacoes-Web-com-HTML5-CSS3-JavaScript-e-PhoneGap.php\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">combina\u00e7\u00e3o<\/span><\/a>\u00a0de HTML5, CSS3 e <a title=\"Curso de JavaScript\" href=\"https:\/\/www.impacta.com.br\/curso\/JavaScript.php\" target=\"_blank\" rel=\"noopener noreferrer\">Javascript<\/a>.<\/span><\/p>\n<ul style=\"list-style-type: square;\">\n<li><strong><span style=\"font-size: 14pt;\">HTML5<\/span><\/strong><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">HTML \u00e9 uma linguagem utilizada para o desenvolvimento de sites baseada em marca\u00e7\u00f5es, ou seja, utiliza tags de marca\u00e7\u00e3o para descrever as p\u00e1ginas da internet.<\/span><br \/>\n<span style=\"font-size: 14pt;\">A nova vers\u00e3o,\u00a0<a title=\"Curso de HTML5\" href=\"https:\/\/www.impacta.com.br\/curso\/HTML5-Fundamentos-online.php#search\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">HTML5<\/span><\/a>, foi criada para facilitar a manipula\u00e7\u00e3o dos elementos, fornecendo ferramentas para que o CSS e o Javascript realizem o melhor trabalho poss\u00edvel. Dessa forma, os sites e aplica\u00e7\u00f5es podem ser desenvolvidos de forma leve e funcional.<\/span><\/p>\n<ul style=\"list-style-type: square;\">\n<li><strong><span style=\"font-size: 14pt;\">CSS3<\/span><\/strong><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">CSS \u00e9 uma linguagem de folhas de estilos utilizada para determinar como os documentos escritos em HTML devem ser exibidos em termos de cores, fontes, alinhamento; isto \u00e9, o HTML estrutura o conte\u00fado e o CSS formata-o.<\/span><br \/>\n<span style=\"font-size: 14pt;\">A nova vers\u00e3o do CSS \u00e9 o\u00a0<a href=\"https:\/\/www.impacta.com.br\/curso\/CSS3.php\"><span style=\"text-decoration: underline;\">CSS3<\/span><\/a>, o qual possui nova capacidade de formata\u00e7\u00e3o visual, incorporando elementos in\u00e9ditos para construir anima\u00e7\u00f5es em 2 e 3 dimens\u00f5es, al\u00e9m de ter um maior controle sobre o estilo.<\/span><\/p>\n<ul style=\"list-style-type: square;\">\n<li><strong><span style=\"font-size: 14pt;\">Javascript<\/span><\/strong><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">Javascript \u00e9 uma linguagem que \u00e9 processada pelo pr\u00f3prio navegador. A partir da utiliza\u00e7\u00e3o desse sistema, \u00e9 poss\u00edvel criar efeitos especiais para os sites, proporcionando uma melhor interatividade com os usu\u00e1rios.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-size: 14pt;\">O Javascprit \u00e9 utilizado para controlar o HTML e o CSS, ficando respons\u00e1vel pelo comportamento. Em outras palavras, esses c\u00f3digos ficam encarregados da movimenta\u00e7\u00e3o e cliques.<\/span><\/p>\n<p style=\"text-align: left;\"><strong><span style=\"font-size: 14pt;\">Principais pontos para o design responsivo<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">Depois de aprender um pouco sobre as linguagens apresentadas acima, vamos para os tr\u00eas pontos essenciais para o design responsivo, que s\u00e3o: <strong>grids flu\u00eddos<\/strong>, <strong>imagens flex\u00edveis<\/strong> e <strong>media queries<\/strong>.<\/span><\/p>\n<ul>\n<li><strong><span style=\"font-size: 14pt;\">Grids flu\u00eddos<\/span><\/strong><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">O grid \u00e9 o esqueleto do design, \u00e9 um conjunto de linhas guias, colunas e margens que viabilizam uma estrutura para o layout. O grid permite o alinhamento, a propor\u00e7\u00e3o e o posicionamento dos elementos no plano de exibi\u00e7\u00e3o.<\/span><br \/>\n<span style=\"font-size: 14pt;\">O grid fluido \u00e9 o tipo de codifica\u00e7\u00e3o de layout em que h\u00e1 propor\u00e7\u00f5es relativas entre os seus componentes. Os layouts tradicionais s\u00e3o baseados em valores de pixel fixos, ou seja, as grades de largura s\u00e3o est\u00e1ticas para posicionar os elementos.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Utilizando esses layouts tradicionais, o conte\u00fado n\u00e3o se enquadra nos v\u00e1rios tamanhos de tela dispon\u00edveis no mercado, prejudicando a usabilidade no acesso \u00e0 internet. Como os grids fluidos s\u00e3o codificados considerando a porcentagem ou o tamanho relativo e n\u00e3o altura e largura de cada item, o conte\u00fado consegue se ajustar em todos os dispositivos.<\/span><\/p>\n<ul>\n<li><strong><span style=\"font-size: 14pt;\">Imagens flex\u00edveis<\/span><\/strong><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">Para garantir que a experi\u00eancia do usu\u00e1rio seja agrad\u00e1vel, as imagens e v\u00eddeos tamb\u00e9m devem ser flex\u00edveis. A largura da imagem ou m\u00eddia deve ser definida no CSS3, para que o browser adeque seu tamanho de acordo com a tela do dispositivo.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Da mesma forma que os grids flu\u00eddos, as imagens flex\u00edveis s\u00e3o consideradas a partir de uma porcentagem, para que assim, o tamanho final da imagem esteja adequado \u00e0s dimens\u00f5es da tela de acesso.<\/span><br \/>\n<span style=\"font-size: 14pt;\">\u00c9 importante ter cuidado, pois as imagens s\u00e3o baseadas em pixels. Se o tamanho da imagem for aumentado al\u00e9m do seu tamanho original, o layout ficara pixelizado. Se as imagens tiverem alta resolu\u00e7\u00e3o, diminu\u00ed-las via c\u00f3digo deixar\u00e1 a p\u00e1gina muito carregada.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Assim, o interessante \u00e9 servir a imagem certa para cada dispositivo por meio da utiliza\u00e7\u00e3o da media queries.<\/span><\/p>\n<ul>\n<li><strong><span style=\"font-size: 14pt;\">Media Queries<\/span><\/strong><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">Por meio da media queries, a CSS3 consegue verificar o navegador e em que tipo de m\u00eddia ou dispositivo o acesso est\u00e1 sendo realizado, o que permite a especifica\u00e7\u00e3o de estilos diferentes para cada aparelho.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Utilizando as express\u00f5es da media queries, \u00e9 poss\u00edvel constatar o tipo e a capacidade do equipamento, possibilitando assim a adequa\u00e7\u00e3o do layout de acordo com cada tipo de dispositivo, sem que o conte\u00fado seja modificado.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Com rela\u00e7\u00e3o ao problema das imagens, a media queries auxilia na escolha da imagem mais apropriada de acordo com as caracter\u00edsticas do aparelho, como densidade de pixels e dimens\u00e3o da tela.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">Por onde come\u00e7ar?<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Para garantir um bom design responsivo, primeiramente deve-se pensar no layout para os dispositivos m\u00f3veis, com menor resolu\u00e7\u00e3o, e s\u00f3 depois expandir para os dispositivos maiores.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Essa estrat\u00e9gia \u00e9 conhecida como\u00a0Mobile First, a qual prioriza o conte\u00fado da p\u00e1gina e depois adiciona mais elementos de acordo com o tipo de dispositivo. Essa t\u00e9cnica n\u00e3o se aplica somente ao conte\u00fado do site, mas tamb\u00e9m \u00e0 parte do layout, que \u00e9 mais simples nos dispositivos m\u00f3veis e torna-se mais complexo nos aparelhos com resolu\u00e7\u00f5es maiores.<\/span><br \/>\n<span style=\"font-size: 14pt;\">O desenvolvimento de uma p\u00e1gina com design responsivo busca rapidez, acessibilidade e paridade de conte\u00fado. Por isso, ao iniciar a cria\u00e7\u00e3o considerando os dispositivos m\u00f3veis, o conte\u00fado \u00e9 priorizado e, assim, a vers\u00e3o para desktops tamb\u00e9m passa a ter uma melhor navegabilidade.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Para certificar que haja uma melhor acessibilidade ao site e verificar se est\u00e1 tudo de acordo com a p\u00e1gina em cada dispositivo, \u00e9 muito importante a realiza\u00e7\u00e3o de testes antes do lan\u00e7amento do site.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">Como testar um site responsivo<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Para garantir o sucesso de um site responsivo, \u00e9 muito importante testar seu funcionamento. Existem diversas ferramentas que podem ser utilizadas para essa finalidade. Vamos dar alguns exemplos!<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\"><strong>Dimensions Toolkit:<\/strong> ferramenta para testar projetos de sites responsivos dispon\u00edvel como extens\u00e3o do Chrome e como um aplicativo. Al\u00e9m de testar seu projeto, voc\u00ea tamb\u00e9m pode testar p\u00e1ginas hospedadas localmente;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong><a href=\"https:\/\/res.ponsive.com\/?resize=www.facebook.com%2F&amp;iphone=on&amp;ipad=on&amp;android=on\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Responsive<\/span><\/a>:<\/strong> site com ferramenta para testar a p\u00e1gina desejada com 8 diferentes resolu\u00e7\u00f5es;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong><a href=\"https:\/\/lab.maltewassermann.com\/viewport-resizer\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Responsive Design Testing Tool<\/span><\/a>:<\/strong> ferramenta que apresenta o layout do seu site em diferentes resolu\u00e7\u00f5es, como 480&#215;640, 768&#215;1024, 1024&#215;768, 240&#215;320;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong><a href=\"https:\/\/designmodo.com\/responsive-test\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Designmodo<\/span><\/a>:<\/strong> esse site possui diversas resolu\u00e7\u00f5es para teste. A ferramenta \u00e9 dividida em 4 categorias: celular, tablet\/iPad, notebook e tela de desktop. Dentro de cada um desses grupos, existem v\u00e1rias op\u00e7\u00f5es de marca e modelo de dispositivos;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong><a href=\"https:\/\/quirktools.com\/screenfly\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Screenfly<\/span><\/a><\/strong>: como as ferramentas citadas anteriormente, o Screenfly simula o layout da p\u00e1gina em v\u00e1rios dispositivos, inclusive em televisores;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">PageSpeed Insights<\/span><\/a><\/strong>: essa ferramenta do Google mede o desempenho de um site em dispositivos m\u00f3veis e computadores. Ela apresenta os pontos positivos da p\u00e1gina, bem como os negativos e o que deve ser feito para corrigi-los;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong><a href=\"https:\/\/search.google.com\/search-console\/mobile-friendly\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Google\u2019s Mobile-Friendly Test<\/span><\/a>:<\/strong> essa tamb\u00e9m \u00e9 uma ferramenta do Google que testa a usabilidade do seu site em dispositivos m\u00f3veis. O teste mostra a compatibilidade do site com esses aparelhos e apresenta poss\u00edveis problemas que podem interferir de forma negativa na experi\u00eancia do usu\u00e1rio; e<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong>Biblioteca de dispositivos:<\/strong> os testes tamb\u00e9m podem ser realizados em dispositivos reais. No Brasil, existe a\u00a0<a href=\"https:\/\/www.devicelab.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">DeviceLab<\/span><\/a>\u00a0que possibilita a realiza\u00e7\u00e3o de testes de aplica\u00e7\u00f5es digitais em um grande n\u00famero de dispositivos m\u00f3veis em laborat\u00f3rio com ambiente controlado.<\/span><\/li>\n<\/ul>\n<h2><strong><span style=\"font-size: 14pt;\">Investimento no desenvolvimento mobile responsivo<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Para estimar o investimento em um site, alguns itens devem ser considerados, como dom\u00ednio, hospedagem, planejamento web, design e desenvolvimento. Os custos que ser\u00e3o apresentados abaixo s\u00e3o relativos a empresas de m\u00e9dio porte:<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\"><strong>Dom\u00ednio (www.nomeempresa.com.br):<\/strong> pode variar anualmente de R$ 40,00 a R$ 60,00;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><strong>Hospedagem<\/strong> (varia de acordo com o tr\u00e1fego do site, contas de e-mail e espa\u00e7o utilizado no servidor de dados) oscila de R$ 30,00 a R$ 100,00 mensais; e<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Servi\u00e7o de planejamento web, design e desenvolvimento: pode custar de R$ 1.500,00 a R$ 10.000,00.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">Tamb\u00e9m \u00e9 importante considerar o custo de campanhas de <a title=\"A import\u00e2ncia do Marketing Digital para as empresas. Entenda!\" href=\"https:\/\/www.impacta.com.br\/blog\/2017\/04\/17\/a-importancia-do-marketing-digital-para-as-empresas-entenda\/\" target=\"_blank\" rel=\"noopener noreferrer\">marketing digital<\/a>, que s\u00e3o muito importantes para promover seu site. Para montar essas campanhas, pode ser cobrado um valor a partir de R$250,00 por m\u00eas.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Considerando um site responsivo, sua cria\u00e7\u00e3o pode custar de\u00a0<a href=\"https:\/\/lazzariagenciaweb.com.br\/artigo\/quanto-custa-um-site-parte2\"><span style=\"text-decoration: underline;\">20% a 30%<\/span><\/a>\u00a0mais caro do que um local para um navegador de desktop. Esse valor \u00e9 justificado pelo fato do designer precisar analisar o site sob o ponto de vista de v\u00e1rios dispositivos. Al\u00e9m disso, mais testes dever\u00e3o ser realizados para colocar a p\u00e1gina em funcionamento.<\/span><br \/>\n<span style=\"font-size: 14pt;\">\u00c9 bom lembrar que \u00e9 mais barato ter um \u00fanico site compat\u00edvel com a necessidade de todos os dispositivos do que ter v\u00e1rias solu\u00e7\u00f5es espec\u00edficas. Manter mais de um site custa tempo e dinheiro.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Se voc\u00ea j\u00e1 tem uma p\u00e1gina na internet, voc\u00ea pode adapt\u00e1-la para dispositivos m\u00f3veis de forma\u00a0<a href=\"https:\/\/developers.google.com\/webmasters\/mobile-sites\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">gratuita<\/span><\/a>\u00a0se houver a possibilidade de eleger um tema ou modelo responsivo para o seu site.<\/span><\/p>\n<h2><strong><span style=\"font-size: 14pt;\">Exemplos e cases de sucesso<\/span><\/strong><\/h2>\n<p><span style=\"font-size: 14pt;\">Veja abaixo alguns n\u00fameros que demonstram como o design responsivo pode melhorar o n\u00famero de acessos ao seu site, al\u00e9m de contribuir para um aumento da sua receita.<\/span><br \/>\n<span style=\"font-size: 14pt;\">A <strong>O&#8217;Neill Clothing<\/strong> \u00e9 uma loja inglesa de roupas que trabalha com e-commerce. Foi feito um redesign responsivo do site da empresa e o\u00a0<a href=\"https:\/\/electricpulp.com\/notes\/you-like-apples\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">resultado<\/span><\/a>\u00a0foi analisado durante 6 semanas. Com rela\u00e7\u00e3o \u00e0 utiliza\u00e7\u00e3o da p\u00e1gina pelo Android, a pesquisa apontou:<\/span><\/p>\n<ul>\n<li style=\"text-align: left;\"><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de 407,32% na taxa de convers\u00e3o;<\/span><\/strong><\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de 333,33% nas transa\u00e7\u00f5es; e<\/span><\/strong><\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">crescimento de 591,42% na receita.<\/span><\/strong><\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2017\/07\/skinny-ties-and-responsive-ecommerce-r-w1050-q100-m1413613475.jpg\" target=\"_blank\" rel=\"noopener noreferrer\">\u00a0<\/a><\/p>\n<p style=\"text-align: left;\"><span style=\"font-size: 14pt;\">A <strong>Skinny Ties<\/strong> \u00e9 uma loja de gravatas norte-americana e, em 2012, a loja desenvolveu uma plataforma mais amig\u00e1vel por meio do design responsivo. Um\u00a0<a href=\"https:\/\/gravitydept.com\/blog\/skinny-ties-and-responsive-ecommerce\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">estudo<\/span><\/a>\u00a0comparou as vendas das 2,5 semanas posteriores ao lan\u00e7amento da nova p\u00e1gina com os tr\u00eas meses anteriores ao funcionamento do site responsivo. Os resultados encontrados foram:<\/span><\/p>\n<ul>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">42,40% de crescimento na receita com acesso por meio de todos os dispositivos;<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de 13,60% da taxa de convers\u00e3o;<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">taxa de rejei\u00e7\u00e3o reduzida em 23,20%; e<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">crescimento de 44,60% no tempo de visita\u00e7\u00e3o da p\u00e1gina.<\/span><\/strong><\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">A <strong>HOMEPAGE<\/strong>, tamb\u00e9m localizada nos Estados Unidos, \u00e9 uma loja especializada em vendas de roupas e acess\u00f3rios. Em fevereiro de 2013, a loja lan\u00e7ou seu site responsivo e foram notados os seguintes\u00a0<span style=\"text-decoration: underline;\"><a href=\"https:\/\/bradfrost.com\/blog\/post\/responsive-design-to-the-rescue-how-homage-grew-mobile-revenue-by-258\/\" target=\"_blank\" rel=\"noopener noreferrer\">resultados<\/a>\u00a0<\/span>at\u00e9 final de agosto do mesmo ano:<\/span><\/p>\n<ul>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de 66,12% no acesso ao site (162,40% em smartphones);<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">17% de aumento na taxa de convers\u00e3o (82% em smartphones); e<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">crescimento de 69,26% nas receitas (359,50% em smartphones).<\/span><\/strong><\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">A <strong>Regent College<\/strong> \u00e9 uma faculdade de teologia, fundada em 1968 e est\u00e1 localizada no Canad\u00e1. Com o intuito de abrir novos caminhos, a Regent College adotou o design responsivo do seu site no in\u00edcio de 2012. O site foi t\u00e3o inovador que ganhou pr\u00eamios, men\u00e7\u00f5es e at\u00e9 copycats. As\u00a0<a href=\"https:\/\/domain7.com\/work\/regent-college\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">estat\u00edsticas<\/span><\/a>\u00a0analisadas ap\u00f3s 8 meses de funcionamento do site indicaram:<\/span><\/p>\n<ul>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de 99% de visitantes \u00fanicos;<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">crescimento de 77% das visualiza\u00e7\u00f5es da p\u00e1gina;<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">63% de aumento das aplica\u00e7\u00f5es onlines;<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de 226% de doa\u00e7\u00f5es completas; e<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de 22% de pedidos de informa\u00e7\u00f5es.<\/span><\/strong><\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">A <strong>Cyber-Duck<\/strong> \u00e9 mais um exemplo de sucesso na utiliza\u00e7\u00e3o do design responsivo. A empresa \u00e9 uma ag\u00eancia digital localizada na Inglaterra e para solucionar o problema de compatibilidade, havia criado sites diferentes para os respectivos locais de acesso.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Devido \u00e0 dificuldade de gerenciar conte\u00fados diferentes, al\u00e9m do surgimento de v\u00e1rios modelos de tablets e smartphones, a Cyber-Duck decidiu desenvolver um \u00fanico site que se adaptasse aos variados dispositivos. Depois de algumas semanas do lan\u00e7amento do site, os\u00a0<span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.smashingmagazine.com\/2013\/06\/adapting-to-a-responsive-design-case-study\/\" target=\"_blank\" rel=\"noopener noreferrer\">n\u00fameros<\/a>\u00a0<\/span>encontrados foram:<\/span><\/p>\n<ul>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">aumento de mais de 200% s\u00f3 no tr\u00e1fego m\u00f3vel;<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">crescimento de 18% na dura\u00e7\u00e3o m\u00e9dia da visita; e<\/span><\/strong><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><strong><span style=\"font-size: 14pt;\">redu\u00e7\u00e3o de mais de 4000% na taxa de sa\u00edda da p\u00e1gina inicial para usu\u00e1rios de dispositivo m\u00f3vel.<\/span><\/strong><\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">Os exemplos apresentados acima demonstram a import\u00e2ncia do site responsivo para atrair mais visitantes, diminuir a taxa de rejei\u00e7\u00e3o e aumentar a dura\u00e7\u00e3o do acesso, al\u00e9m de majorar as vendas e receitas.<\/span><br \/>\n<span style=\"font-size: 14pt;\">N\u00e3o foram encontrados estudos de casos para sites brasileiros, mas j\u00e1 existem v\u00e1rias p\u00e1ginas que utilizam o design responsivo, como:<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\"><a href=\"https:\/\/www.impacta.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Impacta<\/span><\/a>;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><a href=\"https:\/\/marketingdeconteudo.com\/?__hstc=64741936.88cc02816f29f198b137075ec9ab36e8.1463748042243.1499171572470.1499178761683.679&amp;__hssc=64741936.7.1499178761683&amp;__hsfp=3760690643\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Marketing de conte\u00fado<\/span><\/a>;<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><a href=\"https:\/\/rockcontent.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Rock Content<\/span><\/a>; e<\/span><\/li>\n<li><span style=\"font-size: 14pt;\"><a href=\"https:\/\/globoplay.globo.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Globo<\/span><\/a><\/span><\/li>\n<\/ul>\n<h2><strong><span style=\"font-size: 14pt;\">Conclus\u00e3o<\/span><\/strong><\/h2>\n<p style=\"text-align: left;\"><span style=\"font-size: 14pt;\">Apesar de n\u00e3o ser um conceito novo, muitas empresas ainda criam seus sites a partir do m\u00e9todo convencional ou adotam o desenvolvimento mobile antigo, criando mais de um site para atender aos diferentes dispositivos.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Para garantir a melhor usabilidade do usu\u00e1rio, \u00e9 necess\u00e1rio adequar seu site para o design responsivo. Os n\u00fameros apresentados comprovam que a melhor navegabilidade de um site conduz a um aumento no n\u00famero de visitantes e a uma redu\u00e7\u00e3o na taxa de rejei\u00e7\u00e3o.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Ao ter uma melhor experi\u00eancia de navega\u00e7\u00e3o, h\u00e1 um fortalecimento das rela\u00e7\u00f5es entre o usu\u00e1rio e o site, o que pode resultar em maior receita para as empresas.<\/span><br \/>\n<span style=\"font-size: 14pt;\">Viu como \u00e9 importante ter um site que permita uma \u00f3tima experi\u00eancia para o usu\u00e1rio, independente do dispositivo de acesso? Aprendeu um pouco mais sobre o design responsivo e a import\u00e2ncia do desenvolvimento mobile?<\/span><br \/>\n<span style=\"font-size: 14pt;\">Para saber mais, n\u00e3o deixe de nos acompanhar no\u00a0<a href=\"https:\/\/www.facebook.com\/impactaoficial\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Facebook<\/span><\/a>, no\u00a0<a href=\"https:\/\/twitter.com\/impacta_oficial\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">Twitter<\/span><\/a>\u00a0ou no\u00a0<a href=\"https:\/\/www.linkedin.com\/company\/impacta-tecnologia\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"text-decoration: underline;\">LinkedIn<\/span><\/a>!<\/span><\/p>\n<div class=\"sharing-default-minimal post-bottom\"><div class=\"nectar-social default\" data-position=\"\" data-rm-love=\"0\" data-color-override=\"override\"><div class=\"nectar-social-inner\"><a href=\"#\" class=\"nectar-love\" id=\"nectar-love-11631\" title=\"Love this\"> <i class=\"icon-salient-heart-2\"><\/i><span class=\"love-text\">Love<\/span><span class=\"total_loves\"><span class=\"nectar-love-count\">0<\/span><\/span><\/a><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='twitter-share nectar-sharing' href='#' title='Share this'> <i class='fa icon-salient-x-twitter'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'><\/i> <span class='social-text'>Pin<\/span> <\/a><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>At\u00e9 pouco tempo atr\u00e1s, a \u00fanica forma de acessar a internet era por meio dos desktops. O primeiro celular capaz de fazer consultas na internet foi lan\u00e7ado em 1996 pela Nokia, mas o servi\u00e7o era muito limitado. Com o passar dos anos, as tecnologias foram evoluindo e, atualmente, at\u00e9 os modelos mais simples de smartphones [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":17432,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[441,188,307,328],"class_list":["post-11631","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-desenvolvimento-mobile","tag-design-responsivo","tag-design-responsivo-para-web","tag-site-responsivo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Desenvolvimento Mobile: como ficar responsivo<\/title>\r\n<meta name=\"description\" content=\"Quem ainda hoje n\u00e3o tem um site responsivo, com certeza n\u00e3o est\u00e1 aproveitando os melhores resultados. Saiba mais sobre o desenvolvimento mobile!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Desenvolvimento Mobile: como ficar responsivo\" \/>\r\n<meta property=\"og:description\" content=\"Quem ainda hoje n\u00e3o tem um site responsivo, com certeza n\u00e3o est\u00e1 aproveitando os melhores resultados. Saiba mais sobre o desenvolvimento mobile!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\" \/>\r\n<meta property=\"article:published_time\" content=\"2017-07-05T11:27:17+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"850\" \/>\r\n\t<meta property=\"og:image:height\" content=\"284\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/\",\"name\":\"Desenvolvimento Mobile: como ficar responsivo\",\"isPartOf\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg\",\"datePublished\":\"2017-07-05T11:27:17+00:00\",\"author\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\"},\"description\":\"Quem ainda hoje n\u00e3o tem um site responsivo, com certeza n\u00e3o est\u00e1 aproveitando os melhores resultados. Saiba mais sobre o desenvolvimento mobile!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#primaryimage\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg\",\"contentUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg\",\"width\":850,\"height\":284},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.impacta.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento Mobile: como ficar responsivo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/\",\"name\":\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\",\"description\":\"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\",\"name\":\"Reda\u00e7\u00e3o Impacta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"caption\":\"Reda\u00e7\u00e3o Impacta\"},\"url\":\"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Desenvolvimento Mobile: como ficar responsivo","description":"Quem ainda hoje n\u00e3o tem um site responsivo, com certeza n\u00e3o est\u00e1 aproveitando os melhores resultados. Saiba mais sobre o desenvolvimento mobile!","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:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/","og_locale":"pt_BR","og_type":"article","og_title":"Desenvolvimento Mobile: como ficar responsivo","og_description":"Quem ainda hoje n\u00e3o tem um site responsivo, com certeza n\u00e3o est\u00e1 aproveitando os melhores resultados. Saiba mais sobre o desenvolvimento mobile!","og_url":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/","og_site_name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","article_published_time":"2017-07-05T11:27:17+00:00","og_image":[{"width":850,"height":284,"url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg","type":"image\/jpeg"}],"author":"Reda\u00e7\u00e3o Impacta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Reda\u00e7\u00e3o Impacta","Est. reading time":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/","url":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/","name":"Desenvolvimento Mobile: como ficar responsivo","isPartOf":{"@id":"https:\/\/www.impacta.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#primaryimage"},"image":{"@id":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg","datePublished":"2017-07-05T11:27:17+00:00","author":{"@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c"},"description":"Quem ainda hoje n\u00e3o tem um site responsivo, com certeza n\u00e3o est\u00e1 aproveitando os melhores resultados. Saiba mais sobre o desenvolvimento mobile!","breadcrumb":{"@id":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#primaryimage","url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg","contentUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_desenvolvimentomobile.jpg","width":850,"height":284},{"@type":"BreadcrumbList","@id":"https:\/\/www.impacta.com.br\/blog\/desenvolvimento-mobile-como-se-adequar-para-ficar-responsivo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.impacta.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento Mobile: como ficar responsivo"}]},{"@type":"WebSite","@id":"https:\/\/www.impacta.com.br\/blog\/#website","url":"https:\/\/www.impacta.com.br\/blog\/","name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","description":"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c","name":"Reda\u00e7\u00e3o Impacta","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","caption":"Reda\u00e7\u00e3o Impacta"},"url":"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/"}]}},"acf":{"post_description":null,"capa_mobile":null},"_links":{"self":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/11631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/comments?post=11631"}],"version-history":[{"count":0,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/11631\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media\/17432"}],"wp:attachment":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media?parent=11631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/categories?post=11631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/tags?post=11631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}