Responsive web design

  • Published on
    14-Nov-2014

  • View
    5.084

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Transcript

<ul><li> 1. Responsive web design TERSIS ZONATO 2013 </li></ul> <p> 2. ! www.tersis.com.br ! tersishiranzonato@gmail.com 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 </p>