Mobile First

456 views

Published on

Talk - Rodrigo Barona - Industry Sessions #1 - Responsive Design - Powered By EDIT.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
456
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile First

  1. 1. Mobile First Desenhar para smartphones Industry Sessions by EDIT. | Responsive Design | 29 de Novembro 2013
  2. 2. Rodrigo Barona @rbarona Head of creative technology & digital production @jwtlisbon, husband and father 2.0. Formerly @softwarephc, @leoburnettpt, @proodcom & @Valuelearning Born in Valencia (Spain) <3 Web Standards, Opens Source, WebApps, Apple, WordPress, UX, Snowboard...
  3. 3. 7.000 milhões de pessoas Fonte: Wikipedia
  4. 4. 2.000 milhões de computadores Fonte: Ask.com
  5. 5. 1.500 milhões de smartphones Fonte: Business Insider
  6. 6. 768 milhões Android 294 milhões iOS 57% do mercado 21% do mercado 45 milhões Windows Phone 3% do mercado Fonte: Business Insider
  7. 7. Quando (e onde) utilizamos o smartphone?
  8. 8. 35% no Cinema Fonte: CNN
  9. 9. 33% no Jantar de namorados Fonte: CNN
  10. 10. 32% no Festa da Escola Fonte: CNN
  11. 11. 19% no Igreja Fonte: CNN
  12. 12. Sony Xperia Z1 12% no banho Fonte: CNN / Sony
  13. 13. 9% durante as relaçoes sexuais Fonte: CNN
  14. 14. Fonte: Verizon
  15. 15. Realmente, para que os utilizamos?* *Alem das Chamadas, SMS e E-mails
  16. 16. 46% “Me Time” Fonte: Harvard Business Review Procurando descontrair ou entretenimento
  17. 17. 19% Socializando Fonte: Harvard Business Review Interagir com outras pessoas
  18. 18. 12% Shopping Fonte: Harvard Business Review Procurando produtos ou serviços
  19. 19. 11% Produção Fonte: Harvard Business Review Gerir finanças, saude e produtividade
  20. 20. 7% Planificação Fonte: Harvard Business Review Preparar viagens e futuros eventos
  21. 21. 4% Descobertas Fonte: Harvard Business Review Procurando noticias e informação
  22. 22. 1% Auto-expressão Fonte: Harvard Business Review Participar em passatempos e interesses
  23. 23. O mais importante,... primeiro!
  24. 24. Mobile First ➔ CRESCIMENTO = OPORTUNIDADE ➔ RESTRIÇÕES = REALÇAR ➔ CAPACIDADES = INOVAÇÃO
  25. 25. Fonte: @Wilto
  26. 26. Organização da Informação 1. Comportamentos dos smartphones 2. Conteúdo em primeiro lugar 3. Elementos de navegação 4. Clareza e foco ?
  27. 27. Comportamentos ➔ Conhece bem quais são os pontos fortes do smartphone ➔ Ajuste a organização do site em conformidade
  28. 28. Conteúdo primeiro Primeiro o conteúdo, depois a navegação: ➔ Minima navegação, máximo conteúdo ➔ Foco onde mais importa ➔ Aos poucos, revela experiências
  29. 29. Minima navegação Máximo conteúdo
  30. 30. Minima navegação Máximo conteúdo Filtros de navegação relevantes
  31. 31. Minima navegação Conteúdo Informação Geolocalizada Filtros de navegação relevantes
  32. 32. Minima navegação Informação Geolocalizada Máximo conteúdo Informação Geolocalizada
  33. 33. Navegação Links mais pequenos que o meu dedo Conteúdo com tamanho desproporcional É para fazer click?
  34. 34. Elementos de navegação Páginas mais visitadas
  35. 35. Ícone “standard” de Menu de navegação Ícone “standard” de Pesquisa São mostrados os conteúdos coma maior numero de visitas
  36. 36. Final do site “Dead End”
  37. 37. Ícone “standard” de menu de navegação Shortcut para Mail Caixa de Pesquisa O menu aparece por encima da pagina, ocultando o conteúdo
  38. 38. Clareza e Foco Não existe menu de navegação Procura de conteúdo Máximo Conteúdo
  39. 39. Minima Navegação Procura de conteúdo Máximo Conteúdo
  40. 40. Minima Navegação Procura de conteúdo Máximo Conteúdo
  41. 41. WTF?
  42. 42. Obrigado! @rbarona

×