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

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

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

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

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)

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)

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)

PrefácioComo cheguei até aqui?

Thursday, April 26, 2012

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

1998Thursday, April 26, 2012

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

Thursday, April 26, 2012

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

Thursday, April 26, 2012

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

2004Thursday, April 26, 2012

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

simplebits.com

simplebits.com

Thursday, April 26, 2012

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

2009Thursday, April 26, 2012

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

Thursday, April 26, 2012

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

2012Thursday, April 26, 2012

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

Thursday, April 26, 2012

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

Equipa técnica

Thursday, April 26, 2012

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

Programa de festas para hoje

Thursday, April 26, 2012

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

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)

IntroduçãoPorque precisamos mudar?

E... mudar o quê?

Thursday, April 26, 2012

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

1998Thursday, April 26, 2012

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

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)

2003Thursday, April 26, 2012

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

csszengarden.com

csszengarden.comThursday, April 26, 2012

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

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)

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)

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)

2000Thursday, April 26, 2012

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

alistapart.com/articles/dao/

alistapart.com/articles/dao/Thursday, April 26, 2012

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

John Allsoppin alistapart.com/articles/dao/

Thursday, April 26, 2012

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

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)

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)

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)

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)

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)

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)

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)

Porquê?

Thursday, April 26, 2012

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

futurefriend.ly

futurefriend.lyThursday, April 26, 2012

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

futurefriend.ly

futurefriend.lyThursday, April 26, 2012

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

futurefriend.ly

futurefriend.lyThursday, April 26, 2012

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

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)

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)

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)

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)

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)

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)

http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...

e-mail

pode ser partilhado via...

etc.

O link:

Imprevisibilidade

Thursday, April 26, 2012

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

http://cinema.sapo.pt/magazine/e-cinema/e-cinema-brad-pitt-lidera...

e-mail

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)

Imprevisibilidade

Thursday, April 26, 2012

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

o que acabámos por fazer...

Thursday, April 26, 2012

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

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

Bem vindos ao Mundo Realmodernizr.com

modernizr.comThursday, April 26, 2012

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

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)

Imagens

Thursday, April 26, 2012

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

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

FICÇÃO (PARA JÁ)

Thursday, April 26, 2012

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

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

Lazy-Loading

Thursday, April 26, 2012

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

Bem vindos ao Mundo Real

‣ Lazy-Loading

1

Thursday, April 26, 2012

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

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)

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)

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)

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)

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)

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)

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)

Bem vindos ao Mundo Real

‣ Lazy-Loading

Thursday, April 26, 2012

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

Thursday, April 26, 2012

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

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)

Restantes Equipas

Thursday, April 26, 2012

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

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)

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)

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)

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)

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)

Independência de Resolução

Thursday, April 26, 2012

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

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

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

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

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

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

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

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

SVG +

background-size

Thursday, April 26, 2012

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

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

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

Thursday, April 26, 2012

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

Thursday, April 26, 2012

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

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

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)

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)

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

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)

Readaptação de conteúdo

Thursday, April 26, 2012

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

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

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

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

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

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

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

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

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

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)

Reflows pesados...

Thursday, April 26, 2012

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

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

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

Publicidade

Thursday, April 26, 2012

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

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

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

Recapitulando...

Thursday, April 26, 2012

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

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)

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)

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)

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)

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)

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)

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)

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)

FIMObrigado.Questões?Dúvidas?Críticas?

cbna

Thursday, April 26, 2012

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

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