Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESPONSIVE                      WEB DESIGN                     UMA HISTÓRIA                     DAS TRINCHEIRAS           ...
http://id.andr3.net                     @andr3                     me@andr3.net                     andre-filipe-luis@tele...
Departamento de Qualidade                     & Usabilidade                     http://ux.sapo.pt                     ID S...
Prefácio                       Como cheguei até aqui?Thursday, April 26, 2012
1998Thursday, April 26, 2012
Thursday, April 26, 2012
Thursday, April 26, 2012
2004Thursday, April 26, 2012
simplebits.com                                     simplebits.comThursday, April 26, 2012
2009Thursday, April 26, 2012
Thursday, April 26, 2012
2012Thursday, April 26, 2012
Thursday, April 26, 2012
Equipa técnicaThursday, April 26, 2012
Programa de festas                         para hojeThursday, April 26, 2012
Programa de Festas           ‣      Prefácio: Como cheguei até aqui?           ‣      Introdução: Porque precisamos mudar?...
Introdução                Porque precisamos mudar?                    E... mudar o quê?Thursday, April 26, 2012
1998Thursday, April 26, 2012
reocities.com/capecanaveral/5599/eclipse98.html              reocities.com/capecanaveral/5599/eclipse98.html              ...
2003Thursday, April 26, 2012
csszengarden.com                                       csszengarden.comThursday, April 26, 2012
csszengarden.com/?cssfile=142/142.css                                                           csszengarden.com/?cssfile=1...
csszengarden.com/?cssfile=046/046.css                                                           csszengarden.com/?cssfile=0...
csszengarden.com/?cssfile=030/030.css                                                           csszengarden.com/?cssfile=0...
2000Thursday, April 26, 2012
alistapart.com/articles/dao/                                                   alistapart.com/articles/dao/Thursday, April...
John Allsopp       in alistapart.com/articles/dao/Thursday, April 26, 2012
“Quando um novo meio copia um       meio já existente, parte do que copia       faz sentido, mas muita da cópia é       fe...
“Quando um novo meio copia um       meio já existente, parte do que copia       faz sentido, mas muita da cópia é       fe...
2011                           (20 anos depois da criação da web)Thursday, April 26, 2012
Dan Rubin                           in The Manual #1: Off the page       Dan Rubin                            alwaysreadth...
“Talvez a abordagem que temos,                           a nossa intuição, a nossa atitude em                           re...
Grelha flexível                           Multimédia flexível                           Media-queriesThursday, April 26, 2...
}                           Grelha flexível                           Multimédia flexível       como                      ...
Porquê?Thursday, April 26, 2012
futurefriend.ly                                      futurefriend.lyThursday, April 26, 2012
futurefriend.ly                                      futurefriend.lyThursday, April 26, 2012
futurefriend.ly                                      futurefriend.lyThursday, April 26, 2012
Imprevisibilidade            O “site mobile”, separado:           http://cinema.sapo.pt/Thursday, April 26, 2012
Imprevisibilidade            O “site mobile”, separado:                                         http://cinema.sapo.pt     ...
Imprevisibilidade           http://cinema.sapo.pt/   http://m.sapo.pt/cinema                                        ?Thurs...
Imprevisibilidade                               Ligação via operador móvel                               GPRS ou 3GThursda...
Imprevisibilidade                           Ligação via WiFi                           +1.5mbit (depende do fornecimento)T...
Imprevisibilidade            O link:           http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...Thursda...
Imprevisibilidade            O link:           http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...       ...
Imprevisibilidade            O link:           http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...       ...
ImprevisibilidadeThursday, April 26, 2012
o que acabámos por fazer...Thursday, April 26, 2012
O que acabámos por fazer...           ‣      Layout “líquido”Thursday, April 26, 2012
O que acabámos por fazer...           ‣      4x “pontos de inflexão”Thursday, April 26, 2012
O que acabámos por fazer...           ‣      4x “pontos de inflexão”Thursday, April 26, 2012
O que acabámos por fazer...           ‣      4x “pontos de inflexão”     S                     M         L      XLThursday...
O que acabámos por fazer...     S                     M           L           XL                               300px      ...
DICA          “Esquecer” os layouts           para dispositivos           específicos.           Desenhar para o          ...
Bem vindos ao                            Mundo Real         Lições, problemas, avisos, etc.Thursday, April 26, 2012
Bem vindos ao Mundo Real                           É tão importante perceber as                           limitações e os ...
Bem vindos ao Mundo Real           Nem todos os browsers suportam tudo o que           vamos precisar...Thursday, April 26...
Bem vindos ao Mundo Real           E é aqui que entram umas boas-práticas que           nos têm valido...Thursday, April 2...
Bem vindos ao Mundo Real           E é aqui que entram umas boas-práticas que           nos têm valido...           Progre...
Bem vindos ao Mundo Real           E é aqui que entram umas boas-práticas que           nos têm valido...           Progre...
Bem vindos ao Mundo Real                    modernizr.com                                    modernizr.comThursday, April ...
Bem vindos ao Mundo Real                    modernizr.com<html class=" js flexbox canvas canvastext webgl no-touch   geoloc...
ImagensThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Imagens:                           ‣   que tamanho carregar?                    ...
Bem vindos ao Mundo Real           ‣      Imagens: que tamanho carregar?Thursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Imagens: que tamanho carregar?               200x113 10.84KB              480x27...
Bem vindos ao Mundo Real           ‣      Imagens: que tamanho carregar?               200x113 10.84KB              480x27...
Bem vindos ao Mundo Real           ‣      Imagens: que tamanho carregar?               200x113 10.84KB              480x27...
Bem vindos ao Mundo Real           ‣      Imagens: como carregá-las?                   hipótese 1: carregar a imagem      ...
Bem vindos ao Mundo Real           ‣      Imagens: como carregá-las?                   hipótese 1: carregar a imagem      ...
Bem vindos ao Mundo Real           ‣      Imagens: como carregá-las?                   hipótese 1: carregar a imagem      ...
Bem vindos ao Mundo Real           ‣      Imagens: como carregá-las?                   hipótese 1: carregar a imagem      ...
Bem vindos ao Mundo Real           ‣      Imagens: como carregá-las?                  hipótese 2: carregar a imagem SD e, ...
Bem vindos ao Mundo Real           ‣      Imagens: como carregá-las?                  hipótese 2: carregar a imagem SD e, ...
Bem vindos ao Mundo Real           ‣      Imagens: como carregá-las?                  hipótese 2: carregar a imagem SD e, ...
Bem vindos ao Mundo Real                    github.com/joshje/Responsive-Enhance                              github.com/j...
DICA                 Carregar a imagem de                 baixa-resolução e                 melhorá-la quando fizer       ...
FICÇÃO (PARA JÁ)Thursday, April 26, 2012
FICÇÃO (PARA JÁ)        <picture alt=“”>            <source src=“versaoSD.jpg”               media=“screen and (max-width:...
Lazy-LoadingThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Lazy-Loading                           1Thursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Lazy-Loading                           1                           2Thursday, Ap...
Bem vindos ao Mundo Real           ‣      Lazy-Loading                           1                           2            ...
Bem vindos ao Mundo Real           ‣      Lazy-Loading                           1          1                           2 ...
Bem vindos ao Mundo Real           ‣      Lazy-Loading                           1          1                           2 ...
Bem vindos ao Mundo Real           ‣      Lazy-Loading                           1          1                           2 ...
Bem vindos ao Mundo Real           ‣      Lazy-Loading               <a class=“self-loader”                  href=“/destaq...
Bem vindos ao Mundo Real           ‣      Lazy-Loading               <a class=“self-loader”                   href=“/desta...
Bem vindos ao Mundo Real           ‣      Lazy-LoadingThursday, April 26, 2012
Thursday, April 26, 2012
DICA                 Lazy-loading serve                 para muito mais do                 que imagens.Thursday, April 26,...
Restantes EquipasThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Restantes Equipas:                           ‣   como trazer toda a gente para o...
Bem vindos ao Mundo Real           ‣      Restantes Equipas: Como trazer toda a                  gente para o “barco”?    ...
Bem vindos ao Mundo Real           ‣      Restantes Equipas: Como trazer toda a                  gente para o “barco”?    ...
Bem vindos ao Mundo Real           ‣      Restantes Equipas: Como trazer toda a                  gente para o “barco”?    ...
DICA                 Love thy frontend                 developer.                 ou...                 Love thy designer....
Independência de                               ResoluçãoThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Independência de resolução                           Antes de mais...           ...
Bem vindos ao Mundo Real           ‣      Independência de resolução                           Há vários significados para...
Bem vindos ao Mundo Real           ‣      Independência de resolução                   Píxel de CSS                       ...
Bem vindos ao Mundo Real           ‣      Independência de resolução                   Píxel de CSS                       ...
Bem vindos ao Mundo Real           ‣      Independência de resolução                   Píxel no dispositivo               ...
Bem vindos ao Mundo Real           ‣      Independência de resolução                   Píxeis independentes da densidade  ...
Bem vindos ao Mundo Real           ‣      Independência de resolução                           Como criar gráficos sem ter...
SVG                                 +                           background-sizeThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Independência de resoluçãoThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Independência de resolução           <img class=“weather”                src=“ra...
Thursday, April 26, 2012
Thursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Independência de resolução           <img class=“weather”                src=“ra...
8000px (100%)                           2.5%    5%       7.5%   10%      200px (2.5%)Thursday, April 26, 2012
Só para sprites pequenas.           O browser mete a imagem “raster” em memória, o           que causa um impacto brutal n...
Bem vindos ao Mundo Real           ‣      Independência de resolução                      Não Esquecer                    ...
DICA                 Sempre que possível                 usar vectores (SVG)                 para gráficos de layout.     ...
Readaptação de                              conteúdoThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Readaptação de conteúdo                     É comum ouvir alguém dizer:         ...
Bem vindos ao Mundo Real           ‣      Readaptação de conteúdo                    Lembram-se disto?          http://cin...
Bem vindos ao Mundo Real           ‣      Readaptação de conteúdo                    Facilmente podíamos pensar:          ...
Bem vindos ao Mundo Real           ‣      Readaptação de conteúdoThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Readaptação de conteúdo                       (Progressive disclosure)Thursday, ...
Bem vindos ao Mundo Real           ‣     Readaptação de conteúdo     <h3>       <span class="for_l for_xl">Rodapé</span>  ...
Bem vindos ao Mundo Real           ‣     Readaptação de conteúdo     <h3>       <span class="for_l for_xl">Rodapé</span>  ...
Bem vindos ao Mundo Real           ‣     Readaptação de conteúdo     <h3>       <span class="for_l for_xl">Rodapé</span>  ...
DICA                 Pensem duas cem                 vezes antes de                 remover conteúdo                 entre...
Reflows pesados...Thursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Reflows pesados                                    Eventos onResize,            ...
Bem vindos ao Mundo Real           ‣      Reflows pesados                                    Deixando de usar % e         ...
PublicidadeThursday, April 26, 2012
Bem vindos ao Mundo Real           ‣      Publicidade                    Longa caminhada...                    IAB ainda d...
Bem vindos ao Mundo Real           ‣      Publicidade                   Mantivemos zonas normais,                   trocam...
Recapitulando...Thursday, April 26, 2012
DICA          “Esquecer” os layouts           para dispositivos           específicos.           Desenhar para o          ...
DICA                 Carregar a imagem de                 baixa-resolução e                 melhorá-la quando fizer       ...
DICA                 Lazy-loading serve                 para muito mais do                 que imagens.Thursday, April 26,...
DICA                 Love thy frontend                 developer.                 ou...                 Love thy designer....
DICA                 Sempre que possível                 usar vectores (SVG)                 para gráficos de layout.     ...
DICA                 Pensem duas cem                 vezes antes de                 removerem conteúdo                 ent...
“Talvez a abordagem que temos,                           a nossa intuição, a nossa atitude em                           re...
Há muito por explorar.                    Partilhem, experimentem e                    acima de qualquer outra coisa...   ...
FIM              Obrigado.          c                                 b                Questões?        n                 ...
Créditos & Typefaces                           Futura                American Typewriter                           Chaparr...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
We're not designing posters, here!
Next
Upcoming SlideShare
We're not designing posters, here!
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • rosanarayssa

    Nov. 26, 2013
  • RicardoNSilva

    May. 30, 2013
  • romeucristovao

    Apr. 19, 2013
  • _and_

    Apr. 8, 2013
  • gvlx

    Apr. 4, 2013
  • joaovieirasantos

    Apr. 4, 2013
  • pedrocustodio

    Apr. 4, 2013
  • mubarocks

    Apr. 4, 2013

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

Views

Total views

2,802

On Slideshare

0

From embeds

0

Number of embeds

18

Actions

Downloads

27

Shares

0

Comments

0

Likes

8

×