Successfully reported this slideshow.

Responsive Web Design e a Ubiquidade da Web

32

Share

Loading in …3
×
1 of 81
1 of 81

Responsive Web Design e a Ubiquidade da Web

32

Share

Download to read offline

Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos?

O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.

Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos?

O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Responsive Web Design e a Ubiquidade da Web

  1. 1. Responsive Web Design e a ubiquidade da web Eduardo Shiota Yasuda @shiota | www.eshiota.com
  2. 2. Uma (breve) História do Design na Web
  3. 3. Tim Berners-Lee Pai do HTTP, HTML, diretor da W3C, e cavaleiro.
  4. 4. Primeira página da Web http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  5. 5. Primeira Página do UOL 23/12/1996 - archive.org
  6. 6. EVIL
  7. 7. HTML » Print » Table » Tableless » Standards » ?
  8. 8. http://1to1interactive.net/blog/?p=1718
  9. 9. http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html
  10. 10. http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html
  11. 11. Jeremy Keith's — @adactio — Instagram
  12. 12. HTML » Print » Table » Tableless » Standards » Responsive Web Design
  13. 13. Responsive Web Design Solução agnóstica à plataforma, browser e dispositivo
  14. 14. UOL Close, but no cigar. Desktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  15. 15. UOL Close, but no cigar. Desktop Desktop?
  16. 16. The Boston Globe Responsivelicious Desktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  17. 17. 1. Design flexível + 2. Media Queries + 3. Ajustes e plugins
  18. 18. Flexible Web Design Tipografia, grid & conteúdo
  19. 19. Golden rule Target ÷ Contexto = Dimensão
  20. 20. Tipografia `em`
  21. 21. 70px/80px 24px/32px 14px/21px
  22. 22. body { font: normal normal 14px/21px "cabin", sans-serif; } .headline h1 { font: normal bold 70px/80px "enriqueta", serif; } .headline p { font-size: 24px; line-height: 32px; }
  23. 23. body » font-size: 100% (16px na maioria dos browsers)
  24. 24. body { font: normal normal 100%/1.5 "cabin", sans-serif; }
  25. 25. target (70px) target (24px) CONTEXTO » body (16px) target (14px)
  26. 26. Target ÷ Contexto = Dimensão 70px ÷ 16px = 4.375em 80px ÷ 70px = 1.142857143 24px ÷ 16px = 1.5em 32px ÷ 24px = 1.333333
  27. 27. body { font: normal normal 100%/1.5 "cabin", sans-serif; } .headline h1 { /* 70px ÷ 16px & 80px ÷ 70px */ font: normal bold 4.375em/1.142857143 "enriqueta", serif; } .headline p { font-size: 1.5em; /* 24px ÷ 16px */ line-height: 1.333333; /* 32px ÷ 24px */ } .blog-post .post-content { font-size: .875em; /* 14px ÷ 16px */ }
  28. 28. Grids %
  29. 29. 1000px 65px 20px 660px 320px
  30. 30. #container { width: 1000px; } .main-content { float: left; width: 660px; margin-right: 20px; } .side-content { float: left; width: 320px; }
  31. 31. Contexto (1000px) Target (65px) Target (20px) Target (660px) Target (320px)
  32. 32. Target ÷ Contexto = Dimensão 1000px = 100% 660px ÷ 1000px = 66% 20px ÷ 1000px = 2% 320px ÷ 1000px = 32%
  33. 33. #container { width: 100%; } .main-content { float: left; width: 66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */ } .side-content { float: left; width: 32%; /* 32px ÷ 1000px */ }
  34. 34. Conteúdo max-width: 100% img, embed, object, video (IE6 => width: 100%)
  35. 35. 525px 210px
  36. 36. .blog-post .alignright { float: right; margin: 0 0 20px 16px; } .blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px; }
  37. 37. Contexto (525px) Target (210px)
  38. 38. Target ÷ Contexto = Dimensão 210px ÷ 525px = 40%
  39. 39. .blog-post .alignright { float: right; margin: 0 0 20px 16px; width: 40%; } .blog-post .alignright img { max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; }
  40. 40. $(function () { $(“#site-content”).find(“.main-content”).fitVids(); });
  41. 41. $(function () { $(“#site-content”).find(“.main-content”).fitVids(); // FitText's formula: // // fontSize = elementWidth / (compressor * 10) // fontSize = 70 // elementWidth = 1000 // compressor = 100/70 = 1.428571429 $("#site-content") .find(".headline h1") .fitText(1.428571429, { minFontSize: "36px", maxFontSize: "96px" }); });
  42. 42. Media Queries Tipos e features
  43. 43. Tipos all, braille, embossed, handheld, print, projection, screen, speech, tty, tv Features color (min | max-)width color-index grid (min | max-)aspect-ratio monochrome (min | max-)device-aspect-ratio orientation (min | max-)device-height (min | max-)resolution (min | max-)device-width scan (min | max-)height -webkit-(min | max-)device-pixel-ratio
  44. 44. Sintaxe [only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]* [, [only | not]? {tipo} and ({feature}: [:{valor}]?) [and ({feature}[:{valor}]?)]* ] Uso <link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1200px)” /> ou @media screen and (max-width: 1200px) { /* insert styles here */ }
  45. 45. Exemplos @media print and (max-width:21cm) {} @media all and (max-width: 1024px) {} @media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px), only screen and (-webkit-device-aspect-ratio:1.5) {}
  46. 46. Exemplos @media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px), only screen and (-webkit-device-aspect-ratio:1.5) {} device-width: 1024px -webkit-device-aspect-ratio: 1.5 (novo iPad) device-height: 768px orientation: landscape
  47. 47. @media screen and (max-width: 1024px) { // Diminuir a fonte do menu } @media screen and (max-width: 960px) { // Diminuir Header, logo e H2 // Galeria de fotos em 3 colunas // Nav fixo à esquerda // Search input maior } @media screen and (max-width: 840px) { // Diminuir H2, nav e campo de busca // Formatação de data simples } @media screen and (max-width: 767px) { // Uma coluna ao invés de duas }
  48. 48. Retina Display The New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
  49. 49. 16 x 1 physical pixels 16 x 1 virtual pixels device-pixel-ratio: 1 Normal displays 32 x 2 physical pixels 16 x 1 virtual pixels device-pixel-ratio: 2 “Retina” displays
  50. 50. Display: Mostra physical pixels CSS: Interpreta virtual pixels
  51. 51. Physical Pixels: Imagens 4x maiores (2x width / 2x height) Virtual Pixels: Dimensões virtuais, imagens redimensionadas
  52. 52. 57px 240px
  53. 53. Normal display sprite.png 130px 260px
  54. 54. Normal display #site-header h1 a { display: block; width: 240px; height: 57px; background-image: url(../images/sprite.png); background-repeat: no-repeat; background-position: -10px -10px; overflow: hidden; text-indent: 100%; white-space: nowrap; }
  55. 55. “Retina” display sprite@2x.png 260px 520px
  56. 56. “Retina” display @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { width: 240px; /* Virtual pixels, continua igual */ height: 57px; /* Virtual pixels, continua igual */ background-image: url(../images/sprite@2x.png); background-position: -10px -10px; /* Virtual pixels, continua igual */ -webkit-background-size: 50% 50%; /* Dimensionando os Physical */ -moz-background-size: 50% 50%; /* Pixels da imagem para os */ -ms-background-size: 50% 50%; /* Virtual Pixels do browser */ -o-background-size: 50% 50%; background-size: 50% 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; } }
  57. 57. “Retina” display @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { background-image: url(../images/sprite@2x.png); -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -ms-background-size: 50% 50%; -o-background-size: 50% 50%; background-size: 50% 50%; } }
  58. 58. Responsive Images
  59. 59. 3008 x 2000
  60. 60. FAIL
  61. 61. <div data-picture data-alt="A beautiful kitty"> <div data-src="jamie_small.jpg"></div> <div data-src="jamie_medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="jamie_large.jpg" data-media="(min-width: 800px)"></div> <div data-src="jamie_extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. --> <noscript> <img src="external/imgs/jamie_small.jpg" alt="A beautiful kitty"> </noscript> </div>
  62. 62. Responsive Images HiSRC Usa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag <img> https://github.com/teleject/hisrc Adaptive Images Server-side, usa .htaccess e PHP http://code.google.com/p/css3-mediaqueries-js/ Picturefill Usa JavaScript, segue a proposta mais aceita entre developers sobre Responsive Images (tag <picture>) https://github.com/scottjehl/picturefill Outros O Chris Coyier, do CSS-Tricks, fez um excelente comparativo entre as diferentes técnicas (link em inglês) http://css-tricks.com/which-responsive-images-solution-should-you-use/
  63. 63. WARNING Nenhuma Media Query funciona no IE6–8 sem plugin. =/
  64. 64. Fallback para IE
  65. 65. Obrigado! @shiota | www.eshiota.com

×