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.

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
11. EVIL
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
25. Tipografia, grid & conteúdo Flexible Web Design
26. Target ÷ Contexto = Dimensão Golden rule
27. `em` Tipografia
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; }
50. $(function () { $(“#site-content”).find(“.main-content”).fitVids(); });
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
72. 3008 x 2000
73. FAIL
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
81. Obrigado! @shiota | www.eshiota.com