Your SlideShare is downloading. ×
0
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Os cuidados e os limites do Responsive Web Design

1,863

Published on

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

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

Published in: Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,863
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
77
Comments
0
Likes
23
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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. O que você sabe sobre o usuário?
  • 4. Você tem uma ideia das resoluções que o usuário usa. Não existe uma resolução matadora. Qual a resolução?
  • 5. #WTF
  • 6. Não pense no browser, pense no motor de renderização. Qual browser?
  • 7. O que você sabe é que o mouse existe. Todos usam mouse?
  • 8. O cara pode estar em um feature phone ou um computador velho. Nunca existirão apenas computadores rápidos. Computadores rápidos?
  • 9. 3G? Banda larga com upload de 2Mb? A Conexão nunca será rápida o bastante. Conexão rápida?
  • 10. De qual maioria você está falando? Mito: a maioria define os padrões. Será?
  • 11. alguns dados interessantes
  • 12. usam vários dispositivos para terminar uma tarefa 90% http://bit.ly/google-multi-screen-2012
  • 13. iniciam a compra no smartphone e depois terminam em outro dispositivo 65% http://bit.ly/google-multi-screen-2012
  • 14. usam a TV e o celular simultaneamente todos os dias 81% http://bit.ly/google-multi-screen-2012
  • 15. das interações de media são feitas em telas. 90% http://bit.ly/google-multi-screen-2012
  • 16. responsive web design
  • 17. 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.
  • 18. DESKTOP título título TABLET título título DESKTOP TABLET MOBILE título título MOBILE
  • 19. As vantagens
  • 20. Nenhum redirecionamento. Nenhuma URL nova para o usuário aprender Uma url
  • 21. Você mantém um código. Um código
  • 22. Você faz apenas UM deploy. Um deploy
  • 23. Você não tem vários lugares para atualizar seu conteúdo. Um conteúdo para gerenciar
  • 24. 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.
  • 25. Manter um código é uma faca de dois gumes Como fica a performance para manter um código grande que se adapta?
  • 26. Fluxo de navegação Usuários usando dispositivos móveis sofrem mais com fluxos complexos e longos.
  • 27. 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.
  • 28. 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.
  • 29. TABS
  • 30. RESS
  • 31. 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.
  • 32. É bom para Se você quiser ajustes finos de layout. Otimização de performance a nível de componente.
  • 33. UNIVERSIDADE DE NOTRE DAME
  • 34. TELAS GRANDES 136 requests - 3.00MB TELAS PEQUENAS 23 requests - 291.94KB
  • 35. Cases ruins Eles mudam o site inteiro em vez de mudar apenas algunas componentes.
  • 36. SEARS
  • 37. SEARS MOBILEDESKTOP
  • 38. HONDA uk
  • 39. SEARS MOBILEDESKTOP
  • 40. Ainda está começando Ninguém usa de verdade, por isso, ninguém tem ideia da melhor forma de se fazer.
  • 41. 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.
  • 42. adaptive web design
  • 43. 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
  • 44. HONDA ukRWD Adaptive Web Design RESS Adaptive Delivery ETC… GRIDS Design atômico
  • 45. 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
  • 46. conteúdo HTML formatação básica CSS formatação avançada CSS comportamento interações JS / CSS
  • 47. É 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
  • 48. alguns cuidados
  • 49. 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?
  • 50. Comportamentos similares Unifique o comportamento. Minimize comportamentos diferentes entre os dispositivos.
  • 51. 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.
  • 52. 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.
  • 53. 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.
  • 54. outras preocupações
  • 55. 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?
  • 56. Touch, Mouse, Gestures etc… Como garantir que todas a execução de tarefas em qualquer dispositivo? Como padronizar as interações de eventos?
  • 57. Como seu produto pode interagir com diversos dispositivos ao mesmo tempo? ! Exemplo: http://g.co/racer Como melhorar a interação entre dispositivos
  • 58. Pense no usuário não na tecnologia
  • 59. "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
  • 60. Amplexos! Perguntas? slideshare.net/diegoeis bit.ly/locawebstyle @diegoeis @tableless tableless.com.br

×