Upload
andre-luis
View
842
Download
6
Embed Size (px)
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.pt
Citation preview
RESPONSIVE
UMA HISTÓRIADAS TRINCHEIRAS
WEB DESIGN
André Luís@andr3
26 abril 2012
cbnaThursday, April 26, 2012
http://id.andr3.net
@[email protected][email protected]
mobifeeds.net
igive.sapo.pt
dailyphotowall.net
andr3.net
Thursday, April 26, 2012
Departamento de Qualidade & Usabilidadehttp://ux.sapo.pt
ID SAPOHomepage do SAPOhttp://www.sapo.pt
Thursday, April 26, 2012
PrefácioComo cheguei até aqui?
Thursday, April 26, 2012
1998Thursday, April 26, 2012
Thursday, April 26, 2012
Thursday, April 26, 2012
2004Thursday, April 26, 2012
2009Thursday, April 26, 2012
Thursday, April 26, 2012
2012Thursday, April 26, 2012
Thursday, April 26, 2012
Equipa técnica
Thursday, April 26, 2012
Programa de festas para hoje
Thursday, April 26, 2012
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
IntroduçãoPorque precisamos mudar?
E... mudar o quê?
Thursday, April 26, 2012
1998Thursday, April 26, 2012
reocities.com/capecanaveral/5599/eclipse98.html
csszengarden.comreocities.com/capecanaveral/5599/eclipse98.htmlThursday, April 26, 2012
2003Thursday, April 26, 2012
csszengarden.com
csszengarden.comThursday, April 26, 2012
csszengarden.com/?cssfile=142/142.css
csszengarden.com/?cssfile=142/142.cssThursday, April 26, 2012
csszengarden.com/?cssfile=046/046.css
csszengarden.com/?cssfile=046/046.cssThursday, April 26, 2012
csszengarden.com/?cssfile=030/030.css
csszengarden.com/?cssfile=030/030.cssThursday, April 26, 2012
2000Thursday, April 26, 2012
alistapart.com/articles/dao/
alistapart.com/articles/dao/Thursday, April 26, 2012
John Allsoppin alistapart.com/articles/dao/
Thursday, April 26, 2012
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
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
2011(20 anos depois da criação da web)
Thursday, April 26, 2012
Dan Rubin in The Manual #1: Off the page alwaysreadthemanual.com
Dan Rubin
Thursday, April 26, 2012
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
Grelha !exível
Multimédia !exível
Media-queries
Thursday, April 26, 2012
Grelha !exível
Multimédia !exível
Media-queries} como
Thursday, April 26, 2012
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
O “site mobile”, separado:
Imprevisibilidade
http://cinema.sapo.pt/
Thursday, April 26, 2012
O “site mobile”, separado:
Imprevisibilidade
http://cinema.sapo.pt/
http://cinema.sapo.pt
http://m.sapo.pt/cinema
Thursday, April 26, 2012
Imprevisibilidade
http://m.sapo.pt/cinemahttp://cinema.sapo.pt/
?
Thursday, April 26, 2012
Ligação via operador móvelGPRS ou 3G
Imprevisibilidade
Thursday, April 26, 2012
Ligação via WiFi+1.5mbit (depende do fornecimento)
Imprevisibilidade
Thursday, April 26, 2012
http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...O link:
Imprevisibilidade
Thursday, April 26, 2012
http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...
pode ser partilhado via...
etc.
O link:
Imprevisibilidade
Thursday, April 26, 2012
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
Imprevisibilidade
Thursday, 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 in!exão”
Thursday, April 26, 2012
O que acabámos por fazer...
‣ 4x “pontos de in!exão”
Thursday, April 26, 2012
O que acabámos por fazer...
‣ 4x “pontos de in!exão”
LS M XL
Thursday, April 26, 2012
O que acabámos por fazer...
300pxfixo
300pxfixo
300pxfixo
S M XLL
Thursday, April 26, 2012
DICA
Esquecer” os layouts para dispositivos especí!cos.Desenhar para o conteúdo.
“
Thursday, April 26, 2012
Bem vindos aoMundo Real
Lições, problemas, avisos, etc.
Thursday, April 26, 2012
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
Bem vindos ao Mundo Real
Nem todos os browsers suportam tudo o que vamos precisar...
Thursday, April 26, 2012
Bem vindos ao Mundo Real
E é aqui que entram umas boas-práticas que nos têm valido...
Thursday, April 26, 2012
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
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
Bem vindos ao Mundo Realmodernizr.com
modernizr.comThursday, April 26, 2012
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
Imagens
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Imagens:
‣ que tamanho carregar?
‣ como carregá-las?
Thursday, April 26, 2012
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(16:9)
480x270 36.77KB(16:9)
Thursday, April 26, 2012
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
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
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
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
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
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
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
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
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
Bem vindos ao Mundo Real
github.com/joshje/Responsive-Enhance
github.com/joshje/Responsive-Enhance
Thursday, April 26, 2012
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
FICÇÃO (PARA JÁ)
Thursday, April 26, 2012
<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
Lazy-Loading
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
1
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
1
2
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Lazy-Loading
1
2
3
1
2
3
Thursday, April 26, 2012
Bem vindos ao Mundo Real
‣ Lazy-Loading
<a class=“self-loader” href=“/destaques/entretenimento”>
Carregar: Destaques</a>
Thursday, April 26, 2012
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
Bem vindos ao Mundo Real
‣ Lazy-Loading
Thursday, April 26, 2012
Thursday, April 26, 2012
DICA
Lazy-loading serve para muito mais do que imagens.
Thursday, April 26, 2012
Restantes Equipas
Thursday, April 26, 2012
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
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
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
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
DICA
Love thy frontend developer.ou...Love thy designer.
Discutam, peçam feedback construtivo.
Thursday, April 26, 2012
Independência de Resolução
Thursday, April 26, 2012
‣ Independência de resolução
Bem vindos ao Mundo Real
Antes de mais...
Um pixel não é um pixel.
Thursday, April 26, 2012
‣ 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
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxel de CSS
width: 300px;
300px
Thursday, April 26, 2012
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxel de CSS
width: 300px;
300px
300px
Thursday, April 26, 2012
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxel no dispositivo
640px(mais dpis)
320px
Thursday, April 26, 2012
‣ Independência de resolução
Bem vindos ao Mundo Real
Píxeis independentes da densidade
320px320px
Thursday, April 26, 2012
‣ 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
SVG +
background-size
Thursday, April 26, 2012
‣ Independência de resolução
Bem vindos ao Mundo Real
Thursday, April 26, 2012
‣ 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
Thursday, April 26, 2012
Thursday, April 26, 2012
‣ 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
8000px (100%)
200px (2.5%)
2.5% 5% 7.5% 10%
Thursday, April 26, 2012
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
‣ 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
DICA
Sempre que possível usar vectores (SVG) para grá!cos de layout.Evitar sprites grandes.
Thursday, April 26, 2012
Readaptação de conteúdo
Thursday, April 26, 2012
‣ 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
‣ 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
‣ 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
‣ Readaptação de conteúdo
Bem vindos ao Mundo Real
Thursday, April 26, 2012
‣ Readaptação de conteúdo
Bem vindos ao Mundo Real
(Progressive disclosure)
Thursday, April 26, 2012
‣ 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
‣ 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
‣ 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
DICA
Pensem duas cem vezes antes de remover conteúdo entre versões.
duas
Thursday, April 26, 2012
Reflows pesados...
Thursday, April 26, 2012
‣ Re!ows pesados
Bem vindos ao Mundo Real
Eventos onResize, re!ows de layout
Thursday, April 26, 2012
‣ Re!ows pesados
Bem vindos ao Mundo Real
Deixando de usar % e usando EMs/PXs...
Thursday, April 26, 2012
Publicidade
Thursday, April 26, 2012
‣ 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
‣ Publicidade
Bem vindos ao Mundo Real
Mantivemos zonas normais, trocamos por zonas mobile-friendly na versão S.
Thursday, April 26, 2012
Recapitulando...
Thursday, April 26, 2012
DICA
Esquecer” os layouts para dispositivos especí!cos.Desenhar para o conteúdo.
“
Thursday, April 26, 2012
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
DICA
Lazy-loading serve para muito mais do que imagens.
Thursday, April 26, 2012
DICA
Love thy frontend developer.ou...Love thy designer.
Discutam, peçam feedback construtivo.
Thursday, April 26, 2012
DICA
Sempre que possível usar vectores (SVG) para grá!cos de layout.Evitar sprites grandes.Ligar gzip nos servidores.
Thursday, April 26, 2012
DICA
Pensem duas cem vezes antes de removerem conteúdo entre versões.
duas
Thursday, April 26, 2012
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
Há muito por explorar.
Partilhem, experimentem e acima de qualquer outra coisa...
Questionem tudo.
Thursday, April 26, 2012
FIMObrigado.Questões?Dúvidas?Críticas?
cbna
Thursday, April 26, 2012
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