View
127
Download
0
Category
Preview:
Citation preview
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!
Recommended