responsive web design: uma história das trincheiras (sapo.pt)
DESCRIPTION
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.ptTRANSCRIPT
![Page 1: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/1.jpg)
RESPONSIVE
UMA HISTÓRIADAS TRINCHEIRAS
WEB DESIGN
André Luís@andr3
26 abril 2012
cbnaThursday, April 26, 2012
![Page 2: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/2.jpg)
http://id.andr3.net
@[email protected][email protected]
mobifeeds.net
igive.sapo.pt
dailyphotowall.net
andr3.net
Thursday, April 26, 2012
![Page 3: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/3.jpg)
Departamento de Qualidade & Usabilidadehttp://ux.sapo.pt
ID SAPOHomepage do SAPOhttp://www.sapo.pt
Thursday, April 26, 2012
![Page 4: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/4.jpg)
PrefácioComo cheguei até aqui?
Thursday, April 26, 2012
![Page 5: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/5.jpg)
1998Thursday, April 26, 2012
![Page 6: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/6.jpg)
Thursday, April 26, 2012
![Page 7: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/7.jpg)
Thursday, April 26, 2012
![Page 8: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/8.jpg)
2004Thursday, April 26, 2012
![Page 10: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/10.jpg)
2009Thursday, April 26, 2012
![Page 11: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/11.jpg)
Thursday, April 26, 2012
![Page 12: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/12.jpg)
2012Thursday, April 26, 2012
![Page 13: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/13.jpg)
Thursday, April 26, 2012
![Page 14: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/14.jpg)
Equipa técnica
Thursday, April 26, 2012
![Page 15: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/15.jpg)
Programa de festas para hoje
Thursday, April 26, 2012
![Page 16: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/16.jpg)
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
![Page 17: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/17.jpg)
IntroduçãoPorque precisamos mudar?
E... mudar o quê?
Thursday, April 26, 2012
![Page 18: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/18.jpg)
1998Thursday, April 26, 2012
![Page 19: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/19.jpg)
reocities.com/capecanaveral/5599/eclipse98.html
csszengarden.comreocities.com/capecanaveral/5599/eclipse98.htmlThursday, April 26, 2012
![Page 20: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/20.jpg)
2003Thursday, April 26, 2012
![Page 21: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/21.jpg)
csszengarden.com
csszengarden.comThursday, April 26, 2012
![Page 22: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/22.jpg)
csszengarden.com/?cssfile=142/142.css
csszengarden.com/?cssfile=142/142.cssThursday, April 26, 2012
![Page 23: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/23.jpg)
csszengarden.com/?cssfile=046/046.css
csszengarden.com/?cssfile=046/046.cssThursday, April 26, 2012
![Page 24: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/24.jpg)
csszengarden.com/?cssfile=030/030.css
csszengarden.com/?cssfile=030/030.cssThursday, April 26, 2012
![Page 25: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/25.jpg)
2000Thursday, April 26, 2012
![Page 26: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/26.jpg)
alistapart.com/articles/dao/
alistapart.com/articles/dao/Thursday, April 26, 2012
![Page 27: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/27.jpg)
John Allsoppin alistapart.com/articles/dao/
Thursday, April 26, 2012
![Page 28: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/28.jpg)
John Allsoppin 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
![Page 29: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/29.jpg)
John Allsoppin 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
![Page 30: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/30.jpg)
2011(20 anos depois da criação da web)
Thursday, April 26, 2012
![Page 31: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/31.jpg)
Dan Rubin in The Manual #1: Off the page alwaysreadthemanual.com
Dan Rubin
Thursday, April 26, 2012
![Page 32: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/32.jpg)
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
![Page 33: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/33.jpg)
Grelha !exível
Multimédia !exível
Media-queries
Thursday, April 26, 2012
![Page 34: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/34.jpg)
Grelha !exível
Multimédia !exível
Media-queries} como
Thursday, April 26, 2012
![Page 35: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/35.jpg)
Porquê?
Thursday, April 26, 2012
![Page 36: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/36.jpg)
futurefriend.ly
futurefriend.lyThursday, April 26, 2012
![Page 37: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/37.jpg)
futurefriend.ly
futurefriend.lyThursday, April 26, 2012
![Page 38: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/38.jpg)
futurefriend.ly
futurefriend.lyThursday, April 26, 2012
![Page 39: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/39.jpg)
O “site mobile”, separado:
Imprevisibilidade
http://cinema.sapo.pt/
Thursday, April 26, 2012
![Page 40: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/40.jpg)
O “site mobile”, separado:
Imprevisibilidade
http://cinema.sapo.pt/
http://cinema.sapo.pt
http://m.sapo.pt/cinema
Thursday, April 26, 2012
![Page 41: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/41.jpg)
Imprevisibilidade
http://m.sapo.pt/cinemahttp://cinema.sapo.pt/
?
Thursday, April 26, 2012
![Page 42: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/42.jpg)
Ligação via operador móvelGPRS ou 3G
Imprevisibilidade
Thursday, April 26, 2012
![Page 43: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/43.jpg)
Ligação via WiFi+1.5mbit (depende do fornecimento)
Imprevisibilidade
Thursday, April 26, 2012
![Page 44: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/44.jpg)
http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...O link:
Imprevisibilidade
Thursday, April 26, 2012
![Page 45: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/45.jpg)
http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...
pode ser partilhado via...
etc.
O link:
Imprevisibilidade
Thursday, April 26, 2012
![Page 46: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/46.jpg)
http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...
pode ser partilhado via...
etc.
O link:
Imprevisibilidade
e lido em...
Thursday, April 26, 2012
![Page 47: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/47.jpg)
Imprevisibilidade
Thursday, April 26, 2012
![Page 48: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/48.jpg)
o que acabámos por fazer...
Thursday, April 26, 2012
![Page 49: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/49.jpg)
O que acabámos por fazer...
‣ Layout “líquido”
Thursday, April 26, 2012
![Page 50: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/50.jpg)
O que acabámos por fazer...
‣ 4x “pontos de in!exão”
Thursday, April 26, 2012
![Page 51: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/51.jpg)
O que acabámos por fazer...
‣ 4x “pontos de in!exão”
Thursday, April 26, 2012
![Page 52: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/52.jpg)
O que acabámos por fazer...
‣ 4x “pontos de in!exão”
LS M XL
Thursday, April 26, 2012
![Page 53: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/53.jpg)
O que acabámos por fazer...
300pxfixo
300pxfixo
300pxfixo
S M XLL
Thursday, April 26, 2012
![Page 54: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/54.jpg)
DICA
Esquecer” os layouts para dispositivos especí!cos.Desenhar para o conteúdo.
“
Thursday, April 26, 2012
![Page 55: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/55.jpg)
Bem vindos aoMundo Real
Lições, problemas, avisos, etc.
Thursday, April 26, 2012
![Page 56: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/56.jpg)
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
![Page 57: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/57.jpg)
Bem vindos ao Mundo Real
Nem todos os browsers suportam tudo o que vamos precisar...
Thursday, April 26, 2012
![Page 58: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/58.jpg)
Bem vindos ao Mundo Real
E é aqui que entram umas boas-práticas que nos têm valido...
Thursday, April 26, 2012
![Page 59: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/59.jpg)
Bem vindos ao Mundo Real
E é aqui que entram umas boas-práticas que nos têm valido...
Progressive EnhancementComeçar com uma versão básica e ir melhorando conforme houver suporte.
Thursday, April 26, 2012
![Page 60: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/60.jpg)
Bem vindos ao Mundo Real
E é aqui que entram umas boas-práticas que nos têm valido...
Progressive EnhancementComeçar com uma versão básica e ir melhorando conforme houver suporte.
Graceful degradationUtilizar 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
![Page 61: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/61.jpg)
Bem vindos ao Mundo Realmodernizr.com
modernizr.comThursday, April 26, 2012
![Page 62: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/62.jpg)
Bem vindos ao Mundo Realmodernizr.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
![Page 63: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/63.jpg)
Imagens
Thursday, April 26, 2012
![Page 64: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/64.jpg)
Bem vindos ao Mundo Real
‣ Imagens:
‣ que tamanho carregar?
‣ como carregá-las?
Thursday, April 26, 2012
![Page 65: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/65.jpg)
Bem vindos ao Mundo Real
‣ Imagens: que tamanho carregar?
Thursday, April 26, 2012
![Page 66: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/66.jpg)
Bem vindos ao Mundo Real
‣ Imagens: que tamanho carregar?
200x113 10.84KB(16:9)
480x270 36.77KB(16:9)
Thursday, April 26, 2012
![Page 67: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/67.jpg)
Bem vindos ao Mundo Real
‣ Imagens: que tamanho carregar?
200x113 10.84KB(16:9)
480x270 36.77KB(16:9)
S
M XLLThursday, April 26, 2012
![Page 68: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/68.jpg)
Bem vindos ao Mundo Real
‣ Imagens: que tamanho carregar?
200x113 10.84KB(16:9)
480x270 36.77KB(16:9)
S
M XLLS (HD)
Thursday, April 26, 2012
![Page 69: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/69.jpg)
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
![Page 70: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/70.jpg)
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
![Page 71: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/71.jpg)
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
![Page 72: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/72.jpg)
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
![Page 73: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/73.jpg)
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
![Page 74: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/74.jpg)
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
![Page 75: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/75.jpg)
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
![Page 76: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/76.jpg)
Bem vindos ao Mundo Real
github.com/joshje/Responsive-Enhance
github.com/joshje/Responsive-Enhance
Thursday, April 26, 2012
![Page 77: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/77.jpg)
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
![Page 78: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/78.jpg)
FICÇÃO (PARA JÁ)
Thursday, April 26, 2012
![Page 79: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/79.jpg)
<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
![Page 80: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/80.jpg)
Lazy-Loading
Thursday, April 26, 2012
![Page 81: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/81.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
Thursday, April 26, 2012
![Page 82: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/82.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
Thursday, April 26, 2012
![Page 83: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/83.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
Thursday, April 26, 2012
![Page 84: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/84.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
1
Thursday, April 26, 2012
![Page 85: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/85.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
1
2
Thursday, April 26, 2012
![Page 86: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/86.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
1
2
3
Thursday, April 26, 2012
![Page 87: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/87.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
<a class=“self-loader” href=“/destaques/entretenimento”>
Carregar: Destaques</a>
Thursday, April 26, 2012
![Page 88: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/88.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
<a class=“self-loader” href=“/destaques/entretenimento”>
Carregar: Destaques</a>
Pedido AJAX: /so/destaques/entretenimentoAo fazer scroll...
Thursday, April 26, 2012
![Page 89: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/89.jpg)
Bem vindos ao Mundo Real
‣ Lazy-Loading
Thursday, April 26, 2012
![Page 90: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/90.jpg)
Thursday, April 26, 2012
![Page 91: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/91.jpg)
DICA
Lazy-loading serve para muito mais do que imagens.
Thursday, April 26, 2012
![Page 92: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/92.jpg)
Restantes Equipas
Thursday, April 26, 2012
![Page 93: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/93.jpg)
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
![Page 94: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/94.jpg)
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
![Page 95: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/95.jpg)
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
![Page 96: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/96.jpg)
Bem vindos ao Mundo Real
‣ Restantes Equipas: Como trazer toda a gente para o “barco”?
Muito importanteOs dias do processo separado entre design e desenvolvimento acabaram...
Thursday, April 26, 2012
![Page 97: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/97.jpg)
DICA
Love thy frontend developer.ou...Love thy designer.
Discutam, peçam feedback construtivo.
Thursday, April 26, 2012
![Page 98: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/98.jpg)
Independência de Resolução
Thursday, April 26, 2012
![Page 99: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/99.jpg)
‣ Independência de resolução
Bem vindos ao Mundo Real
Antes de mais...
Um pixel não é um pixel.
Thursday, April 26, 2012
![Page 100: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/100.jpg)
‣ 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
![Page 101: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/101.jpg)
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxel de CSS
width: 300px;
300px
Thursday, April 26, 2012
![Page 102: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/102.jpg)
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxel de CSS
width: 300px;
300px
300px
Thursday, April 26, 2012
![Page 103: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/103.jpg)
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxel no dispositivo
640px(mais dpis)
320px
Thursday, April 26, 2012
![Page 104: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/104.jpg)
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxeis independentes da densidade
320px320px
Thursday, April 26, 2012
![Page 105: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/105.jpg)
‣ 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
![Page 106: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/106.jpg)
SVG +
background-size
Thursday, April 26, 2012
![Page 107: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/107.jpg)
‣ Independência de resolução
Bem vindos ao Mundo Real
Thursday, April 26, 2012
![Page 108: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/108.jpg)
‣ 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
![Page 109: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/109.jpg)
Thursday, April 26, 2012
![Page 110: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/110.jpg)
Thursday, April 26, 2012
![Page 111: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/111.jpg)
‣ 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
![Page 112: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/112.jpg)
8000px (100%)
200px (2.5%)
2.5% 5% 7.5% 10%
Thursday, April 26, 2012
![Page 113: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/113.jpg)
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
![Page 114: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/114.jpg)
‣ 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
exemplooriginal: 192.55KB
gzip: 64KB (-33%)
Thursday, April 26, 2012
![Page 115: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/115.jpg)
DICA
Sempre que possível usar vectores (SVG) para grá!cos de layout.Evitar sprites grandes.
Thursday, April 26, 2012
![Page 116: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/116.jpg)
Readaptação de conteúdo
Thursday, April 26, 2012
![Page 117: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/117.jpg)
‣ 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
![Page 118: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/118.jpg)
‣ Readaptação de conteúdo
Bem vindos ao Mundo Real
http://m.sapo.pt/cinemahttp://cinema.sapo.pt/
?
Lembram-se disto?
Thursday, April 26, 2012
![Page 119: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/119.jpg)
‣ 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
![Page 120: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/120.jpg)
‣ Readaptação de conteúdo
Bem vindos ao Mundo Real
Thursday, April 26, 2012
![Page 121: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/121.jpg)
‣ Readaptação de conteúdo
Bem vindos ao Mundo Real
(Progressive disclosure)
Thursday, April 26, 2012
![Page 122: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/122.jpg)
‣ 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
![Page 123: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/123.jpg)
‣ 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
![Page 124: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/124.jpg)
‣ 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
![Page 125: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/125.jpg)
DICA
Pensem duas cem vezes antes de remover conteúdo entre versões.
duas
Thursday, April 26, 2012
![Page 126: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/126.jpg)
Reflows pesados...
Thursday, April 26, 2012
![Page 127: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/127.jpg)
‣ Re!ows pesados
Bem vindos ao Mundo Real
Eventos onResize, re!ows de layout
Thursday, April 26, 2012
![Page 128: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/128.jpg)
‣ Re!ows pesados
Bem vindos ao Mundo Real
Deixando de usar % e usando EMs/PXs...
Thursday, April 26, 2012
![Page 129: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/129.jpg)
Publicidade
Thursday, April 26, 2012
![Page 130: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/130.jpg)
‣ 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
![Page 131: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/131.jpg)
‣ Publicidade
Bem vindos ao Mundo Real
Mantivemos zonas normais, trocamos por zonas mobile-friendly na versão S.
Thursday, April 26, 2012
![Page 132: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/132.jpg)
Recapitulando...
Thursday, April 26, 2012
![Page 133: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/133.jpg)
DICA
Esquecer” os layouts para dispositivos especí!cos.Desenhar para o conteúdo.
“
Thursday, April 26, 2012
![Page 134: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/134.jpg)
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
![Page 135: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/135.jpg)
DICA
Lazy-loading serve para muito mais do que imagens.
Thursday, April 26, 2012
![Page 136: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/136.jpg)
DICA
Love thy frontend developer.ou...Love thy designer.
Discutam, peçam feedback construtivo.
Thursday, April 26, 2012
![Page 137: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/137.jpg)
DICA
Sempre que possível usar vectores (SVG) para grá!cos de layout.Evitar sprites grandes.Ligar gzip nos servidores.
Thursday, April 26, 2012
![Page 138: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/138.jpg)
DICA
Pensem duas cem vezes antes de removerem conteúdo entre versões.
duas
Thursday, April 26, 2012
![Page 139: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/139.jpg)
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
![Page 140: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/140.jpg)
Há muito por explorar.
Partilhem, experimentem e acima de qualquer outra coisa...
Questionem tudo.
Thursday, April 26, 2012
![Page 141: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/141.jpg)
FIMObrigado.Questões?Dúvidas?Críticas?
cbna
Thursday, April 26, 2012
![Page 142: Responsive Web Design: Uma História das Trincheiras (sapo.pt)](https://reader034.vdocuments.pub/reader034/viewer/2022051514/548b1a90b47959d86b8b4645/html5/thumbnails/142.jpg)
Créditos & Typefaces
FuturaChaparral 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