{"id":11597,"date":"2023-02-10T08:00:00","date_gmt":"2023-02-10T11:00:00","guid":{"rendered":"https:\/\/bagy.com.br\/blog\/?p=11597"},"modified":"2023-02-14T10:54:03","modified_gmt":"2023-02-14T13:54:03","slug":"mobile-first","status":"publish","type":"post","link":"https:\/\/bagy.com.br\/blog\/mobile-first\/","title":{"rendered":"Mobile First: como aplicar esse conceito na sua estrat\u00e9gia?"},"content":{"rendered":"\n

Mobile First \u00e9 um conceito que coloca os dispositivos m\u00f3veis em primeiro lugar. No desenvolvimento, no design, na cria\u00e7\u00e3o de conte\u00fado: priorizar o mobile \u00e9 uma forma de melhorar a experi\u00eancia do usu\u00e1rio de smartphones e conquistar novos clientes.<\/strong><\/p>\n\n\n\n\n\n\n\n

J\u00e1 percebeu que o marketing est\u00e1 sempre acompanhando o surgimento de novas tecnologias? Quando a internet m\u00f3vel e os smartphones se tornaram mais populares, o mobile marketing<\/a> surgiu para criar estrat\u00e9gias focadas nos dispositivos m\u00f3veis. Nos \u00faltimos anos, foi a vez tamb\u00e9m do Mobile First aparecer nas estrat\u00e9gias de marketing<\/strong>.<\/p>\n\n\n\n

Se as pessoas utilizam mais o celular do que o desktop para acessar a internet, por que as empresas ainda criam sites e conte\u00fados pensando no acesso pelo computador? Foi com essa pergunta que o Mobile First come\u00e7ou a entrar no planejamento do marketing digital<\/a>, no desenvolvimento de sites, no design e na produ\u00e7\u00e3o de conte\u00fados<\/strong>.<\/p>\n\n\n\n

O Mobile First coloca, em primeiro lugar, a experi\u00eancia do usu\u00e1rio de dispositivos m\u00f3veis. Agora, neste artigo, vamos analisar melhor esse conceito e como voc\u00ea pode come\u00e7ar a aplicar no seu neg\u00f3cio. Confira a seguir!<\/p>\n\n\n\n

O que \u00e9 Mobile First?<\/h2>\n\n\n\n

Mobile First \u00e9 um conceito do universo digital que coloca como prioridade o desenvolvimento de sites, p\u00e1ginas e conte\u00fados para dispositivos m\u00f3veis<\/strong>. A express\u00e3o pode ser traduzida como \u201cm\u00f3vel em primeiro lugar\u201d \u2014 o desktop, depois.<\/p>\n\n\n\n

Esse conceito ganhou for\u00e7a diante da populariza\u00e7\u00e3o do uso de smartphones, que passaram a ser mais usados que desktops para acessar a internet.<\/p>\n\n\n\n

Antes, profissionais de marketing, desenvolvimento e design estavam habituados a criar para telas de computadores e notebooks \u2014 p\u00e1ginas e conte\u00fados para celular eram apenas uma adapta\u00e7\u00e3o do que havia sido criado para o desktop. Depois, com a ideia do Mobile First, passaram a pensar primeiro nas telas de smartphones<\/strong>.<\/p>\n\n\n\n

O usu\u00e1rio mobile interage com um dispositivo menor, geralmente na vertical, usando o dedo e pode estar em movimento, na rua, numa loja, com outras pessoas etc. Essas caracter\u00edsticas, portanto, determinam algumas mudan\u00e7as para a hora de criar solu\u00e7\u00f5es digitais.<\/p>\n\n\n\n

O conceito de Mobile First surgiu com o designer Luke Wroblewski, que publicou um artigo<\/a> em 2009 defendendo essa ideia. Para o autor, criar primeiramente para celulares era uma urg\u00eancia: o mobile estava explodindo, ajudava os times de desenvolvimento a focar nas principais tarefas dos aplicativos da web e ainda ampliava as possibilidades de recursos.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Como funciona na pr\u00e1tica?<\/h2>\n\n\n\n

O Mobile First deve ser aplicado no momento do planejamento de qualquer cria\u00e7\u00e3o digital<\/strong>. Geralmente o conceito se aplica ao desenvolvimento de sites, p\u00e1ginas, lojas virtuais<\/a> e aplicativos, mas \u00e9 tamb\u00e9m importante para o layout de p\u00e1ginas, e-mail marketing, imagens para redes sociais e conte\u00fados para web.<\/p>\n\n\n\n

Na pr\u00e1tica, profissionais que trabalham com esse tipo de solu\u00e7\u00e3o digital devem come\u00e7ar seus projetos criando para dispositivos m\u00f3veis.<\/p>\n\n\n\n

A maioria dos profissionais cria usando o desktop, que oferece mais recursos de cria\u00e7\u00e3o, mas tendo como foco a experi\u00eancia no celular. Muitas plataformas de desenvolvimento j\u00e1 adotam o conceito de Mobile First para facilitar o trabalho.<\/p>\n\n\n\n

Mas h\u00e1 tamb\u00e9m quem crie diretamente no smartphone, para j\u00e1 visualizar a experi\u00eancia mobile. A Bagy<\/a> \u00e9 um exemplo de plataforma de e-commerce que permite a cria\u00e7\u00e3o de uma loja virtual diretamente pelo celular<\/strong>, com a melhor experi\u00eancia para o usu\u00e1rio mobile.<\/p>\n\n\n\n

Qual a diferen\u00e7a entre Mobile First e design responsivo?<\/h3>\n\n\n\n

Algumas pessoas entendem que Mobile First significa, na pr\u00e1tica, a aplica\u00e7\u00e3o do design responsivo<\/a>. Mas n\u00e3o \u00e9 a mesma coisa.<\/p>\n\n\n\n

Usar o design responsivo significa criar um \u00fanico site que se adapta a diferentes telas. Mas esse site n\u00e3o \u00e9 necessariamente pensado primeiro para mobile. Designers e desenvolvedores podem criar um site para desktop que se adapta a outras telas.<\/p>\n\n\n\n

Mas eles tamb\u00e9m podem adotar o conceito de Mobile First na cria\u00e7\u00e3o de um site responsivo. O importante \u00e9 que a ideia seja concebida primeiramente para smartphones, depois adaptada a outras telas.<\/p>\n\n\n\n

Qual a import\u00e2ncia do Mobile First?<\/h2>\n\n\n\n

O Mobile First \u00e9 uma mudan\u00e7a importante de mentalidade para empresas, pequenos empreendedores, profissionais de marketing, desenvolvedores e designers. Representa uma adapta\u00e7\u00e3o ao que j\u00e1 vivemos h\u00e1 alguns anos: as pessoas usam mais o celular do que o desktop para acessar a internet<\/strong> e passam grande parte do seu dia interagindo com esse dispositivo.<\/p>\n\n\n\n

A not\u00edcia n\u00e3o \u00e9 de hoje: dados do IBGE de 2014 j\u00e1 mostravam que o smartphone havia ultrapassado o desktop como aparelho n\u00ba1 para acessar a internet no Brasil, segundo o portal G1<\/a>.<\/p>\n\n\n\n

Dados mais recentes, do relat\u00f3rio Digital 2022: Brazil, do Data Reportal, mostram ainda que 99% dos usu\u00e1rios de internet no Brasil t\u00eam um smartphone, enquanto apenas 67% t\u00eam um notebook ou desktop.<\/p>\n\n\n\n

\"Dados
Dados sobre uso de dispositivos para acesso \u00e0 internet no Brasil<\/em><\/figcaption><\/figure>\n\n\n\n

Fica claro, portanto, que os desktops est\u00e3o ficando para tr\u00e1s. N\u00e3o significa que esse tipo de dispositivo morreu: notebooks e computadores de mesa ainda s\u00e3o muito usados, principalmente para trabalhos em escrit\u00f3rios e home office. Por isso, tamb\u00e9m precisam ser previstos na sua estrat\u00e9gias<\/strong>.<\/p>\n\n\n\n

Mas o foco agora s\u00e3o os smartphones. Quando voc\u00ea foca nos dispositivos mais usados, pode oferecer uma experi\u00eancia melhor aos usu\u00e1rios, com mais velocidade e efici\u00eancia<\/strong>, e conquistar um p\u00fablico que, se n\u00e3o fosse bem atendido pelo seu neg\u00f3cio na internet, iria preferir a concorr\u00eancia.<\/p>\n\n\n\n

Quais os benef\u00edcios do Mobile First?<\/h2>\n\n\n\n

Para entender melhor a import\u00e2ncia do Mobile First nas suas estrat\u00e9gias, vamos ver agora quais s\u00e3o os benef\u00edcios de adotar esse conceito.<\/p>\n\n\n\n

Melhor experi\u00eancia do usu\u00e1rio<\/h3>\n\n\n\n

O principal benef\u00edcio de adotar o Mobile First \u00e9 para o seu usu\u00e1rio. Quem acessa um site, recebe um e-mail ou v\u00ea um post no Facebook que \u00e9 pensado para o mobile<\/strong> tem uma experi\u00eancia muito melhor.<\/p>\n\n\n\n

Se for apenas uma adapta\u00e7\u00e3o do desktop, o usu\u00e1rio pode se deparar com letras pequenas, bot\u00f5es dif\u00edceis de clicar, p\u00e1ginas que demoram para carregar, entre outros problemas que dificultam a intera\u00e7\u00e3o.<\/p>\n\n\n\n

Melhor performance<\/h3>\n\n\n\n

Um site pensado para mobile em primeiro lugar tende a ter uma melhor performance. Muitos usu\u00e1rios de celular acessam uma internet m\u00f3vel de baixa qualidade<\/strong>, por isso os conte\u00fados precisam ser leves, sem excessos que atrasem o carregamento.<\/p>\n\n\n\n

Por outro lado, se o site \u00e9 desenvolvido primeiramente para desktop, os desenvolvedores n\u00e3o est\u00e3o t\u00e3o preocupados com isso, o que resulta em um site mais pesado e lento.<\/p>\n\n\n\n

Otimiza\u00e7\u00e3o do ranqueamento<\/h3>\n\n\n\n

O Google sabe como \u00e9 importante ter um site mobile-friendly. O buscador tamb\u00e9m quer oferecer a melhor experi\u00eancia aos usu\u00e1rios de celular, porque sabe que cada vez mais pessoas usam os dispositivos m\u00f3veis.<\/p>\n\n\n\n

Por isso, o Google passou a adotar o Mobile First Indexing. Isso significa que o buscador usa a vers\u00e3o para dispositivos m\u00f3veis de um site como priorit\u00e1ria<\/strong> para fazer a sua indexa\u00e7\u00e3o e classifica\u00e7\u00e3o. Portanto, priorizar os dispositivos m\u00f3veis tamb\u00e9m \u00e9 uma estrat\u00e9gia de SEO<\/a>, pois \u00e9 uma forma de conquistar posi\u00e7\u00f5es mais altas no ranking de resultados da busca do Google.<\/p>\n\n\n\n

Aproveitamento de recursos mobile<\/h3>\n\n\n\n

Pensar primeiramente nos dispositivos m\u00f3veis permite que voc\u00ea explore recursos valiosos<\/strong>. A geolocaliza\u00e7\u00e3o por meio do GPS e o envio de notifica\u00e7\u00f5es para o celular, por exemplo, podem ser usados para aprimorar suas estrat\u00e9gias. Se voc\u00ea pensasse antes no desktop, talvez nem considerasse esses recursos.<\/p>\n\n\n\n

Al\u00e9m disso, navegadores da web j\u00e1 contam com um desenvolvimento superior no mobile do que no desktop. A performance do site pode ser muito melhor se voc\u00ea souber aproveit\u00e1-los, em vez de apenas adaptar os recursos do desktop.<\/p>\n\n\n\n

Mais credibilidade<\/h3>\n\n\n\n

Um site eficiente para usu\u00e1rios mobile tamb\u00e9m transmite mais credibilidade. O seu neg\u00f3cio se torna mais profissional e confi\u00e1vel<\/strong> quando oferece uma boa experi\u00eancia para que os usu\u00e1rios consigam fazer o que desejam no seu site.<\/p>\n\n\n\n

Por outro lado, se as pessoas n\u00e3o conseguem clicar em um bot\u00e3o ou finalizar alguma a\u00e7\u00e3o, podem se frustrar e achar que o seu neg\u00f3cio n\u00e3o \u00e9 t\u00e3o bom…<\/p>\n\n\n\n

Novos clientes<\/h3>\n\n\n\n

Por fim, todos esses benef\u00edcios para os usu\u00e1rios e para o seu neg\u00f3cio v\u00e3o levar voc\u00ea a outra grande vantagem: conquistar novos clientes. Se voc\u00ea n\u00e3o oferece uma boa experi\u00eancia mobile, os usu\u00e1rios desistem do seu neg\u00f3cio e buscam uma solu\u00e7\u00e3o em outro lugar \u2014 provavelmente no seus concorrentes…<\/p>\n\n\n\n

Mas, se eles forem bem atendidos no canais digitais do seu neg\u00f3cio, v\u00e3o confiar em voc\u00ea e conseguir finalizar o que desejam<\/strong>, at\u00e9 a compra dos seus produtos. Melhor ainda \u00e9 que essa boa experi\u00eancia vai se espalhar no boca a boca e trazer ainda mais vendas<\/a> para a sua empresa. <\/p>\n\n\n\n

\"Profissionalize<\/a><\/figure>\n\n\n\n

Como aplicar o Mobile First?<\/h2>\n\n\n\n

Agora, vamos ver algumas dicas de como colocar o Mobile First em pr\u00e1tica, com dicas importantes para o sucesso desse conceito nas duas estrat\u00e9gias.<\/p>\n\n\n\n

Compreenda o momento da empresa<\/h3>\n\n\n\n

Primeiramente, \u00e9 importante entender o momento e a estrutura atual da empresa. Analise a equipe e a tecnologia dispon\u00edvel para saber: qual a maturidade da empresa para adotar o Mobile First? Ser\u00e1 que temos colaboradores para isso? E ferramentas?<\/p>\n\n\n\n

Isso \u00e9 necess\u00e1rio para entender a viabilidade dessa mudan\u00e7a no neg\u00f3cio<\/strong>. Depois voc\u00ea pode ir para os pr\u00f3ximos passos.<\/p>\n\n\n\n

Entenda o contexto do usu\u00e1rio<\/h3>\n\n\n\n

Para aplicar o conceito de Mobile First, n\u00e3o basta saber tecnicamente o que deve ser feito. Voc\u00ea precisa entender, antes, como o usu\u00e1rio se relaciona com os dispositivos m\u00f3veis<\/strong>, que \u00e9 uma rela\u00e7\u00e3o diferente de notebooks e desktops.<\/p>\n\n\n\n

Celulares t\u00eam uma tela pequena e horizontal, permitem intera\u00e7\u00f5es com o dedo, com a voz e com a c\u00e2mera. O usu\u00e1rio pode estar em movimento, dentro ou fora de casa, em meio a outras pessoas, com a aten\u00e7\u00e3o dispersa. Ent\u00e3o, essas caracter\u00edsticas influenciam na solu\u00e7\u00e3o que voc\u00ea vai criar para esses usu\u00e1rios.<\/p>\n\n\n\n

Tenha um site responsivo<\/h3>\n\n\n\n

Ter um site responsivo \u00e9 a indica\u00e7\u00e3o do Google e da maioria dos profissionais de marketing digital. Com essa tecnologia, o site \u00e9 apenas um, mas o seu layout se adapta a qualquer tamanho de tela<\/strong>. Assim, voc\u00ea oferece uma boa experi\u00eancia em qualquer dispositivo.<\/p>\n\n\n\n

Existem outras op\u00e7\u00f5es para ter um site mobile-friendly, como criar uma vers\u00e3o para cada tipo de dispositivo. Por\u00e9m, o design responsivo \u00e9 mais amplamente usado e tende a ter melhores resultados de SEO. De qualquer forma, o que importa \u00e9 considerar primeiramente a experi\u00eancia do usu\u00e1rio mobile.<\/p>\n\n\n\n

Acelere o carregamento das p\u00e1ginas<\/h3>\n\n\n\n

Uma boa experi\u00eancia mobile depende de velocidade<\/strong>. Se, no desktop, as pessoas j\u00e1 n\u00e3o querem esperar o carregamento de uma p\u00e1gina, no celular a paci\u00eancia \u00e9 ainda mais limitada. Al\u00e9m disso, a baixa qualidade da internet m\u00f3vel, ainda comum, exige que os sites sejam mais leves.<\/p>\n\n\n\n

Ent\u00e3o, se voc\u00ea adota o Mobile First, deve come\u00e7ar um projeto j\u00e1 pensando em tamanhos de imagens adequados, em c\u00f3digos bem otimizados e plataformas de hospedagem que acelerem o carregamento e as respostas aos usu\u00e1rios.<\/p>\n\n\n\n

Simplifique<\/h3>\n\n\n\n

Pense que o usu\u00e1rio est\u00e1 interagindo com uma tela pequena, muitas vezes sem muito tempo para ler e sem muita aten\u00e7\u00e3o para se fixar num conte\u00fado. Ent\u00e3o, a melhor op\u00e7\u00e3o \u00e9 simplificar<\/strong>!<\/p>\n\n\n\n

Nada de exagerar no layout, nas cores, nos efeitos. Procure focar nas informa\u00e7\u00f5es que o usu\u00e1rio quer encontrar, como o contato para enviar logo uma mensagem. Nos conte\u00fados, voc\u00ea pode investir na escaneabilidade, ou seja, em recursos que facilitem a leitura, como negritos, intert\u00edtulos e trechos em destaque.<\/p>\n\n\n\n

Verticalize<\/h3>\n\n\n\n

Um das principais mudan\u00e7as do desktop para o mobile \u00e9 a orienta\u00e7\u00e3o da tela: no celular, nos acostumamos com a tela vertical<\/strong>. Sim, a maioria dos celulares rotaciona a tela quando o celular \u00e9 invertido, mas n\u00e3o \u00e9 o mais comum.<\/p>\n\n\n\n

Por isso, pensar em sites e conte\u00fados Mobile First \u00e9 pensar na vertical. Acostume-se com essa orienta\u00e7\u00e3o para planejar os elementos de uma p\u00e1gina, criar um v\u00eddeo ou tirar fotos.<\/p>\n\n\n\n

Aumente o tamanho<\/h3>\n\n\n\n

Um dos problemas mais comuns quando um site n\u00e3o se adapta ao tamanho da tela \u00e9 que os textos, imagens e bot\u00f5es ficam muito pequenos. Assim, fica dif\u00edcil de ler, de entender o conte\u00fado, de clicar nos links, o que acaba levando at\u00e9 a erros.<\/p>\n\n\n\n

Ent\u00e3o, ao aplicar o Mobile First, pense grande. Os elementos precisam ser vis\u00edveis, leg\u00edveis e clic\u00e1veis, sem exigir esfor\u00e7o do usu\u00e1rio<\/strong>. Sem esse tipo de usabilidade, a pessoa pode desistir de acessar seus conte\u00fados…<\/p>\n\n\n\n

Como mensurar os resultados?<\/h2>\n\n\n\n

Para saber se voc\u00ea est\u00e1 aplicando corretamente o Mobile First, o que importa \u00e9 entender se o seu site \u00e9 compat\u00edvel com smartphones e oferece uma boa experi\u00eancia ao usu\u00e1rio mobile.<\/p>\n\n\n\n

Para isso, voc\u00ea pode usar uma s\u00e9rie de ferramentas, inclusive gratuitas, que fazem uma varredura no seu site para entregar um diagn\u00f3stico de compatibilidade com dispositivos m\u00f3veis<\/strong>. Elas avaliam a codifica\u00e7\u00e3o, a velocidade, o tamanho dos elementos da p\u00e1gina, entre outros aspectos que afetam a experi\u00eancia mobile.<\/p>\n\n\n\n

Confira a seguir algumas ferramentas que v\u00e3o te ajudar a fazer isso: <\/p>\n\n\n\n