Responsive Web DesignEntregando a informação da melhor maneira possível

Sérgio SantanaTwitter: @sergiosdlima

Ethan Marcotte

● Web Design e Developer● Introduziu o conceito e

publicou o livro Responsive Web Design

O que é Responsive Web Design?

Tornar o conteúdo adaptável a cada tipo de dispositivo e tamanho de tela, para que a informação seja entregue da melhor maneiro possível.

Motivação

"Segundo pesquisa da consultoria britânica Canalys, o mercado de smartphones cresceu 63% em 2011, para 488 milhões de unidades, enquanto o de PCs teve expansão de 15%, para 415 milhões de equipamentos."

Fonte: http://economia.estadao.com.br/noticias/economia,vendas-de-smartphones-tem-forte-alta-e-ja-superam-as-de-pcs-no-mundo,102001,0.htm

The Boston Globe

Fonte: http://mediaqueri.es/bg/

Seminal Responsive Web Design Example

Fonte: http://mediaqueri.es/rwd/

Como fazer um site responsivo

1. Design flexível2. Media Queries3. Ajustes + plugins

Design flexível

Tamanho das colunas, imagens e textos adaptam-se ao tamanho da tela.

Sinônimo de layout flúido.

Regra básica

Fórmula para transformar tamanho fixo em flexível:

alvo ÷ contexto = dimensão

Tipografia

Utilizar tamanho de fontes em `em` ao invés de `px`.

Fonte: http://tvbrasil.ebc.com.br/observatorio/episodio/rio20-andre-trigueiro

Tipografia fixabody { font: normal normal 16px/24px Verdana, sans-serif;}

.episodio h1 { font: normal normal 26px/32px Arial, Helvetica;}

.episodio p { font-size: 14px; line-height: 16px;}

Tipografia flexívelbody {

font: normal normal 100%/1.5em Verdana, sans-serif;}

body com font-size: 100%, é renderizado como 16px de tamanho de fonte na maioria dos browsers.

Usando a fórmula mágica

alvo ÷ contexto = dimensão

26px ÷ 16px = 1.625em32px ÷ 26px = 1.230769231em

14px ÷ 16px = .875em16px ÷ 16px = 1em

Tipografia flexívelbody { font: normal normal 100%/1.5em Verdana, sans-serif;}

.episodio h1 { /* 26px ÷ 16px & 32px ÷ 26px */ font: normal normal 1.625em/1.230769231em Arial, Helvetica;}

.episodio p { font-size: .875em; /* 14px ÷ 16px */ line-height: 1em; /* 16px ÷ 16px */}

Blocos do site

Utilizar tamanhos em %

Fonte: http://tvbrasil.ebc.com.br/observatorio/episodio/rio20-andre-trigueiro

Blocos com tamanho fixo#content { width: 960px;}

.main-content { float: left; widht: 650px; margin-right: 18px;}

.side-content { float: left; widht: 292px;}

Usando a fórmula mágica

alvo ÷ contexto = dimensão

960px = 100%

650px ÷ 960px = 67.7083333% 18px ÷ 960px = 1.875%292px ÷ 960px = 30.4166667%

Bloos com tamanho flexível

#content { width: 100%;}

.main-content { float: left; widht: 67.7083333%; /* 650px ÷ 960px */ margin-right: 1.875%; /* 18px ÷ 960px */}

.side-content { float: left; widht: 30.4166667%; /* 292px ÷ 960px */}

Conteúdo

Utilizar width: 100%?

Media queries

Comentários condicionais no CSS que serve para detectar o tipo de mídia que o dispositivo está usando e quais propriedades esta mídia possui.

Tipos e características

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

Característicascolor (min | max-)widthcolor-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

Sintaxe e uso[only | not]? {tipo} and ({característica}[:{valor}]?) [and ({característica}[:{valor}]?)]*[, [only | not]? {tipo} and ({característica}[:{valor}]?) [and ({característica}[:{valor}]?)]*]

<link rel="stylesheet" href="wide.css" media="screen and (min-width: 1200px)" />

ou

@media screen and (max-width: 1200px) { /* seu estilo aqui */}

Exemplos mais complexos

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

Tome cuidado!

Nenhum Media Query funciona no IE6-8 sem plugin.

Ajustes + plugins

Ajustes finos com plugins para redimensionar imagens, vídeos e fonte de texto.

Imagem responsivaHiSRCAdaptive ImagesPicturefill

Título e manchete flexíveisFitTextslabText

Media Queries IE6-8Respond.jscss3-mediaqueries-js

Vídeo flexívelFITVIDS.JS

Alguns exemplosbostonglobe.comclearairchallenge.combarackobama.com

Referênciashttp://www.alistapart.com/articles/responsive-web-design/http://www.ilearn.com.br/artigos/design-responsivo/http://sergiolopes.org/responsive-web-design/http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/http://arquiteturadeinformacao.com/2011/12/13/o-que-e-responsive-web-design/http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-designhttp://css-tricks.com/which-responsive-images-solution-should-you-use/http://unstoppablerobotninja.com/entry/fluid-imageshttp://www.w3.org/TR/css3-mediaqueries/http://tableless.com.brhttp://www.eshiota.comhttp://ethanmarcotte.com/http://mediaqueri.es/http://fitvidsjs.com/http://fittextjs.com/