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

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