Os cuidados e os limites da Web Mobile

O Responsive Web Design não resolve tudo. Existem pontos importantes que você precisa relevar ao produzir algo responsivo.

Transcript

1. Os cuidados e os limites do Responsive Web Design ou: O blá blá blá do Responsive Web Design
2. DIEGO EIS slideshare.net/diegoeis bit.ly/locawebstyle @diegoeis @tableless tableless.com.br
4. O que você sabe sobre o usuário?
5. Você tem uma ideia das resoluções que o usuário usa. Não existe uma resolução matadora. Qual a resolução?
7. #WTF
8. Não pense no browser, pense no motor de renderização. Qual browser?
9. O que você sabe é que o mouse existe. Todos usam mouse?
10. O cara pode estar em um feature phone ou um computador velho. Nunca existirão apenas computadores rápidos. Computadores rápidos?
11. 3G? Banda larga com upload de 2Mb? A Conexão nunca será rápida o bastante. Conexão rápida?
12. De qual maioria você está falando? Mito: a maioria define os padrões. Será?
13. alguns dados interessantes
14. usam vários dispositivos para terminar uma tarefa 90% http://bit.ly/google-multi-screen-2012
15. iniciam a compra no smartphone e depois terminam em outro dispositivo 65% http://bit.ly/google-multi-screen-2012
16. usam a TV e o celular simultaneamente todos os dias 81% http://bit.ly/google-multi-screen-2012
17. das interações de media são feitas em telas. 90% http://bit.ly/google-multi-screen-2012
18. responsive web design
19. o que é? É uma forma de apresentar bem seu layout para um grande número de dispositivos meios de acesso, usando, principalmente, o mesmo código HTML.
20. DESKTOP título título TABLET título título DESKTOP TABLET MOBILE título título MOBILE
21. As vantagens
22. Nenhum redirecionamento. Nenhuma URL nova para o usuário aprender Uma url
23. Você mantém um código. Um código
24. Você faz apenas UM deploy. Um deploy
25. Você não tem vários lugares para atualizar seu conteúdo. Um conteúdo para gerenciar
26. Mas o Responsive não resolve tudo Ele não é a solução para todos os problemas dos sites mobiles. Aliás, o termo "site mobile" está bem fora de moda.
27. Manter um código é uma faca de dois gumes Como fica a performance para manter um código grande que se adapta?
28. Fluxo de navegação Usuários usando dispositivos móveis sofrem mais com fluxos complexos e longos.
29. Conteúdo O Responsive não resolve seu problema de conteúdo. Isso NÃO significa que você precisa servir conteúdos diferentes para mobile e desktop.
30. Elementos adaptados Nem todos os elementos usados no desktop são funcionam bem em outros meios de acesso. Nesse caso, você precisa de uma alternativa.
31. TABS
35. RESS
36. o que é RESS? Para começar é um acrônimo que ninguém entende: REsponsive Web Design + Server Side Components ! É combinar a força do RWD servindo pedaços do site (componentes) otimizados de acordo com o contexto que o usuário se encontra.
37. É bom para Se você quiser ajustes finos de layout. Otimização de performance a nível de componente.
38. UNIVERSIDADE DE NOTRE DAME
41. TELAS GRANDES 136 requests - 3.00MB TELAS PEQUENAS 23 requests - 291.94KB
42. Cases ruins Eles mudam o site inteiro em vez de mudar apenas algunas componentes.
43. SEARS
44. SEARS MOBILE DESKTOP
45. HONDA uk
46. SEARS MOBILE DESKTOP
47. Ainda está começando Ninguém usa de verdade, por isso, ninguém tem ideia da melhor forma de se fazer.
48. Detectar dispositivos é e sempre será um problema Tanto que empresas como a DeviceAtlas, WURFL e Handset Detection tem ganhado algum dinheiro tentando resolver esse problema.
49. adaptive web design
50. Adaptive Web Design são várias soluções e metodologias usadas, ao contrário do que vejo por aí, ele não é concorrente do Responsive. Na verdade o Responsive está contido no AWD. AWD é um pacote de soluções
51. HONDA uk RWD Adaptive Web Design RESS Adaptive Delivery ETC… GRIDS Design atômico
52. Você escreve código nivelando por baixo e assim adiciona camadas de funcionalidades, tendo certeza de que tudo funciona em todos os meios de acesso, mesmo quando eles não tem suporte. Progressive enhancement
53. conteúdo HTML formatação básica CSS formatação avançada CSS comportamento interações JS / CSS
54. É a habilidade do sistema continuar em operação mesmo quando erros acontecem. A natureza inteira trabalha dessa forma. Os browsers trabalham dessa forma. É por isso que você consegue fazer coisas maravilhosas com CSS3 e HTML5 Fault tolerance
58. alguns cuidados
59. Se o fluxo é longo, diminua Por que precisamos ter um fluxo longo complexo no desktop? Só por causa do espaço, por causa do conforto? Não seria mais confortável dar menos cliques e ter um fluxo menor?
60. Comportamentos similares Unifique o comportamento. Minimize comportamentos diferentes entre os dispositivos.
61. Não perca tempo com as imagens Continue usando imagens do jeito que você sempre usou. Claro, tente otimizar o máximo possível, mas não fique louco tentando usar versões diferentes para vários dispositivos.
62. Não abuse da adaptação Tanto no back-end quanto no front-end. Você vai ter problemas em manter dois códigos e isso pode sair do controle.
63. Trabalhe com design e estruturas similares Criar um layout parecido entre as plataformas diminui o aprendizado do usuário, diminuir código e você mantém melhor o controle.
65. outras preocupações
66. Você começa a preencher um formulário no desktop, mas precisa terminá-lo no smartphone, como sincronizar essa tarefa? Como controlar a sincronização de conteúdo?
67. Touch, Mouse, Gestures etc… Como garantir que todas a execução de tarefas em qualquer dispositivo? Como padronizar as interações de eventos?
68. Como seu produto pode interagir com diversos dispositivos ao mesmo tempo? ! Exemplo: http://g.co/racer Como melhorar a interação entre dispositivos
70. Pense no usuário não na tecnologia
71. "There is no Mobile Web. There is only the Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web." http://bit.ly/no-mobile-web
72. Amplexos! Perguntas? slideshare.net/diegoeis bit.ly/locawebstyle @diegoeis @tableless tableless.com.br