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

Responsive Web Design: Uma História das Trincheiras

3de5aa25b59d3680fcbfd5d78bb984c8?s=47 André Luís
April 26, 2012

Responsive Web Design: Uma História das Trincheiras

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

3de5aa25b59d3680fcbfd5d78bb984c8?s=128

André Luís

April 26, 2012
Tweet

More Decks by André Luís

Other Decks in Design

Transcript

  1. RESPONSIVE UMA HISTÓRIA DAS TRINCHEIRAS WEB DESIGN André Luís @andr3

    26 abril 2012 cbna Thursday, April 26, 2012
  2. http://id.andr3.net @andr3 me@andr3.net andre- lipe-luis@telecom.pt mobifeeds.net igive.sapo.pt dailyphotowall.net andr3.net Thursday,

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

    SAPO http://www.sapo.pt Thursday, April 26, 2012
  4. Prefácio Como cheguei até aqui? Thursday, April 26, 2012

  5. 1998 Thursday, April 26, 2012

  6. Thursday, April 26, 2012

  7. Thursday, April 26, 2012

  8. 2004 Thursday, April 26, 2012

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

  10. 2009 Thursday, April 26, 2012

  11. Thursday, April 26, 2012

  12. 2012 Thursday, April 26, 2012

  13. Thursday, April 26, 2012

  14. Equipa técnica Thursday, April 26, 2012

  15. Programa de festas para hoje Thursday, 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 ‣ Re ows 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
  18. 1998 Thursday, April 26, 2012

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

  20. 2003 Thursday, April 26, 2012

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

  22. csszengarden.com/?cssfile=142/142.css csszengarden.com/?cssfile=142/142.css Thursday, April 26, 2012

  23. csszengarden.com/?cssfile=046/046.css csszengarden.com/?cssfile=046/046.css Thursday, April 26, 2012

  24. csszengarden.com/?cssfile=030/030.css csszengarden.com/?cssfile=030/030.css Thursday, April 26, 2012

  25. 2000 Thursday, 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. John Allsopp in alistapart.com/articles/dao/ “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. Thursday, April 26, 2012
  29. John Allsopp in alistapart.com/articles/dao/ “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. “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.” 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 alwaysreadthemanual.com

    Dan Rubin Thursday, April 26, 2012
  32. Dan Rubin in The Manual #1: Off the page alwaysreadthemanual.com

    “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 Thursday, April 26, 2012
  33. Grelha exível Multimédia exível Media-queries Thursday, April 26, 2012

  34. Grelha exível Multimédia exível Media-queries }como Thursday, April 26, 2012

  35. Porquê? Thursday, April 26, 2012

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

  37. futurefriend.ly futurefriend.ly Thursday, April 26, 2012

  38. futurefriend.ly futurefriend.ly Thursday, April 26, 2012

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

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

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

  42. Ligação via operador móvel GPRS ou 3G Imprevisibilidade Thursday, April

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

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

  45. http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera... e-mail pode ser partilhado via... etc. O link: Imprevisibilidade

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

    e lido em... Thursday, April 26, 2012
  47. Imprevisibilidade Thursday, 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 in

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

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

    exão” L S M XL Thursday, April 26, 2012
  53. O que acabámos por fazer... 300px fixo 300px fixo 300px

    fixo S M XL L Thursday, April 26, 2012
  54. DICA Esquecer” os layouts para dispositivos especí cos. 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.com Thursday, April 26,

    2012
  62. Bem vindos ao Mundo Real modernizr.com modernizr.com <html class=" js

    flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> Thursday, April 26, 2012
  63. Imagens Thursday, 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 (16:9) 480x270 36.77KB (16:9) Thursday, April 26, 2012
  67. Bem vindos ao Mundo Real ‣ Imagens: que tamanho carregar?

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

    200x113 10.84KB (16:9) 480x270 36.77KB (16:9) S M XL L S (HD) Thursday, April 26, 2012
  69. Bem vindos ao Mundo Real ‣ Imagens: como carregá-las? <span

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

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

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

    class=“img” alt=“” data-srcSD=“versaoSD.jpg” data-srcHD=“versaoHD.jpg”> </span> hipótese 1: carregar a imagem certa via JavaScript <img src=“versaoHD.jpg” alt=“”> javascript 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-Enhance Thursday, April 26,

    2012
  77. DICA Carregar a imagem de baixa-resolução e melhorá-la quando zer

    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. <picture alt=“”> <source src=“versaoSD.jpg” media=“screen and (max-width:500px)”> <source src=“versaoHD.jpg” media=“screen

    and (min-width:500px)”> </picture> FICÇÃO (PARA JÁ) Thursday, April 26, 2012
  80. Lazy-Loading Thursday, April 26, 2012

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

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

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

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

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

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

    1 2 3 Thursday, 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> Pedido AJAX: /so/destaques/entretenimento Ao fazer scroll... Thursday, April 26, 2012
  89. Bem vindos ao Mundo Real ‣ Lazy-Loading Thursday, April 26,

    2012
  90. Thursday, April 26, 2012

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

    April 26, 2012
  92. Restantes Equipas Thursday, 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 identi car 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 zerem 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ção Thursday, April 26, 2012

  99. ‣ Independência de resolução Bem vindos ao Mundo Real Antes

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

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

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

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

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

    independentes da densidade 320px 320px Thursday, April 26, 2012
  105. ‣ Independência de resolução Bem vindos ao Mundo Real Como

    criar grá cos sem ter que criar uma versão por cada densidade? Thursday, April 26, 2012
  106. SVG + background-size Thursday, April 26, 2012

  107. ‣ Independência de resolução Bem vindos ao Mundo Real Thursday,

    April 26, 2012
  108. ‣ Independência de resolução Bem vindos ao Mundo Real <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. Thursday, April 26, 2012

  110. Thursday, April 26, 2012

  111. ‣ Independência de resolução Bem vindos ao Mundo Real <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%) 200px (2.5%) 2.5% 5% 7.5% 10% 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. ‣ Independência de resolução Bem vindos ao Mundo Real Não

    Esquecer (Pedir para) Activar mod_gzip / mod_de ate nos servidores para cheiros .svg exemplo original: 192.55KB gzip: 64KB (-33%) Thursday, April 26, 2012
  115. DICA Sempre que possível usar vectores (SVG) para grá cos

    de layout. Evitar sprites grandes. Thursday, April 26, 2012
  116. Readaptação de conteúdo Thursday, April 26, 2012

  117. ‣ Readaptação de conteúdo Bem vindos ao Mundo Real É

    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. ‣ Readaptação de conteúdo Bem vindos ao Mundo Real http://m.sapo.pt/cinema

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

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

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

    disclosure) Thursday, April 26, 2012
  122. ‣ Readaptação de conteúdo Bem vindos ao Mundo Real <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. ‣ Readaptação de conteúdo Bem vindos ao Mundo Real <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. ‣ Readaptação de conteúdo Bem vindos ao Mundo Real <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. duas Thursday, April 26, 2012
  126. Reflows pesados... Thursday, April 26, 2012

  127. ‣ Re ows pesados Bem vindos ao Mundo Real Eventos

    onResize, re ows de layout Thursday, April 26, 2012
  128. ‣ Re ows pesados Bem vindos ao Mundo Real Deixando

    de usar % e usando EMs/PXs... Thursday, April 26, 2012
  129. Publicidade Thursday, April 26, 2012

  130. ‣ Publicidade Bem vindos ao Mundo Real Longa caminhada... IAB

    ainda decreta tamanhos em píxeis... Pouca ou nenhuma procura/oferta de formatos exíveis... Dependentes do mercado... Thursday, April 26, 2012
  131. ‣ Publicidade Bem vindos ao Mundo Real 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í cos. Desenhar para

    o conteúdo. “ Thursday, April 26, 2012
  134. DICA Carregar a imagem de baixa-resolução e melhorá-la quando zer

    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á cos

    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. duas Thursday, April 26, 2012
  139. Dan Rubin in The Manual #1: Off the page alwaysreadthemanual.com

    “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 Thursday, 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. Questões? Dúvidas? Críticas? c b n a Thursday,

    April 26, 2012
  142. Créditos & Typefaces Futura Chaparral Pro American Typewriter 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/ C Thursday, April 26, 2012