0
Horácio Soares                 @horaciosoares                   21 9925-5404Mobile First         Outubro de 2012 – São Pau...
Mobile First
Mobile First                                         Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
Mas antes…
Qual é contexto do     Mobile?
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6
Os smartphones são  indispensáveis no          cotidiano
“In 2013, Mobile Phone will overtake PC’s as the mostcommon Web access device        world wide.”          — GARTNER
Slide 107http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos    do Mal de Parkinson”
capacidades/ vantagens  do mobile
GPS
Case Toyota
Acelerômetro
Giroscópio
Bluetooth
Áudio, vídeo e imagem
NFC
Sensores multitoque
Em qualquer hora e local.
Novas maneiras de interação e apresentação
Boa compatibilidade entrenavegadores Mobile e HTML5
Atualizações frequentes...
limitações/restrições      do mobile
“fritando o peixe e olhando o gato”.
@lukew
‘Desktop is like “diving”…
…while mobile is like “snorkling.”’             by Hinman at Nokia                    http://www.slideshare.net/Rachel_Hin...
O quetodos quando  mergulham    desejam?
desktop@lukew
tela grande@lukew
tela grande         energia@lukew
tela grande         energia         rede consistente@lukew
tela grande         energia         rede consistente         teclado@lukew
tela grande         energia         rede consistente         teclado         mouse@lukew
tela grande         energia         rede consistente         teclado         mouse         cadeira@lukew
tela grande         energia         rede consistente         teclado         mouse         cadeira         mesa@lukew
tela grande                     energia                     rede consistente                     teclado                  ...
mobile@lukew
tela pequena@lukew
tela pequena         bateria@lukew
tela pequena         bateria         rede inconsistente@lukew
tela pequena         bateria         rede inconsistente         dedo gordo@lukew
tela pequena         bateria         rede inconsistente         dedo gordo         sensores@lukew
Outras limitações:●    Capacidade de armazenamento e     processamento reduzido.●    Uma aplicação em HTML5 para mobile   ...
perda de 80% do espaço
@lukew
e isso pode ser ótimo para o negócio...
te força a priorizar...te força a manter o foco…
Alguém conhece algum siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?
Flickr desktop60 opções de menu...
@lukew
Flickr mobile7 opções de menu...
Less is more...
@lukew
Restrições são boas para o  design, pois te forçam a priorizar, a manter o foco
mas cuidado…
no ponto…
Os detalhes docomprador não   podem servisualizados na versão mobile.
DesktopSite
Mobile Site
Ainda antes de focarno Mobile First, comoanda a qualidade dos  nossos sites nas  versões desktop?
Será?
Uma breve avaliaçãode conhecidos sites de   notícias sobre TI
O Mobile Firstvem tirar os sites  Desktop do      CTI
Mobile First                                         Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
SIMPLICIDADE
Paradoxo da escolha
Elimine da interface itens que não       sejam extremamente          necessários...
Qual desses Desktops oferecia a      melhor experiência?
Qual desses Desktops oferecia a      melhor experiência?
E qual desses controles?
Case Extreme Booking with Hotels.com
http://www.youtube.com/watch?v=gcuFkiEORsE
Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Mobile First!
Mobile First!
Mobile First!
Mas antes do Mobile First     precisamos de      estratégia...
Estratégia:”conspiração para o     sucesso”
X
Projetos UX Mobile
O que osusuáriosesperam?
felicidade
felicidadeX
felicidade
felicidade             X
experiência perfeita
felicidade
Experiência do“ Usuário (UX) é a    qualidade daexperiência que uma   pessoa tem ao interagir com algo      projetado.    ...
E o que as empresas     esperam?
o melhor osso…
mas como
com qualidade...
acertandoo tiro certono alvo certo
para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
onde devemos mirar?
Causo 1PrecisamosConstruiruma mesa.                      Liv             O Tiro e o A
CAUSO 1       - A propósito, que mesa?Livro: O Tiro e o Alvo
De sinuca?
Ping-pong?
Futebol de botão?
Carteado?
Ou seria uma mesa para computador?
Reunião?
Escritório?
Mesa de centro?
Jantar?
Ou seria uma mesa de cirurgia?
De autópsia?
CAUSO 1 (continuação)          - Isso não interessa,          meu filho. Depois a          gente vê. Vamos          começa...
Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
Como são nossas experiências?
•  A maioria das experiências   ruins poderiam ser evitadas   com a identificação do alvo   certo e com avaliações com    ...
By Bernard De Luna
50%É a média do tempo gasto emrefação nos projetos de TI.Fonte:http://spectrum.ieee.org/computing/software/why-software-fa...
15%Dos projetos são abandonadosdepois de uma primeira entregainadequada.Fonte:http://spectrum.ieee.org/computing/software/...
83%É a média da melhoria dos KPI’s emprojetos com 10% do orçamentogasto em pesquisa de usabilidade.Fonte:http://spectrum.i...
Aumento de KPI’sConversões - Tráfego no site -Cadastros - Contatos de novosclientes - Vendas - Fatia de mercado -Transaçõe...
Diminuição de KPI’sCustos do projeto - Tempo dedesenvolvimento do projeto - Custo detreinamento - Erros no uso do sistema-...
desafio 1:identificar objetivos e necessidades…
Investigação Baseada em Perguntas                     Precisamos automatizar                         a Contabilidade  Prec...
Uma proposta de briefing Baseado em perguntas:http://clearleft.s3.amazonaws.com/client-              worksheet.doc     htt...
Desafio 2:           Como atender ao mesmo tempo           os objetivos e as necessidades?         Marte                  ...
Objetivose metasdo projeto
•  Precisa de novos clientes/usuários. •  Quer que os clientes atuais visitem seu site com   maior frequencia.•  Quer aume...
Reaisnecessidades dos usuários
•  Qualidade. •  Simplicidade.•  velocidade.•  Utilidade.•  Usabilidade.•  Acessibilidade.•  Portabilidade.•  Bom custo x ...
Objetivos            Reaise metas      necessidadesdo projeto    dos usuários
a buscado equilíbrio
empresa Objetivose metas do  projeto          Necessidades                       dos                     usuários         ...
um case em equilíbrio…
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Erico Fileno
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Observação e identificação    de um problema...
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
CSS            HandHeld             DesignNão fazer              Design             Líquido nada…                 Respon- ...
Não fazer nada…os caminhosdo designmobile@horaciosoares – Campus Party 2013
Nãofazernada!
CSS                     HandHeld                      Design Não fazer                      Líquido  nada…os caminhosdo de...
CSSHandHeld Design Líquido
CSSmediaHANDHELD           Como era em 2004,             2005, 2006...?
SiteAcesso Digital    2007
Portabilidade - design líquido (resolução 1024x768)
Portabilidade - design líquido ( resolução 640x480)
Portabilidade – CSS (Display PRINT)
Portabilidadecss para dispositivo móvel                   MOTO Q             Acesso Digital:    http://acessodigital.net
CSS                     HandHeld                      Design Não fazer                           Design                   ...
DesignResponsivo
CSS                     HandHeld                      Design Não fazer                           Design                   ...
Otimizado   para Mobile
Otimizado              para            Mobile  2 v.Desktope Mobile
2 v.Desktope Mobile
2 v.Desktope Mobile
2 v.Desktope Mobile
Site otimizado para MobileA maioria oferece apenas duas versões:
Site otimizado para MobileNormalmente a versão Mobile é projetada      com foco nas atividades fins.
Otimizado   para Mobile              3 v.            Desktop,            Tablet e             Mobile
Site otimizado para MobileAlgumas empresas têm três versões diferentes:
Otimizado              para            Mobile                         3 v.  2 v.                       Desktop,Desktop    ...
CSS                     HandHeld                      Design Não fazer                           Design                   ...
AppNativa
App                Nativa                                   Blackbarry                         WindowsAndroid   IOS       ...
CSS                     HandHeld                      Design Não fazer                           Design                   ...
AppHíbrida
Via Thais Souza @tsouzamobile!
Qual melhor caminho?
Mobile First                                         Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Upcoming SlideShare
Loading in...5
×

Mobile First - Palestra no MobileConf 2013

3,981

Published on

Palestra ministrada no MobileConf 2013, em São Paulo - abril.

Published in: Design
2 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,981
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
76
Comments
2
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile First - Palestra no MobileConf 2013"

  1. 1. Horácio Soares @horaciosoares 21 9925-5404Mobile First Outubro de 2012 – São Paulo!
  2. 2. Mobile First
  3. 3. Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
  4. 4. Mas antes…
  5. 5. Qual é contexto do Mobile?
  6. 6. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4
  7. 7. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6
  8. 8. Os smartphones são indispensáveis no cotidiano
  9. 9. “In 2013, Mobile Phone will overtake PC’s as the mostcommon Web access device world wide.” — GARTNER
  10. 10. Slide 107http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
  11. 11. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  12. 12. capacidades/ vantagens do mobile
  13. 13. GPS
  14. 14. Case Toyota
  15. 15. Acelerômetro
  16. 16. Giroscópio
  17. 17. Bluetooth
  18. 18. Áudio, vídeo e imagem
  19. 19. NFC
  20. 20. Sensores multitoque
  21. 21. Em qualquer hora e local.
  22. 22. Novas maneiras de interação e apresentação
  23. 23. Boa compatibilidade entrenavegadores Mobile e HTML5
  24. 24. Atualizações frequentes...
  25. 25. limitações/restrições do mobile
  26. 26. “fritando o peixe e olhando o gato”.
  27. 27. @lukew
  28. 28. ‘Desktop is like “diving”…
  29. 29. …while mobile is like “snorkling.”’ by Hinman at Nokia http://www.slideshare.net/Rachel_Hinman
  30. 30. O quetodos quando mergulham desejam?
  31. 31. desktop@lukew
  32. 32. tela grande@lukew
  33. 33. tela grande energia@lukew
  34. 34. tela grande energia rede consistente@lukew
  35. 35. tela grande energia rede consistente teclado@lukew
  36. 36. tela grande energia rede consistente teclado mouse@lukew
  37. 37. tela grande energia rede consistente teclado mouse cadeira@lukew
  38. 38. tela grande energia rede consistente teclado mouse cadeira mesa@lukew
  39. 39. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew
  40. 40. mobile@lukew
  41. 41. tela pequena@lukew
  42. 42. tela pequena bateria@lukew
  43. 43. tela pequena bateria rede inconsistente@lukew
  44. 44. tela pequena bateria rede inconsistente dedo gordo@lukew
  45. 45. tela pequena bateria rede inconsistente dedo gordo sensores@lukew
  46. 46. Outras limitações:●  Capacidade de armazenamento e processamento reduzido.●  Uma aplicação em HTML5 para mobile pode ser até 100 vezes mais lenta que em desktop. http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
  47. 47. perda de 80% do espaço
  48. 48. @lukew
  49. 49. e isso pode ser ótimo para o negócio...
  50. 50. te força a priorizar...te força a manter o foco…
  51. 51. Alguém conhece algum siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?
  52. 52. Flickr desktop60 opções de menu...
  53. 53. @lukew
  54. 54. Flickr mobile7 opções de menu...
  55. 55. Less is more...
  56. 56. @lukew
  57. 57. Restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  58. 58. mas cuidado…
  59. 59. no ponto…
  60. 60. Os detalhes docomprador não podem servisualizados na versão mobile.
  61. 61. DesktopSite
  62. 62. Mobile Site
  63. 63. Ainda antes de focarno Mobile First, comoanda a qualidade dos nossos sites nas versões desktop?
  64. 64. Será?
  65. 65. Uma breve avaliaçãode conhecidos sites de notícias sobre TI
  66. 66. O Mobile Firstvem tirar os sites Desktop do CTI
  67. 67. Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
  68. 68. SIMPLICIDADE
  69. 69. Paradoxo da escolha
  70. 70. Elimine da interface itens que não sejam extremamente necessários...
  71. 71. Qual desses Desktops oferecia a melhor experiência?
  72. 72. Qual desses Desktops oferecia a melhor experiência?
  73. 73. E qual desses controles?
  74. 74. Case Extreme Booking with Hotels.com
  75. 75. http://www.youtube.com/watch?v=gcuFkiEORsE
  76. 76. Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  77. 77. Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  78. 78. Mobile First!
  79. 79. Mobile First!
  80. 80. Mobile First!
  81. 81. Mas antes do Mobile First precisamos de estratégia...
  82. 82. Estratégia:”conspiração para o sucesso”
  83. 83. X
  84. 84. Projetos UX Mobile
  85. 85. O que osusuáriosesperam?
  86. 86. felicidade
  87. 87. felicidadeX
  88. 88. felicidade
  89. 89. felicidade X
  90. 90. experiência perfeita
  91. 91. felicidade
  92. 92. Experiência do“ Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
  93. 93. E o que as empresas esperam?
  94. 94. o melhor osso…
  95. 95. mas como
  96. 96. com qualidade...
  97. 97. acertandoo tiro certono alvo certo
  98. 98. para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
  99. 99. onde devemos mirar?
  100. 100. Causo 1PrecisamosConstruiruma mesa. Liv O Tiro e o A
  101. 101. CAUSO 1 - A propósito, que mesa?Livro: O Tiro e o Alvo
  102. 102. De sinuca?
  103. 103. Ping-pong?
  104. 104. Futebol de botão?
  105. 105. Carteado?
  106. 106. Ou seria uma mesa para computador?
  107. 107. Reunião?
  108. 108. Escritório?
  109. 109. Mesa de centro?
  110. 110. Jantar?
  111. 111. Ou seria uma mesa de cirurgia?
  112. 112. De autópsia?
  113. 113. CAUSO 1 (continuação) - Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é Livro: rework 37 Signals curto, então, mãos à obra!Livro: O Tiro e o Alvo
  114. 114. Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
  115. 115. Como são nossas experiências?
  116. 116. •  A maioria das experiências ruins poderiam ser evitadas com a identificação do alvo certo e com avaliações com usuários...
  117. 117. By Bernard De Luna
  118. 118. 50%É a média do tempo gasto emrefação nos projetos de TI.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
  119. 119. 15%Dos projetos são abandonadosdepois de uma primeira entregainadequada.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
  120. 120. 83%É a média da melhoria dos KPI’s emprojetos com 10% do orçamentogasto em pesquisa de usabilidade.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
  121. 121. Aumento de KPI’sConversões - Tráfego no site -Cadastros - Contatos de novosclientes - Vendas - Fatia de mercado -Transações - Taxa de sucesso emtarefas - Retenção - Produtividade -Pageviews - Uso do sistema - Visitaskey performance indicator (KPI)http://en.wikipedia.org/wiki/Key_performance_indicator
  122. 122. Diminuição de KPI’sCustos do projeto - Tempo dedesenvolvimento do projeto - Custo detreinamento - Erros no uso do sistema- Tempo do usuário - Chamadas emhelp desk - Refações – Manutenção.key performance indicator (KPI)http://en.wikipedia.org/wiki/Key_performance_indicator
  123. 123. desafio 1:identificar objetivos e necessidades…
  124. 124. Investigação Baseada em Perguntas Precisamos automatizar a Contabilidade Preciso do Balancete dia 5e não dia 15 como atualmente! Por Quê? Por Quê? Por Quê? Necessito da Conta X do Balancete até o dia 5.Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas. Precisamos informar o valor das Reservas ao Banco Central até o dia 8! Por que se nãoinformarmos as Reservas seremos multados!!
  125. 125. Uma proposta de briefing Baseado em perguntas:http://clearleft.s3.amazonaws.com/client- worksheet.doc http://bit.ly/a5tRzF
  126. 126. Desafio 2: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VênusObjetivos e metas da empresa Necessidades dos usuários
  127. 127. Objetivose metasdo projeto
  128. 128. •  Precisa de novos clientes/usuários. •  Quer que os clientes atuais visitem seu site com maior frequencia.•  Quer aumentar a margem de lucro.•  Você precisa aumentar sua audiência, seu público.•  Quer diferenciar sua marca.•  Gostaria de melhorar o retorno sobre o investimento (ROI).•  Quer que seus clientes gastem mais a cada compra.•  Está à procura de novos canais de distribuição.•  Quer aumentar sua fatia do mercado (market share).•  ...
  129. 129. Reaisnecessidades dos usuários
  130. 130. •  Qualidade. •  Simplicidade.•  velocidade.•  Utilidade.•  Usabilidade.•  Acessibilidade.•  Portabilidade.•  Bom custo x benefício.•  Resolver seu problema.•  ...
  131. 131. Objetivos Reaise metas necessidadesdo projeto dos usuários
  132. 132. a buscado equilíbrio
  133. 133. empresa Objetivose metas do projeto Necessidades dos usuários usuários
  134. 134. um case em equilíbrio…
  135. 135. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  136. 136. Erico Fileno
  137. 137. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  138. 138. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  139. 139. Observação e identificação de um problema...
  140. 140. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  141. 141. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  142. 142. CSS HandHeld DesignNão fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App NativaQuais oscaminhos do Appdesign mobile? Híbrida
  143. 143. Não fazer nada…os caminhosdo designmobile@horaciosoares – Campus Party 2013
  144. 144. Nãofazernada!
  145. 145. CSS HandHeld Design Não fazer Líquido nada…os caminhosdo designmobile@horaciosoares – Campus Party 2013
  146. 146. CSSHandHeld Design Líquido
  147. 147. CSSmediaHANDHELD Como era em 2004, 2005, 2006...?
  148. 148. SiteAcesso Digital 2007
  149. 149. Portabilidade - design líquido (resolução 1024x768)
  150. 150. Portabilidade - design líquido ( resolução 640x480)
  151. 151. Portabilidade – CSS (Display PRINT)
  152. 152. Portabilidadecss para dispositivo móvel MOTO Q Acesso Digital: http://acessodigital.net
  153. 153. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivoos caminhosdo designmobile@horaciosoares – Campus Party 2013
  154. 154. DesignResponsivo
  155. 155. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobileos caminhosdo designmobile@horaciosoares – Campus Party 2013
  156. 156. Otimizado para Mobile
  157. 157. Otimizado para Mobile 2 v.Desktope Mobile
  158. 158. 2 v.Desktope Mobile
  159. 159. 2 v.Desktope Mobile
  160. 160. 2 v.Desktope Mobile
  161. 161. Site otimizado para MobileA maioria oferece apenas duas versões:
  162. 162. Site otimizado para MobileNormalmente a versão Mobile é projetada com foco nas atividades fins.
  163. 163. Otimizado para Mobile 3 v. Desktop, Tablet e Mobile
  164. 164. Site otimizado para MobileAlgumas empresas têm três versões diferentes:
  165. 165. Otimizado para Mobile 3 v. 2 v. Desktop,Desktop Tablet ee Mobile Mobile
  166. 166. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativaos caminhosdo designmobile@horaciosoares – Campus Party 2013
  167. 167. AppNativa
  168. 168. App Nativa Blackbarry WindowsAndroid IOS Phone
  169. 169. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativaos caminhosdo design Appmobile Híbrida@horaciosoares – Campus Party 2013
  170. 170. AppHíbrida
  171. 171. Via Thais Souza @tsouzamobile!
  172. 172. Qual melhor caminho?
  173. 173. Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×