WEB DESIGN RESPONSIVO

INTRODUÇÃO

FERRAMENTAS NECESSÁRIAS

FERRAMENTAS NECESSÁRIAS• EDITOR DE TEXTO:

• Brackets;

• Coda;

• Dreamweaver;

• Notepad++;

• Sublime Text.

• BROWSER:

• Chrome;

• Firefox;

• Opera;

• Safari;

• Internet Explorer 9+; etc…

POR QUÊ?

NO PASSADO• Tínhamos conexão lenta;

• Não existia acesso Wi-Fi;

• Sites para dispositivos móveis eram versões simples dos sites originais;

• Era preciso manter múltiplas versões de um site.

http://m

edia.smash

ingmagazine.com/w

p-content/uploads/2013/05/picnic_w

ith_a

rt_d

irectio

n_m

ini.jpg

http://icant.co.uk/talks/h5/pictures/posscon/clinton-obama-smartphones.jpg

http://digita

lclarityg

roup.com/w

ordpress/w

p-content/uploads/2012/12/D

CG-Insight-Understanding-the-M

obile-Shift-N

ov-2012.pdf

http://w

ww.proxxim

a.com.br/home/m

obile/2013/06/05/Brasileiro

s-acessando-internet-por-dispositivos-moveis-ultrapassou-via-

WEB DESIGN RESPONSIVO

LAYOUT FIXO

http://w

ww.savewalterw

hite.com

www.savewalterwhite.com

LAYOUT FLUÍDO

http://d.alistapart.com/resp

onsive-w

eb-design/ex/ex-site-flexible.htm

l

LAYOUT RESPONSIVO

http://w

ww.sim

onmarxen.dk/portfolio/?p=165

“In the Bubble” - Simon MarxenArquitetura responsiva

–Ethan Marcotte (2010)

“Responsive Web Design: um único site que se adapta a qualquer

dispositivo, independente do tamanho da tela e orientação.”

http://alistapart.com/d/resp

onsive-w

eb-design/

1. Layout flexível, baseado em grid !

2. Imagens e mídias flexíveis !

3. Media queries (CSS3)

UM WEBSITE, MÚLTIPLOS LAYOUTS

http://alistapart.com/d/resp

onsive-w

eb-design/ex/ex-site-FINAL.htm

l

VANTAGENS• Layout customizado

• Adaptação de conteúdo

VANTAGENS• Imagens flexíveis

http://m

edia.smash

ingmagazine.com/w

p-content/uploads/2013/05/picnic_w

ith_a

rt_d

irectio

n_m

ini.jpg

VANTAGENS

http://m

edia02.hongkiat.com/serving-resp

onsive-images/resp

onsive-img.jp

g

• Velocidade de carregamento

VANTAGENS• Otimização para ferramentas de busca

• Centralização de conteúdo

• Apenas um código-fonte para dar manutenção

http://thumbnails.visually.netdna-cdn.com/resp

onsive--native-in-the-ux-lifecycle_5

02919a230df9.png

LAYOUT ADAPTATIVO

–Aaron Gustafson (2011)

“Web Design Adaptativo é um outro termo para progressive enhancement: leva em

conta vários níveis de HTML, CSS, JavaScript e tecnologia assistiva”

http://blog.easy-designs.net/archives/on-adaptive-vs-resp

onsive-w

eb-design/

MOBILE FIRST

O QUE É MOBILE FIRST?

MELHOR EXPERIÊNCIA DO USUÁRIO!

MOBILE FIRSTFoco no conteúdo

Priorizar o necessário

Usar somente o que for preciso

++

=

Não esconder conteúdo...?MOBILE FIRST

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/SVG;

• SIMPLIFIQUE!

UNIDADES RELATIVAS

http://s2.m

anifo.com/usr/5/536D6/60/m

anager/pixel/nyan_c

at___minecraft_p

ixel_art_b

y_so

ulsylver-d3hy8

gz.png

Pixel hater...

TIPOGRAFIA E A RELAÇÃO px / em

px em

12 .75

16 1

24 1.5

32 2

font-size: 100%;

QUAL É O SEGREDO?

http://w

ww.fantom-xp.com/w

allpapers/33/Secret_service_a

gent.jpg

alvo ÷ contexto = resultadoQUAL É O SEGREDO?

http://w

ww.fantom-xp.com/w

allpapers/33/Secret_service_a

gent.jpg

EXERCÍCIO 1 - INÍCIO

TRABALHANDO COM MEDIA QUERIES

VIEWPORT

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

X

VIEWPORT

MEDIA QUERIES

<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

<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 screen and (min-width: 320px) and (max-width: 480px) { … }

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

MEDIA QUERIES

http://nmsd

vid.com/snippets/

EXERCÍCIO 1 - FIM

http://caniuse.com/#feat=css-m

ediaquerie

s

https://gith

ub.com/scottjehl/Resp

ond

https://code.google.com/p/css3-m

ediaquerie

s-js/

BREAKPOINTS

http://w

ww.eacso

ft.com/eacmag/w

p-content/uploads/2013/06/resp

osive-design.jp

g

BREAKPOINTS

CONTENT STACKING

OUTROS ELEMENTOS RELATIVOS

A RELAÇÃO px / %

http://w

ww.w

allsheer.c

om/w

p-content/uploads/2013/09/Funny-Couple-Secret-Children-W

allpaper.jpg

alvo ÷ contexto = resultado

x 100

EXERCÍCIO 2 - INÍCIO

EXERCÍCIO 2 - FIM

MARGIN E PADDING FLEXÍVEIS

MARGIN E PADDING

–Ethan Marcotte (2010)

MARGIN E PADDING• 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.

http://css-tric

ks.com/box-sizing/

padding conteúdo

margin border

BOX-SIZING• É 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.

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

http://css-tric

ks.com/box-sizing/

IMAGENS FLEXÍVEIS

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

IMAGENS FLEXÍVEIS

EXERCÍCIO 3 - INÍCIO

EXERCÍCIO 3 - FIM

PROPORÇÃO (RATIO)

http://m

attzavadil.com/w

p-content/uploads/2015/01/revealingmlm

secrets.jp

g

altura ÷ largura = ratio

x 100

EXERCÍCIO 4 - INÍCIO

EXERCÍCIO 4 - FIM

http://m

obile.smash

ingmagazine.com/2013/07/08/choosing-a-resp

onsive-image-solutio

n/

https://gith

ub.com/scottjehl/picturefill

http://resp

onsiveim

ages.org/

http://imageoptim

.com/

http://w

ww.w

3.org/G

raphics/SVG/

FRAMEWORKS E FERRAMENTAS

FRAMEWORKS

http://getbootstrap.com/

http://flatstrap.org/

http://gumbyframework.com/

http://foundatio

n.zurb.com/

http://w

ww.initializr.c

om/

http://resp

onsiveboilerplate.com/pt/index.htm

l

FERRAMENTAS

http://hoverstud.io

/calculator/

http://pxtoem.com/

http://m

atthewko

sloski.m

e/labs/pixem/

http://m

attke

rsley.com/resp

onsive/

http://lab.m

altewasserm

ann.com/viewport-resizer/

http://w

ww.opera.com/developer/mobile-emulator

http://caniuse.com/#feat=css-m

ediaquerie

s

http://placehold.it/

http://cssminifier.c

om/

http://lesscss.org/

http://koala-app.com/

Inspecione o iPhone através do Safari...

http://m

odernizr.c

om/

https://developers.google.com/w

eb/fundamentals/documentatio

n/m

ulti-device-layo

uts/index

http://w

ww.google.com/design

TOUCH EVENTS

• touchstart Quanto o dedo toca a superfície !

• touchmove Quanto o dedo desliza na superfície !

• touchend Quando o toque é finalizado

TOUCH EVENTS

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

})

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

})

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

})

TOUCH EVENTS

http://eightm

edia.gith

ub.io

/hammer.js/

PROTOTIPAÇÃO

http://jeremyp

alford.com/arch-journal/resp

onsive-w

eb-design-ske

tch-sheets/

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.

REFERÊNCIAS

MUITO OBRIGADO!