Mobile First
Desenhar para smartphones

Industry Sessions by EDIT. | Responsive Design | 29 de Novembro 2013
Rodrigo Barona
@rbarona
Head of creative technology & digital production
@jwtlisbon, husband and father 2.0.
Formerly @sof...
7.000 milhões de pessoas

Fonte: Wikipedia
2.000 milhões de computadores

Fonte: Ask.com
1.500 milhões de smartphones

Fonte: Business Insider
768 milhões Android

294 milhões iOS

57% do mercado

21% do mercado

45 milhões Windows Phone
3% do mercado

Fonte: Busin...
Quando (e onde) utilizamos o smartphone?
35% no Cinema

Fonte: CNN
33% no Jantar de namorados

Fonte: CNN
32% no Festa da Escola

Fonte: CNN
19% no Igreja

Fonte: CNN
Sony Xperia Z1

12% no banho

Fonte: CNN / Sony
9% durante as relaçoes sexuais

Fonte: CNN
Fonte: Verizon
Realmente, para que os utilizamos?*

*Alem das Chamadas, SMS e E-mails
46% “Me Time”

Fonte: Harvard Business Review

Procurando descontrair ou entretenimento
19% Socializando

Fonte: Harvard Business Review

Interagir com outras pessoas
12% Shopping

Fonte: Harvard Business Review

Procurando produtos ou serviços
11% Produção

Fonte: Harvard Business Review

Gerir finanças, saude e produtividade
7% Planificação

Fonte: Harvard Business Review

Preparar viagens e futuros eventos
4% Descobertas

Fonte: Harvard Business Review

Procurando noticias e informação
1% Auto-expressão

Fonte: Harvard Business Review

Participar em passatempos e interesses
O mais importante,... primeiro!
Mobile First
➔ CRESCIMENTO = OPORTUNIDADE
➔ RESTRIÇÕES = REALÇAR
➔ CAPACIDADES = INOVAÇÃO
Fonte: @Wilto
Organização da Informação
1. Comportamentos dos smartphones
2. Conteúdo em primeiro lugar
3. Elementos de navegação
4. Cla...
Comportamentos
➔ Conhece bem quais são os pontos fortes do
smartphone
➔ Ajuste a organização do site em conformidade
Conteúdo primeiro
Primeiro o conteúdo, depois a navegação:
➔ Minima navegação, máximo conteúdo
➔ Foco onde mais importa
➔ ...
Minima navegação

Máximo conteúdo
Minima navegação

Máximo conteúdo

Filtros de navegação
relevantes
Minima navegação

Conteúdo

Informação Geolocalizada
Filtros de navegação
relevantes
Minima navegação

Informação Geolocalizada
Máximo conteúdo

Informação Geolocalizada
Navegação

Links mais pequenos
que o meu dedo

Conteúdo com tamanho
desproporcional

É para fazer click?
Elementos de navegação
Páginas mais visitadas
Ícone “standard” de
Menu de navegação

Ícone “standard” de
Pesquisa

São mostrados os
conteúdos coma maior
numero de visit...
Final do site
“Dead End”
Ícone “standard” de
menu de navegação

Shortcut para Mail
Caixa de Pesquisa

O menu aparece por
encima da pagina,
ocultand...
Clareza e Foco
Não existe menu
de navegação
Procura de conteúdo

Máximo Conteúdo
Minima Navegação
Procura de conteúdo

Máximo Conteúdo
Minima Navegação
Procura de conteúdo

Máximo Conteúdo
WTF?
Obrigado!

@rbarona
Mobile First
Mobile First
Mobile First
Mobile First
Upcoming SlideShare
Loading in...5
×

Mobile First

282

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
282
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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

×