{"id":2595,"date":"2017-05-15T12:33:24","date_gmt":"2017-05-15T15:33:24","guid":{"rendered":"http:\/\/blog.iset.com.br\/2017\/05\/entenda-a-diferenca-entre-site-responsivo-e-site-mobile\/"},"modified":"2023-04-17T16:14:48","modified_gmt":"2023-04-17T19:14:48","slug":"entenda-a-diferenca-entre-site-responsivo-e-site-mobile","status":"publish","type":"post","link":"https:\/\/www.iset.com.br\/blog\/entenda-a-diferenca-entre-site-responsivo-e-site-mobile\/","title":{"rendered":"Entenda a diferen\u00e7a entre site responsivo e site mobile"},"content":{"rendered":"<p><strong>Os<\/strong> <strong>dispositivos mobile<\/strong> <strong>j\u00e1 representam <a href=\"http:\/\/www.itforum365.com.br\/industria\/cenario\/numero-de-acessos-a-internet-no-brasil-bate-marca-de-220-milhoes?utm_source=blog&amp;utm_campaign=rc_blogpost\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">a maior parte dos acessos \u00e0 internet<\/a> feitos no Brasil.<\/strong> Hoje, com a populariza\u00e7\u00e3o das redes m\u00f3veis de alta velocidade e dos smartphones, <span style=\"text-decoration: underline;\">muitas pessoas est\u00e3o abandonando o computador e realizando a maior parte da sua navega\u00e7\u00e3o em aparelhos m\u00f3veis.<\/span><\/p>\n<p>Isso pode incluir atividades simples, como a postagem de fotos em<strong> <a href=\"http:\/\/bit.ly\/2DcPzTx\" target=\"_blank\" rel=\"noopener nofollow\">redes sociais<\/a><\/strong>, at\u00e9 a compra de novos itens ou o pagamento de contas de \u00e1gua e telefone. Diante disso, empresas com e-commerce devem voltar a sua aten\u00e7\u00e3o para a necessidade de<strong> criar <a href=\"http:\/\/blog.iset.com.br\/2017\/04\/qual-e-a-importancia-de-ter-uma-plataforma-de-e-commerce-mobile\/?utm_source=blog&amp;utm_campaign=rc_blogpost\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">p\u00e1ginas de vendas que se adaptem\u00a0facilmente a aparelhos com telas pequenas<\/a>.<\/strong><\/p>\n<p>Nesse sentido, dois formatos podem ser utilizados: construir um site mobile ou a criar\u00a0um site responsivo. <strong>Se voc\u00ea quer conhecer a diferen\u00e7a entre os dois, continue a leitura do nosso post!<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>O que \u00e9 um site mobile?<\/h2>\n<p><span style=\"text-decoration: underline;\">O site mobile \u00e9 uma p\u00e1gina feita com um layout todo voltado para aparelhos m\u00f3veis.<\/span> Em geral, ela \u00e9 acess\u00edvel por uma URL pr\u00f3pria e se conecta\u00a0aos sistemas web do neg\u00f3cio por meio das APIs dispon\u00edveis.<\/p>\n<p>A p\u00e1gina mobile de uma empresa pode ter ou n\u00e3o plugins. Em geral, empresas costumam criar o layout do site m\u00f3vel antes de criar a vers\u00e3o desktop, <strong>pois isso tende a melhorar o layout final e a disposi\u00e7\u00e3o dos itens<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_46947\" aria-describedby=\"caption-attachment-46947\" style=\"width: 860px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/bit.ly\/35hS83W\" rel=\"nofollow noopener\" target=\"_blank\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-46947\" src=\"https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo.png\" alt=\"\" width=\"860\" height=\"260\" srcset=\"https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo.png 860w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo-300x91.png 300w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo-768x232.png 768w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo-600x181.png 600w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo-24x7.png 24w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo-36x11.png 36w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2017\/05\/importancia-vantagens-design-responsivo-48x15.png 48w\" sizes=\"(max-width: 860px) 100vw, 860px\" \/><\/a><figcaption id=\"caption-attachment-46947\" class=\"wp-caption-text\">Saiba como o design responsivo vai diminuir as taxas de abandono, melhorar a experi\u00eancia de compra e alavancar os neg\u00f3cios em sua loja virtual. Confira!<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2>Como o site responsivo \u00e9 definido?<\/h2>\n<p><strong>O site responsivo \u00e9 aquele que se adapta\u00a0automaticamente ao tamanho da tela do usu\u00e1rio.<\/strong> Isso \u00e9 feito por meio de configura\u00e7\u00f5es espec\u00edficas no CSS da p\u00e1gina, eliminando a necessidade de utilizar uma URL separada para a vers\u00e3o mobile.<\/p>\n<p>Um<strong> <a href=\"http:\/\/blog.iset.com.br\/2016\/12\/entenda-a-importancia-do-design-responsivo-para-e-commerce\/?utm_source=blog&amp;utm_campaign=rc_blogpost\" target=\"_blank\" rel=\"noopener nofollow\">site responsivo<\/a><\/strong> <span style=\"text-decoration: underline;\">pode exibir o seu layout reduzido tanto em aparelhos m\u00f3veis como em computadores ou notebooks<\/span>. Para isso, basta que o usu\u00e1rio reduza o tamanho da janela em que o conte\u00fado \u00e9 exibido. Al\u00e9m disso, esse tipo de p\u00e1gina \u00e9 conhecida pelo grande uso de <strong>HTML5<\/strong>,<strong> o que maximiza a compatibilidade com in\u00fameros aparelhos<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Quais as vantagens de cada tipo de layout?<\/h2>\n<p>Tanto os sites mobile como os site responsivo\u00a0s\u00e3o conhecidos pela sua import\u00e2ncia em um cen\u00e1rio onde cada vez mais aparelhos m\u00f3veis s\u00e3o utilizados como principal meio de acesso \u00e0 web. Entretanto, <span style=\"text-decoration: underline;\">a sua constru\u00e7\u00e3o e a manuten\u00e7\u00e3o de ambos os tipos de p\u00e1gina apresentam diferen\u00e7as cruciais.<\/span><\/p>\n<p>A p\u00e1gina com um<strong> layout exclusivo para aparelhos mobile<\/strong> exige um processo de constru\u00e7\u00e3o mais complexo. Ele demandar\u00e1 um dom\u00ednio pr\u00f3prio para esse tipo de dispositivo, al\u00e9m de um <strong><a href=\"http:\/\/bit.ly\/2Dgtpj5\" target=\"_blank\" rel=\"noopener nofollow\">design<\/a><\/strong> feito separadamente.<\/p>\n<p>J\u00e1 a p\u00e1gina de um\u00a0<strong>site responsivo<\/strong>, op\u00e7\u00e3o que ganhou for\u00e7a nos \u00faltimos anos, \u00e9 mais f\u00e1cil de ser gerenciada. Ela exige apenas algumas linhas adicionais no <strong>CSS do endere\u00e7o<\/strong>, dando ao navegador a <strong>capacidade de modificar a exibi\u00e7\u00e3o do conte\u00fado de acordo com o espa\u00e7o dispon\u00edvel para a exibi\u00e7\u00e3o dos itens<\/strong>.<\/p>\n<p>Al\u00e9m disso, <span style=\"text-decoration: underline;\">as p\u00e1ginas com layout responsivo apresentam um <a href=\"http:\/\/blog.iset.com.br\/2017\/04\/quer-vender-mais-aprenda-a-utilizar-o-seo-para-e-commerce\/?utm_source=blog&amp;utm_campaign=rc_blogpost\" target=\"_blank\" rel=\"noopener nofollow\">ranqueamento<\/a> melhor quando comparadas com sites mobile.<\/span> O Google, junto a outras ferramentas de pesquisa, passou\u00a0a priorizar sites com essa caracter\u00edstica, pois elas s\u00e3o mais leves e carregam com maior agilidade.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_46922\" aria-describedby=\"caption-attachment-46922\" style=\"width: 860px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/bit.ly\/2MsCwSB\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" class=\"size-full wp-image-46922\" src=\"https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia.png\" alt=\"\" width=\"860\" height=\"260\" srcset=\"https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia.png 860w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia-300x91.png 300w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia-768x232.png 768w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia-600x181.png 600w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia-24x7.png 24w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia-36x11.png 36w, https:\/\/www.iset.com.br\/blog\/wp-content\/uploads\/2016\/12\/plataforma-mobile-importancia-48x15.png 48w\" sizes=\"(max-width: 860px) 100vw, 860px\" \/><\/a><figcaption id=\"caption-attachment-46922\" class=\"wp-caption-text\">Saiba como funciona esse tipo de sistema e como ele pode ser \u00fatil ao seu neg\u00f3cio.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>Em todos os casos, \u00e9 <strong>essencial<\/strong> que o neg\u00f3cio possua uma p\u00e1gina<strong> adaptada para dispositivos m\u00f3veis<\/strong>, seja ela um <strong>site mobile <\/strong>ou <strong>site responsivo<\/strong>.<\/p>\n<p>O n\u00famero de acessos feito por meio desse tipo de ferramenta n\u00e3o para de crescer e\u00a0deixar de ter sites prontos para essa realidade diminui a capacidade do empreendimento para realizar <a href=\"http:\/\/bit.ly\/2DaQqnA\" target=\"_blank\" rel=\"noopener nofollow\">vendas<\/a>, o que pode prejudicar sua <strong>competitividade no mercado<\/strong>.<\/p>\n<p>Como \u00e9 a sua experi\u00eancia com <strong>site\u00a0mobile<\/strong> ou site <strong>responsivo<\/strong>? Voc\u00ea enfrenta dificuldades para acessar conte\u00fados no seu smartphone? Conta pra gente!<\/p>\n<p>&nbsp;<\/p>\n<p><b>Leia tamb\u00e9m:\u00a0<\/b><\/p>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/www.iset.com.br\/blog\/inbound-marketing-passos-atrair-clientes\/\">Inbound Marketing: 4 passos para come\u00e7ar a atrair clientes;<\/a><\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/www.iset.com.br\/blog\/um-passo-a-passo-simples-como-criar-uma-loja-virtual\/\">Um passo a passo simples: como criar uma loja virtual;<\/a><\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/www.iset.com.br\/blog\/banner-loja-virtual-sem-pagar-nada\/\">Crie banners para sua loja virtual online sem pagar nada.<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Confira nosso v\u00eddeo sobre as diferen\u00e7as entre Mobile ou Responsivo!<\/h3>\n<p><iframe title=\"QUAL \u00c9 O MELHOR: MOBILE OU LAYOUT RESPONSIVO?\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/rnd7Dyq35mw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os dispositivos mobile j\u00e1 representam a maior parte dos acessos \u00e0 internet feitos no Brasil. Hoje, com a populariza\u00e7\u00e3o das redes m\u00f3veis de alta velocidade e dos smartphones, muitas pessoas est\u00e3o abandonando o computador e realizando a maior parte da sua navega\u00e7\u00e3o em aparelhos m\u00f3veis. Isso pode incluir atividades simples, como a postagem de fotos [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":46948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,222],"tags":[469,46,468,366,467,142,33,147,466,411,14],"class_list":["post-2595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas-de-ecommerce","category-marketing-digital","tag-competitividade-no-mercado","tag-design","tag-dispositivos-moveis","tag-layout","tag-layout-responsivo","tag-mobile","tag-redes-sociais","tag-responsivo","tag-site-mobile","tag-site-responsivo","tag-vendas"],"_links":{"self":[{"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/posts\/2595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2595"}],"version-history":[{"count":11,"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/posts\/2595\/revisions"}],"predecessor-version":[{"id":54303,"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/posts\/2595\/revisions\/54303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/media\/46948"}],"wp:attachment":[{"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iset.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}