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.

1. Responsive Web Design
e a ubiquidade da web
Eduardo Shiota Yasuda
@shiota | www.eshiota.com

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. Responsive Web Design
Solução agnóstica à plataforma, browser e dispositivo

20. UOL
Close, but no cigar.
Desktop iPad Portrait iPad Landscape iPhone iPhone
Portrait Landscape

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

22. The Boston Globe
Responsivelicious
Desktop iPad Portrait iPad Landscape iPhone iPhone
Portrait Landscape

23. 1. Design flexível
+
2. Media Queries
+
3. Ajustes e plugins

25. Flexible Web Design
Tipografia, grid & conteúdo

26. Golden rule
Target ÷ Contexto = Dimensão

27. Tipografia
`em`

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

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)
CONTEXTO » body (16px)
target (14px)

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. Conteúdo
max-width: 100%
img, embed, object, video
(IE6 => width: 100%)

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. Media Queries
Tipos e features

55. 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

56. 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 */
}

57. 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) {}

58. 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

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. Retina Display
The New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™

61. 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

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. 57px
240px

65. Normal display
sprite.png
130px
260px

66. 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;
}

67. “Retina” display
sprite@2x.png
260px
520px

68. “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;
}
}

69. “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%;
}
}

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. 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/

77. WARNING
Nenhuma Media Query funciona no IE6–8 sem plugin. =/

78. Fallback para IE

81. Obrigado!
@shiota | www.eshiota.com