{"id":3416,"date":"2019-02-07T09:18:05","date_gmt":"2019-02-07T12:18:05","guid":{"rendered":"https:\/\/seriea.digital\/blog1\/?p=3416"},"modified":"2019-02-08T13:39:10","modified_gmt":"2019-02-08T16:39:10","slug":"mobile-first-conceito-e-aplicacao","status":"publish","type":"post","link":"https:\/\/seriea.digital\/blog\/mobile-first-conceito-e-aplicacao\/","title":{"rendered":"Mobile First – Conceito e Aplica\u00e7\u00e3o"},"content":{"rendered":"

 <\/p>\n

\"Mobile
Mobile first<\/figcaption><\/figure>\n

Mobile first, no Mobile World Congress<\/a>, em 2010, Eric Schmidt, o CEO do Google, afirmou que os designers devem seguir a regra “mobile first” no design de sites. O que significa “mobile first”? Por que isso \u00e9 importante? Quais as vantagens? <\/span><\/p>\n

<\/p>\n

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

Uma abordagem \u201cmobile first\u201d envolve a preocupa\u00e7\u00e3o em fazer com que as\u00a0pessoas se sintam confort\u00e1veis<\/a>\u00a0 ao navegar pela internet, tanto em um dispositivo m\u00f3vel (vers\u00e3o mobile) quanto em uma Notebook ou PC (vers\u00e3o desktop), que \u00e9 ao contr\u00e1rio da abordagem tradicional de come\u00e7ar com um site para desktop e somente ent\u00e3o adapt\u00e1-lo a telas menores (smartphones e tablets). De modo geral, uma abordagem de mobile first significa criar seu website com os usu\u00e1rios de celular em mente (prioridade), com o objetivo principal de melhorar a experi\u00eancia desses usu\u00e1rios m\u00f3veis em seu site.<\/span><\/p>\n

Para entender melhor o conceito de mobile first, voc\u00ea deve conhecer as duas frases abaixo:<\/span><\/p>\n

1. Web design responsivo<\/span><\/h3>\n

Web design responsivo \u00e9 um m\u00e9todo de desenvolvimento que permite que o site ou e-commerce<\/strong> se ajuste automaticamente \u00e0s telas de diferentes dispositivos, exibindo o conte\u00fado de forma que as pessoas se sintam confort\u00e1veis<\/a>\u00a0ao navegar.\u00a0<\/span><\/p>\n

 <\/p>\n

\"Mobile
Mobile first<\/figcaption><\/figure>\n

[su_quote]Um levantamento do IBGE apurou que 80,4% das casas com acesso \u00e0 internet usam o smartphone para navegar.<\/strong> [\/su_quote]<\/h3>\n

2. \u201cAvan\u00e7o Progressivo\u201d <\/span><\/h3>\n

Este conceito foi apresentados antes do mobile first<\/strong> e \u00a0web design responsivo<\/strong>. Para tornar a exibi\u00e7\u00e3o do site, e-commerce ou de aplicativo compat\u00edvel em diferentes dispositivos.<\/span><\/p>\n

Avan\u00e7o Progressivo<\/b> significa que, quando projetamos um site ou e-commerce, primeiro criamos uma vers\u00e3o para o navegador relativamente mais simples (como em um telefone celular). Esta vers\u00e3o inclui as fun\u00e7\u00f5es e recursos mais b\u00e1sicos. Depois disso, desenvolvemos \u00e0 vers\u00e3o avan\u00e7ada de um tablet ou PC (vers\u00e3o desktop), que \u00e9 criada adicionando intera\u00e7\u00f5es, efeitos mais complexos entre outros recursos visuais, para uma melhor experi\u00eancia do usu\u00e1rio.<\/span><\/p>\n

Voc\u00ea pode perguntar: por que voc\u00ea gasta tanto tempo explicando os dois conceitos? A resposta \u00e9 que \u201cmobile first<\/strong>\u201d \u00e9 exatamente uma regra de \u201cavan\u00e7o progressivo<\/strong>\u201d.<\/span><\/p>\n

“Mobile first”, como o nome sugere, significa que come\u00e7amos o design web a partir da plataforma m\u00f3vel (smartphones), que tem mais restri\u00e7\u00f5es e limita\u00e7\u00f5es de tela, processamento e conex\u00e3o, e depois expandimos seus recursos para criar uma vers\u00e3o para tablet e desktop.<\/span><\/p>\n

\"Mobile
Mobile first<\/figcaption><\/figure>\n

Por que o princ\u00edpio \u201cMobile First\u201d \u00e9 t\u00e3o importante no design do seu site ou e-commerce?<\/span><\/h2>\n

Exceto pela vit\u00f3ria do avan\u00e7o progressivo, como mencionado acima, temos raz\u00f5es mais tang\u00edveis para acreditar que o princ\u00edpio do mobile first \u00e9 importante no projeto do site ou e-commerce. Ou seja, a explos\u00e3o dos smartphones, maior a cada dia.<\/span><\/p>\n