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
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. Introdução
Porque precisamos mudar?
E... mudar o quê?
Thursday, April 26, 2012
27. John Allsopp
in alistapart.com/articles/dao/
Thursday, April 26, 2012
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. “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. 2011
(20 anos depois da criação da web)
Thursday, April 26, 2012
31. Dan Rubin
in The Manual #1: Off the page
Dan Rubin
alwaysreadthemanual.com
Thursday, April 26, 2012
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.com
Thursday, April 26, 2012
33. Grelha flexível
Multimédia flexível
Media-queries
Thursday, April 26, 2012
34. }
Grelha flexível
Multimédia flexível como
Media-queries
Thursday, April 26, 2012
39. Imprevisibilidade
O “site mobile”, separado:
http://cinema.sapo.pt/
Thursday, April 26, 2012
40. Imprevisibilidade
O “site mobile”, separado:
http://cinema.sapo.pt
http://cinema.sapo.pt/ http://m.sapo.pt/cinema
Thursday, April 26, 2012
41. Imprevisibilidade
http://cinema.sapo.pt/ http://m.sapo.pt/cinema
?
Thursday, April 26, 2012
42. Imprevisibilidade
Ligação via operador móvel
GPRS ou 3G
Thursday, April 26, 2012
43. Imprevisibilidade
Ligação via WiFi
+1.5mbit (depende do fornecimento)
Thursday, April 26, 2012
44. Imprevisibilidade
O link:
http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...
Thursday, April 26, 2012
45. Imprevisibilidade
O link:
http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...
pode ser partilhado via...
etc.
e-mail
Thursday, April 26, 2012
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
49. O que acabámos por fazer...
‣ Layout “líquido”
Thursday, April 26, 2012
50. O que acabámos por fazer...
‣ 4x “pontos de inflexão”
Thursday, April 26, 2012
51. O que acabámos por fazer...
‣ 4x “pontos de inflexão”
Thursday, April 26, 2012
52. O que acabámos por fazer...
‣ 4x “pontos de inflexão”
S M L XL
Thursday, April 26, 2012
53. O que acabámos por fazer...
S M L XL
300px 300px 300px
fixo fixo fixo
Thursday, April 26, 2012
54. DICA
“Esquecer” os layouts
para dispositivos
específicos.
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
<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">
modernizr.com
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 480x270 36.77KB
(16:9) (16:9)
Thursday, April 26, 2012
67. Bem vindos ao Mundo Real
‣ Imagens: que tamanho carregar?
200x113 10.84KB 480x270 36.77KB
(16:9) (16:9)
S
M L XL
Thursday, April 26, 2012
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 XL
Thursday, April 26, 2012
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. 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. 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. 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. 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 fizer
sentido aumenta a
peformance percebida.
Apesar dos custos de tráfego (bytes extra).
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 1
2
3
Thursday, April 26, 2012
85. Bem vindos ao Mundo Real
‣ Lazy-Loading
1 1
2 2
3
Thursday, April 26, 2012
86. Bem vindos ao Mundo Real
‣ Lazy-Loading
1 1
2 2
3 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>
Ao fazer scroll...
Pedido AJAX: /so/destaques/entretenimento
Thursday, April 26, 2012
89. Bem vindos ao Mundo Real
‣ Lazy-Loading
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 identificar 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 fizerem 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
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. 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 densidade
Thursday, April 26, 2012
101. Bem vindos ao Mundo Real
‣ Independência de resolução
Píxel de CSS
width: 300px;
300px
Thursday, April 26, 2012
102. Bem vindos ao Mundo Real
‣ Independência de resolução
Píxel de CSS
width: 300px;
300px
300px
Thursday, April 26, 2012
103. Bem vindos ao Mundo Real
‣ Independência de resolução
Píxel no dispositivo
320px 640px
(mais dpis)
Thursday, April 26, 2012
104. Bem vindos ao Mundo Real
‣ Independência de resolução
Píxeis independentes da densidade
320px 320px
Thursday, April 26, 2012
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. SVG
+
background-size
Thursday, April 26, 2012
107. Bem vindos ao Mundo Real
‣ Independência de resolução
Thursday, April 26, 2012
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
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
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. 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. DICA
Sempre que possível
usar vectores (SVG)
para gráficos de layout.
Evitar sprites grandes.
Thursday, April 26, 2012
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. 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. 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. Bem vindos ao Mundo Real
‣ Readaptação de conteúdo
Thursday, April 26, 2012
121. Bem vindos ao Mundo Real
‣ Readaptação de conteúdo
(Progressive disclosure)
Thursday, April 26, 2012
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. 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. 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. DICA
Pensem duas cem
vezes antes de
remover conteúdo
entre versões.
Thursday, April 26, 2012
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. Bem vindos ao Mundo Real
‣ Publicidade
Mantivemos zonas normais,
trocamos por zonas mobile-friendly
na versão S.
Thursday, April 26, 2012
133. DICA
“Esquecer” os layouts
para dispositivos
específicos.
Desenhar para o
conteúdo.
Thursday, April 26, 2012
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. 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áficos 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.
Thursday, April 26, 2012
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.com
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. c
b
Questões? n
a
Dúvidas?
Críticas?
Thursday, April 26, 2012
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