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

RESPONSIVE
WEB DESIGN
UMA HISTÓRIA
DAS TRINCHEIRAS
26 abril 2012

André Luís
@andr3
cbna
Thursday, April 26, 2012

http://id.andr3.net
@andr3
me@andr3.net
andre-filipe-luis@telecom.pt

andr3.net
dailyphotowall.net
igive.sapo.pt
mobifeeds.net


Departamento de Qualidade
& Usabilidade
http://ux.sapo.pt
ID SAPO
Homepage do SAPO
http://www.sapo.pt


Prefácio
Como cheguei até aqui?


simplebits.com

simplebits.com

Equipa técnica


Programa de festas
para hoje


Programa de Festas

‣ Prefácio: Como cheguei até aqui?
‣ Introdução: Porque precisamos mudar?
‣ Bem-vindos ao Mundo Real: Lições, avisos, etc.
‣
Imagens
‣
Lazy-Loading
‣
Restantes equipas
‣
Independência de Resolução
‣
Readaptação de conteúdo
‣
Reflows pesados
‣
Publicidade
‣
...
‣ Dúvidas, discussão, etc.

Introdução
Porque precisamos mudar?
E... mudar o quê?


reocities.com/capecanaveral/5599/eclipse98.html

reocities.com/capecanaveral/5599/eclipse98.html
csszengarden.com

csszengarden.com

csszengarden.com

csszengarden.com/?cssﬁle=142/142.css

csszengarden.com/?cssfile=142/142.css

alistapart.com/articles/dao/

alistapart.com/articles/dao/

John Allsopp
in 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.

John Allsopp


“Quando um novo meio copia um
meio já existente, parte do que copia
faz sentido, mas muita da cópia é
feita sem pensar, “ritual” e
frequentemente acaba por
restringir o novo meio.
Com o passar do tempo o novomeio
novo meio
desenvolve as suas próprias
convenções, deitando fora as
convenções que não fazem sentido.
sentido.”

John Allsopp


2011
(20 anos depois da criação da web)


Dan Rubin
in The Manual #1: Off the page
Dan Rubin
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
in The Manual #1: Off the page
Dan Rubin
alwaysreadthemanual.com

Grelha flexível
Multimédia flexível
Media-queries


}
Grelha flexível
Multimédia flexível como

Media-queries


Porquê?


futurefriend.ly

futurefriend.ly

Imprevisibilidade

O “site mobile”, separado:

http://cinema.sapo.pt/


Imprevisibilidade

O “site mobile”, separado:

http://cinema.sapo.pt

http://cinema.sapo.pt/ http://m.sapo.pt/cinema


Imprevisibilidade


?


Imprevisibilidade

Ligação via operador móvel
GPRS ou 3G


Imprevisibilidade
Ligação via WiFi
+1.5mbit (depende do fornecimento)


Imprevisibilidade

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


Imprevisibilidade

O link:

pode ser partilhado via...
etc.
e-mail


Imprevisibilidade

O link:

pode ser partilhado via...
etc.
e-mail

e lido em...


Imprevisibilidade


o que acabámos por fazer...


O que acabámos por fazer...

‣ Layout “líquido”



‣ 4x “pontos de inflexão”



‣ 4x “pontos de inflexão”

S M L XL



S M L XL

300px 300px 300px
fixo fixo fixo


DICA

“Esquecer” os layouts
para dispositivos
específicos.
Desenhar para o
conteúdo.


Bem vindos ao
Mundo Real
Lições, problemas, avisos, etc.


Bem vindos ao Mundo Real

É tão importante perceber as
limitações e os obstáculos como
as vantagens e as soluções.



Nem todos os browsers suportam tudo o que
vamos precisar...



E é aqui que entram umas boas-práticas que
nos têm valido...



nos têm valido...

Progressive Enhancement
Começar com uma versão básica e ir melhorando
conforme houver suporte.



nos têm valido...

Progressive Enhancement
Começar com uma versão básica e ir melhorando
conforme houver suporte.
Graceful degradation
Utilizar funcionalidades avançadas desde que quem
não as suporte não perca acesso a funcionalidades
críticas do serviço/site.


modernizr.com

modernizr.com

modernizr.com

<html class=" js ﬂexbox 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 cssreﬂections csstransforms
csstransforms3d csstransitions fontface generatedcontent
video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">

modernizr.com

Imagens



‣ Imagens:
‣ que tamanho carregar?
‣ como carregá-las?



‣ Imagens: que tamanho carregar?




200x113 10.84KB 480x270 36.77KB
(16:9) (16:9)




200x113 10.84KB 480x270 36.77KB
(16:9) (16:9)

S

M L XL



200x113 10.84KB 480x270 36.77KB
(16:9) (16:9)

S

S (HD) M L XL


‣ Imagens: como carregá-las?
hipótese 1: carregar a imagem
certa via JavaScript
<span class=“img”
alt=“”
data-srcSD=“versaoSD.jpg”
data-srcHD=“versaoHD.jpg”>

</span>



hipótese 1: carregar a imagem
certa via JavaScript
<span class=“img”
alt=“”
data-srcSD=“versaoSD.jpg”
data-srcHD=“versaoHD.jpg”>
javascript <img src=“versaoHD.jpg” alt=“”>
</span>



hipótese 2: carregar a imagem SD e,
caso necessário, carregar a HD
(crédito: Josh Emerson @joshje)



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


github.com/joshje/Responsive-Enhance

github.com/joshje/Responsive-Enhance

DICA
Carregar a imagem de
baixa-resolução e
melhorá-la quando fizer
sentido aumenta a
peformance percebida.
Apesar dos custos de tráfego (bytes extra).


FICÇÃO (PARA JÁ)


FICÇÃO (PARA JÁ)
<picture alt=“”>
<source src=“versaoSD.jpg”
media=“screen and (max-width:500px)”>

<source src=“versaoHD.jpg”
media=“screen and (min-width:500px)”>
</picture>


Lazy-Loading



‣ Lazy-Loading

1



‣ Lazy-Loading

1

2



‣ Lazy-Loading

1

2

3



‣ Lazy-Loading

1 1

2

3



‣ Lazy-Loading

1 1

2 2

3



‣ Lazy-Loading

1 1

2 2

3 3



‣ Lazy-Loading

<a class=“self-loader”
href=“/destaques/entretenimento”>
Carregar: Destaques
</a>



‣ Lazy-Loading

<a class=“self-loader”
href=“/destaques/entretenimento”>
Carregar: Destaques
</a>
Ao fazer scroll...
Pedido AJAX: /so/destaques/entretenimento



‣ Lazy-Loading


DICA

Lazy-loading serve
para muito mais do
que imagens.


Restantes Equipas



‣ Restantes Equipas:
‣ como trazer toda a gente para o
“barco”?
‣ qual das versões abordar primeiro?



‣ Restantes Equipas: Como trazer toda a
gente para o “barco”?

Apresentar a versão “tradicional” (desktop)
como referência...
(muito do processo acontece no browser)

Explicar as vantagens e identificar os riscos.

Tirar quaisquer dúvidas, por mais absurdas
que nos pareçam.



Depois do OK à versão tradicional,
apresentar referências/wireframes
para cada uma das versões.

Quebrem as regras que não fizerem sentido
na vossa organização.




Muito importante
Os dias do processo separado entre design
e desenvolvimento acabaram...


DICA

Love thy frontend
developer.
ou...
Love thy designer.
Discutam, peçam
feedback construtivo.

Independência de
Resolução



‣ Independência de resolução

Antes de mais...
Um pixel não é um pixel.




Há vários significados para a unidade “píxel”:
Píxel de CSS

Píxel no dispositivo

Píxeis independentes da densidade




Píxel de CSS

width: 300px;

300px




Píxel de CSS

width: 300px;

300px

300px




Píxel no dispositivo

320px 640px
(mais dpis)




Píxeis independentes da densidade

320px 320px




Como criar gráficos sem ter que criar
uma versão por cada densidade?


SVG
+
background-size




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



<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%;
}

8000px (100%)

2.5% 5% 7.5% 10%

200px (2.5%)


Só para sprites pequenas.
O browser mete a imagem “raster” em memória, o
que causa um impacto brutal na performance.




Não Esquecer
(Pedir para) Activar mod_gzip / mod_deflate
nos servidores para ficheiros .svg

exemplo
original: 192.55KB
gzip: 64KB (-33%)


DICA

Sempre que possível
usar vectores (SVG)
para gráficos de layout.
Evitar sprites grandes.


Readaptação de
conteúdo



‣ Readaptação de conteúdo

É comum ouvir alguém dizer:
“Epá, em ecrãs com menos de 500px, dá
um display: none na sidebar e já está!”




Lembram-se disto?


?



Facilmente podíamos pensar:
“Ninguém vai querer saber as fontes
quando está no telemóvel...”




(Progressive disclosure)




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




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


DICA

Pensem duas cem
vezes antes de
remover conteúdo
entre versões.


Reflows pesados...



‣ Reflows pesados
Eventos onResize,
reflows de layout



‣ Reflows pesados
Deixando de usar % e
usando EMs/PXs...



‣ Publicidade

Longa caminhada...
IAB ainda decreta tamanhos em píxeis...

Pouca ou nenhuma procura/oferta de
formatos flexíveis...

Dependentes do mercado...



‣ Publicidade

Mantivemos zonas normais,
trocamos por zonas mobile-friendly
na versão S.


Recapitulando...


DICA

Sempre que possível
usar vectores (SVG)
para gráficos de layout.
Evitar sprites grandes.
Ligar gzip nos servidores.


DICA

Pensem duas cem
vezes antes de
removerem conteúdo
entre versões.


Há muito por explorar.

Partilhem, experimentem e
acima de qualquer outra coisa...

Questionem tudo.


FIM
Obrigado. c
b
Questões? n
a
Dúvidas?
Críticas?

Créditos & Typefaces
Futura American Typewriter
Chaparral Pro

C
http://www.flickr.com/photos/drewm/4732738890/

http://www.flickr.com/photos/drakegoodman/6835415392/

http://www.flickr.com/photos/stn1978/6395318885/

http://www.flickr.com/photos/pamhule/5709324762/

http://www.flickr.com/photos/eelkedekker/5339625840/


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

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

Recommended

More Related Content

Recently uploaded

Recently uploaded(11)

Featured

Featured(20)

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