Apresentação do dia 26/03/2013 na 4a edição do meet2Brains.

1. meet2Brains 4:
MOBILE WEB
AQUI E AGORA

2. • Formando em Desenho
Industrial na UFES
• Arquiteto de informação
na Wine.com.br
• Responsável pela
plataforma mobile

3. 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

7. http://googlediscovery.com/2009/07/27/google-latitude-para-iphone/

9. APLICATIVOS NATIVOS
x
WEB MÓVEL

10. NATIVO WEB
Recursos avançados Sempre atualizado
Plataformas separadas Multi-plataforma
Destaque nas app stores Otimizado para sites de
busca

12. Um não é melhor do que o outro.
Ambos se complementam.

13. http://www.tricedesigns.com/wp-content/uploads/2011/08/multidevice_teaser.jpg

14. http://www.gazetadopantanal.com/editoria/agronegocios/page/79/

15. https://singularityhub.com/2013/03/14/beforeafter-comparison-of-pope-announcement-shows-incredible-
proliferation-of-mobile-in-just-8-years/

16. (POR FAVOR, NÃO)
http://pplu-sons.blogspot.com.br/2013_02_01_archive.html

18. 60%

19. 69%

20. 53%

21. 45% DOS CONSUMIDORES
usam smartphones para
pesquisa de produtos e
navegação dentro das lojas.

22. 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

23. OPORTUNIDADE

24. OPORTUNIDADE
RESPONSABILIDADE

25. FLEXIBILIDADE
UBIQUIDADE
PERFORMANCE
APRIMORAMENTO

26. CONTEÚDO
É MATO.

30. ADAPTAR
CONTEÚDO À FORMA
(e não o contrário)

33. INÚTIL
INÚTIL

35. FLEXIBILIDADE
UBIQUIDADE
PERFORMANCE
APRIMORAMENTO

36. WEB

39. “Ninguém compra
vinho pelo celular.”
Janeiro 2012 – Janeiro 2013 – Wine.com.br

40. Grupos de Foco do Google
Repetitive now
Bored now
Urgent now

41. PROJETE UMA INTERFACE
SUFICIENTEMENTE USÁVEL
E AS PESSOAS IRÃO
UTILIZA-LÁ.

42. Valor > Frustração
https://vimeo.com/46141222

43. http://produto.mercadolivre.com.br/MLB-465736423-cce-vcr-30x-video-cassete-recorder-_JM

45. DESIGN É
PERFORMANCE.
(a experiência é consequência)

46. 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.

47. https://developers.google.com/mobile/articles/fast_buttons

48. PERFORMANCE É

49. RESPONSIVO
3 3
MB MB

50. USUÁRIOS ESPERAM
QUE A PÁGINA MOBILE
CARREGUE MAIS
RÁPIDO QUE A
CONVENCIONAL.

51. QUEREM
USUÁRIOS ESPERAM
QUE A PÁGINA MOBILE
CARREGUE MAIS
RÁPIDO QUE A
CONVENCIONAL.

52. WEB STORAGE MINIFY
PERFORMANCE
CSS3
RETINA DISPLAY DESIGN
RESPONSIVO
OTIMIZAÇÃO
CARREGAMENTO CONDICIONAL GOOGLE PAGE SPEED
MOBILE FIRSTSPRITES
USABILIDADE APPCACHE
HTML5 TOUCH

53. 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.

54. PRECIOSOS
4 SEGUNDOS.

55. FLEXIBILIDADE
UBIQUIDADE
PERFORMANCE
APRIMORAMENTO

56. <input type="number"
pattern="[0-9]*">

57. 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;

59. ENTENDA AS
RESTRIÇÕES

60. O público do seu site
quer o suco
ou a casca dele?

61. Plante essa
IDEIA
Mobile de hoje é o
Universal de amanhã.

62. Obrigado!
@blude