Anotomia do design responsivo

Uma abordagem sobre o que é responsivo, como e onde devemos usar.

Transcript

2. Alda Rocha - UX/UI @mjcoffeeholick
 WebDeveloper/WebDesigner/Google Dev. Groups/Woman Techmakers #GDGSP #GDGDrops #365cafes & Astrônoma Amadora
3. ENTENDENDO O RESPONSIVO
4. O que é RESPONSIVO?
5. RESPONSIVO (Adjetivo masculino singular) Flexível, Ajustável
6. O layout responsivo surgiu da necessidade de adaptações de um template para outras resoluções de tela.
7. LARGURA X ALTURA
8. MENOR X MAIOR
9. MENOR X MAIOR
10. Qual a sua importância?
11. DADOS (O cenário geral)

12. DADOS métricas e números = +1

13. Celular Smartphone ON LINE 0 25 50 75 100 MOBILE
14. <3 mobile vem do mobile 0 25 50 75 100 COMPRA ON LINE
15. Lêem ¬¬" </3 0 25 50 75 100 E-MAILS
16. Uma pessoa checa seu celular em média 150 vezes ao longo do dia.
17. USUÁRIOS EXCLUSIVAMENTE MOBILE
18. Pontos positivos
19. RAPIDEZ E PRATICIDADE
20. SEM DOUBLE TAPPING 

21. CALL TO ACTION 

22. FLEXÍVEL Automático. O pastel mais pedido! 

23. UX e SEO 

24. O que precisa ter?
25. MOBILE FIRST APPROACH
26. VANTAGENS
27. LAYOUT SIMPLES
28. DEFINA BREAKPOINTS
29. O QUE MUDA?
30. FLEXIBILIDADE
31. ESTICA E PUXA
32. BLOGPOST
34. Onde os problemas começam
36. SIM!
37. SIM! :(

38. Exemplos de problemas:
39. UM CLÁSSICO (Intervenções e imposições)

40. “O concorrente usa!” 
 “Ta na moda”
41. BRIEFING ESPECIFICAÇÃO (Incompleto ou errado)

42. “O que o cliente precisa afinal?” 

43. Necessidade X Estratégia
44. PERGUNTE! (Perguntas são necessárias)

45. “Quem é o público alvo? " “O que o usuário espera fazer quando ele clica em um botão?” “Qual o contexto? "
46. A.
 De que jeito? 
 Com que abordagem? 
 Com que importância de hierarquia de conteúdo? 

47. a.
 
 b.
 
 c.
 d.

48. BOAS PRÁTICAS (Sempre é bom, né?)

49. A. 
 Menos é mais! 
 Fácil de usar. 
 Intuitivo: com uma boa 
 consistência e continuidade. 

50. Facetas reais do responsivo
51. 3 Tipos (Cada caso é um caso)

52. FLEXÍVEL Automático. O pastel mais pedido! 

53. ESPECÍFICO Versão mobile do seu site. 

54. ADAPTÁVEL Se ajusta, se adapta. 

56. Para decidir considere alguns pontos
57. TEMPO
58. Ok! Quanto tempo?
59. Menos que 1 mês Específico
60. Menos que 2 meses Adaptável
61. Mais que 2 meses Adaptável
62. TIME (Equipe)

63. TIME ¬¬”

64. TIME -_-“

65. MAPEAMENTO 
 DE DEVICES USADOS
66. MULTITELAS
67. POR FIM
68. FAÇA UMA ANÁLISE (Qual o responsivo ideal?)

69. Pense em uma estratégia para mobile e não apenas no estica e puxa do conteúdo.
70. :3
71. @mjcoffeeholick
 mj.coffeeholick@gmail.com https://medium.com/@mjcoffeeholick
72. Conhece uma mulher que queira palestrar?
 www.facebook.com/convideumamulher
73. Por que faltam mulheres no campo tecnologia ?
 http://programaria.org
74. GDG DROPS 
 OUT - GDGSP @GDGSaoPaulo
75. OCUPAR O MASP 
 #PaulistaHack 23 SET - 19:00
76. DEVFEST SP 
 NOV - GDGSP @GDGSaoPaulo