Download pdf - Responsive web design

Transcript
Page 1: Responsive web design

Responsive web design

TERSIS ZONATO 2013

Page 2: Responsive web design

!www.tersis.com.br [email protected]

Tersis Zonato

• Desenhista industrial !

• Designer gráfico !

• Designer de interação

Page 3: Responsive web design

http://ica

nt.co.uk

/talks

/h5/pictures/pos

scon

/clinton-ob

ama-sm

artpho

nes.jpg

Page 4: Responsive web design

http://digitalclaritygrou

p.co

m/w

ordp

ress/w

p-co

nten

t/uploa

ds/201

2/12

/DCG

-Insig

ht-U

nderstan

ding

-the-Mob

ile-Shift-N

ov-201

2.pd

f

Page 5: Responsive web design

http://www.prox

xima.co

m.br/h

ome/mob

ile/201

3/06

/05/Brasileiro

s-ac

essand

o-int

erne

t-por-disp

ositiv

os-m

oveis

-ultrap

asso

u-via

-

Page 6: Responsive web design

http://www.nie

lsen.co

m/us/en

/new

swire

/201

3/who

s-winn

ing-th

e-u-s-sm

artpho

ne-m

arke

t-.html

Page 7: Responsive web design

http://www.on

bile.co

m/in

fo/w

p-co

nten

t/uploa

ds/201

2/05

/scree

n1.png

Page 8: Responsive web design

http://www.wire

d.co

m/im

ages_b

logs

/gad

getlab/20

13/04/12

1120

_gala

xyno

teII_07

4.jpeg

Telinha?

Page 9: Responsive web design

http://de

sign2

15.com

/toolbo

x/im

ages/scree

n_reso

lutions

.gif

Page 10: Responsive web design

http://www.sim

onmarxen.dk

/portfo

lio/?p=

165

“In the Bubble” - Simon MarxenArquitetura responsiva

Page 11: Responsive web design

Layout fixo

Page 12: Responsive web design

http://www.savewalterwhit

e.co

m

www.savewalterwhite.com

Page 13: Responsive web design

Layout fluído

Page 14: Responsive web design

http://d.alistap

art.c

om/re

spon

sive-web

-design/ex/ex-site-flexib

le.html

Page 15: Responsive web design

Responsive web design

Page 16: Responsive web design

1. Layout flexível, baseado em grid !

2. Imagens e mídias flexíveis !

3. Media queries (CSS3)

Page 17: Responsive web design

http://alistap

art.c

om/d/re

spon

sive-web

-design/ex/ex-site-FINA

L.html

Page 18: Responsive web design

http://www.massim

obon

ini.com

Page 19: Responsive web design

Responsive design: Vantagens

Page 20: Responsive web design

Vantagens

• Layout customizado • Adaptação de conteúdo

Page 21: Responsive web design

http://med

ia.sm

ashin

gmag

azine

.com

/wp-co

nten

t/uploa

ds/201

3/05

/picn

ic_with

_art_

direction_

mini.jp

g

Vantagens

Imagens flexíveis

Page 22: Responsive web design

Vantagens

• Otimização para ferramentas de busca • Centralização de conteúdo

Page 23: Responsive web design

Vantagens

Experiência do usuário (UX)

http://thum

bnails.vis

ually.netdn

a-cd

n.co

m/re

spon

sive--native

-in-th

e-ux

-lifecycle

_502

919a

230d

f9.png

Page 24: Responsive web design

Vantagens

Velocidade de carregamento

http://med

ia02.ho

ngkia

t.com

/servin

g-resp

onsiv

e-im

ages/re

spon

sive-im

g.jpg

Page 25: Responsive web design

Atividades

Page 26: Responsive web design

http://www.fre

ecsstemplates.org/previe

w/goo

dnatured

/

www.freecsstemplates.org/preview/goodnatured/

Page 27: Responsive web design

http://bit.ly/LGZYtk

Page 28: Responsive web design

http://drgina

.files.w

ordp

ress.com

/200

9/04

/girl-

with

-han

d-ou

t-stop1

.jpg

Antes de

começar...

Page 29: Responsive web design
Page 30: Responsive web design
Page 31: Responsive web design

Configurações da extensão Web Developer

Page 32: Responsive web design

Reset CSS

Page 33: Responsive web design

http://html5do

ctor.com

/htm

l-5-re

set-

Page 34: Responsive web design
Page 35: Responsive web design

http://ne

colas

.gith

ub.io

/normalize.css/

Page 36: Responsive web design

http://finaid

.utk.edu

/imag

es/C

alcula

tor.jp

g

A calculadora!

Page 37: Responsive web design

alvo ÷ contexto = resultado

http://www.fantom

-xp.co

m/w

allpa

pers/33/Se

cret_servic

e_ag

ent.jpg

Page 38: Responsive web design

http://s2

.man

ifo.com

/usr/5/536

D6/60/man

ager/pixe

l/nyan_

cat___mine

craft_pixel_a

rt_by

_sou

lsylve

r-d3h

y8gz

.png

Pixel hater...

Page 39: Responsive web design

Convertendo (px) para (em)

Page 40: Responsive web design

#logo h1 { font-size: 3.75em; /* 60px */ }

60px

Convertendo (px) para (em)

16px÷Alvo (px) Contexto (100%)

3.75emResultado (em)

#logo h1

Page 41: Responsive web design

#logo p { font-size: 1.375em; /* 22px */ }

22px

Convertendo (px) para (em)

16px÷

1.375em

#logo p

Alvo (px) Contexto (100%)

Resultado (em)

Page 42: Responsive web design

h1 { font-size: 2em; /* 32px */ }

32px

Convertendo (px) para (em)

16px÷

2em

h1

Alvo (px) Contexto (100%)

Resultado (em)

Page 43: Responsive web design

h2 { font-size: 2.75em; /* 44px */ }

44px

Convertendo (px) para (em)

16px÷

2.75em

h2

Alvo (px) Contexto (100%)

Resultado (em)

Page 44: Responsive web design

h3 { font-size: 1.5625em; /* 25px */ }

25px

Convertendo (px) para (em)

16px÷

1.5625em

h3

Alvo (px) Contexto (100%)

Resultado (em)

Page 45: Responsive web design

#splash { font-size: 3em; /* 48px */ }

48px

Convertendo (px) para (em)

16px÷

3em

#splash

Alvo (px) Contexto (100%)

Resultado (em)

Page 46: Responsive web design

#menu a { font-size: 1.25em; /* 20px */ }

20px

Convertendo (px) para (em)

16px÷

1.25em

#menu a

Alvo (px) Contexto (100%)

Resultado (em)

Page 47: Responsive web design

http://2.bp

.blogs

pot.c

om/-_

RvQvo

Cqn2

Q/U

B81S

XPrKvI/

AAAA

AAAA

T78/WYJ

JWLp

b0h4

/s16

00/kee

p+ca

lm.png

Page 48: Responsive web design

.post .meta { font-size: 1em; /* 16px */ }

16px

Convertendo (px) para (em)

16px÷

1em

.post .meta

Alvo (px) Contexto (100%)

Resultado (em)

Page 49: Responsive web design

#footer-content h2 { font-size: 2.25em; /* 36px */ }

36px

Convertendo (px) para (em)

16px÷

2.25em

#footer-content h2

Alvo (px) Contexto (100%)

Resultado (em)

Page 50: Responsive web design

http://sim

plefoc

us.com

/flow

type

/

Page 51: Responsive web design

PRONTO...

#SQÑ

Page 52: Responsive web design

Convertendo (px) para (%)

Page 53: Responsive web design

http://www.wallsh

eer.c

om/w

p-co

nten

t/uploa

ds/201

3/09

/Fun

ny-C

ouple-Se

cret-C

hildren

-Wallpa

per.jp

g

alvo ÷ contexto = resultado

x 100

Convertendo (px) para (%)

Page 54: Responsive web design

#logo { width: 31.25%; /* 300px */ }

300px

Convertendo (px) para (%)

960px÷

31.25%

#logo

Alvo (px) Contexto (px)

Resultado x 100 = (%)

Page 55: Responsive web design

#menu { width: 52.08%; /* 500px */ }

500px

Convertendo (px) para (%)

960px÷

52.08%

#menu

Alvo (px) Contexto (px)

Resultado x 100 = (%)

Page 56: Responsive web design

#content { width: 62%; /* 620px */ }

620px

Convertendo (px) para (%)

1000px÷

62%

#content

Alvo (px) Contexto (px)

Resultado x 100 = (%)

Page 57: Responsive web design

#sidebar { width: 32%; /* 320px */ }

320px

Convertendo (px) para (%)

1000px÷

32%

#sidebar, #column1, #column2, #column3

Alvo (px) Contexto (px)

Resultado x 100 = (%)

Page 58: Responsive web design

Margin e padding flexíveis

Page 59: Responsive web design

Margin e padding flexíveis

Marcotte (2010)

Page 60: Responsive web design

Margin e padding flexíveis

1. Ao definir a propriedade margin de um elemento, o contexto é a largura do elemento que o contém; !

2. Ao definir a propriedade padding de um elemento, o contexto é a largura do próprio elemento.

padding conteúdo

margin border

Page 61: Responsive web design

CSS box-sizing

http://css-trick

s.co

m/box

-sizing

/

.elemento { box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

É possível controlar o tamanho com width, a borda com border e as margens externas e internas com margin e padding. Box model é como todas essas propriedades se relacionam pra determinar o tamanho final do elemento.

Page 62: Responsive web design

#logo p { padding: 0 0 0 1.666666666667%; /* 5px / 300px */ }

5px 300px÷

1.666666666667%

#logo p

Margin e padding flexíveis

Alvo (px)

Resultado x 100 (%)

Contexto (px)

Page 63: Responsive web design

#content { padding: 0 4% 0 0; /* 40px / 1000px */ }

40px 1000px÷

4%

#content

Margin e padding flexíveis

Alvo (px)

Resultado x 100 (%)

Contexto (px)

cuidado com o float

CUIDADO com o float!

Page 64: Responsive web design

Imagens fluídas

Page 65: Responsive web design

http://www.clo

udso

ftwarep

rogram

.org/rs

/372

/e9c

4455

d-a3

17-4f4c-9f70

-108

d736

bae9

8/01

f/filen

ame/su

perio

r-user-e

xperien

ce.jp

g

img, embed, object, video { max-width: 100%; }

Imagens fluídas

Page 66: Responsive web design

img, embed, object, video { width: 100%; }

Imagens fluídas

O Internet Explorer 6 não suporta max-width...

Page 67: Responsive web design

Imagens fluídas

O banner está com uma altura fixa de 400px podendo travar o tamanho em telas menores. !

A imagem tem 350px de altura com a borda. !

Portanto é possível usar um padding-bottom de 50px.

Page 68: Responsive web design

http://www.clo

udso

ftwarep

rogram

.org/rs

/372

/e9c

4455

d-a3

17-4f4c-9f70

-108

d736

bae9

8/01

f/filen

ame/su

perio

r-user-e

xperien

ce.jp

g

img, embed, object, video { height: auto; }

Imagens fluídas

Page 69: Responsive web design

http://www.dillerdesign.co

m/exp

erim

ent/D

D_be

lated

PNG/

Page 70: Responsive web design

http://mob

ile.smashin

gmag

azine

.com

/201

3/07

/08/ch

oosin

g-a-resp

onsiv

e-im

age-so

lution/

Page 71: Responsive web design

http://fila

men

tgroup

.com

/examples/re

spon

sive-im

ages/

Page 72: Responsive web design

https://g

ithub

.com

/sco

ttjeh

l/picturefill

Page 73: Responsive web design

https://g

ithub

.com

/sco

ttjeh

l/Respo

nsive

-Imag

es

Page 74: Responsive web design

http://resp

onsiv

eimag

es.org/

Page 75: Responsive web design

http://im

ageo

ptim

.com

/

compactar imagens

Page 76: Responsive web design

http://www.w3.org/Graph

ics/SVG

/

compactar imagens

Page 77: Responsive web design

Viewport

Page 78: Responsive web design

Viewport

• width (pixel width/device width); • height (pixel height/device height); • initial-scale; • minimum-scale; • maximum-scale; • user-scalable (yes/no).

!<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Page 79: Responsive web design
Page 80: Responsive web design

Media Queries

Page 81: Responsive web design

<link rel=”stylesheet” href=”styles.css” media=”all” /> !<link rel=”stylesheet” href=”main.css” media=”screen” /> !<link rel=”stylesheet” href=”print.css” media=”print” />

Media Queries

@media screen and (min-width: 320px) and (max-width: 480px) { !}

@media screen and (max-width: 1080px) { !}

Page 82: Responsive web design

1000px 1080px÷

92.59%

.container

Media Queries

Alvo (px)

Resultado x 100 (%)

Contexto (px)

@media screen and (max-width: 1080px) { .container { width: 92.59%; } }

Page 83: Responsive web design

960px 1080px÷

88.88%

#header

Media Queries

Alvo (px)

Resultado x 100 (%)

Contexto (px)

@media screen and (max-width: 1080px) { #header { width: 88.88%; } }

Page 84: Responsive web design

A div #wrapper está com a propriedade min-width definida com 1000px. !

Basta alterar para 100% e o conteúdo irá se adaptar à largura da tela.

Media Queries

@media screen and (max-width: 1080px) { #wrapper { min-width: 100%; } }

Page 85: Responsive web design
Page 86: Responsive web design

http://nm

sdvid

.com

/snip

pets/

Page 87: Responsive web design

Breakpoints

Page 88: Responsive web design

http://www.ea

csoft.c

om/eac

mag

/wp-co

nten

t/uploa

ds/201

3/06

/resp

osive

-design.jpg

Breakpoints

Page 89: Responsive web design

Breakpoints

Content stacking

Page 90: Responsive web design

@media screen and (max-width: 960px) { #logo { float: none; margin: 0 auto; text-align: center; width: 100%; } ! #menu { float: none; text-align: center; width: 100%; } ! #menu ul { display: inline-block; float: none; padding: 20px 0 0; text-align: center; } }

Breakpoints

Page 91: Responsive web design

@media screen and (max-width: 767px) { #content, #sidebar { width: 100%; } }

Breakpoints

Page 92: Responsive web design

@media screen and (max-width: 500px) { #header { height: auto; } #menu a { padding: 10px 0; } ! #menu li { float: none; } ! #menu ul { display: block; padding: 20px 0; } }

Breakpoints

Page 93: Responsive web design

http://ca

niuse.com

/#feat=c

ss-m

ediaq

uerie

s

Page 94: Responsive web design

https://c

ode.go

ogle.co

m/p/css3-med

iaque

ries-js/

Page 95: Responsive web design

https://g

ithub

.com

/sco

ttjeh

l/Respo

nd

Page 96: Responsive web design

Frameworks

Page 97: Responsive web design

http://ge

tboo

tstra

p.co

m/

Page 98: Responsive web design

http://flatstra

p.org/

Page 99: Responsive web design

http://gu

mby

framew

ork.co

m/

Page 100: Responsive web design

http://foun

datio

n.zurb.com

/

Page 101: Responsive web design

http://www.initializr.c

om/

Page 102: Responsive web design

http://resp

onsiv

eboiler

plate.co

m/pt/ind

ex.htm

l

Page 103: Responsive web design

Ferramentas

Page 104: Responsive web design

http://ho

verstud.io/calc

ulator/

Page 105: Responsive web design

http://px

toem

.com

/

Page 106: Responsive web design

http://matthew

koslo

ski.m

e/lab

s/pixem/

Page 107: Responsive web design

http://mattkersle

y.com

/resp

onsiv

e/

Page 108: Responsive web design

http://lab

.maltew

asserm

ann.co

m/view

port-resiz

er/

Page 109: Responsive web design

http://www.op

era.co

m/develo

per/m

obile-emula

tor

Page 110: Responsive web design

http://ca

niuse.com

/

Page 111: Responsive web design

http://plac

ehold.it/

Page 112: Responsive web design

http://cssm

inifier.c

om/

Page 113: Responsive web design

http://les

scss.org/

Page 114: Responsive web design

Inspecione o iPhone através do Safari...

Page 115: Responsive web design

http://mod

erniz

r.com

/

Page 116: Responsive web design

https://d

evelo

pers.goo

gle.co

m/w

eb/fu

ndam

entals/do

cumen

tatio

n/mult

i-device

-layo

uts/ind

ex

Page 117: Responsive web design

Touch events

Page 118: Responsive web design

• touchstart Quanto o dedo toca a superfície !

• touchmove Quanto o dedo desliza na superfície !

• touchend Quando o toque é finalizado

Touch events

Page 119: Responsive web design

Touch events

document.addEventListener(‘touchstart’, function(e) { ...

})

document.addEventListener(‘touchmove’, function(e) { ...

})

document.addEventListener(‘touchend’, function(e) { ...

})

Page 120: Responsive web design

http://eig

htmed

ia.github

.io/ham

mer.js/

Page 121: Responsive web design

Mobile first

Page 122: Responsive web design

Foco no conteúdo +

Priorizar o necessário +

Usar somente o que for preciso =

Melhor experiência do usuário!

Mobile first

Page 123: Responsive web design

Não esconder conteúdo...?Mobile first

Page 124: Responsive web design

Mobile first

• Pense relativo, não estático ou absoluto; !

• Aprimoramentos CSS/JavaScript; !

• Evite carregar dados desnecessários; !

• Transições CSS ( JavaScript são acelerados por hardware); !

• Sprites CSS; !

• Simplifique...

Page 125: Responsive web design

Prototipação

Page 126: Responsive web design
Page 127: Responsive web design

http://jer

emyp

alford.co

m/arch-journa

l/respo

nsive

-web

-design-sketch

-she

ets/

Page 128: Responsive web design

Referências

Page 129: Responsive web design

Referências

EPSTEIN, Zach. Apple’s global tablet market share falls to all-time low. BGR, 2013.Disponível em: <http://bgr.com/2013/07/25/ipad-market-share-q2-2013-apple-tablets/>. Acesso em: 05 set. 2013. !MARCOTTE, Ethan. Responsive Web Design. A List Apart, 2010. Disponível em: <http://alistapart.com/article/responsive-web-design>. Acesso em: 09 set. 2013. !WALTERS, Tim. Understanding the “Mobile Shift”: Obsession with the Mobile Channel Obscures the Shift to Ubiquitous Computing. Digital Clarity Group, 2012. Disponível em: <http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight-Understanding-the-Mobile-Shift-Nov-2012.pdf>. Acesso em: 03 set. 2013.

Page 130: Responsive web design

Muito obrigado!www.tersis.com.br

TERSIS ZONATO 2013