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

Responsive Web Design: Uma História das Trincheiras

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

André Luís

April 26, 2012
Tweet

More Decks by André Luís

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. O que acabámos por fazer... ‣ 4x “pontos de in

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

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

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

    fixo S M XL L Thursday, April 26, 2012
  9. 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
  10. Bem vindos ao Mundo Real Nem todos os browsers suportam

    tudo o que vamos precisar... Thursday, April 26, 2012
  11. Bem vindos ao Mundo Real E é aqui que entram

    umas boas-práticas que nos têm valido... Thursday, April 26, 2012
  12. 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
  13. 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
  14. 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
  15. Bem vindos ao Mundo Real ‣ Imagens: ‣ que tamanho

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

    200x113 10.84KB (16:9) 480x270 36.77KB (16:9) Thursday, April 26, 2012
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. Bem vindos ao Mundo Real ‣ Lazy-Loading 1 2 3

    1 2 3 Thursday, April 26, 2012
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. DICA Love thy frontend developer. ou... Love thy designer. Discutam,

    peçam feedback construtivo. Thursday, April 26, 2012
  34. ‣ Independência de resolução Bem vindos ao Mundo Real Antes

    de mais... Um pixel não é um pixel. Thursday, April 26, 2012
  35. ‣ 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
  36. ‣ Independência de resolução Bem vindos ao Mundo Real Píxel

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

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

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

    independentes da densidade 320px 320px Thursday, April 26, 2012
  40. ‣ 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
  41. ‣ 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
  42. ‣ 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
  43. 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
  44. ‣ 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
  45. DICA Sempre que possível usar vectores (SVG) para grá cos

    de layout. Evitar sprites grandes. Thursday, April 26, 2012
  46. ‣ 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
  47. ‣ 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
  48. ‣ 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
  49. ‣ 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
  50. ‣ 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
  51. ‣ 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
  52. DICA Pensem duas cem vezes antes de remover conteúdo entre

    versões. duas Thursday, April 26, 2012
  53. ‣ Re ows pesados Bem vindos ao Mundo Real Eventos

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

    de usar % e usando EMs/PXs... Thursday, April 26, 2012
  55. ‣ 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
  56. ‣ Publicidade Bem vindos ao Mundo Real Mantivemos zonas normais,

    trocamos por zonas mobile-friendly na versão S. Thursday, April 26, 2012
  57. 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
  58. DICA Love thy frontend developer. ou... Love thy designer. Discutam,

    peçam feedback construtivo. Thursday, April 26, 2012
  59. DICA Sempre que possível usar vectores (SVG) para grá cos

    de layout. Evitar sprites grandes. Ligar gzip nos servidores. Thursday, April 26, 2012
  60. DICA Pensem duas cem vezes antes de removerem conteúdo entre

    versões. duas Thursday, April 26, 2012
  61. 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
  62. Há muito por explorar. Partilhem, experimentem e acima de qualquer

    outra coisa... Questionem tudo. Thursday, April 26, 2012
  63. 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