1.
RESPONSIVE
WEB DESIGN
UMA HISTÓRIA
DAS TRINCHEIRAS
26 abril 2012
André Luís
@andr3
cbna
Thursday, April 26, 2012

2.
http://id.andr3.net
@andr3
me@andr3.net
andre-filipe-luis@telecom.pt
andr3.net
dailyphotowall.net
igive.sapo.pt
mobifeeds.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
‣
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

18.
1998
Thursday, April 26, 2012

19.
reocities.com/capecanaveral/5599/eclipse98.html
reocities.com/capecanaveral/5599/eclipse98.html
csszengarden.com
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.
“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

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.
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

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

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

78.
FICÇÃO (PARA JÁ)
Thursday, April 26, 2012

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.
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 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

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

98.
Independência de
Resolução
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

109.
Thursday, April 26, 2012

110.
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

112.
8000px (100%)
2.5% 5% 7.5% 10%
200px (2.5%)
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

116.
Readaptação de
conteúdo
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

126.
Reflows pesados...
Thursday, April 26, 2012

127.
Bem vindos ao Mundo Real
‣ Reflows pesados
Eventos onResize,
reflows de layout
Thursday, April 26, 2012

128.
Bem vindos ao Mundo Real
‣ Reflows pesados
Deixando de usar % e
usando EMs/PXs...
Thursday, April 26, 2012

129.
Publicidade
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

132.
Recapitulando...
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