{"id":293,"date":"2023-04-20T15:39:03","date_gmt":"2023-04-20T18:39:03","guid":{"rendered":"https:\/\/www.postdigital.cc\/blog\/9-principios-basicos-do-design-responsivo\/"},"modified":"2023-04-20T16:18:19","modified_gmt":"2023-04-20T19:18:19","slug":"9-principios-basicos-do-design-responsivo","status":"publish","type":"post","link":"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo","title":{"rendered":"9 princ\u00edpios b\u00e1sicos do design responsivo"},"content":{"rendered":"<p>A defini\u00e7\u00e3o de design responsivo vem abrangendo v\u00e1rias vertentes do marketing e do design em si. Considerado uma tend\u00eancia para 2015, j\u00e1 no ano passado, design e sites responsivos ganharam for\u00e7a, devido ao aumento de consumidores comprando smartphones e tablets, al\u00e9m da navega\u00e7\u00e3o na internet, que tamb\u00e9m migrou para dispositivos. Os designers e desenvolvedores agora precisam pensar no mobile &#8211; solu\u00e7\u00f5es criativas para facilitar a navega\u00e7\u00e3o dos usu\u00e1rios, para v\u00e1rias finalidades: desde e-commerce, que agora pode ser chamado de m-commerce, quanto sites comuns. Temos um material para voc\u00ea saber como criar um site, baixe o nosso ebook gratuito &#8216;<a href=\"http:\/\/materiais.postdigital.cc\/como-criar-um-site-de-sucesso\" target=\"_blank\" rel=\"noopener\">O passo a passo para desenvolver um site de sucesso<\/a>&#8216;.<\/p>\n<p>Fazendo uma breve defini\u00e7\u00e3o, o design responsivo \u00e9 quando o layout de um site adapta-se ao dispositivo utilizado. H\u00e1 muitos anos, definiu-se que o tamanho padr\u00e3o para cria\u00e7\u00e3o de layout para sites seria 960 pixels. Isso levando em conta que a maior parte dos monitores t\u00eam resolu\u00e7\u00e3o de 1024&#215;768. Mas, com esta nova realidade a qual as pessoas utilizam telas de v\u00e1rios tamanhos, foi preciso adaptar-se. E \u00e9 exatamente isto que o nome diz: o design &#8220;responde&#8221; ao dispositivo utilizado, tornando o <a href=\"http:\/\/www.postdigital.cc\/blog\/artigo\/o-que-e-site-responsivo-e-porque-ele-esta-em-alta\" target=\"_blank\" rel=\"noopener\">site responsivo<\/a>.<\/p>\n<p>Entrar de vez nesta modalidade \u00e9 garantir qualidade para qualquer layout produzido, n\u00e3o mais um diferencial! Por isso, confira abaixo os 9 princ\u00edpios do Design Responsivo que foram traduzidos com alguns complementos do <a href=\"http:\/\/blog.froont.com\/9-basic-principles-of-responsive-web-design\/\" target=\"_blank\" rel=\"noopener\">post do Sandijs Ruluks<\/a>, co-founder do Froont:<\/p>\n<ul>\n<li><a href=\"#\u201d01\u201d\">Design responsivo X Adaptativo<\/a><\/li>\n<li><a href=\"#\u201d02\u201d\">Design responsivo e SEO<\/a><\/li>\n<li><a href=\"#\u201d03\u201d\">O fluxo<\/a><\/li>\n<li><a href=\"#\u201d04\u201d\">Breakpoints<\/a><\/li>\n<li><a href=\"#\u201d05\u201d\">Unidades Relativas<\/a><\/li>\n<li><a href=\"#\u201d06\u201d\">Valores m\u00ednimos e valores m\u00e1ximos<\/a><\/li>\n<li><a href=\"#\u201d07\u201d\">Objetos filho<\/a><\/li>\n<li><a href=\"#\u201d08\u201d\">Escolha por qual come\u00e7ar: mobile ou desktop<\/a><\/li>\n<li><a href=\"#\u201d09\u201d\">Fontes Web ou Fontes do Sistema<\/a><\/li>\n<li><a href=\"#\u201d10\u201d\">Imagens Bitmap ou Vetores<\/a><\/li>\n<li><a href=\"#\u201d11\u201d\">Dicas para fazer um bom design responsivo<\/a><\/li>\n<\/ul>\n<p><a name=\"\u201d01\u201d\"><\/a><\/p>\n<h2>Design responsivo X Adaptativo<\/h2>\n<p><img class=\"aligncenter wp-image-4925 size-full\" src=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/design-responsivo-adaptativo.png\" alt=\"Design responsivo X Adaptativo\" width=\"751\" height=\"403\" srcset=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/design-responsivo-adaptativo.png 751w, https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/design-responsivo-adaptativo-340x182.png 340w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/p>\n<p>U\u00e9, n\u00e3o \u00e9 a mesma coisa? N\u00e3o. O design responsivo flui de acordo com o dispositivo utilizado. J\u00e1 o adaptativo \u00e9 a forma antiga de se trabalhar com dispositivos, onde o conte\u00fado aguarda o navegador terminar a expans\u00e3o. No adaptativo, h\u00e1 um c\u00f3digo para cada vers\u00e3o do site e dispositivo. Exemplo: c\u00f3digo para quando o site for exibido em monitor, outro para smartphones.<\/p>\n<p>Por mais que sejam muito similares, design responsivo e design adaptativo n\u00e3o s\u00e3o a mesma coisa. Sua finalidade, sim, \u00e9 a mesma: tornar sites poss\u00edveis de serem visualizados em qualquer dispositivo, m\u00f3vel ou n\u00e3o, sem prejudicar a experi\u00eancia do visitante. O que os difere \u00e9 o modo como isso \u00e9 feito e como eles alteram o <em>tamanho padr\u00e3o de site<\/em> e seu layout.<\/p>\n<p>No design responsivo h\u00e1 uma quest\u00e3o de flexibilidade. Ou seja, quando o site detecta que est\u00e1 sendo acessado por um dispositivo m\u00f3vel, ele ativa o <em>layout responsivo<\/em> e automaticamente \u00e9 alterado para ser visto da melhor forma poss\u00edvel naquele aparelho, seja um celular, um tablet ou um desktop. Ele acompanha as medidas da tela, o que significa que sempre ir\u00e1 preench\u00ea-la.<\/p>\n<p>J\u00e1 o design adaptativo \u00e9 constru\u00eddo de maneira ligeiramente diferente. Ele possui medidas fixas para cada resolu\u00e7\u00e3o, e n\u00e3o apenas &#8220;se estica&#8221; para preencher ou reduzir o espa\u00e7o utilizado. Por exemplo: se um site que possui design adaptativo for acessado em um monitor que tem a resolu\u00e7\u00e3o 1024px, ele apresentar\u00e1 o design constru\u00eddo especificamente para esses 1024px. O mesmo site, ao ser acessado em um celular com 320px, apresentar\u00e1 o layout de 320px.<\/p>\n<p>As vantagens do design responsivo s\u00e3o o preenchimento total da tela, sua flexibilidade com diversas resolu\u00e7\u00f5es e a relativa facilidade em rela\u00e7\u00e3o \u00e0 constru\u00e7\u00e3o do layout. Por outro lado, ele pode ser mais complexo de ser aplicado por trabalhar com porcentagens, n\u00e3o medidas fechadas, e de qualquer maneira precisa de um limite m\u00e1ximo e m\u00ednimo. J\u00e1 o design adaptativo garante um site sempre muito bem diagramado e alinhado em v\u00e1rias resolu\u00e7\u00f5es, mas isso tamb\u00e9m o torna mais pesado. Al\u00e9m do mais, \u00e9 preciso construir mais do que apenas um <em>layout responsivo<\/em>, j\u00e1 que cada um responder\u00e1 a uma resolu\u00e7\u00e3o diferente.<\/p>\n<p><a name=\"\u201d02\u201d\"><\/a><\/p>\n<h2>Design responsivo e SEO<\/h2>\n<p>SEO significa Search Engine Optimization e \u00e9 uma sigla com a qual voc\u00ea iria esbarrar uma hora ou outra. O SEO \u00e9 um dos principais componentes do marketing digital, e trata de otimiza\u00e7\u00f5es feitas em sites e seus conte\u00fados para que ele se torne mais &#8220;amig\u00e1vel&#8221; para os buscadores, por assim dizer. Ou seja, quanto mais aprimorado for o SEO, maiores as chances de um bom posicionamento no Google, por exemplo.<\/p>\n<p>No geral, quando falamos de SEO, falamos muito sobre palavras-chave nos posts e em estrutura\u00e7\u00e3o de texto. Mas, acredite ou n\u00e3o, o design responsivo tamb\u00e9m tem um grande impacto na otimiza\u00e7\u00e3o!<\/p>\n<p style=\"text-align: center;\"><iframe src=\"\/\/www.youtube.com\/embed\/bRD0S1wQruY\" width=\"425\" height=\"350\"><\/iframe><\/p>\n<p>Isso porque, entre os diversos algoritmos utilizados pelo Google para identificar os sites e ranquea-los, est\u00e1 o Hummingbird. Esse algoritmo foi implementado unicamente para favorecer os sites que possuem um <em>layout responsivo<\/em>, j\u00e1 que isso faz com que haja apenas uma URL e n\u00e3o h\u00e1 necessidade de redirecionamento. Quando um usu\u00e1rio faz uma busca no Google pelo celular, se ele clicar em um site n\u00e3o-responsivo, a velocidade ser\u00e1 baixa e isso exigir\u00e1 um &#8220;duplo&#8221; trabalho do Google, j\u00e1 que ele ser\u00e1 redirecionado para a vers\u00e3o mobile. No design responsivo, o clique ser\u00e1 \u00fanico e direto ao ponto.<\/p>\n<p>Embora se pense com frequ\u00eancia, quando se fala em design responsivo, em resolver quest\u00f5es como por exemplo a abertura de telas em v\u00e1rios dispositivos ou ainda, a constru\u00e7\u00e3o de sites especificamente para dispositivos mobiles e outros, o conceito de design responsivo vai al\u00e9m e garante, dentre outras coisas, uma compreens\u00e3o maior sobre os produtos e servi\u00e7os da empresa, com foco no funil de vendas e resultados otimizados de CRM.<\/p>\n<p>Concentrando-se no layout de um site, por exemplo, que \u00e9 uma das melhores formas de se come\u00e7ar a pensar em um design responsivo para o site, \u00e9 preciso atentar para 9 princ\u00edpios b\u00e1sicos, de modo que o seu p\u00fablico alvo seja devidamente impactado com a campanha.<\/p>\n<p><a href=\"https:\/\/materiais.postdigital.cc\/veja-como-atrair-clientes-com-o-seu-site\" target=\"_blank\" rel=\"noopener\"><img class=\"aligncenter wp-image-3389 size-full\" src=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/01\/design-cores-e-experiencia-do-usuario.png\" alt=\"Design, cores e experi\u00eancia do usu\u00e1rio\" width=\"750\" height=\"345\" srcset=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/01\/design-cores-e-experiencia-do-usuario.png 750w, https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/01\/design-cores-e-experiencia-do-usuario-340x156.png 340w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<p><a name=\"\u201d03\u201d\"><\/a><\/p>\n<h2>O fluxo<\/h2>\n<p>Enquanto em monitores voc\u00ea pode livremente projetar o layout na horizontal, no responsivo voc\u00ea precisa pensar em como o conte\u00fado, cores e formas ser\u00e3o dispostas na vertical. Pense em um smartphone, por exemplo. Quando um site se adaptar, o conte\u00fado \u00e9 empurrado para baixo e isso se chama fluxo. Se algo ficar est\u00e1tico, as imagens que se adaptarem ir\u00e3o &#8220;empurrar&#8221; ou se sobrepor ao rodap\u00e9, por exemplo.<\/p>\n<p><a name=\"\u201d04\u201d\"><\/a><\/p>\n<h2>Breakpoints<\/h2>\n<p>Muitas pessoas ao trabalharem com web design e na constru\u00e7\u00e3o de layouts responsivos, contam com as media queries, que facilitam o trabalho de adapta\u00e7\u00e3o de um <em>layout responsivo<\/em>. Mas criar media queries para cada tamanho existente seria complicado, e n\u00e3o faria fluir os breakpoints. Os &#8220;pontos de quebra&#8221; s\u00e3o partes no layout que devem responder ao dispositivo. Um site normalmente tem tr\u00eas colunas, mas acessado de um smartphone deve ter apenas uma coluna. E assim por diante.<\/p>\n<p><a name=\"\u201d05\u201d\"><\/a><\/p>\n<h2>Unidades Relativas<\/h2>\n<p>Deixando um pouco de lado os pixels, no design responsivo voc\u00ea precisa aprender a trabalhar com porcentagens. Al\u00e9m disso, n\u00e3o se fala somente em unidades est\u00e1ticas. Estas unidades relativas se adaptam de acordo com a tela. Neste sentido, ao desenhar um layout voc\u00ea n\u00e3o diz que ele tem 1000 pixels, mas sim, ocupa 100% de uma tela.<\/p>\n<p><a name=\"\u201d06\u201d\"><\/a><\/p>\n<h2>Valores m\u00ednimos e valores m\u00e1ximos<\/h2>\n<p>Um conte\u00fado visto de uma televis\u00e3o de 50&#8243; \u00e9 diferente do mesmo visto em um smartphone. Mas imagine uma imagem ocupando toda a tela de uma televis\u00e3o enorme, mesmo que haja apenas uma informa\u00e7\u00e3o pequena. Por isso existem os valores m\u00e1ximos e m\u00ednimos, que auxiliam na limita\u00e7\u00e3o do quanto determinado elemento deve expandir ou compactar.<\/p>\n<p><a name=\"\u201d07\u201d\"><\/a><\/p>\n<h2>Objetos filho<\/h2>\n<p>Este princ\u00edpio \u00e9 voltado tamb\u00e9m aos programadores. Quem mexe com c\u00f3digo deve pensar na usabilidade de um <a href=\"http:\/\/www.postdigital.cc\/blog\/artigo\/site-responsivo-x-site-mobile-qual-a-melhor-soluca\" target=\"_blank\" rel=\"noopener\">site responsivo<\/a>. Por isso, agrupar c\u00f3digos permite que eles sejam mais f\u00e1ceis de controlar. Neste conceito, at\u00e9 vale utilizar pixels est\u00e1ticos para que logo ou colunas, por exemplo, movam-se juntos, evitando que quando um site responda a uma tela, estes objetos n\u00e3o se movam soltos.<\/p>\n<p><a name=\"\u201d08\u201d\"><\/a><\/p>\n<h2>Escolha por qual come\u00e7ar: mobile ou desktop<\/h2>\n<p><img class=\"aligncenter wp-image-4926 size-full\" src=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/escolher-por-qual-comecar.png\" alt=\"Escolha por qual come\u00e7ar: mobile ou desktop\" width=\"751\" height=\"403\" srcset=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/escolher-por-qual-comecar.png 751w, https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/escolher-por-qual-comecar-340x182.png 340w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/p>\n<p>Tudo vai depender do projeto trabalhado, se \u00e9 necess\u00e1rio que a vers\u00e3o mobile fique pronta primeiro, defina prioridades. Come\u00e7ar pela vers\u00e3o mobile pede um design muito mais enxuto, o que n\u00e3o \u00e9 necess\u00e1rio em uma vers\u00e3o desktop.<\/p>\n<p><a name=\"\u201d09\u201d\"><\/a><\/p>\n<h2>Fontes Web ou Fontes do Sistema<\/h2>\n<p>As webfontes possuem maior variedade e podem dar uma cara legal ao design do site responsivo. No entanto, elas demoram mais a carregar. Evite layouts pesados e que demoram a carregar em mobile! Isso faz com que o usu\u00e1rio desista de ver aquele conte\u00fado. Por praticidade e agilidade, \u00e9 recomendado utilizar fontes do sistema.<\/p>\n<p><a name=\"\u201d10\u201d\"><\/a><\/p>\n<h2>Imagens Bitmap ou Vetores<\/h2>\n<p><img class=\"aligncenter wp-image-4927 size-full\" src=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/imagens-vetor-bitmap.png\" alt=\"Imagens Bitmap ou Vetores\" width=\"751\" height=\"403\" srcset=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/imagens-vetor-bitmap.png 751w, https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/imagens-vetor-bitmap-340x182.png 340w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/p>\n<p>Quando for desenhar um layout, verifique se logo e imagens possuem muitos detalhes. Eles ir\u00e3o carregar melhor se estiverem em bitmap (de prefer\u00eancia .png, .jpg). Caso contr\u00e1rio, pode utilizar vetores, com o formato SVG. Eles s\u00e3o mais leves, por\u00e9m, pense em quais navegadores aquele layout ser\u00e1 exibido: navegadores mais antigos n\u00e3o reconhecem ou carregam lentamente vetores em SVG.<\/p>\n<p>Ao migrar para o design responsivo, alguns cuidados devem ser tomados. Esconder conte\u00fado, devido \u00e0s limita\u00e7\u00f5es de um layout mobile pode prejudicar o objetivo do conte\u00fado de um site. Isso deve ser equilibrado tamb\u00e9m para evitar o &#8220;incha\u00e7o&#8221; de conte\u00fado, o que torna um site pesado de ser carregado na vers\u00e3o mobile, por exemplo. Manter o layout organizado previne que o usu\u00e1rio abandone o site. Pesquisas mostram que 74% de usu\u00e1rios de mobile desistem de um site se ele n\u00e3o carrega em 5 SEGUNDOS! \u00c9 muito pouco tempo e tenha em mente que estes usu\u00e1rios de tablets e smartphones ir\u00e3o mexer em um site vers\u00e3o mobile da mesma forma que fariam na vers\u00e3o desktop.<\/p>\n<p>O que um desenvolvedor e um designer devem lembrar \u00e9 a usabilidade: a forma como uma pessoa consome conte\u00fado em um desktop n\u00e3o \u00e9 igual a uma TV, que n\u00e3o \u00e9 igual a um smartphone. Por isso, \u00e9 preciso pensar em bot\u00f5es, rolagem, para que a experi\u00eancia de navega\u00e7\u00e3o seja natural, n\u00e3o importando o dispositivo.<br \/>\nStephen Hay, designer e palestrante americano, oferece diversos conselhos aos designers que est\u00e3o entrando no mundo responsivo: &#8220;Pergunte-se sempre, qual \u00e9 a informa\u00e7\u00e3o principal que eu desejo passar? Tudo o que voc\u00ea acrescenta em um layout tem o potencial de estrag\u00e1-lo. Isso \u00e9 realmente necess\u00e1rio?&#8221;. Stephen \u00e9 autor do livro Responsive Design Workflow, que d\u00e1 v\u00e1rias dicas e passos para construir um bom layout, al\u00e9m de programar com leveza. Vale a pena pesquisar a respeito e ter \u00e0 disposi\u00e7\u00e3o solu\u00e7\u00f5es inteligentes para criar layouts e sites responsivos eficientes.<\/p>\n<p><a name=\"\u201d11\u201d\"><\/a><\/p>\n<h2>Dicas para fazer um bom design responsivo<\/h2>\n<p><img class=\"aligncenter wp-image-4929 size-full\" src=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/dicas-para-fazer-um-bom-design-responsivo.png\" alt=\"Dicas para fazer um bom design responsivo\" width=\"751\" height=\"403\" srcset=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/dicas-para-fazer-um-bom-design-responsivo.png 751w, https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2018\/08\/dicas-para-fazer-um-bom-design-responsivo-340x182.png 340w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/p>\n<p>Seguindo estes princ\u00edpios, n\u00e3o tem como n\u00e3o criar um layout fora de s\u00e9rie!<\/p>\n<p>Agora, vem tamb\u00e9m uma outra parte muito importante, que \u00e9 a responsividade do site. De nada adiante ter um site moderno, com um layout show de bola se o site s\u00f3 abre no navegador do desktop.<\/p>\n<p>Por tanto, veja algumas dicas importantes para deixar seu site acess\u00edvel em qualquer lugar e plataforma. Seu sucesso ser\u00e1 muito maior!<\/p>\n<h3>&#8211; Utilize ferramentas de otimiza\u00e7\u00e3o de imagem<\/h3>\n<p>Dependendo do segmento ao qual seu site far\u00e1 parte, \u00e9 indispens\u00e1vel que as imagens sejam devidamente trabalhadas e armazenadas no tamanho e extens\u00e3o adequadas. Isto porque, se a imagem tiver uma resolu\u00e7\u00e3o alta demais, em uma extens\u00e3o inadequada, j\u00e1 ser\u00e1 dific\u00edlimo abri-la no desktop, imagine no celular ou tablet?<\/p>\n<p>Seus clientes devem atrav\u00e9s de imagens leves, n\u00edtidas e de boa qualidade, entender melhor o que prop\u00f5e e oferece a sua empresa e principalmente, de que forma podem usufruir dos produtos ou servi\u00e7os que ela oferece. Desta forma, aprenda a trabalhar com programas de edi\u00e7\u00e3o de imagens ou contrate profissionais que tenham este dom\u00ednio.<\/p>\n<h3>&#8211; N\u00e3o esque\u00e7a a orienta\u00e7\u00e3o de tela<\/h3>\n<p>Importante salientar que, independente do tipo de site, muitos usu\u00e1rios de smartphone utilizam o aparelho na op\u00e7\u00e3o \u201clandscape\u201d, o que significa que, com o aparelho de p\u00e9 ou deitado, ser\u00e1 poss\u00edvel visualizar o site automaticamente conforme o tamanho da tela. Desta forma, n\u00e3o ser\u00e1 dif\u00edcil que, se um site n\u00e3o se adequar rapidamente ao formato e \u201cvirada\u201d de tela, o cliente simplesmente desistir\u00e1 de acess\u00e1-lo.<\/p>\n<p><a href=\"https:\/\/materiais.postdigital.cc\/veja-como-atrair-clientes-com-o-seu-site\" target=\"_blank\" rel=\"noopener\"><img class=\"aligncenter wp-image-3389 size-full\" src=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/01\/design-cores-e-experiencia-do-usuario.png\" alt=\"Design, cores e experi\u00eancia do usu\u00e1rio\" width=\"750\" height=\"345\" srcset=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/01\/design-cores-e-experiencia-do-usuario.png 750w, https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/01\/design-cores-e-experiencia-do-usuario-340x156.png 340w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<h3>&#8211; Pense no tamanho dos bot\u00f5es<\/h3>\n<p>Bot\u00f5es pequeninos, que somente s\u00e3o enxergados pelo desktop, s\u00e3o um grave problema. \u00c9 preciso cri\u00e1-los de forma que, em qualquer plataforma, sejam f\u00e1ceis de serem visualizados, compreendidos e clic\u00e1veis, para que o usu\u00e1rio tenha \u00eaxito ao apert\u00e1-los com o dedo.<\/p>\n<h3>&#8211; Menos \u00e9 mais<\/h3>\n<p>Filtrar as informa\u00e7\u00f5es no site \u00e9 sempre muito importante. Se o site n\u00e3o estiver com o conte\u00fado na \u201cmedida certa\u201d, afastar\u00e1 os clientes, mais do que poderia conquist\u00e1-los. Nos dias de hoje, ningu\u00e9m quer perder clientes, n\u00e3o \u00e9 mesmo?<\/p>\n<p>Com todos estes princ\u00edpios e dicas, \u00e9 fundamental que cada passo seja seguido a risca, de forma que o site fique 100% funcional, r\u00e1pido de ser acessado e acess\u00edvel a qualquer dispositivo m\u00f3vel.<\/p>\n<p>N\u00e3o se pode negar que um bom conte\u00fado atrai muito mais clientes do que podemos imaginar. \u00c9 uma propaganda gratuita, gra\u00e7as a recomenda\u00e7\u00e3o de outros usu\u00e1rios que ser\u00e3o fidelizados.<\/p>\n<p>A pergunta que fica \u00e9: Depois disso tudo, voc\u00ea quer fidelizar o seu p\u00fablico-alvo? Por que ainda n\u00e3o pensou em criar um site original e <a href=\"http:\/\/www.postdigital.cc\/blog\/artigo\/6-dicas-de-como-fazer-um-site-responsivo-de-sucesso\" target=\"_blank\" rel=\"noopener\">responsivo<\/a>? M\u00e3os \u00e0 obra!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Confira os 9 princ\u00edpios do Design Responsivo, que foram traduzidos com alguns complementos do post do Sandijs Ruluks, co-founder do Froont.<\/p>\n","protected":false},"author":1,"featured_media":294,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.5.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>9 princ\u00edpios b\u00e1sicos do design responsivo - Blog da Post Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 princ\u00edpios b\u00e1sicos do design responsivo - Blog da Post Digital\" \/>\n<meta property=\"og:description\" content=\"Confira os 9 princ\u00edpios do Design Responsivo, que foram traduzidos com alguns complementos do post do Sandijs Ruluks, co-founder do Froont.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo\" \/>\n<meta property=\"og:site_name\" content=\"Blog da Post Digital\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-20T18:39:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-20T19:18:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/08\/9-principios-basicos-do-design-responsivo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"657\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Cintra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Cintra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo\",\"url\":\"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo\",\"name\":\"9 princ\u00edpios b\u00e1sicos do design responsivo - Blog da Post Digital\",\"isPartOf\":{\"@id\":\"https:\/\/www.postdigital.cc\/blog\/#website\"},\"datePublished\":\"2023-04-20T18:39:03+00:00\",\"dateModified\":\"2023-04-20T19:18:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.postdigital.cc\/blog\/#\/schema\/person\/7c1bf9d6cbd2eb649cbe2b2f3448476a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.postdigital.cc\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"9 princ\u00edpios b\u00e1sicos do design responsivo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.postdigital.cc\/blog\/#website\",\"url\":\"https:\/\/www.postdigital.cc\/blog\/\",\"name\":\"Blog da Post Digital\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.postdigital.cc\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.postdigital.cc\/blog\/#\/schema\/person\/7c1bf9d6cbd2eb649cbe2b2f3448476a\",\"name\":\"Andr\u00e9 Cintra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.postdigital.cc\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d84bf2a7fbc83e100057cfda5d91e7f2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d84bf2a7fbc83e100057cfda5d91e7f2?s=96&d=mm&r=g\",\"caption\":\"Andr\u00e9 Cintra\"},\"sameAs\":[\"https:\/\/www.postdigital.cc\/blog\"],\"url\":\"https:\/\/www.postdigital.cc\/blog\/author\/geeks\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"9 princ\u00edpios b\u00e1sicos do design responsivo - Blog da Post Digital","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.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo","og_locale":"pt_BR","og_type":"article","og_title":"9 princ\u00edpios b\u00e1sicos do design responsivo - Blog da Post Digital","og_description":"Confira os 9 princ\u00edpios do Design Responsivo, que foram traduzidos com alguns complementos do post do Sandijs Ruluks, co-founder do Froont.","og_url":"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo","og_site_name":"Blog da Post Digital","article_published_time":"2023-04-20T18:39:03+00:00","article_modified_time":"2023-04-20T19:18:19+00:00","og_image":[{"width":1000,"height":657,"url":"https:\/\/www.postdigital.cc\/blog\/wp-content\/uploads\/2022\/08\/9-principios-basicos-do-design-responsivo.jpg","type":"image\/jpeg"}],"author":"Andr\u00e9 Cintra","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Cintra","Est. tempo de leitura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo","url":"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo","name":"9 princ\u00edpios b\u00e1sicos do design responsivo - Blog da Post Digital","isPartOf":{"@id":"https:\/\/www.postdigital.cc\/blog\/#website"},"datePublished":"2023-04-20T18:39:03+00:00","dateModified":"2023-04-20T19:18:19+00:00","author":{"@id":"https:\/\/www.postdigital.cc\/blog\/#\/schema\/person\/7c1bf9d6cbd2eb649cbe2b2f3448476a"},"breadcrumb":{"@id":"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.postdigital.cc\/blog\/artigo\/9-principios-basicos-do-design-responsivo#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.postdigital.cc\/blog\/"},{"@type":"ListItem","position":2,"name":"9 princ\u00edpios b\u00e1sicos do design responsivo"}]},{"@type":"WebSite","@id":"https:\/\/www.postdigital.cc\/blog\/#website","url":"https:\/\/www.postdigital.cc\/blog\/","name":"Blog da Post Digital","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.postdigital.cc\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.postdigital.cc\/blog\/#\/schema\/person\/7c1bf9d6cbd2eb649cbe2b2f3448476a","name":"Andr\u00e9 Cintra","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.postdigital.cc\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d84bf2a7fbc83e100057cfda5d91e7f2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d84bf2a7fbc83e100057cfda5d91e7f2?s=96&d=mm&r=g","caption":"Andr\u00e9 Cintra"},"sameAs":["https:\/\/www.postdigital.cc\/blog"],"url":"https:\/\/www.postdigital.cc\/blog\/author\/geeks"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/posts\/293"}],"collection":[{"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/comments?post=293"}],"version-history":[{"count":3,"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":4930,"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/posts\/293\/revisions\/4930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/media\/294"}],"wp:attachment":[{"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/media?parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/categories?post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.postdigital.cc\/blog\/wp-json\/wp\/v2\/tags?post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}