{"id":26496,"date":"2018-04-04T12:00:36","date_gmt":"2018-04-04T15:00:36","guid":{"rendered":"https:\/\/www.kryzalis.com.br\/blog\/?p=26496"},"modified":"2018-04-03T22:27:03","modified_gmt":"2018-04-04T01:27:03","slug":"analisando-o-site-da-coca-cola","status":"publish","type":"post","link":"https:\/\/www.kryzalis.com.br\/blog\/analisando-o-site-da-coca-cola","title":{"rendered":"Analisando o site da Coca-Cola"},"content":{"rendered":"<h2>Ol\u00e1, tudo bem? No v\u00eddeo de hoje iniciamos uma nova s\u00e9rie aqui em nosso canal. Nela, analisarei o site de grandes empresas (como a Coca-Cola) e apontarei para voc\u00eas o que \u00e9 legal neles e o que \u00e9 interessante possuir.<\/h2>\n<p>O primeiro site a ser analisado \u00e9 o da gigante Coca-Cola.<\/p>\n<p><center><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/U8az311VrFU\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/p>\n<h3>An\u00e1lise do site<\/h3>\n<p>Um ponto importante a ser visto \u00e9 que o menu est\u00e1 no canto superior esquerdo \u2013 e isso se d\u00e1 por um motivo: v\u00e1rias pesquisas mostraram que <strong>primeiro<\/strong> lugar para o qual o internauta olha \u00e9 exatamente esse canto esquerdo.<\/p>\n<p>J\u00e1 que o <strong>menu<\/strong> n\u00e3o est\u00e1 aberto na parte de cima e o usu\u00e1rio poderia ficar perdido, colocaram-no nesse local <strong>exatamente<\/strong> por isso.<\/p>\n<p>N\u00e3o sei se foi a ideia do <strong>design<\/strong> (acredito que sim), mas se n\u00e3o foi, ele acertou.<\/p>\n<p>Observe que o <strong>logotipo<\/strong> da empresa est\u00e1 bem no centro e grande.<\/p>\n<p><strong>Por qu\u00ea?<\/strong><\/p>\n<p>Para refor\u00e7ar a marca da empresa Coca-Cola.<\/p>\n<p>Aqui embaixo, vemos 10 artistas.<\/p>\n<p>Essa \u00e9 uma campanha que est\u00e1 sendo realizada pela Coca, em que cada <strong>artista<\/strong> canta sua m\u00fasica e os f\u00e3s dos artistas ir\u00e3o votar na m\u00fasica de que mais <strong>gostaram<\/strong>.<\/p>\n<p>No final, teremos um <strong>vencedor<\/strong>.<\/p>\n<p>O artista com mais votos ir\u00e1 gravar um <strong>clipe<\/strong> para a campanha da Coca \u2013 mas \u00e9 claro que existem mais coisas <strong>envolvidas<\/strong>.<\/p>\n<p>Esse site est\u00e1 <strong>100% focado<\/strong> na campanha, por isso o menu est\u00e1 escondido e o foco do banner \u00e9 direcionado exclusivamente a ela.<\/p>\n<p>No lado esquerdo, vemos um <strong>textinho<\/strong> \u2013 n\u00e3o sei se d\u00e1 para observar no v\u00eddeo, visto que est\u00e1 com uma baixa qualidade, para que a imagem fique mais otimizada e carregue mais r\u00e1pido.<\/p>\n<p>Mas acredito que um olho n\u00e3o treinado n\u00e3o notar\u00e1 diferen\u00e7a na qualidade da imagem. Nem sei se voc\u00ea consegue notar nesse v\u00eddeo, mas no monitor \u00e9 poss\u00edvel ver que ela est\u00e1 <strong>baixa<\/strong>.<\/p>\n<p>Observe que a foto est\u00e1 em <strong>preto e branco.<\/strong><\/p>\n<p><strong>Por qu\u00ea?<\/strong><\/p>\n<p>Porque o foco aqui \u00e9 a marca Coca-Cola e <strong>n\u00e3o os artistas<\/strong>, por isso que as escritas da Coca est\u00e3o todas em <a href=\"https:\/\/www.kryzalis.com.br\/blog\/teoria-das-cores-marketing\"><strong><span style=\"color: #ff0000;\">vermelho<\/span> <\/strong><\/a>\u2013 para ficarem em foco.<\/p>\n<p>\u00c9 importante levar isso em conta no seu site: <strong>qual \u00e9 o foco dele?<\/strong><\/p>\n<p><strong>Produto<\/strong>, <strong>divulga\u00e7\u00e3o<\/strong> de campanha ou sua <strong>marca<\/strong>?<\/p>\n<p>Aqui tamb\u00e9m temos um segundo banner, no qual \u00e9 bem legal observarmos algumas coisas: temos esse bot\u00e3o <span style=\"color: #ff0000;\"><strong>vermelho<\/strong> <\/span>grande escrito \u201c<em>Comprar agora<\/em>\u201d, chamado de<em> Call-To-Action<\/em>, ou seja, chamada para uma a\u00e7\u00e3o.<\/p>\n<p>Qual a chamada para a a\u00e7\u00e3o aqui?<\/p>\n<p><strong>Comprar agora.<\/strong><\/p>\n<p>O banner estimula quem est\u00e1 no site a <strong>fazer<\/strong> a compra.<\/p>\n<p>Isso \u00e9 interessante: todo banner deve levar o usu\u00e1rio para uma a\u00e7\u00e3o.<\/p>\n<p>Mas, Jo\u00e3o, por que esse primeiro banner n\u00e3o tem o <em>Call-To-Action<\/em>?<\/p>\n<p>Porque aqui n\u00e3o \u00e9 necess\u00e1rio que o usu\u00e1rio seja levado a lugar nenhum. Todas as informa\u00e7\u00f5es est\u00e3o logo abaixo: onde veremos daqui a pouco.<\/p>\n<p>O segundo banner <strong>precisa<\/strong>.<\/p>\n<p><strong>Por qu\u00ea?<\/strong><\/p>\n<p>N\u00e3o tem muito a ver com aquela primeira campanha da Coca-Cola. Acredito que seja uma <strong>nova<\/strong>.<\/p>\n<p>Algo bem legal \u00e9 que aqui \u00e9 poss\u00edvel realizar a a\u00e7\u00e3o. Por exemplo, se eu clicar em \u201c<em>Comprar Agora<\/em>\u201d, serei direcionado \u00e0 loja da Coca-Cola, onde consigo realizar a compra de um produto <strong>personalizado<\/strong>.<\/p>\n<p>\u00c9 s\u00f3 digitar na caixa que aparece o meu nome. Olha que legal, a garrafa j\u00e1 fica <strong>personalizada<\/strong> com meu nome e eu consigo compr\u00e1-la.<\/p>\n<h4>Voltando ao banner&#8230;<\/h4>\n<p>Todo site deve contar com um <em>Call-To-Action<\/em> para levar o usu\u00e1rio a realizar uma a\u00e7\u00e3o. \u00c9 isso que leva \u00e0 <strong>convers\u00e3o<\/strong>.<\/p>\n<p>Se tivesse aqui um bot\u00e3ozinho <em>pequeno e simples<\/em>, ningu\u00e9m iria notar \u2013 um bot\u00e3o\u00a0<b>GRANDE E CHAMATIVO\u00a0<\/b>converte mais, isso j\u00e1 \u00e9 comprovado.<\/p>\n<p>Indo para o site em si: j\u00e1 nos deparamos com um v\u00eddeo tamanho fam\u00edlia.<\/p>\n<p>Uma observa\u00e7\u00e3o bem legal: meu monitor \u00e9 bem <strong>grande<\/strong> (23\u201d) e podemos notar que o site pega a tela <strong>toda<\/strong>. Ele foi desenvolvido pensando em <strong>v\u00e1rios tamanhos<\/strong> de tela.<\/p>\n<p>Logo abaixo vemos o v\u00eddeo da campanha: observe que a identidade visual da Coca-Cola \u00e9 mantida, tem bastante <strong><span style=\"color: #ff0000;\">vermelho<\/span><\/strong>.<\/p>\n<p>Descendo mais, temos a Coca-Cola FM, referente \u00e0 <strong>campanha<\/strong>.<\/p>\n<p>Aqui s\u00e3o tocadas as <strong>m\u00fasicas<\/strong>, que \u00e9 onde voc\u00ea vai <strong>votando<\/strong> se gostou ou n\u00e3o delas.<\/p>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel abrir a FM em uma janela \u00e0 parte, compartilhar no Twitter, no <a href=\"https:\/\/www.kryzalis.com.br\/blog\/como-divulgar-no-facebook\">Facebook<\/a>.<\/p>\n<p><strong>Por que tem esses \u201c<em>compartilhar<\/em>\u201d aqui?<\/strong><\/p>\n<p>Porque atrav\u00e9s deles, a Coca-Cola tem a ideia de <strong>viralizar<\/strong> essa campanha. Ela facilita o <strong>compartilhamento<\/strong> para que mais pessoas fiquem sabendo e que mais pessoas participem da campanha. Automaticamente, a marca Coca-Cola \u00e9 mais <strong>divulgada<\/strong>.<\/p>\n<p>Embaixo podemos notar uma <strong>integra\u00e7\u00e3o<\/strong> com as redes sociais: o que \u00e9 postado l\u00e1 acaba aparecendo aqui.<\/p>\n<p>Isso aqui n\u00e3o fez muito sentido para mim, porque s\u00e3o 5 v\u00eddeos iguais, inclusive j\u00e1 dei \u201c<em>play<\/em>\u201d neles e um nem funciona. N\u00e3o sei qual foi a ideia quando o site foi desenvolvido, mas n\u00e3o est\u00e1 funcionando legal. \u00c9 algo que n\u00e3o faz diferen\u00e7a para o usu\u00e1rio.<\/p>\n<p>Por isso esse espa\u00e7o poderia ter sido aproveitado melhor.<\/p>\n<p>Mas enfim, vai saber qual foi a ideia, n\u00e9?<\/p>\n<p>Isso \u00e9 um ponto <strong>importante<\/strong>.<\/p>\n<p>Suponhamos que a ideia fosse essa mesmo, mas se o internauta acessou, ficou <strong>confuso<\/strong> e <strong>n\u00e3o conseguiu entender<\/strong>, \u00e9 sinal de que n\u00e3o foi bem planejado, j\u00e1 que n\u00e3o existe ningu\u00e9m para <strong>explicar<\/strong> o que est\u00e1 acontecendo &#8211; tudo deve ser <strong>intuitivo<\/strong>.<\/p>\n<p>Mais abaixo, temos o \u201c<em>ver mais<\/em>\u201d e as marcas que est\u00e3o debaixo do guarda-chuva da Coca-Cola.<\/p>\n<p>Bom, pessoal, a an\u00e1lise do site em geral \u00e9 essa.<\/p>\n<h3>PageSpeed Insights<\/h3>\n<p>Vamos agora ver o <strong>resultado<\/strong> desse site no \u201c<em>PageSpeed Insights<\/em>\u201d do Google, que nada mais \u00e9 do que um <strong>teste<\/strong> realizado pelo Google para saber a <strong>qualidade<\/strong> do site, em velocidade e <a href=\"https:\/\/www.kryzalis.com.br\/blog\/estrategias-de-marketing-digital-5-mitos\">otimiza\u00e7\u00e3o<\/a>.<\/p>\n<p>O site <em>mobile<\/em> (a parte responsiva do site da Coca-Cola) possui nota 57\/100, considerada <em><strong>baixa<\/strong><\/em>.<\/p>\n<p>A maioria dos erros encontrados s\u00e3o de otimiza\u00e7\u00e3o de c\u00f3digos de <strong>imagens<\/strong>, ou seja, o site n\u00e3o est\u00e1 bem <strong>otimizado<\/strong>.<\/p>\n<p>Na vers\u00e3o <em>desktop<\/em>, nos deparamos com um cen\u00e1rio n\u00e3o muito diferente: nota 66\/100 e com o mesmo problema \u2013 as imagens precisam ser compactadas, o c\u00f3digo HTML, JS.<\/p>\n<p><strong>Para que?<\/strong><\/p>\n<p>Para que o site carregue mais <strong>r\u00e1pido<\/strong>, fornecendo informa\u00e7\u00f5es mais rapidamente para o usu\u00e1rio.<\/p>\n<p>E foi por isso que a ferramenta avaliou como 66\/100.<\/p>\n<p>O ideal seria <strong>acima de 80<\/strong> \u2013 tanto para o <em>mobile<\/em> quanto para o <em>desktop<\/em>.<\/p>\n<h3>Posicionamento no Google<\/h3>\n<p>Vamos falar um pouquinho agora sobre <strong>posicionamento<\/strong>.<\/p>\n<p>\u00c9 o seguinte: eu digitei \u201c<em>refrigerante cola<\/em>\u201d no Google.<\/p>\n<p>Voc\u00eas observar\u00e3o que o site<strong> n\u00e3o aparece<\/strong> entre os 10 primeiros resultados.<\/p>\n<p><strong>Por que estou mostrando isso?<\/strong><\/p>\n<p>Olha, uma gigante como a Coca-Cola n\u00e3o conseguiu \u201c<em>ranquear<\/em>\u201d o dom\u00ednio principal dela na primeira p\u00e1gina atrav\u00e9s da pesquisa de uma palavra-chave que tem mais a ver com seu neg\u00f3cio.<\/p>\n<p>Em contrapartida, encontramos um <strong>texto<\/strong> do <em>Wikipedia<\/em> falando sobre a Coca-Cola, que j\u00e1 ficou gravado no Google.<\/p>\n<p><strong>Por qu\u00ea?<\/strong><\/p>\n<p>Ele j\u00e1 entendeu que a maioria das pessoas que digita \u201c<em>refrigerante cola\u201d<\/em> est\u00e1 procurando informa\u00e7\u00f5es sobre a Coca-Cola.<\/p>\n<p>Por mais que n\u00e3o seja verdade, ele o considera, atrav\u00e9s de testes que devem ter sido realizados, j\u00e1 facilitando e trazendo aqui informa\u00e7\u00e3o da Coca-Cola pelo <em>Wikipedia<\/em>.<\/p>\n<p>Por isso \u00e9 importante observarem que mesmo que a empresa seja <strong>grande<\/strong>, n\u00e3o \u00e9 garantido que ela v\u00e1 ficar na 1\u00aa <strong>posi\u00e7\u00e3o<\/strong> do Google &#8211; e nem mesmo na <a href=\"https:\/\/www.kryzalis.com.br\/blog\/primeira-pagina-do-google\"><strong>1\u00aa<\/strong> <strong>p\u00e1gina<\/strong>.<\/a><\/p>\n<p>Existem diversos <strong>resultados<\/strong>, inclusive, que nem sei se s\u00e3o bons ou ruins sobre ela \u2013 s\u00e3o v\u00e1rias as coisas relacionadas \u00e0 Cola, mas nada sobre a Coca-Cola.<\/p>\n<p>Independentemente do <strong>tamanho<\/strong> da empresa, se n\u00e3o for <strong>investido<\/strong> em <a href=\"https:\/\/www.kryzalis.com.br\/blog\/marketing-de-conteudo\">produ\u00e7\u00e3o de conte\u00fado<\/a>, ranqueamento, otimiza\u00e7\u00e3o, voc\u00ea n\u00e3o ir\u00e1 aparecer na 1\u00aa p\u00e1gina.<\/p>\n<h3>Responsivo<\/h3>\n<p>Bom, pessoal, agora para finalizar vamos ver o site no modelo <a href=\"https:\/\/www.kryzalis.com.br\/blog\/site-responsivo\"><strong>responsivo<\/strong><\/a>, que \u00e9 o site da Coca-Cola para celular.<\/p>\n<p>O que est\u00e1 aqui \u00e9 uma simula\u00e7\u00e3o, t\u00e1?<\/p>\n<p>Vou recarregar a p\u00e1gina.<\/p>\n<p><strong>Por qu\u00ea?<\/strong><\/p>\n<p>Porque eu s\u00f3 <strong>diminu\u00ed<\/strong> a tela do navegador.<\/p>\n<p>Quando voc\u00ea pegar um site e reduzir o navegador para o tamanho mais ou menos da tela de um celular &#8211; se ele se adaptar, quer dizer que o mesmo \u00e9 <a href=\"https:\/\/www.kryzalis.com.br\/blog\/site-responsivo-entenda-importancia\"><strong>responsivo<\/strong><\/a>.<\/p>\n<p>Notamos aqui que o banner diminuiu, o logotipo veio para o meio, o menu ficou menor, os v\u00eddeos diminu\u00edram e as informa\u00e7\u00f5es foram <strong>reorganizadas<\/strong>.<\/p>\n<p>O site da Coca-Cola \u00e9 <a href=\"https:\/\/www.kryzalis.com.br\/blog\/afinal-o-que-e-esse-tal-site-responsivo-do-qual-todos-falam\">responsivo <\/a>e foi <strong>muito bem feito<\/strong>.<\/p>\n<p>As informa\u00e7\u00f5es est\u00e3o <strong>corretas<\/strong>, n\u00e3o h\u00e1 nada quebrado, o v\u00eddeo tamb\u00e9m diminuiu.<\/p>\n<p>Existem muitos sites que, no momento que vai para o responsivo, n\u00e3o diminuem as dimens\u00f5es do v\u00eddeo.<\/p>\n<p>A FM Coca-Cola ficou <strong>bonita<\/strong> aqui, as informa\u00e7\u00f5es foram <strong>reorganizadas<\/strong>.<\/p>\n<p>A parte das <a href=\"https:\/\/www.kryzalis.com.br\/blog\/fidelizar-clientes-nas-redes-sociais\">redes sociais<\/a>, que achei in\u00fatil, tamb\u00e9m est\u00e1 aqui<strong> bem organizada.<\/strong><\/p>\n<p>E as <strong>marcas<\/strong> tamb\u00e9m est\u00e3o.<\/p>\n<p>Na tela do celular essas <a href=\"https:\/\/www.kryzalis.com.br\/blog\/primeiro-5-empresas-que-cresceram-e-evoluiram-tambem-suas-logomarcas-marcas\">marcas <\/a>v\u00e3o para a esquerda e para a direita, apesar de eu n\u00e3o conseguir simular aqui.<\/p>\n<p>Poderia ter sido feito de maneira <strong>diferente<\/strong>, mas est\u00e1 funcionando.<\/p>\n<p>Quando voc\u00ea clica no menu, abre o menu grand\u00e3o.<\/p>\n<p>A barra de rolagem n\u00e3o aparece na tela do celular, t\u00e1?<\/p>\n<p>J\u00e1 que l\u00e1 fica a parte do \u201c<em>touch<\/em>\u201d \u2013 voc\u00ea rola para cima e para baixo.<\/p>\n<p>\u00c9 isso, pessoal.<\/p>\n<p>Espero que tenham gostado.<\/p>\n<p>Deu um \u201c<em>bug<\/em>\u201d aqui (o logotipo ficou para o canto), mas deve ser porque estou no <strong>navegador<\/strong>.<\/p>\n<p>Se voc\u00ea tem um site e deseja que eu fa\u00e7a a <strong>an\u00e1lise<\/strong> dele da mesma forma que fiz da Coca-Cola, deixe aqui nos coment\u00e1rios.<\/p>\n<p>Inscreva-se em nosso canal e nos vemos no pr\u00f3ximo v\u00eddeo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quer ver o que a Coca-Cola fez no site dela que pode ajudar o seu a ser t\u00e3o bom quanto? Venha comigo e descubra como fazer o mesmo!<\/p>\n","protected":false},"author":2,"featured_media":26498,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[67],"tags":[],"class_list":["post-26496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-videos"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/posts\/26496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/comments?post=26496"}],"version-history":[{"count":2,"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/posts\/26496\/revisions"}],"predecessor-version":[{"id":26500,"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/posts\/26496\/revisions\/26500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/media\/26498"}],"wp:attachment":[{"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/media?parent=26496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/categories?post=26496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kryzalis.com.br\/blog\/wp-json\/wp\/v2\/tags?post=26496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}