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

1,369 views
1,314 views

Published on

Presentation in Portuguese delivered at ESAD Matosinhos, by invitation of Tiago Pedras and the Post-Grad. in Webdesign.

It's the history of the decisions we had to make while the sapo.pt homepage (the most popular portuguese website) was made. The website would be launched in july 2012, with a lot of improvements which sadly, aren't documented here.

http://www.esad.pt

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • Obrigado, André, pela partilha! :) Interessante, fluido e útil.
    (Caso seja relevante para a próxima revisão, há uma pequena gralha nas págs. 77 e 134: 'peformance'.)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,369
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

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

  1. 1. RESPONSIVE WEB DESIGN UMA HISTÓRIA DAS TRINCHEIRAS 26 abril 2012 André Luís @andr3 cbnaThursday, April 26, 2012
  2. 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. 3. Departamento de Qualidade & Usabilidade http://ux.sapo.pt ID SAPO Homepage do SAPO http://www.sapo.ptThursday, April 26, 2012
  4. 4. Prefácio Como cheguei até aqui?Thursday, April 26, 2012
  5. 5. 1998Thursday, April 26, 2012
  6. 6. Thursday, April 26, 2012
  7. 7. Thursday, April 26, 2012
  8. 8. 2004Thursday, April 26, 2012
  9. 9. simplebits.com simplebits.comThursday, April 26, 2012
  10. 10. 2009Thursday, April 26, 2012
  11. 11. Thursday, April 26, 2012
  12. 12. 2012Thursday, April 26, 2012
  13. 13. Thursday, April 26, 2012
  14. 14. Equipa técnicaThursday, April 26, 2012
  15. 15. Programa de festas para hojeThursday, April 26, 2012
  16. 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. 17. Introdução Porque precisamos mudar? E... mudar o quê?Thursday, April 26, 2012
  18. 18. 1998Thursday, April 26, 2012
  19. 19. reocities.com/capecanaveral/5599/eclipse98.html reocities.com/capecanaveral/5599/eclipse98.html csszengarden.comThursday, April 26, 2012
  20. 20. 2003Thursday, April 26, 2012
  21. 21. csszengarden.com csszengarden.comThursday, April 26, 2012
  22. 22. csszengarden.com/?cssfile=142/142.css csszengarden.com/?cssfile=142/142.cssThursday, April 26, 2012
  23. 23. csszengarden.com/?cssfile=046/046.css csszengarden.com/?cssfile=046/046.cssThursday, April 26, 2012
  24. 24. csszengarden.com/?cssfile=030/030.css csszengarden.com/?cssfile=030/030.cssThursday, April 26, 2012
  25. 25. 2000Thursday, April 26, 2012
  26. 26. alistapart.com/articles/dao/ alistapart.com/articles/dao/Thursday, April 26, 2012
  27. 27. John Allsopp in alistapart.com/articles/dao/Thursday, April 26, 2012
  28. 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. 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. 30. 2011 (20 anos depois da criação da web)Thursday, April 26, 2012
  31. 31. Dan Rubin in The Manual #1: Off the page Dan Rubin alwaysreadthemanual.comThursday, April 26, 2012
  32. 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. 33. Grelha flexível Multimédia flexível Media-queriesThursday, April 26, 2012
  34. 34. } Grelha flexível Multimédia flexível como Media-queriesThursday, April 26, 2012
  35. 35. Porquê?Thursday, April 26, 2012
  36. 36. futurefriend.ly futurefriend.lyThursday, April 26, 2012
  37. 37. futurefriend.ly futurefriend.lyThursday, April 26, 2012
  38. 38. futurefriend.ly futurefriend.lyThursday, April 26, 2012
  39. 39. Imprevisibilidade O “site mobile”, separado: http://cinema.sapo.pt/Thursday, April 26, 2012
  40. 40. Imprevisibilidade O “site mobile”, separado: http://cinema.sapo.pt http://cinema.sapo.pt/ http://m.sapo.pt/cinemaThursday, April 26, 2012
  41. 41. Imprevisibilidade http://cinema.sapo.pt/ http://m.sapo.pt/cinema ?Thursday, April 26, 2012
  42. 42. Imprevisibilidade Ligação via operador móvel GPRS ou 3GThursday, April 26, 2012
  43. 43. Imprevisibilidade Ligação via WiFi +1.5mbit (depende do fornecimento)Thursday, April 26, 2012
  44. 44. Imprevisibilidade O link: http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...Thursday, April 26, 2012
  45. 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. 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. 47. ImprevisibilidadeThursday, April 26, 2012
  48. 48. o que acabámos por fazer...Thursday, April 26, 2012
  49. 49. O que acabámos por fazer... ‣ Layout “líquido”Thursday, April 26, 2012
  50. 50. O que acabámos por fazer... ‣ 4x “pontos de inflexão”Thursday, April 26, 2012
  51. 51. O que acabámos por fazer... ‣ 4x “pontos de inflexão”Thursday, April 26, 2012
  52. 52. O que acabámos por fazer... ‣ 4x “pontos de inflexão” S M L XLThursday, April 26, 2012
  53. 53. O que acabámos por fazer... S M L XL 300px 300px 300px fixo fixo fixoThursday, April 26, 2012
  54. 54. DICA “Esquecer” os layouts para dispositivos específicos. Desenhar para o conteúdo.Thursday, April 26, 2012
  55. 55. Bem vindos ao Mundo Real Lições, problemas, avisos, etc.Thursday, April 26, 2012
  56. 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. 57. Bem vindos ao Mundo Real Nem todos os browsers suportam tudo o que vamos precisar...Thursday, April 26, 2012
  58. 58. Bem vindos ao Mundo Real E é aqui que entram umas boas-práticas que nos têm valido...Thursday, April 26, 2012
  59. 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. 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. 61. Bem vindos ao Mundo Real modernizr.com modernizr.comThursday, April 26, 2012
  62. 62. Bem vindos ao Mundo Real modernizr.com<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradiusboxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransformscsstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> modernizr.comThursday, April 26, 2012
  63. 63. ImagensThursday, April 26, 2012
  64. 64. Bem vindos ao Mundo Real ‣ Imagens: ‣ que tamanho carregar? ‣ como carregá-las?Thursday, April 26, 2012
  65. 65. Bem vindos ao Mundo Real ‣ Imagens: que tamanho carregar?Thursday, April 26, 2012
  66. 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. 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. 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. 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. 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
  71. 71. 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
  72. 72. 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. 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. 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. 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. 76. Bem vindos ao Mundo Real github.com/joshje/Responsive-Enhance github.com/joshje/Responsive-EnhanceThursday, April 26, 2012
  77. 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. 78. FICÇÃO (PARA JÁ)Thursday, April 26, 2012
  79. 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. 80. Lazy-LoadingThursday, April 26, 2012
  81. 81. Bem vindos ao Mundo Real ‣ Lazy-Loading 1Thursday, April 26, 2012
  82. 82. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 2Thursday, April 26, 2012
  83. 83. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 2 3Thursday, April 26, 2012
  84. 84. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 1 2 3Thursday, April 26, 2012
  85. 85. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 1 2 2 3Thursday, April 26, 2012
  86. 86. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 1 2 2 3 3Thursday, April 26, 2012
  87. 87. Bem vindos ao Mundo Real ‣ Lazy-Loading <a class=“self-loader” href=“/destaques/entretenimento”> Carregar: Destaques </a>Thursday, April 26, 2012
  88. 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. 89. Bem vindos ao Mundo Real ‣ Lazy-LoadingThursday, April 26, 2012
  90. 90. Thursday, April 26, 2012
  91. 91. DICA Lazy-loading serve para muito mais do que imagens.Thursday, April 26, 2012
  92. 92. Restantes EquipasThursday, April 26, 2012
  93. 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. 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. 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. 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. 97. DICA Love thy frontend developer. ou... Love thy designer. Discutam, peçam feedback construtivo.Thursday, April 26, 2012
  98. 98. Independência de ResoluçãoThursday, April 26, 2012
  99. 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. 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. 101. Bem vindos ao Mundo Real ‣ Independência de resolução Píxel de CSS width: 300px; 300pxThursday, April 26, 2012
  102. 102. Bem vindos ao Mundo Real ‣ Independência de resolução Píxel de CSS width: 300px; 300px 300pxThursday, April 26, 2012
  103. 103. Bem vindos ao Mundo Real ‣ Independência de resolução Píxel no dispositivo 320px 640px (mais dpis)Thursday, April 26, 2012
  104. 104. Bem vindos ao Mundo Real ‣ Independência de resolução Píxeis independentes da densidade 320px 320pxThursday, April 26, 2012
  105. 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. 106. SVG + background-sizeThursday, April 26, 2012
  107. 107. Bem vindos ao Mundo Real ‣ Independência de resoluçãoThursday, April 26, 2012
  108. 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
  109. 109. Thursday, April 26, 2012
  110. 110. Thursday, April 26, 2012
  111. 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. 112. 8000px (100%) 2.5% 5% 7.5% 10% 200px (2.5%)Thursday, April 26, 2012
  113. 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. 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. 115. DICA Sempre que possível usar vectores (SVG) para gráficos de layout. Evitar sprites grandes.Thursday, April 26, 2012
  116. 116. Readaptação de conteúdoThursday, April 26, 2012
  117. 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. 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. 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. 120. Bem vindos ao Mundo Real ‣ Readaptação de conteúdoThursday, April 26, 2012
  121. 121. Bem vindos ao Mundo Real ‣ Readaptação de conteúdo (Progressive disclosure)Thursday, April 26, 2012
  122. 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. 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. 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. 125. DICA Pensem duas cem vezes antes de remover conteúdo entre versões.Thursday, April 26, 2012
  126. 126. Reflows pesados...Thursday, April 26, 2012
  127. 127. Bem vindos ao Mundo Real ‣ Reflows pesados Eventos onResize, reflows de layoutThursday, April 26, 2012
  128. 128. Bem vindos ao Mundo Real ‣ Reflows pesados Deixando de usar % e usando EMs/PXs...Thursday, April 26, 2012
  129. 129. PublicidadeThursday, April 26, 2012
  130. 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. 131. Bem vindos ao Mundo Real ‣ Publicidade Mantivemos zonas normais, trocamos por zonas mobile-friendly na versão S.Thursday, April 26, 2012
  132. 132. Recapitulando...Thursday, April 26, 2012
  133. 133. DICA “Esquecer” os layouts para dispositivos específicos. Desenhar para o conteúdo.Thursday, April 26, 2012
  134. 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. 135. DICA Lazy-loading serve para muito mais do que imagens.Thursday, April 26, 2012
  136. 136. DICA Love thy frontend developer. ou... Love thy designer. Discutam, peçam feedback construtivo.Thursday, April 26, 2012
  137. 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. 138. DICA Pensem duas cem vezes antes de removerem conteúdo entre versões.Thursday, April 26, 2012
  139. 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. 140. Há muito por explorar. Partilhem, experimentem e acima de qualquer outra coisa... Questionem tudo.Thursday, April 26, 2012
  141. 141. FIM Obrigado. c b Questões? n a Dúvidas? Críticas?Thursday, April 26, 2012
  142. 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

×