Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
  • Soyez le premier à commenter

Responsive web design

  1. 1. RESPONSIVE WEB DESIGN
  2. 2. www.tersis.com.br
  3. 3. FORMAÇÃO • DESIGN GRÁFICO PUCPR Graduação • DESIGN DE INTERAÇÃO FABER-LUDENS Especialização
  4. 4. ATUAÇÃO • Designer de interação e especialista front-end PH DESIGN SYSTEMS • Professor FACULDADES OPET • Diretor-presidente FABER-LUDENS
  5. 5. www.faberludens.com.br
  6. 6. http://icant.co.uk/talks/h5/pictures/posscon/clinton-obama-smartphones.jpg
  7. 7. http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight-Understanding-the-Mobile-Shift-Nov-2012.pdf
  8. 8. http://www.proxxima.com.br/home/mobile/2013/06/05/Brasileiros-acessando-internet-por-dispositivos-moveis-ultrapassou-via-
  9. 9. http://www.nielsen.com/us/en/newswire/2013/whos-winning-the-u-s-smartphone-market-.html
  10. 10. http://www.onbile.com/info/wp-content/uploads/2012/05/screen1.png
  11. 11. http://www.wired.com/images_blogs/gadgetlab/2013/04/121120_galaxynoteII_074.jpeg Telinha?
  12. 12. http://design215.com/toolbox/images/screen_resolutions.gif
  13. 13. http://www.simonmarxen.dk/portfolio/?p=165 Arquitetura responsiva “In the Bubble” - Simon Marxen
  14. 14. LAYOUT FIXO
  15. 15. http://www.savewalterwhite.com www.savewalterwhite.com
  16. 16. LAYOUT FLUÍDO
  17. 17. http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html
  18. 18. RESPONSIVE WEB DESIGN
  19. 19. 1. Layout flexível, baseado em grid ! 2. Imagens e mídias flexíveis ! 3. Media queries (CSS3)
  20. 20. http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  21. 21. http://www.massimobonini.com
  22. 22. RESPONSIVE WEB: VANTAGENS
  23. 23. Vantagens • Layout customizado • Adaptação de conteúdo
  24. 24. Vantagens Imagens flexíveis http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg
  25. 25. Vantagens • Otimização para ferramentas de busca • Centralização de conteúdo
  26. 26. Vantagens Experiência do usuário (UX) http://thumbnails.visually.netdna-cdn.com/responsive--native-in-the-ux-lifecycle_502919a230df9.png
  27. 27. Vantagens Velocidade de carregamento http://media02.hongkiat.com/serving-responsive-images/responsive-img.jpg
  28. 28. ATIVIDADES
  29. 29. http://www.freecsstemplates.org/preview/goodnatured/ www.freecsstemplates.org/preview/goodnatured/
  30. 30. http://bit.ly/LGZYtk
  31. 31. Antes de começar... http://drgina.files.wordpress.com/2009/04/girl-with-hand-out-stop1.jpg
  32. 32. Configurações da extensão Web Developer
  33. 33. RESET CSS
  34. 34. http://html5doctor.com/html-5-reset-
  35. 35. http://necolas.github.io/normalize.css/
  36. 36. http://finaid.utk.edu/images/Calculator.jpg A calculadora!
  37. 37. QUAL É O SEGREDO? http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg
  38. 38. alvo ÷ contexto = resultado QUAL É O SEGREDO? http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg
  39. 39. http://s2.manifo.com/usr/5/536D6/60/manager/pixel/nyan_cat___minecraft_pixel_art_by_soulsylver-d3hy8gz.png Pixel hater...
  40. 40. CONVERTENDO (px) para (em)
  41. 41. Convertendo (px) para (em) #logo h1 { Alvo (px) Contexto (100%) Resultado (em) font-size: 3.75em; /* 60px */ } 60px ÷ 16px 3.75em #logo h1
  42. 42. Convertendo (px) para (em) #logo p { font-size: 1.375em; /* 22px */ } 22px ÷ 16px 1.375em #logo p Alvo (px) Contexto (100%) Resultado (em)
  43. 43. Convertendo (px) para (em) h1 { font-size: 2em; /* 32px */ } 32px ÷ 16px 2em h1 Alvo (px) Contexto (100%) Resultado (em)
  44. 44. Convertendo (px) para (em) h2 { font-size: 2.75em; /* 44px */ } 44px ÷ 16px 2.75em h2 Alvo (px) Contexto (100%) Resultado (em)
  45. 45. Convertendo (px) para (em) h3 { font-size: 1.5625em; /* 25px */ } 25px ÷ 16px 1.5625em h3 Alvo (px) Contexto (100%) Resultado (em)
  46. 46. Convertendo (px) para (em) #splash { font-size: 3em; /* 48px */ } 48px ÷ 16px 3em #splash Alvo (px) Contexto (100%) Resultado (em)
  47. 47. Convertendo (px) para (em) #menu a { font-size: 1.25em; /* 20px */ } 20px ÷ 16px 1.25em #menu a Alvo (px) Contexto (100%) Resultado (em)
  48. 48. http://2.bp.blogspot.com/-_RvQvoCqn2Q/UB81SXPrKvI/AAAAAAAAT78/WYJJWLpb0h4/s1600/keep+calm.png
  49. 49. Convertendo (px) para (em) .post .meta { font-size: 1em; /* 16px */ } 16px ÷ 16px 1em .post .meta Alvo (px) Contexto (100%) Resultado (em)
  50. 50. Convertendo (px) para (em) .post .meta { font-size: 1em; /* 16px */ } 16px ÷ 16px 1em .post .meta Alvo (px) Contexto (100%) Resultado (em)
  51. 51. Convertendo (px) para (em) #footer-content h2 { font-size: 2.25em; /* 36px */ } 36px ÷ 16px 2.25em #footer-content h2 Alvo (px) Contexto (100%) Resultado (em)
  52. 52. http://simplefocus.com/flowtype/
  53. 53. PRONTO...
  54. 54. PRONTO... #SQÑ
  55. 55. CONVERTENDO (px) para (%)
  56. 56. alvo ÷ contexto = resultado Convertendo (px) para (%) http://www.wallsheer.com/wp-content/uploads/2013/09/Funny-Couple-Secret-Children-Wallpaper.jpg
  57. 57. alvo ÷ contexto = resultado http://www.wallsheer.com/wp-content/uploads/2013/09/Funny-Couple-Secret-Children-Wallpaper.jpg x 100 Convertendo (px) para (%)
  58. 58. Convertendo (px) para (%) #logo { width: 31.25%; /* 300px */ } 300px ÷ 960px 31.25% #logo Alvo (px) Contexto (px) Resultado x 100 = (%)
  59. 59. Convertendo (px) para (%) #menu { width: 52.08%; /* 500px */ } 500px ÷ 960px 52.08% #menu Alvo (px) Contexto (px) Resultado x 100 = (%)
  60. 60. Convertendo (px) para (%) #content { width: 62%; /* 620px */ } 620px ÷ 1000px 62% #content Alvo (px) Contexto (px) Resultado x 100 = (%)
  61. 61. Convertendo (px) para (%) #sidebar, #column1, #column2, #column3 Alvo (px) Contexto (px) #sidebar { width: 32%; /* 320px */ } 320px ÷ 1000px Resultado x 100 = (%) 32%
  62. 62. MARGIN E PADDING FLEXÍVEIS
  63. 63. Margin e padding flexíveis Marcotte (2010)
  64. 64. 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
  65. 65. CSS box-sizing http://css-tricks.com/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; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
  66. 66. Margin e padding flexíveis #logo p { Contexto (px) padding: 0 0 0 1.666666666667%; /* 5px / 300px */ } 5px ÷ 300px 1.666666666667% #logo p Alvo (px) Resultado x 100 (%)
  67. 67. Margin e padding flexíveis #content { Contexto (px) padding: 0 4% 0 0; /* 40px / 1000px */ } 40px ÷ 1000px 4% #content Alvo (px) Resultado x 100 (%) CUIDADO com o float! cuidado com o float
  68. 68. IMAGENS FLUÍDAS
  69. 69. img, embed, object, video { } max-width: 100%; Imagens fluídas http://www.cloudsoftwareprogram.org/rs/372/e9c4455d-a317-4f4c-9f70-108d736bae98/01f/filename/superior-user-experience.jpg
  70. 70. 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.
  71. 71. img, embed, object, video { } height: auto; Imagens fluídas http://www.cloudsoftwareprogram.org/rs/372/e9c4455d-a317-4f4c-9f70-108d736bae98/01f/filename/superior-user-experience.jpg
  72. 72. http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
  73. 73. http://filamentgroup.com/examples/responsive-images/
  74. 74. https://github.com/scottjehl/picturefill
  75. 75. https://github.com/scottjehl/Responsive-Images
  76. 76. http://responsiveimages.org/
  77. 77. http://imageoptim.com/
  78. 78. http://www.w3.org/Graphics/SVG/
  79. 79. VIEWPORT
  80. 80. 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" />
  81. 81. MEDIA QUERIES
  82. 82. 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 (max-width: 1080px) { ! } @media screen and (min-width: 320px) and (max-width: 480px) { ! }
  83. 83. Contexto (px) 1000px ÷ 1080px 92.59% Media Queries .container Alvo (px) Resultado x 100 (%) @media screen and (max-width: 1080px) { .container { width: 92.59%; } }
  84. 84. Contexto (px) 960px ÷ 1080px 88.88% Media Queries #header Alvo (px) Resultado x 100 (%) @media screen and (max-width: 1080px) { #header { width: 88.88%; } }
  85. 85. Media Queries 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 screen and (max-width: 1080px) { #wrapper { min-width: 100%; } }
  86. 86. http://nmsdvid.com/snippets/
  87. 87. BREAKPOINTS
  88. 88. Breakpoints http://www.eacsoft.com/eacmag/wp-content/uploads/2013/06/resposive-design.jpg
  89. 89. Breakpoints Content stacking
  90. 90. Breakpoints @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; } }
  91. 91. Breakpoints @media screen and (max-width: 767px) { #content, #sidebar { width: 100%; } }
  92. 92. Breakpoints @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; } }
  93. 93. http://caniuse.com/#feat=css-mediaqueries
  94. 94. https://code.google.com/p/css3-mediaqueries-js/
  95. 95. https://github.com/scottjehl/Respond
  96. 96. FRAMEWORKS
  97. 97. http://getbootstrap.com/
  98. 98. http://flatstrap.org/
  99. 99. http://gumbyframework.com/
  100. 100. http://foundation.zurb.com/
  101. 101. http://www.initializr.com/
  102. 102. http://responsiveboilerplate.com/pt/index.html
  103. 103. FERRAMENTAS
  104. 104. http://hoverstud.io/calculator/
  105. 105. http://pxtoem.com/
  106. 106. http://matthewkosloski.me/labs/pixem/
  107. 107. http://mattkersley.com/responsive/
  108. 108. http://lab.maltewassermann.com/viewport-resizer/
  109. 109. http://www.opera.com/developer/mobile-emulator
  110. 110. http://caniuse.com/
  111. 111. http://placehold.it/
  112. 112. http://cssminifier.com/
  113. 113. http://lesscss.org/
  114. 114. http://koala-app.com/
  115. 115. Inspecione o iPhone através do Safari...
  116. 116. http://modernizr.com/
  117. 117. https://developers.google.com/web/fundamentals/documentation/multi-device-layouts/index
  118. 118. http://www.google.com/design
  119. 119. TOUCH EVENTS
  120. 120. Touch events • touchstart Quanto o dedo toca a superfície ! • touchmove Quanto o dedo desliza na superfície ! • touchend Quando o toque é finalizado
  121. 121. Touch events document.addEventListener(‘touchstart’, function(e) { ... }) document.addEventListener(‘touchmove’, function(e) { ... }) document.addEventListener(‘touchend’, function(e) { ... })
  122. 122. http://eightmedia.github.io/hammer.js/
  123. 123. MOBILE FIRST
  124. 124. Foco no conteúdo + Priorizar o necessário + Usar somente o que for preciso = Melhor experiência do usuário! Mobile first
  125. 125. Não esconder conteúdo... ? Mobile first
  126. 126. 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...
  127. 127. PROTOTIPAÇÃO
  128. 128. http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets/
  129. 129. REFERÊNCIAS
  130. 130. 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.
  131. 131. MUITO OBRIGADO!

×