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

http://id.andr3.net

@andr3me@andr3.netandre-!lipe-luis@telecom.pt

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

PrefácioComo cheguei até aqui?

1998Thursday, April 26, 2012

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‣ Re!ows pesados‣ Publicidade‣ ...

‣ Dúvidas, discussão, etc.

IntroduçãoPorque precisamos mudar?

E... mudar o quê?

reocities.com/capecanaveral/5599/eclipse98.html

csszengarden.comreocities.com/capecanaveral/5599/eclipse98.htmlThursday, 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

alistapart.com/articles/dao/

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.

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

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

Dan Rubin in The Manual #1: Off the page alwaysreadthemanual.com

Dan Rubin

“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

Grelha !exível

Multimédia !exível

Media-queries

Grelha !exível

Multimédia !exível

Media-queries} como

Porquê?

futurefriend.ly

futurefriend.lyThursday, April 26, 2012

futurefriend.ly

O “site mobile”, separado:

Imprevisibilidade

http://cinema.sapo.pt/

O “site mobile”, separado:

Imprevisibilidade

http://cinema.sapo.pt/

http://cinema.sapo.pt

http://m.sapo.pt/cinema

Imprevisibilidade

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

Ligação via operador móvelGPRS ou 3G

Imprevisibilidade

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

Imprevisibilidade

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

Imprevisibilidade

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

e-mail

pode ser partilhado via...

O link:

Imprevisibilidade

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

e-mail

pode ser partilhado via...

O link:

Imprevisibilidade

e lido em...

Imprevisibilidade

o que acabámos por fazer...

O que acabámos por fazer...

‣ Layout “líquido”

‣ 4x “pontos de in!exão”

LS M XL

300pxfixo

S M XLL

Esquecer” os layouts para dispositivos especí!cos.Desenhar para o conteúdo.

Bem vindos aoMundo 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...

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.

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

Imagens

‣ Imagens:

‣ que tamanho carregar?

‣ como carregá-las?

‣ Imagens: que tamanho carregar?

200x113 10.84KB(16:9)

480x270 36.77KB(16:9)

200x113 10.84KB(16:9)

480x270 36.77KB(16:9)

M XLLThursday, April 26, 2012

200x113 10.84KB(16:9)

480x270 36.77KB(16:9)

M XLLS (HD)

‣ Imagens: como carregá-las?

hipótese 1: carregar a imagem certa via JavaScript

<img src=“versaoHD.jpg” alt=“”>javascript

‣ Imagens: como carregá-las?hipótese 2: carregar a imagem SD e, caso necessário, carregar a HD (crédito: Josh Emerson @joshje)

github.com/joshje/Responsive-Enhance

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

FICÇÃO (PARA JÁ)

<picture alt=“”> <source src=“versaoSD.jpg”

media=“screen and (max-width:500px)”>

</picture>

FICÇÃO (PARA JÁ)

Lazy-Loading

‣ Lazy-Loading

Carregar: Destaques</a>

‣ Lazy-Loading

Carregar: Destaques</a>

Pedido AJAX: /so/destaques/entretenimentoAo fazer scroll...

‣ Lazy-Loading

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 identi!car 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 "zerem sentido na vossa organização.

Muito importanteOs dias do processo separado entre design e desenvolvimento acabaram...

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 signi"cados para a unidade “píxel”:Píxel de CSS

Píxel no dispositivo

Píxeis independentes da densidade

Píxel de CSS

width: 300px;

Píxel de CSS

width: 300px;

Píxel no dispositivo

640px(mais dpis)

Píxeis independentes da densidade

320px320px

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

background-size

img.weather {background: url(noitenublada.svg);background-size: 100%;

}.no-svg img.weather { width: 320px; height: 320px; }

img.weather {background: url(sprite.svg);background-size: auto 100%;background-position: 22.5% 0%;

8000px (100%)

200px (2.5%)

2.5% 5% 7.5% 10%

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_de!ate nos servidores para "cheiros .svg

exemplooriginal: 192.55KB

gzip: 64KB (-33%)

Sempre que possível usar vectores (SVG) para grá!cos 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á!”

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

Lembram-se disto?

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

(Progressive disclosure)

<h3>Rodapé

<a class="expandable-trigger mini" href="#rodape-cinema">Rodapé;

</a>

</h3><ul class="expandable closed except_l except_xl" id="rodape-cinema">

(...) </ul>

</a>

(...) </ul>

</a>

(...) </ul>

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

Reflows pesados...

‣ Re!ows pesados

Eventos onResize, re!ows de layout

‣ Re!ows 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 !exíveis...

Dependentes do mercado...

‣ Publicidade

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

Recapitulando...

Esquecer” os layouts para dispositivos especí!cos.Desenhar para o conteúdo.

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

Lazy-loading serve para muito mais do que imagens.

Love thy frontend developer.ou...Love thy designer.

Discutam, peçam feedback construtivo.

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

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

“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

Há muito por explorar.

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

Questionem tudo.

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

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/

responsive web design: uma história das trincheiras (sapo.pt)

Technology

responsive web design e a ubiquidade da web

trincheiras na web

responsive web design

e-books e grids adaptativas (design responsive)

responsive web design · responsive web design keywords...

responsive web design£o_filipe... · responsive web design...

primeira guerra mundial - trincheiras

responsive web design, conteúdo em todos os dispositivos

portugal nas trincheiras

responsive design

infografico: publicidade e responsive design pela smart...

management 3.0 direto das trincheiras

condições de vida nas trincheiras

ux nas trincheiras: do insight ao protótipo

a sardinhada ajpires@sapo.pt. como começou …...

tdd direto das trincheiras versao 2

responsive web design - introdução

era a guerra de trincheiras

i guerra mundial - guerra das trincheiras

responsive design - iscte