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

6.
EVIL

7.
HTML » Print » Table » Tableless » Standards » ?

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

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

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

11.
Jeremy Keith's — @adactio — Instagram

12.
HTML » Print » Table » Tableless » Standards »
Responsive Web Design

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

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

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

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

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

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

19.
Golden rule
Target ÷ Contexto = Dimensão

20.
Tipografia
`em`

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

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

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

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

26.
Target ÷ Contexto = Dimensão
70px ÷ 16px = 4.375em
80px ÷ 70px = 1.142857143
24px ÷ 16px = 1.5em
32px ÷ 24px = 1.333333

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.
Grids
%

29.
1000px
65px
20px
660px 320px

30.
#container {
width: 1000px;
}
.main-content {
float: left;
width: 660px;
margin-right: 20px;
}
.side-content {
float: left;
width: 320px;
}

31.
Contexto (1000px)
Target (65px)
Target (20px)
Target (660px) Target (320px)

32.
Target ÷ Contexto = Dimensão
1000px = 100%
660px ÷ 1000px = 66%
20px ÷ 1000px = 2%
320px ÷ 1000px = 32%

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

35.
525px
210px

36.
.blog-post .alignright {
float: right;
margin: 0 0 20px 16px;
}
.blog-post .alignright img {
/* + 2px border + 2px padding = 210px */
width: 206px;
}

37.
Contexto (525px)
Target (210px)

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

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

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

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

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.
Display: Mostra physical pixels
CSS: Interpreta virtual pixels

51.
Physical Pixels: Imagens 4x maiores (2x width / 2x height)
Virtual Pixels: Dimensões virtuais, imagens redimensionadas

52.
57px
240px

53.
Normal display
sprite.png
130px
260px

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.
“Retina” display
sprite@2x.png
260px
520px

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.
“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.
Responsive Images

59.
3008 x 2000

60.
FAIL

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.
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.
WARNING
Nenhuma Media Query funciona no IE6–8 sem plugin. =/

64.
Fallback para IE

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