Responsive Web Design: Uma História das Trincheiras (sapo.pt)

1. RESPONSIVE WEB DESIGN UMA HISTÓRIA DAS TRINCHEIRAS 26 abril 2012 André Luís @andr3 cbnaThursday, April 26, 2012

2. http://id.andr3.net @andr3 me@andr3.net andre-filipe-luis@telecom.pt andr3.net dailyphotowall.net igive.sapo.pt mobifeeds.netThursday, April 26, 2012

3. Departamento de Qualidade & Usabilidade http://ux.sapo.pt ID SAPO Homepage do SAPO http://www.sapo.ptThursday, April 26, 2012

4. Prefácio Como cheguei até aqui?Thursday, April 26, 2012

5. 1998Thursday, April 26, 2012

6. Thursday, April 26, 2012

9. simplebits.com simplebits.comThursday, April 26, 2012

14. Equipa técnicaThursday, April 26, 2012

15. Programa de festas para hojeThursday, April 26, 2012

16. Programa de Festas ‣ Prefácio: Como cheguei até aqui? ‣ Introdução: Porque precisamos mudar? ‣ Bem-vindos ao Mundo Real: Lições, avisos, etc. ‣ Imagens ‣ Lazy-Loading ‣ Restantes equipas ‣ Independência de Resolução ‣ Readaptação de conteúdo ‣ Reflows pesados ‣ Publicidade ‣ ... ‣ Dúvidas, discussão, etc.Thursday, April 26, 2012

17. Introdução Porque precisamos mudar? E... mudar o quê?Thursday, April 26, 2012

19. reocities.com/capecanaveral/5599/eclipse98.html reocities.com/capecanaveral/5599/eclipse98.html csszengarden.comThursday, April 26, 2012

21. csszengarden.com csszengarden.comThursday, April 26, 2012

22. csszengarden.com/?cssﬁle=142/142.css csszengarden.com/?cssfile=142/142.cssThursday, April 26, 2012

26. alistapart.com/articles/dao/ alistapart.com/articles/dao/Thursday, April 26, 2012

27. John Allsopp in alistapart.com/articles/dao/Thursday, April 26, 2012

28. “Quando um novo meio copia um meio já existente, parte do que copia faz sentido, mas muita da cópia é feita sem pensar, “ritual” e frequentemente acaba por restringir o novo meio. Com o passar do tempo o novo meio desenvolve as suas próprias convenções, deitando fora as convenções que não fazem sentido. John Allsopp in alistapart.com/articles/dao/Thursday, April 26, 2012

29. “Quando um novo meio copia um meio já existente, parte do que copia faz sentido, mas muita da cópia é feita sem pensar, “ritual” e frequentemente acaba por restringir o novo meio. Com o passar do tempo o novomeio novo meio desenvolve as suas próprias convenções, deitando fora as convenções que não fazem sentido. sentido.” John Allsopp in alistapart.com/articles/dao/Thursday, April 26, 2012

30. 2011 (20 anos depois da criação da web)Thursday, April 26, 2012

31. Dan Rubin in The Manual #1: Off the page Dan Rubin alwaysreadthemanual.comThursday, April 26, 2012

32. “Talvez a abordagem que temos, a nossa intuição, a nossa atitude em relação ao meio, como nós o entendemos e definimos é o que realmente impede uma verdadeira evolução.” Dan Rubin in The Manual #1: Off the page Dan Rubin alwaysreadthemanual.comThursday, April 26, 2012

33. Grelha flexível Multimédia flexível Media-queriesThursday, April 26, 2012

34. } Grelha flexível Multimédia flexível como Media-queriesThursday, April 26, 2012

35. Porquê?Thursday, April 26, 2012

36. futurefriend.ly futurefriend.lyThursday, April 26, 2012

39. Imprevisibilidade O “site mobile”, separado: http://cinema.sapo.pt/Thursday, April 26, 2012

40. Imprevisibilidade O “site mobile”, separado: http://cinema.sapo.pt http://cinema.sapo.pt/ http://m.sapo.pt/cinemaThursday, April 26, 2012

41. Imprevisibilidade http://cinema.sapo.pt/ http://m.sapo.pt/cinema ?Thursday, April 26, 2012

42. Imprevisibilidade Ligação via operador móvel GPRS ou 3GThursday, April 26, 2012

43. Imprevisibilidade Ligação via WiFi +1.5mbit (depende do fornecimento)Thursday, April 26, 2012

44. Imprevisibilidade O link: http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...Thursday, April 26, 2012

45. Imprevisibilidade O link: http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera... pode ser partilhado via... etc. e-mailThursday, April 26, 2012

46. Imprevisibilidade O link: http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera... pode ser partilhado via... etc. e-mail e lido em...Thursday, April 26, 2012

47. ImprevisibilidadeThursday, April 26, 2012

48. o que acabámos por fazer...Thursday, April 26, 2012

49. O que acabámos por fazer... ‣ Layout “líquido”Thursday, April 26, 2012

50. O que acabámos por fazer... ‣ 4x “pontos de inflexão”Thursday, April 26, 2012

51. O que acabámos por fazer... ‣ 4x “pontos de inflexão”Thursday, April 26, 2012

52. O que acabámos por fazer... ‣ 4x “pontos de inflexão” S M L XLThursday, April 26, 2012

53. O que acabámos por fazer... S M L XL 300px 300px 300px fixo fixo fixoThursday, April 26, 2012

54. DICA “Esquecer” os layouts para dispositivos específicos. Desenhar para o conteúdo.Thursday, April 26, 2012

55. Bem vindos ao Mundo Real Lições, problemas, avisos, etc.Thursday, April 26, 2012

56. Bem vindos ao Mundo Real É tão importante perceber as limitações e os obstáculos como as vantagens e as soluções.Thursday, April 26, 2012

57. Bem vindos ao Mundo Real Nem todos os browsers suportam tudo o que vamos precisar...Thursday, April 26, 2012

58. Bem vindos ao Mundo Real E é aqui que entram umas boas-práticas que nos têm valido...Thursday, April 26, 2012

59. Bem vindos ao Mundo Real E é aqui que entram umas boas-práticas que nos têm valido... Progressive Enhancement Começar com uma versão básica e ir melhorando conforme houver suporte.Thursday, April 26, 2012

60. Bem vindos ao Mundo Real E é aqui que entram umas boas-práticas que nos têm valido... Progressive Enhancement Começar com uma versão básica e ir melhorando conforme houver suporte. Graceful degradation Utilizar funcionalidades avançadas desde que quem não as suporte não perca acesso a funcionalidades críticas do serviço/site.Thursday, April 26, 2012

61. Bem vindos ao Mundo Real modernizr.com modernizr.comThursday, April 26, 2012

62. Bem vindos ao Mundo Real modernizr.com<html class=" js ﬂexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradiusboxshadow textshadow opacity cssanimations csscolumns cssgradients cssreﬂections csstransformscsstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> modernizr.comThursday, April 26, 2012

63. ImagensThursday, April 26, 2012

64. Bem vindos ao Mundo Real ‣ Imagens: ‣ que tamanho carregar? ‣ como carregá-las?Thursday, April 26, 2012

65. Bem vindos ao Mundo Real ‣ Imagens: que tamanho carregar?Thursday, April 26, 2012

66. Bem vindos ao Mundo Real ‣ Imagens: que tamanho carregar? 200x113 10.84KB 480x270 36.77KB (16:9) (16:9)Thursday, April 26, 2012

67. Bem vindos ao Mundo Real ‣ Imagens: que tamanho carregar? 200x113 10.84KB 480x270 36.77KB (16:9) (16:9) S M L XLThursday, April 26, 2012

68. Bem vindos ao Mundo Real ‣ Imagens: que tamanho carregar? 200x113 10.84KB 480x270 36.77KB (16:9) (16:9) S S (HD) M L XLThursday, April 26, 2012

69. Bem vindos ao Mundo Real ‣ Imagens: como carregá-las? hipótese 1: carregar a imagem certa via JavaScript <span class=“img” alt=“” data-srcSD=“versaoSD.jpg” data-srcHD=“versaoHD.jpg”> </span>Thursday, April 26, 2012

70. Bem vindos ao Mundo Real ‣ Imagens: como carregá-las? hipótese 1: carregar a imagem certa via JavaScript <span class=“img” alt=“” data-srcSD=“versaoSD.jpg” data-srcHD=“versaoHD.jpg”> javascript <img src=“versaoHD.jpg” alt=“”> </span>Thursday, April 26, 2012

73. Bem vindos ao Mundo Real ‣ Imagens: como carregá-las? hipótese 2: carregar a imagem SD e, caso necessário, carregar a HD (crédito: Josh Emerson @joshje)Thursday, April 26, 2012

74. Bem vindos ao Mundo Real ‣ Imagens: como carregá-las? hipótese 2: carregar a imagem SD e, caso necessário, carregar a HD (crédito: Josh Emerson @joshje) <img src=“versaoSD.jpg” alt=“” data-hd=“versaoHD.jpg”>Thursday, April 26, 2012

75. Bem vindos ao Mundo Real ‣ Imagens: como carregá-las? hipótese 2: carregar a imagem SD e, caso necessário, carregar a HD (crédito: Josh Emerson @joshje) <img src=“versaoSD.jpg” alt=“” data-hd=“versaoHD.jpg”>Thursday, April 26, 2012

76. Bem vindos ao Mundo Real github.com/joshje/Responsive-Enhance github.com/joshje/Responsive-EnhanceThursday, April 26, 2012

77. DICA Carregar a imagem de baixa-resolução e melhorá-la quando fizer sentido aumenta a peformance percebida. Apesar dos custos de tráfego (bytes extra).Thursday, April 26, 2012

78. FICÇÃO (PARA JÁ)Thursday, April 26, 2012

79. FICÇÃO (PARA JÁ) <picture alt=“”> <source src=“versaoSD.jpg” media=“screen and (max-width:500px)”> <source src=“versaoHD.jpg” media=“screen and (min-width:500px)”> </picture>Thursday, April 26, 2012

80. Lazy-LoadingThursday, April 26, 2012

81. Bem vindos ao Mundo Real ‣ Lazy-Loading 1Thursday, April 26, 2012

82. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 2Thursday, April 26, 2012

83. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 2 3Thursday, April 26, 2012

84. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 1 2 3Thursday, April 26, 2012

85. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 1 2 2 3Thursday, April 26, 2012

86. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 1 2 2 3 3Thursday, April 26, 2012

87. Bem vindos ao Mundo Real ‣ Lazy-Loading <a class=“self-loader” href=“/destaques/entretenimento”> Carregar: Destaques </a>Thursday, April 26, 2012

88. Bem vindos ao Mundo Real ‣ Lazy-Loading <a class=“self-loader” href=“/destaques/entretenimento”> Carregar: Destaques </a> Ao fazer scroll... Pedido AJAX: /so/destaques/entretenimentoThursday, April 26, 2012

89. Bem vindos ao Mundo Real ‣ Lazy-LoadingThursday, April 26, 2012

91. DICA Lazy-loading serve para muito mais do que imagens.Thursday, April 26, 2012

92. Restantes EquipasThursday, April 26, 2012

93. Bem vindos ao Mundo Real ‣ Restantes Equipas: ‣ como trazer toda a gente para o “barco”? ‣ qual das versões abordar primeiro?Thursday, April 26, 2012

94. Bem vindos ao Mundo Real ‣ Restantes Equipas: Como trazer toda a gente para o “barco”? Apresentar a versão “tradicional” (desktop) como referência... (muito do processo acontece no browser) Explicar as vantagens e identificar os riscos. Tirar quaisquer dúvidas, por mais absurdas que nos pareçam.Thursday, April 26, 2012

95. Bem vindos ao Mundo Real ‣ Restantes Equipas: Como trazer toda a gente para o “barco”? Depois do OK à versão tradicional, apresentar referências/wireframes para cada uma das versões. Quebrem as regras que não fizerem sentido na vossa organização.Thursday, April 26, 2012

96. Bem vindos ao Mundo Real ‣ Restantes Equipas: Como trazer toda a gente para o “barco”? Muito importante Os dias do processo separado entre design e desenvolvimento acabaram...Thursday, April 26, 2012

97. DICA Love thy frontend developer. ou... Love thy designer. Discutam, peçam feedback construtivo.Thursday, April 26, 2012

98. Independência de ResoluçãoThursday, April 26, 2012

99. Bem vindos ao Mundo Real ‣ Independência de resolução Antes de mais... Um pixel não é um pixel.Thursday, April 26, 2012

100. Bem vindos ao Mundo Real ‣ Independência de resolução Há vários significados para a unidade “píxel”: Píxel de CSS Píxel no dispositivo Píxeis independentes da densidadeThursday, April 26, 2012

101. Bem vindos ao Mundo Real ‣ Independência de resolução Píxel de CSS width: 300px; 300pxThursday, April 26, 2012

102. Bem vindos ao Mundo Real ‣ Independência de resolução Píxel de CSS width: 300px; 300px 300pxThursday, April 26, 2012

103. Bem vindos ao Mundo Real ‣ Independência de resolução Píxel no dispositivo 320px 640px (mais dpis)Thursday, April 26, 2012

104. Bem vindos ao Mundo Real ‣ Independência de resolução Píxeis independentes da densidade 320px 320pxThursday, April 26, 2012

105. Bem vindos ao Mundo Real ‣ Independência de resolução Como criar gráficos sem ter que criar uma versão por cada densidade?Thursday, April 26, 2012

106. SVG + background-sizeThursday, April 26, 2012

107. Bem vindos ao Mundo Real ‣ Independência de resoluçãoThursday, April 26, 2012

108. Bem vindos ao Mundo Real ‣ Independência de resolução <img class=“weather” src=“ratio.spacer.gif” alt=“Noite nublada”> img.weather { background: url(noitenublada.svg); background-size: 100%; } .no-svg img.weather { width: 320px; height: 320px; }Thursday, April 26, 2012

111. Bem vindos ao Mundo Real ‣ Independência de resolução <img class=“weather” src=“ratio.spacer.gif” alt=“Noite nublada”> img.weather { background: url(sprite.svg); background-size: auto 100%; background-position: 22.5% 0%; }Thursday, April 26, 2012

112. 8000px (100%) 2.5% 5% 7.5% 10% 200px (2.5%)Thursday, April 26, 2012

113. Só para sprites pequenas. O browser mete a imagem “raster” em memória, o que causa um impacto brutal na performance.Thursday, April 26, 2012

114. Bem vindos ao Mundo Real ‣ Independência de resolução Não Esquecer (Pedir para) Activar mod_gzip / mod_deflate nos servidores para ficheiros .svg exemplo original: 192.55KB gzip: 64KB (-33%)Thursday, April 26, 2012

115. DICA Sempre que possível usar vectores (SVG) para gráficos de layout. Evitar sprites grandes.Thursday, April 26, 2012

116. Readaptação de conteúdoThursday, April 26, 2012

117. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo É comum ouvir alguém dizer: “Epá, em ecrãs com menos de 500px, dá um display: none na sidebar e já está!”Thursday, April 26, 2012

118. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo Lembram-se disto? http://cinema.sapo.pt/ http://m.sapo.pt/cinema ?Thursday, April 26, 2012

119. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo Facilmente podíamos pensar: “Ninguém vai querer saber as fontes quando está no telemóvel...”Thursday, April 26, 2012

120. Bem vindos ao Mundo Real ‣ Readaptação de conteúdoThursday, April 26, 2012

121. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo (Progressive disclosure)Thursday, April 26, 2012

122. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo <h3> <span class="for_l for_xl">Rodapé</span> <span class="for_s for_m"> <a class="expandable-trigger mini" href="#rodape-cinema">Rodapé; </a> </span> </h3> <ul class="expandable closed except_l except_xl" id="rodape-cinema"> (...) </ul>Thursday, April 26, 2012

123. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo <h3> <span class="for_l for_xl">Rodapé</span> <span class="for_s for_m"> <a class="expandable-trigger mini" href="#rodape-cinema">Rodapé; </a> </span> </h3> <ul class="expandable closed except_l except_xl" id="rodape-cinema"> (...) </ul>Thursday, April 26, 2012

124. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo <h3> <span class="for_l for_xl">Rodapé</span> <span class="for_s for_m"> <a class="expandable-trigger mini" href="#rodape-cinema">Rodapé; </a> </span> </h3> <ul class="expandable closed except_l except_xl" id="rodape-cinema" (...) </ul>Thursday, April 26, 2012

125. DICA Pensem duas cem vezes antes de remover conteúdo entre versões.Thursday, April 26, 2012

126. Reflows pesados...Thursday, April 26, 2012

127. Bem vindos ao Mundo Real ‣ Reflows pesados Eventos onResize, reflows de layoutThursday, April 26, 2012

128. Bem vindos ao Mundo Real ‣ Reflows pesados Deixando de usar % e usando EMs/PXs...Thursday, April 26, 2012

129. PublicidadeThursday, April 26, 2012

130. Bem vindos ao Mundo Real ‣ Publicidade Longa caminhada... IAB ainda decreta tamanhos em píxeis... Pouca ou nenhuma procura/oferta de formatos flexíveis... Dependentes do mercado...Thursday, April 26, 2012

131. Bem vindos ao Mundo Real ‣ Publicidade Mantivemos zonas normais, trocamos por zonas mobile-friendly na versão S.Thursday, April 26, 2012

132. Recapitulando...Thursday, April 26, 2012

133. DICA “Esquecer” os layouts para dispositivos específicos. Desenhar para o conteúdo.Thursday, April 26, 2012

134. DICA Carregar a imagem de baixa-resolução e melhorá-la quando fizer sentido aumenta a peformance percebida. Apesar dos custos de tráfego (bytes extra).Thursday, April 26, 2012

135. DICA Lazy-loading serve para muito mais do que imagens.Thursday, April 26, 2012

136. DICA Love thy frontend developer. ou... Love thy designer. Discutam, peçam feedback construtivo.Thursday, April 26, 2012

137. DICA Sempre que possível usar vectores (SVG) para gráficos de layout. Evitar sprites grandes. Ligar gzip nos servidores.Thursday, April 26, 2012

138. DICA Pensem duas cem vezes antes de removerem conteúdo entre versões.Thursday, April 26, 2012

139. “Talvez a abordagem que temos, a nossa intuição, a nossa atitude em relação ao meio, como nós o entendemos e definimos é o que realmente impede uma verdadeira evolução.” Dan Rubin in The Manual #1: Off the page Dan Rubin alwaysreadthemanual.comThursday, April 26, 2012

140. Há muito por explorar. Partilhem, experimentem e acima de qualquer outra coisa... Questionem tudo.Thursday, April 26, 2012

141. FIM Obrigado. c b Questões? n a Dúvidas? Críticas?Thursday, April 26, 2012

142. Créditos & Typefaces Futura American Typewriter Chaparral Pro C http://www.flickr.com/photos/drewm/4732738890/ http://www.flickr.com/photos/drakegoodman/6835415392/ http://www.flickr.com/photos/stn1978/6395318885/ http://www.flickr.com/photos/pamhule/5709324762/ http://www.flickr.com/photos/eelkedekker/5339625840/Thursday, April 26, 2012