Slide 1
Slide 1 text
Responsive Web Design
Eduardo Shiota Yasuda
@shiota | www.eshiota.com
e a ubiquidade da web
Slide 2
Slide 2 text
Uma (breve) História
do Design na Web
Slide 3
Slide 3 text
Tim Berners-Lee
Pai do HTTP, HTML, diretor da W3C, e cavaleiro.
Slide 4
Slide 4 text
Primeira página da Web
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 5
Slide 5 text
Primeira Página do UOL
23/12/1996 - archive.org
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
EVIL
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
HTML » Print » Table » Tableless » Standards » ?
Slide 14
Slide 14 text
http://1to1interactive.net/blog/?p=1718
Slide 15
Slide 15 text
http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html
Slide 16
Slide 16 text
http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html
Slide 17
Slide 17 text
Jeremy Keith's — @adactio — Instagram
Slide 18
Slide 18 text
HTML » Print » Table » Tableless » Standards »
Responsive Web Design
Slide 19
Slide 19 text
Solução agnóstica à plataforma, browser e dispositivo
Responsive Web Design
Slide 20
Slide 20 text
Desktop
UOL
iPad Portrait iPad Landscape iPhone
Portrait
iPhone
Landscape
Close, but no cigar.
Slide 21
Slide 21 text
Desktop Desktop?
UOL
Close, but no cigar.
Slide 22
Slide 22 text
Desktop iPad Portrait iPad Landscape iPhone
Portrait
iPhone
Landscape
The Boston Globe
Responsivelicious
Slide 23
Slide 23 text
1. Design flexível
+
2. Media Queries
+
3. Ajustes e plugins
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Tipografia, grid & conteúdo
Flexible Web Design
Slide 26
Slide 26 text
Target ÷ Contexto = Dimensão
Golden rule
Slide 27
Slide 27 text
`em`
Tipografia
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
14px/21px
70px/80px
24px/32px
Slide 30
Slide 30 text
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;
}
Slide 31
Slide 31 text
body » font-size: 100%
(16px na maioria dos browsers)
Slide 32
Slide 32 text
body {
font: normal normal 100%/1.5 "cabin", sans-serif;
}
Slide 33
Slide 33 text
target (70px)
target (24px)
target (14px)
CONTEXTO » body (16px)
Slide 34
Slide 34 text
Target ÷ Contexto = Dimensão
70px ÷ 16px = 4.375em
80px ÷ 70px = 1.142857143
24px ÷ 16px = 1.5em
32px ÷ 24px = 1.333333
Slide 35
Slide 35 text
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 */
}
Slide 36
Slide 36 text
%
Grids
Slide 37
Slide 37 text
1000px
65px
20px
660px 320px
Slide 38
Slide 38 text
#container {
width: 1000px;
}
.main-content {
float: left;
width: 660px;
margin-right: 20px;
}
.side-content {
float: left;
width: 320px;
}
Slide 39
Slide 39 text
Contexto (1000px)
Target (65px)
Target (20px)
Target (660px) Target (320px)
Slide 40
Slide 40 text
Target ÷ Contexto = Dimensão
1000px = 100%
660px ÷ 1000px = 66%
20px ÷ 1000px = 2%
320px ÷ 1000px = 32%
Slide 41
Slide 41 text
#container {
width: 100%;
}
.main-content {
float: left;
width: 66%; /* 660px ÷ 1000px */
margin-right: 2%; /* 20px ÷ 1000px */
}
.side-content {
float: left;
width: 32%; /* 32px ÷ 1000px */
}
Slide 42
Slide 42 text
max-width: 100%
img, embed, object, video
(IE6 => width: 100%)
Conteúdo
Slide 43
Slide 43 text
525px
210px
Slide 44
Slide 44 text
.blog-post .alignright {
float: right;
margin: 0 0 20px 16px;
}
.blog-post .alignright img {
/* + 2px border + 2px padding = 210px */
width: 206px;
}
Slide 45
Slide 45 text
Contexto (525px)
Target (210px)
Slide 46
Slide 46 text
Target ÷ Contexto = Dimensão
210px ÷ 525px = 40%
Slide 47
Slide 47 text
.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;
}
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
$(function () {
$(“#site-content”).find(“.main-content”).fitVids();
});
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
$(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"
});
});
Slide 54
Slide 54 text
Tipos e features
Media Queries
Slide 55
Slide 55 text
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
Slide 56
Slide 56 text
ou
@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}]?)]* ]
Slide 57
Slide 57 text
@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
Slide 58
Slide 58 text
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)
Slide 59
Slide 59 text
@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
}
Slide 60
Slide 60 text
The New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
Retina Display
Slide 61
Slide 61 text
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
Slide 62
Slide 62 text
Display: Mostra physical pixels
CSS: Interpreta virtual pixels
Slide 63
Slide 63 text
Physical Pixels: Imagens 4x maiores (2x width / 2x height)
Virtual Pixels: Dimensões virtuais, imagens redimensionadas
Slide 64
Slide 64 text
240px
57px
Slide 65
Slide 65 text
sprite.png
130px
260px
Normal display
Slide 66
Slide 66 text
#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
Slide 68
Slide 68 text
“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/[email protected]);
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;
}
}
Slide 69
Slide 69 text
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#site-header h1 a {
background-image: url(../images/[email protected]);
-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
Slide 70
Slide 70 text
Responsive Images
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
3008 x 2000
Slide 73
Slide 73 text
FAIL
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Slide 76
Slide 76 text
HiSRC
Usa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag ![]()
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 )
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
Slide 77
Slide 77 text
Nenhuma Media Query funciona no IE6–8 sem plugin. =/
WARNING
Slide 78
Slide 78 text
Fallback para IE
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Obrigado!
@shiota | www.eshiota.com