Responsive Web Design - Entregando a informação da melhor maneiro possível
-
Upload
sergio-santana -
Category
Technology
-
view
1.803 -
download
1
description
Transcript of Responsive Web Design - Entregando a informação da melhor maneiro possível
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
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/