SlideShare uma empresa Scribd logo
1 de 62
meet2Brains 4:




MOBILE WEB
   AQUI E AGORA
• Formando em Desenho
  Industrial na UFES
• Arquiteto de informação
  na Wine.com.br
• Responsável pela
  plataforma mobile
2003      2004       2008           2008           2009          2012




Telefone    Telefone   Telefone      Telefone        Telefone       Apps
+ jogo da   + SMS      + SMS         + SMS           + SMS, MMS     + web
cobrinha               + 256 cores   + câmera VGA    + twitter
                                     + rádio e mp3   + câmera 2MP
                                                     + rádio
                                                     + mp3
http://googlediscovery.com/2009/07/27/google-latitude-para-iphone/
APLICATIVOS NATIVOS
         x
     WEB MÓVEL
NATIVO                    WEB
Recursos avançados        Sempre atualizado
Plataformas separadas     Multi-plataforma
Destaque nas app stores   Otimizado para sites de
                          busca
Um não é melhor do que o outro.
  Ambos se complementam.
http://www.tricedesigns.com/wp-content/uploads/2011/08/multidevice_teaser.jpg
http://www.gazetadopantanal.com/editoria/agronegocios/page/79/
https://singularityhub.com/2013/03/14/beforeafter-comparison-of-pope-announcement-shows-incredible-
proliferation-of-mobile-in-just-8-years/
(POR FAVOR, NÃO)
 http://pplu-sons.blogspot.com.br/2013_02_01_archive.html
60%
69%
53%
45%   DOS CONSUMIDORES
      usam smartphones para
      pesquisa de produtos e
      navegação dentro das lojas.
CONTEXTO PODE SER TANTO
      QUANTITATIVO E QUALITATIVO
        • Tamanho da tela                                • Objetivos
        • Conexão                                        • Ambiente
        • Recursos do aparelho                           • Atenção
        • Processamento                                  • Predisposição
        • Métodos de entrada




http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012
OPORTUNIDADE
OPORTUNIDADE
RESPONSABILIDADE
FLEXIBILIDADE
UBIQUIDADE
PERFORMANCE
APRIMORAMENTO
CONTEÚDO
 É MATO.
ADAPTAR
CONTEÚDO À FORMA
     (e não o contrário)
INÚTIL
INÚTIL
FLEXIBILIDADE
UBIQUIDADE
PERFORMANCE
APRIMORAMENTO
WEB
“Ninguém compra
vinho pelo celular.”


Janeiro 2012 – Janeiro 2013 – Wine.com.br
Grupos de Foco do Google


    Repetitive now
      Bored now
      Urgent now
PROJETE UMA INTERFACE
SUFICIENTEMENTE USÁVEL
   E AS PESSOAS IRÃO
       UTILIZA-LÁ.
Valor > Frustração


     https://vimeo.com/46141222
http://produto.mercadolivre.com.br/MLB-465736423-cce-vcr-30x-video-cassete-recorder-_JM
DESIGN É
PERFORMANCE.
 (a experiência é consequência)
Navegadores como o Safari Mobile e Chrome
para Android adicionam 300 ms de latência ao
 evento “clique”, esperando que um segundo
  evento ocorra, no caso, um duplo clique.
https://developers.google.com/mobile/articles/fast_buttons
PERFORMANCE É
RESPONSIVO


 3       3
MB      MB
USUÁRIOS ESPERAM
QUE A PÁGINA MOBILE
  CARREGUE MAIS
   RÁPIDO QUE A
  CONVENCIONAL.
QUEREM
 USUÁRIOS ESPERAM
QUE A PÁGINA MOBILE
  CARREGUE MAIS
   RÁPIDO QUE A
  CONVENCIONAL.
WEB STORAGE                  MINIFY
 PERFORMANCE
           CSS3
RETINA DISPLAY DESIGN
                              RESPONSIVO
         OTIMIZAÇÃO
   CARREGAMENTO CONDICIONAL   GOOGLE PAGE SPEED

          MOBILE FIRSTSPRITES
   USABILIDADE           APPCACHE

            HTML5     TOUCH
ADAPTE
Responsivo, fluido, elástico, condicional, não importa:
entregue o que o usuário quer fazer. Não existe solução
mágica para todos os casos.
PRECIOSOS
4 SEGUNDOS.
FLEXIBILIDADE
UBIQUIDADE
PERFORMANCE
APRIMORAMENTO
<input type="number"
pattern="[0-9]*">
Aceleração por hardware:

CSS Transforms
translateX/Y/Z


CSS Transitions

Utilitários
-webkit-overflow-scrolling;
-webkit-tap-highlight-color;
-webkit-user-select;
-webkit-touch-callout;
ENTENDA AS
RESTRIÇÕES
O público do seu site
    quer o suco
 ou a casca dele?
Plante essa
IDEIA
Mobile de hoje é o
Universal de amanhã.
Obrigado!
   @blude

Mais conteúdo relacionado

Semelhante a Mobile: o que já está acontecendo e o que é futuro?

Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDirlei Dionísio
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design ResponsivoTersis Zonato
 
Aplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudAplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudWennder Santos
 
Aplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test CloudAplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test Cloudakamud
 
O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013Jackson F. de A. Mafra
 
Definindo testes e estratégias para dispositivos móveis
Definindo testes e estratégias para dispositivos móveisDefinindo testes e estratégias para dispositivos móveis
Definindo testes e estratégias para dispositivos móveisThiago Cordeiro
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasDan Vitoriano
 
Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011Bruno Fernandes "PorKaria"
 
Android: mercado mobile e visão geral da plataforma
Android: mercado mobile e visão geral da plataformaAndroid: mercado mobile e visão geral da plataforma
Android: mercado mobile e visão geral da plataformaJonas Alves
 
Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014
Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014
Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014Gustavo Bacchin
 
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2Carlos Eugenio Torres
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudiMasters
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - IntroduçãoVítor Teixeira
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3CELULA CURSOS
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Edu Agni
 

Semelhante a Mobile: o que já está acontecendo e o que é futuro? (20)

Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator Titanium
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design Responsivo
 
Aplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudAplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test Cloud
 
Aplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test CloudAplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test Cloud
 
Desenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHPDesenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHP
 
O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013
 
Definindo testes e estratégias para dispositivos móveis
Definindo testes e estratégias para dispositivos móveisDefinindo testes e estratégias para dispositivos móveis
Definindo testes e estratégias para dispositivos móveis
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps Modernas
 
Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011
 
Android: mercado mobile e visão geral da plataforma
Android: mercado mobile e visão geral da plataformaAndroid: mercado mobile e visão geral da plataforma
Android: mercado mobile e visão geral da plataforma
 
Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014
Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014
Mobile First: A Era do Mobile Chegou? - Search Masters Brasil 2014
 
Mobile, Adobe & Cia
Mobile, Adobe & CiaMobile, Adobe & Cia
Mobile, Adobe & Cia
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Desenvolvimento Mobile Web na TechEdBr
Desenvolvimento Mobile Web na TechEdBrDesenvolvimento Mobile Web na TechEdBr
Desenvolvimento Mobile Web na TechEdBr
 
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2
 
Jquery Mobile
Jquery MobileJquery Mobile
Jquery Mobile
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 

Mais de meet2Brains

Por que minha empresa deve construir um planejamento digital?
Por que minha empresa deve construir um planejamento digital?Por que minha empresa deve construir um planejamento digital?
Por que minha empresa deve construir um planejamento digital?meet2Brains
 
Marketing digital, quem precisa?
Marketing digital, quem precisa?Marketing digital, quem precisa?
Marketing digital, quem precisa?meet2Brains
 
Design sem Designer: como, onde e por que o Design acontece
Design sem Designer: como, onde e por que o Design aconteceDesign sem Designer: como, onde e por que o Design acontece
Design sem Designer: como, onde e por que o Design acontecemeet2Brains
 
Cutesquares: De Cuteland para o mundo
Cutesquares: De Cuteland para o mundoCutesquares: De Cuteland para o mundo
Cutesquares: De Cuteland para o mundomeet2Brains
 
Como ser um bom programador
Como ser um bom programadorComo ser um bom programador
Como ser um bom programadormeet2Brains
 
Programando para o Google Chrome
Programando para o Google ChromeProgramando para o Google Chrome
Programando para o Google Chromemeet2Brains
 
E-commerce: indo além da tecnologia
E-commerce: indo além da tecnologiaE-commerce: indo além da tecnologia
E-commerce: indo além da tecnologiameet2Brains
 
Mídias Sociais não é só Facebook!
Mídias Sociais não é só Facebook!Mídias Sociais não é só Facebook!
Mídias Sociais não é só Facebook!meet2Brains
 
PicPay: uma nova forma de comprar
PicPay: uma nova forma de comprarPicPay: uma nova forma de comprar
PicPay: uma nova forma de comprarmeet2Brains
 
Projetar pensando na experiência do usuário
Projetar pensando na experiência do usuárioProjetar pensando na experiência do usuário
Projetar pensando na experiência do usuáriomeet2Brains
 
Desenvolvimento Ágil com Ruby on Rails
Desenvolvimento  Ágil com Ruby on  RailsDesenvolvimento  Ágil com Ruby on  Rails
Desenvolvimento Ágil com Ruby on Railsmeet2Brains
 
Angular JS, você precisa conhecer
Angular JS, você precisa conhecerAngular JS, você precisa conhecer
Angular JS, você precisa conhecermeet2Brains
 
Rock pigeon - do zero até o começo
Rock pigeon - do zero até o começoRock pigeon - do zero até o começo
Rock pigeon - do zero até o começomeet2Brains
 
Métricas Web com Google Analytics: indo muito além das visitas
Métricas Web com Google Analytics: indo muito além das visitasMétricas Web com Google Analytics: indo muito além das visitas
Métricas Web com Google Analytics: indo muito além das visitasmeet2Brains
 
Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...
Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...
Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...meet2Brains
 
Getting Real: conceitos para construir projetos de sucesso
Getting Real: conceitos para construir projetos de sucessoGetting Real: conceitos para construir projetos de sucesso
Getting Real: conceitos para construir projetos de sucessomeet2Brains
 
Desenvolvendo para windows phone, um novo paradigma
Desenvolvendo para windows phone, um novo paradigmaDesenvolvendo para windows phone, um novo paradigma
Desenvolvendo para windows phone, um novo paradigmameet2Brains
 
De serviço a produto com uma plataforma de e-commerce
De serviço a produto com uma plataforma de e-commerceDe serviço a produto com uma plataforma de e-commerce
De serviço a produto com uma plataforma de e-commercemeet2Brains
 
WebApps e Frameworks Javascript
WebApps e Frameworks JavascriptWebApps e Frameworks Javascript
WebApps e Frameworks Javascriptmeet2Brains
 
De aprendizado à utilidade pública
De aprendizado à utilidade públicaDe aprendizado à utilidade pública
De aprendizado à utilidade públicameet2Brains
 

Mais de meet2Brains (20)

Por que minha empresa deve construir um planejamento digital?
Por que minha empresa deve construir um planejamento digital?Por que minha empresa deve construir um planejamento digital?
Por que minha empresa deve construir um planejamento digital?
 
Marketing digital, quem precisa?
Marketing digital, quem precisa?Marketing digital, quem precisa?
Marketing digital, quem precisa?
 
Design sem Designer: como, onde e por que o Design acontece
Design sem Designer: como, onde e por que o Design aconteceDesign sem Designer: como, onde e por que o Design acontece
Design sem Designer: como, onde e por que o Design acontece
 
Cutesquares: De Cuteland para o mundo
Cutesquares: De Cuteland para o mundoCutesquares: De Cuteland para o mundo
Cutesquares: De Cuteland para o mundo
 
Como ser um bom programador
Como ser um bom programadorComo ser um bom programador
Como ser um bom programador
 
Programando para o Google Chrome
Programando para o Google ChromeProgramando para o Google Chrome
Programando para o Google Chrome
 
E-commerce: indo além da tecnologia
E-commerce: indo além da tecnologiaE-commerce: indo além da tecnologia
E-commerce: indo além da tecnologia
 
Mídias Sociais não é só Facebook!
Mídias Sociais não é só Facebook!Mídias Sociais não é só Facebook!
Mídias Sociais não é só Facebook!
 
PicPay: uma nova forma de comprar
PicPay: uma nova forma de comprarPicPay: uma nova forma de comprar
PicPay: uma nova forma de comprar
 
Projetar pensando na experiência do usuário
Projetar pensando na experiência do usuárioProjetar pensando na experiência do usuário
Projetar pensando na experiência do usuário
 
Desenvolvimento Ágil com Ruby on Rails
Desenvolvimento  Ágil com Ruby on  RailsDesenvolvimento  Ágil com Ruby on  Rails
Desenvolvimento Ágil com Ruby on Rails
 
Angular JS, você precisa conhecer
Angular JS, você precisa conhecerAngular JS, você precisa conhecer
Angular JS, você precisa conhecer
 
Rock pigeon - do zero até o começo
Rock pigeon - do zero até o começoRock pigeon - do zero até o começo
Rock pigeon - do zero até o começo
 
Métricas Web com Google Analytics: indo muito além das visitas
Métricas Web com Google Analytics: indo muito além das visitasMétricas Web com Google Analytics: indo muito além das visitas
Métricas Web com Google Analytics: indo muito além das visitas
 
Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...
Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...
Negócios para Desenvolvedores e Designers: abordagens práticas de mercado dig...
 
Getting Real: conceitos para construir projetos de sucesso
Getting Real: conceitos para construir projetos de sucessoGetting Real: conceitos para construir projetos de sucesso
Getting Real: conceitos para construir projetos de sucesso
 
Desenvolvendo para windows phone, um novo paradigma
Desenvolvendo para windows phone, um novo paradigmaDesenvolvendo para windows phone, um novo paradigma
Desenvolvendo para windows phone, um novo paradigma
 
De serviço a produto com uma plataforma de e-commerce
De serviço a produto com uma plataforma de e-commerceDe serviço a produto com uma plataforma de e-commerce
De serviço a produto com uma plataforma de e-commerce
 
WebApps e Frameworks Javascript
WebApps e Frameworks JavascriptWebApps e Frameworks Javascript
WebApps e Frameworks Javascript
 
De aprendizado à utilidade pública
De aprendizado à utilidade públicaDe aprendizado à utilidade pública
De aprendizado à utilidade pública
 

Mobile: o que já está acontecendo e o que é futuro?