Responsive Web Design e a Ubiquidade da Web

Responsive Web Design e a Ubiquidade da Web

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.

Fa59eb5159c978e2577e65f45fa9171f?s=128

Eduardo Shiota Yasuda

August 05, 2012
Tweet

Transcript

  1. Responsive Web Design Eduardo Shiota Yasuda @shiota | www.eshiota.com e

    a ubiquidade da web
  2. Uma (breve) História do Design na Web

  3. Tim Berners-Lee Pai do HTTP, HTML, diretor da W3C, e

    cavaleiro.
  4. Primeira página da Web http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

  5. Primeira Página do UOL 23/12/1996 - archive.org

  6. None
  7. None
  8. None
  9. None
  10. None
  11. EVIL

  12. None
  13. HTML » Print » Table » Tableless » Standards »

    ?
  14. http://1to1interactive.net/blog/?p=1718

  15. http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html

  16. http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html

  17. Jeremy Keith's — @adactio — Instagram

  18. HTML » Print » Table » Tableless » Standards »

    Responsive Web Design
  19. Solução agnóstica à plataforma, browser e dispositivo Responsive Web Design

  20. Desktop UOL iPad Portrait iPad Landscape iPhone Portrait iPhone Landscape

    Close, but no cigar.
  21. Desktop Desktop? UOL Close, but no cigar.

  22. Desktop iPad Portrait iPad Landscape iPhone Portrait iPhone Landscape The

    Boston Globe Responsivelicious
  23. 1. Design flexível + 2. Media Queries + 3. Ajustes

    e plugins
  24. None
  25. Tipografia, grid & conteúdo Flexible Web Design

  26. Target ÷ Contexto = Dimensão Golden rule

  27. `em` Tipografia

  28. None
  29. 14px/21px 70px/80px 24px/32px

  30. 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; }
  31. body » font-size: 100% (16px na maioria dos browsers)

  32. body { font: normal normal 100%/1.5 "cabin", sans-serif; }

  33. target (70px) target (24px) target (14px) CONTEXTO » body (16px)

  34. Target ÷ Contexto = Dimensão 70px ÷ 16px = 4.375em

    80px ÷ 70px = 1.142857143 24px ÷ 16px = 1.5em 32px ÷ 24px = 1.333333
  35. 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 */ }
  36. % Grids

  37. 1000px 65px 20px 660px 320px

  38. #container { width: 1000px; } .main-content { float: left; width:

    660px; margin-right: 20px; } .side-content { float: left; width: 320px; }
  39. Contexto (1000px) Target (65px) Target (20px) Target (660px) Target (320px)

  40. Target ÷ Contexto = Dimensão 1000px = 100% 660px ÷

    1000px = 66% 20px ÷ 1000px = 2% 320px ÷ 1000px = 32%
  41. #container { width: 100%; } .main-content { float: left; width:

    66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */ } .side-content { float: left; width: 32%; /* 32px ÷ 1000px */ }
  42. max-width: 100% img, embed, object, video (IE6 => width: 100%)

    Conteúdo
  43. 525px 210px

  44. .blog-post .alignright { float: right; margin: 0 0 20px 16px;

    } .blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px; }
  45. Contexto (525px) Target (210px)

  46. Target ÷ Contexto = Dimensão 210px ÷ 525px = 40%

  47. .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; }
  48. None
  49. None
  50. $(function () { $(“#site-content”).find(“.main-content”).fitVids(); });

  51. None
  52. None
  53. $(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" }); });
  54. Tipos e features Media Queries

  55. all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

    Tipos Features color color-index (min | max-)aspect-ratio (min | max-)device-aspect-ratio (min | max-)device-height (min | max-)device-width (min | max-)height (min | max-)width grid monochrome orientation (min | max-)resolution scan -webkit-(min | max-)device-pixel-ratio
  56. ou <link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1200px)” /> @media screen

    and (max-width: 1200px) { /* insert styles here */ } Sintaxe Uso [only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]* [, [only | not]? {tipo} and ({feature}: [:{valor}]?) [and ({feature}[:{valor}]?)]* ]
  57. @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) {} Exemplos
  58. Exemplos @media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px)

    and (-webkit-min-device-aspect-ratio:1.5) {} device-width: 1024px device-height: 768px orientation: landscape -webkit-min-device-aspect-ratio: 1.5 (novo iPad)
  59. @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 }
  60. The New iPad™, iPhone 4(S), The Next Generation MacBook Pro

    with Retina Display™ Retina Display
  61. 16 x 1 physical pixels 16 x 1 virtual pixels

    device-pixel-ratio: 1 32 x 2 physical pixels 16 x 1 virtual pixels device-pixel-ratio: 2 Normal displays “Retina” displays
  62. Display: Mostra physical pixels CSS: Interpreta virtual pixels

  63. Physical Pixels: Imagens 4x maiores (2x width / 2x height)

    Virtual Pixels: Dimensões virtuais, imagens redimensionadas
  64. 240px 57px

  65. sprite.png 130px 260px Normal display

  66. #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; } Normal display
  67. “Retina” display sprite@2x.png 260px 520px

  68. “Retina” display @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1

    a { display: block; width: 240px; /* Virtual pixels, continua igual */ height: 57px; /* Virtual pixels, continua igual */ background-image: url(../images/sprite@2x.png); background-repeat: no-repeat; background-position: -10px -10px; /* Virtual pixels, continua igual */ -webkit-background-size: 260px 130px; /* Dimensionando os Physical */ -moz-background-size: 260px 130px; /* Pixels da imagem para os */ -ms-background-size: 260px 130px; /* Virtual Pixels do browser */ -o-background-size: 260px 130px; background-size: 260px 130px; overflow: hidden; text-indent: 100%; white-space: nowrap; } }
  69. @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a {

    background-image: url(../images/sprite@2x.png); -webkit-background-size: 260px 130px; -moz-background-size: 260px 130px; -ms-background-size: 260px 130px; -o-background-size: 260px 130px; background-size: 260px 130px; } } “Retina” display
  70. Responsive Images

  71. None
  72. 3008 x 2000

  73. FAIL

  74. None
  75. <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>
  76. 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/ Responsive Images
  77. Nenhuma Media Query funciona no IE6–8 sem plugin. =/ WARNING

  78. Fallback para IE

  79. None
  80. None
  81. Obrigado! @shiota | www.eshiota.com