Responsive Web Design

Eduardo Shiota Yasuda@shiota | www.eshiota.com

e a ubiquidade da web

Uma (breve) Históriado Design na Web

Tim Berners-LeePai do HTTP, HTML, diretor da W3C, e cavaleiro.

Primeira página da Webhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Primeira Página do UOL23/12/1996 - archive.org

EVIL

HTML » Print » Table » Tableless » Standards » ?

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

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

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

Jeremy Keith's — @adactio — Instagram

HTML » Print » Table » Tableless » Standards »

Responsive Web Design

Solução agnóstica à plataforma, browser e dispositivo

Responsive Web Design

Desktop

UOL

iPad Portrait iPad Landscape iPhone Portrait

iPhone Landscape

Close, but no cigar.

Desktop Desktop?

UOLClose, but no cigar.

Desktop iPad Portrait iPad Landscape iPhone Portrait

iPhone Landscape

The Boston GlobeResponsivelicious

1. Design flexível+

2. Media Queries+

3. Ajustes e plugins

Tipografia, grid & conteúdo

Flexible Web Design

Target ÷ Contexto = Dimensão

Golden rule

`em`

Tipografia

14px/21px

70px/80px

24px/32px

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

body » font-size: 100%(16px na maioria dos browsers)

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

target (70px)

target (24px)

target (14px)

CONTEXTO » body (16px)

Target ÷ Contexto = Dimensão

70px ÷ 16px = 4.375em80px ÷ 70px = 1.142857143

24px ÷ 16px = 1.5em32px ÷ 24px = 1.333333

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

%

Grids

1000px

65px

20px

660px 320px

#container { width: 1000px;}

.main-content { float: left; width: 660px; margin-right: 20px;}

.side-content { float: left; width: 320px;}

Contexto (1000px)

Target (65px)

Target (20px)

Target (660px) Target (320px)

Target ÷ Contexto = Dimensão

1000px = 100%

660px ÷ 1000px = 66%20px ÷ 1000px = 2%

320px ÷ 1000px = 32%

#container { width: 100%;}

.main-content { float: left; width: 66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */}

.side-content { float: left; width: 32%; /* 32px ÷ 1000px */}

max-width: 100%img, embed, object, video

(IE6 => width: 100%)

Conteúdo

525px

210px

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

.blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px;}

Contexto (525px)

Target (210px)

Target ÷ Contexto = Dimensão

210px ÷ 525px = 40%

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

$(function () { $(“#site-content”).find(“.main-content”).fitVids();});

$(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" });});

Tipos e features

Media Queries

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

Tipos

Featurescolorcolor-index(min | max-)aspect-ratio(min | max-)device-aspect-ratio(min | max-)device-height(min | max-)device-width(min | max-)height

(min | max-)widthgridmonochromeorientation(min | max-)resolutionscan-webkit-(min | max-)device-pixel-ratio

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}]?)]* ]

@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

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

device-height: 768px

orientation: landscape

-webkit-device-aspect-ratio: 1.5(novo iPad)

@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}

The New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™

Retina Display

16 x 1 physical pixels16 x 1 virtual pixelsdevice-pixel-ratio: 1

32 x 2 physical pixels16 x 1 virtual pixelsdevice-pixel-ratio: 2

Normal displays

“Retina” displays

Display: Mostra physical pixels

CSS: Interpreta virtual pixels

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

Virtual Pixels: Dimensões virtuais, imagens redimensionadas

240px

57px

sprite.png

130px

260px

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

Normal display

“Retina” display

sprite@2x.png

260px

520px

@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; }}

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

“Retina” display

Responsive Images

3008 x 2000

FAIL

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

HiSRCUsa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag <img>https://github.com/teleject/hisrc

Adaptive ImagesServer-side, usa .htaccess e PHPhttp://code.google.com/p/css3-mediaqueries-js/

PicturefillUsa JavaScript, segue a proposta mais aceita entre developers sobre Responsive Images (tag <picture>)https://github.com/scottjehl/picturefill

OutrosO 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

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

WARNING

Fallback para IE

Obrigado!@shiota | www.eshiota.com