Mobile first - Como pensar mobile é o tema desta apresentação que expõe alguns pontos chave para se construir interfaces começando do mobile.

1. Mobile first
Como pensar mobile
Diogo Machado
github.com/diogomachado
diogomachado.com
@tec_diogo

2. PHP, Javascript,
Cordova/Phonegap, Mysql, CSS e
HTML
Diogo Machado
Desenvolvedor web/mobile
www.diogomachado.com

4. Luke Wroblewski
Diretor Produto, Google

5. O que é pensar mobile?

6. Versão desktophttp://www.sebrae.com.br

7. Versão mobilehttp://www.sebrae.com.br

8. Versão desktophttp://www.ufes.br/

9. Versão mobilehttp://www.ufes.br/

10. Versão desktopSistema de requisições

11. Versão mobileSistema de requisições

12. Versão mobileSistema de requisições

13. Designers precisam pensar mobile

14. Precisamos de um hotsite
para nossa campanha
Dono empresa

15. Precisamos de um hotsite
para nossa campanha
Dono empresa
Ok, está pronto, vou enviar
o .psd
Designer agência

16. Precisamos de um hotsite
para nossa campanha
Dono empresa
Ok, está pronto, vou enviar
o .psd
Designer agência
Programador
Meu Deus, como
vou converter isso
para mobile...

17. Comece sempre pela versão
mobile

18. Faça desenhos

22. http://www.interfacesketch.com

23. Otimize o que é possível
otimizar

24. Padrão de touch muda para
cada pessoa

26. xNoticias
Publicações
Calendário
Fotos
Galerias
Dedo fino

27. xNoticias
Publicações
Calendário
Fotos
Galerias
Dedo médio

28. xNoticias
Publicações
Calendário
Fotos
Galerias
Dedo gordo

29. Sendo a maioria da população destra,
ações principais podem ser colocadas ao
meio ou da esquerda da tela.

30. xNoticias
Publicações
Calendário
Fotos
Galerias

31. +
Distância

33. As pessoas esperam fazer o que
fazem no Desktop, no Celular

34. Qualquer ação que dependa
de hover do mouse precisa
ser repensada.

35. Priorizar o conteúdo.

36. Portal de notícias

37. Portal de notícias

38. Priorizar o conteúdo não é
excluir informação

39. E sim mostrar aquilo que é
mais importante primeiro

40. Precisamos considerar os
diferentes dispositivos e
tamanhos de tela

41. iphone 6s plus iphone se
2015, 30 milhões de
Iphones de 4 polegadas
vendidos
As pessoas ainda
gostam de aparelhos
pequenos
As pessoas ainda
gostam de aparelhos
pequenos
2015
2016

42. Se o site é rápido em mobile, no
desktop já estará otimizado.

43. Redução é a melhor prática de layout
para aparelhos móveis

44. Considere os eventos tap, drag e swipe

48. Diogo Machado
github.com/diogomachado
diogomachado.com
@tec_diogo