Responsive WebDesignEntregando a informação da melhor maneira possívelSé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 dedispositivo e tamanho de tela, para que ainformaçã...
Motivação"Segundo pesquisa da consultoria britânicaCanalys, o mercado de smartphones cresceu63% em 2011, para 488 milhões ...
The Boston Globe                   Fonte: http://mediaqueri.es/bg/
Seminal Responsive Web Design Example                            Fonte: http://mediaqueri.es/rwd/
Como fazer um site responsivo1. Design flexível2. Media Queries3. Ajustes + plugins
Design flexívelTamanho das colunas, imagens e textosadaptam-se ao tamanho da tela.Sinônimo de layout flúido.
Regra básicaFórmula para transformar tamanho fixo emflexível:alvo ÷ contexto = dimensão
TipografiaUtilizar 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/32p...
Tipografia flexívelbody {     font: normal normal      100%/1.5em Verdana, sans-serif;}body com font-size: 100%, é renderi...
Usando a fórmula mágica         alvo ÷ contexto = dimensão26px ÷ 16px = 1.625em32px ÷ 26px = 1.230769231em14px ÷ 16px = .8...
Tipografia flexívelbody {    font: normal normal 100%/1.5em Verdana, sans-serif;}.episodio h1 {    /* 26px ÷ 16px & 32px ÷...
Blocos do siteUtilizar 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;...
Usando a fórmula mágica        alvo ÷ contexto = dimensão960px = 100%650px ÷ 960px = 67.7083333% 18px ÷ 960px = 1.875%292p...
Bloos com tamanho flexível#content {    width: 100%;}.main-content {    float: left;    widht: 67.7083333%; /* 650px ÷ 960...
ConteúdoUtilizar width: 100%?
Media queriesComentários condicionais no CSS que servepara detectar o tipo de mídia que o dispositivoestá usando e quais p...
Tipos e característicasTiposall, braille, embossed, handheld, print, projection, screen, speech, tty, tvCaracterísticascol...
Sintaxe e uso[only | not]? {tipo} and ({característica}[:{valor}]?) [and ({característica}[:{valor}]?)]*[, [only | not]? {...
Exemplos mais complexos@media print and (max-width: 21cm) {}@media all and (max-width: 1024px) {}@media only screen and (o...
Tome cuidado!Nenhum Media Query funciona no IE6-8 semplugin.
Ajustes + pluginsAjustes finos com plugins para redimensionarimagens, 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/htt...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design - Entregando a informação da melhor maneiro possível

2,035 views

Published on

A apresentação "Responsive Web Design - Entregando a informação da melhor maneiro possível" foi mostrada aos meus colegas de trabalho com o intuito de chamar a atenção para a maneira como fazemos nossos sites e como o público vê os nossos sites.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,035
On SlideShare
0
From Embeds
0
Number of Embeds
180
Actions
Shares
0
Downloads
80
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive Web Design - Entregando a informação da melhor maneiro possível

  1. 1. Responsive WebDesignEntregando a informação da melhor maneira possívelSérgio SantanaTwitter: @sergiosdlima
  2. 2. Ethan Marcotte● Web Design e Developer● Introduziu o conceito e publicou o livro Responsive Web Design
  3. 3. O que é Responsive Web Design?Tornar o conteúdo adaptável a cada tipo dedispositivo e tamanho de tela, para que ainformação seja entregue da melhor maneiropossível.
  4. 4. Motivação"Segundo pesquisa da consultoria britânicaCanalys, o mercado de smartphones cresceu63% 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
  5. 5. The Boston Globe Fonte: http://mediaqueri.es/bg/
  6. 6. Seminal Responsive Web Design Example Fonte: http://mediaqueri.es/rwd/
  7. 7. Como fazer um site responsivo1. Design flexível2. Media Queries3. Ajustes + plugins
  8. 8. Design flexívelTamanho das colunas, imagens e textosadaptam-se ao tamanho da tela.Sinônimo de layout flúido.
  9. 9. Regra básicaFórmula para transformar tamanho fixo emflexível:alvo ÷ contexto = dimensão
  10. 10. TipografiaUtilizar tamanho de fontes em `em` ao invés de`px`.
  11. 11. Fonte: http://tvbrasil.ebc.com.br/observatorio/episodio/rio20-andre-trigueiro
  12. 12. 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;}
  13. 13. Tipografia flexívelbody { font: normal normal 100%/1.5em Verdana, sans-serif;}body com font-size: 100%, é renderizado como 16px de tamanho de fonte namaioria dos browsers.
  14. 14. Usando a fórmula mágica alvo ÷ contexto = dimensão26px ÷ 16px = 1.625em32px ÷ 26px = 1.230769231em14px ÷ 16px = .875em16px ÷ 16px = 1em
  15. 15. 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 */}
  16. 16. Blocos do siteUtilizar tamanhos em %
  17. 17. Fonte: http://tvbrasil.ebc.com.br/observatorio/episodio/rio20-andre-trigueiro
  18. 18. Blocos com tamanho fixo#content { width: 960px;}.main-content { float: left; widht: 650px; margin-right: 18px;}.side-content { float: left; widht: 292px;}
  19. 19. Usando a fórmula mágica alvo ÷ contexto = dimensão960px = 100%650px ÷ 960px = 67.7083333% 18px ÷ 960px = 1.875%292px ÷ 960px = 30.4166667%
  20. 20. 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 */}
  21. 21. ConteúdoUtilizar width: 100%?
  22. 22. Media queriesComentários condicionais no CSS que servepara detectar o tipo de mídia que o dispositivoestá usando e quais propriedades esta mídiapossui.
  23. 23. Tipos e característicasTiposall, braille, embossed, handheld, print, projection, screen, speech, tty, tvCaracterí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
  24. 24. 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 */}
  25. 25. 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) {}
  26. 26. Tome cuidado!Nenhum Media Query funciona no IE6-8 semplugin.
  27. 27. Ajustes + pluginsAjustes finos com plugins para redimensionarimagens, vídeos e fonte de texto.
  28. 28. Imagem responsivaHiSRCAdaptive ImagesPicturefill
  29. 29. Título e manchete flexíveisFitTextslabText
  30. 30. Media Queries IE6-8Respond.jscss3-mediaqueries-js
  31. 31. Vídeo flexívelFITVIDS.JS
  32. 32. Alguns exemplosbostonglobe.comclearairchallenge.combarackobama.com
  33. 33. 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/

×