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

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
MOBILEDESKTOP

45. HONDA uk

46. SEARS
MOBILEDESKTOP

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 ukRWD
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