• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design - Entregando a informação da melhor maneiro possível
 

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

on

  • 2,053 views

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

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.

Statistics

Views

Total Views
2,053
Views on SlideShare
1,930
Embed Views
123

Actions

Likes
3
Downloads
68
Comments
0

1 Embed 123

http://chackan.wordpress.com 123

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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ção seja entregue da melhor maneiropossível.
    • 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
    • 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/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 namaioria dos browsers.
    • Usando a fórmula mágica alvo ÷ contexto = dimensão26px ÷ 16px = 1.625em32px ÷ 26px = 1.230769231em14px ÷ 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 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;}.side-content { float: left; widht: 292px;}
    • Usando a fórmula mágica alvo ÷ contexto = dimensão960px = 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údoUtilizar width: 100%?
    • Media queriesComentários condicionais no CSS que servepara detectar o tipo de mídia que o dispositivoestá usando e quais propriedades esta mídiapossui.
    • 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
    • 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 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/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/