- 1. Responsive web design TERSIS ZONATO 2013
2. ! www.tersis.com.br ! [email protected] Tersis
Zonato Desenhista industrial ! Designer grco ! Designer de interao
3.
http://icant.co.uk/talks/h5/pictures/posscon/clinton-obama-smartphones.jpg
4.
http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight-Understanding-the-Mobile-Shift-Nov-2012.pdf
5.
http://www.proxxima.com.br/home/mobile/2013/06/05/Brasileiros-acessando-internet-por-dispositivos-moveis-ultrapassou-via-
6.
http://www.nielsen.com/us/en/newswire/2013/whos-winning-the-u-s-smartphone-market-.html
7.
http://www.onbile.com/info/wp-content/uploads/2012/05/screen1.png
8.
http://www.wired.com/images_blogs/gadgetlab/2013/04/121120_galaxynoteII_074.jpeg
Telinha? 9.
http://design215.com/toolbox/images/screen_resolutions.gif 10.
http://www.simonmarxen.dk/portfolio/?p=165 In the Bubble - Simon
Marxen Arquitetura responsiva 11. Layout xo 12.
http://www.savewalterwhite.com www.savewalterwhite.com 13. Layout
udo 14.
http://d.alistapart.com/responsive-web-design/ex/ex-site-exible.html
15. Responsive web design 16. 1. Layout exvel, baseado em grid ! 2.
Imagens e mdias exveis ! 3. Media queries (CSS3) 17.
http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
18. http://www.massimobonini.com 19. Responsive design: Vantagens
20. Vantagens Layout customizado Adaptao de contedo 21.
http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg
Vantagens Imagens exveis 22. Vantagens Otimizao para ferramentas de
busca Centralizao de contedo 23. Vantagens Experincia do usurio
(UX)
http://thumbnails.visually.netdna-cdn.com/responsive--native-in-the-ux-lifecycle_502919a230df9.png
24. Vantagens Velocidade de carregamento
http://media02.hongkiat.com/serving-responsive-images/responsive-img.jpg
25. Atividades 26.
http://www.freecsstemplates.org/preview/goodnatured/
www.freecsstemplates.org/preview/goodnatured/ 27.
http://bit.ly/LGZYtk 28.
http://drgina.les.wordpress.com/2009/04/girl-with-hand-out-stop1.jpg
Antes de comear... 29. Conguraes da extenso Web Developer 30. Reset
CSS 31. http://html5doctor.com/html-5-reset- 32.
http://necolas.github.io/normalize.css/ 33.
http://naid.utk.edu/images/Calculator.jpg A calculadora! 34. alvo
contexto = resultado
http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg 35.
http://s2.manifo.com/usr/5/536D6/60/manager/pixel/nyan_cat___minecraft_pixel_art_by_soulsylver-d3hy8gz.png
Pixel hater... 36. Convertendo (px) para (em) 37. #logo h1 {
font-size: 3.75em; /* 60px */ } 60px Convertendo (px) para (em)
16px Alvo (px) Contexto (100%) 3.75em Resultado (em) #logo h1 38.
#logo p { font-size: 1.375em; /* 22px */ } 22px Convertendo (px)
para (em) 16px 1.375em #logo p Alvo (px) Contexto (100%) Resultado
(em) 39. h1 { font-size: 2em; /* 32px */ } 32px Convertendo (px)
para (em) 16px 2em h1 Alvo (px) Contexto (100%) Resultado (em) 40.
h2 { font-size: 2.75em; /* 44px */ } 44px Convertendo (px) para
(em) 16px 2.75em h2 Alvo (px) Contexto (100%) Resultado (em) 41. h3
{ font-size: 1.5625em; /* 25px */ } 25px Convertendo (px) para (em)
16px 1.5625em h3 Alvo (px) Contexto (100%) Resultado (em) 42.
#splash { font-size: 3em; /* 48px */ } 48px Convertendo (px) para
(em) 16px 3em #splash Alvo (px) Contexto (100%) Resultado (em) 43.
#menu a { font-size: 1.25em; /* 20px */ } 20px Convertendo (px)
para (em) 16px 1.25em #menu a Alvo (px) Contexto (100%) Resultado
(em) 44.
http://2.bp.blogspot.com/-_RvQvoCqn2Q/UB81SXPrKvI/AAAAAAAAT78/WYJJWLpb0h4/s1600/keep+calm.png
45. .post .meta { font-size: 1em; /* 16px */ } 16px Convertendo
(px) para (em) 16px 1em .post .meta Alvo (px) Contexto (100%)
Resultado (em) 46. #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) 47.
http://simplefocus.com/owtype/ 48. PRONTO... #SQ 49. Convertendo
(px) para (%) 50.
http://www.wallsheer.com/wp-content/uploads/2013/09/Funny-Couple-Secret-Children-Wallpaper.jpg
alvo contexto = resultado x 100 Convertendo (px) para (%) 51. #logo
{ width: 31.25%; /* 300px */ } 300px Convertendo (px) para (%)
960px 31.25% #logo Alvo (px) Contexto (px) Resultado x 100 = (%)
52. #menu { width: 52.08%; /* 500px */ } 500px Convertendo (px)
para (%) 960px 52.08% #menu Alvo (px) Contexto (px) Resultado x 100
= (%) 53. #content { width: 62%; /* 620px */ } 620px Convertendo
(px) para (%) 1000px 62% #content Alvo (px) Contexto (px) Resultado
x 100 = (%) 54. #sidebar { width: 32%; /* 320px */ } 320px
Convertendo (px) para (%) 1000px 32% #sidebar, #column1, #column2,
#column3 Alvo (px) Contexto (px) Resultado x 100 = (%) 55. Margin e
padding exveis 56. Margin e padding exveis Marcotte (2010) 57.
Margin e padding exveis 1. Ao denir a propriedade margin de um
elemento, o contexto a largura do elemento que o contm; ! 2. Ao
denir a propriedade padding de um elemento, o contexto a largura do
prprio elemento. padding contedo margin border 58. CSS box-sizing
http://css-tricks.com/box-sizing/ .elemento { box-sizing:
border-box; -ms-box-sizing: border-box; -moz-box-sizing:
border-box; -webkit-box-sizing: border-box; } possvel 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 nal do
elemento. 59. #logo p { padding: 0 0 0 1.666666666667%; /* 5px /
300px */ } 5px 300px 1.666666666667% #logo p Margin e padding
exveis Alvo (px) Resultado x 100 (%) Contexto (px) 60. #content {
padding: 0 4% 0 0; /* 40px / 1000px */ } 40px 1000px 4% #content
Margin e padding exveis Alvo (px) Resultado x 100 (%) Contexto (px)
cuidado com o oat CUIDADO com o oat! 61. Imagens udas 62.
http://www.cloudsoftwareprogram.org/rs/372/e9c4455d-a317-4f4c-9f70-108d736bae98/01f/lename/superior-user-experience.jpg
img, embed, object, video { max-width: 100%; } Imagens udas 63.
img, embed, object, video { width: 100%; } Imagens udas O Internet
Explorer 6 no suporta max-width... 64. Imagens udas O banner est
com uma altura xa de 400px podendo travar o tamanho em telas
menores. ! A imagem tem 350px de altura com a borda. ! Portanto
possvel usar um padding-bottom de 50px. 65.
http://www.cloudsoftwareprogram.org/rs/372/e9c4455d-a317-4f4c-9f70-108d736bae98/01f/lename/superior-user-experience.jpg
img, embed, object, video { height: auto; } Imagens udas 66.
http://www.dillerdesign.com/experiment/DD_belatedPNG/ 67.
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
68. http://lamentgroup.com/examples/responsive-images/ 69.
https://github.com/scottjehl/picturell 70.
https://github.com/scottjehl/Responsive-Images 71.
http://responsiveimages.org/ 72. http://imageoptim.com/ compactar
imagens 73. http://www.w3.org/Graphics/SVG/ compactar imagens 74.
Viewport 75. Viewport width (pixel width/device width); height
(pixel height/device height); initial-scale; minimum-scale;
maximum-scale; user-scalable (yes/no). ! 76. Media Queries 77. ! !
Media Queries @media screen and (min-width: 320px) and (max-width:
480px) { ! } @media screen and (max-width: 1080px) { ! } 78. 1000px
1080px 92.59% .container Media Queries Alvo (px) Resultado x 100
(%) Contexto (px) @media screen and (max-width: 1080px) {
.container { width: 92.59%; } } 79. 960px 1080px 88.88% #header
Media Queries Alvo (px) Resultado x 100 (%) Contexto (px) @media
screen and (max-width: 1080px) { #header { width: 88.88%; } } 80. A
div #wrapper est com a propriedade min-width denida com 1000px. !
Basta alterar para 100% e o contedo ir se adaptar largura da tela.
Media Queries @media screen and (max-width: 1080px) { #wrapper {
min-width: 100%; } } 81. http://nmsdvid.com/snippets/ 82.
Breakpoints 83.
http://www.eacsoft.com/eacmag/wp-content/uploads/2013/06/resposive-design.jpg
Breakpoints 84. Breakpoints Content stacking 85. @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 86. @media screen and (max-width: 767px) { #content,
#sidebar { width: 100%; } } Breakpoints 87. @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 88.
http://caniuse.com/#feat=css-mediaqueries 89.
https://code.google.com/p/css3-mediaqueries-js/ 90.
https://github.com/scottjehl/Respond 91. Frameworks 92.
http://getbootstrap.com/ 93. http://atstrap.org/ 94.
http://gumbyframework.com/ 95. http://foundation.zurb.com/ 96.
http://www.initializr.com/ 97.
http://responsiveboilerplate.com/pt/index.html 98. Ferramentas 99.
http://hoverstud.io/calculator/ 100. http://pxtoem.com/ 101.
http://matthewkosloski.me/labs/pixem/ 102.
http://mattkersley.com/responsive/ 103.
http://lab.maltewassermann.com/viewport-resizer/ 104.
http://www.opera.com/developer/mobile-emulator 105.
http://caniuse.com/ 106. http://placehold.it/ 107.
http://cssminier.com/ 108. http://lesscss.org/ 109. Inspecione o
iPhone atravs do Safari... 110. http://modernizr.com/ 111.
https://developers.google.com/web/fundamentals/documentation/multi-device-layouts/index
112. Touch events 113. touchstart Quanto o dedo toca a superfcie !
touchmove Quanto o dedo desliza na superfcie ! touchend Quando o
toque nalizado Touch events 114. Touch events
document.addEventListener(touchstart, function(e) { ... })
document.addEventListener(touchmove, function(e) { ... })
document.addEventListener(touchend, function(e) { ... }) 115.
http://eightmedia.github.io/hammer.js/ 116. Mobile rst 117. Foco no
contedo + Priorizar o necessrio + Usar somente o que for preciso =
Melhor experincia do usurio! Mobile rst 118. No esconder
contedo...? Mobile rst 119. Mobile rst Pense relativo, no esttico
ou absoluto; ! Aprimoramentos CSS/JavaScript; ! Evite carregar
dados desnecessrios; ! Transies CSS (JavaScript so acelerados por
hardware); ! Sprites CSS; ! Simplique... 120. Prototipao 121.
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets/
122. Referncias 123. Referncias EPSTEIN, Zach.Apples global tablet
market share falls to all-time low.BGR, 2013. Disponvel em: .
Acesso em: 05 set. 2013. ! MARCOTTE, Ethan.Responsive Web Design.A
List Apart, 2010. Disponvel em: . 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. Disponvel em: . Acesso em: 03 set. 2013. 124.
Muito obrigado! www.tersis.com.br TERSIS ZONATO 2013
