Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Os cuidados e os limites da Web Mobile

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.

1bf877955dc2e43662320fd3b0280166?s=128

Diego Eis

March 18, 2014
Tweet

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

  3. None
  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?
  6. None
  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

  32. None
  33. None
  34. None
  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

  39. None
  40. None
  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
  55. None
  56. None
  57. None
  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.
  64. None
  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
  69. None
  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