SlideShare uma empresa Scribd logo
1 de 33
Baixar para ler offline
Responsive Web
Design
Entregando a informação da melhor maneira possível


Sérgio Santana
Twitter: @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ível
2. Media Queries
3. 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 fixa
body {
    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ível
body {
     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.625em
32px ÷ 26px = 1.230769231em

14px ÷ 16px = .875em
16px ÷ 16px = 1em
Tipografia flexível
body {
    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
Tipos
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv


Características
color                                 (min | max-)width
color-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 responsiva
HiSRC
Adaptive Images
Picturefill
Título e manchete flexíveis
FitText
slabText
Media Queries IE6-8
Respond.js
css3-mediaqueries-js
Vídeo flexível
FITVIDS.JS
Alguns exemplos
bostonglobe.com
clearairchallenge.com
barackobama.com
Referências
http://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-design
http://css-tricks.com/which-responsive-images-solution-should-you-use/
http://unstoppablerobotninja.com/entry/fluid-images
http://www.w3.org/TR/css3-mediaqueries/
http://tableless.com.br
http://www.eshiota.com
http://ethanmarcotte.com/
http://mediaqueri.es/
http://fitvidsjs.com/
http://fittextjs.com/

Mais conteúdo relacionado

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

Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosDiogo Souza Machado
 
Usando html5 e css3 para implementar interfaces responsivas
Usando html5 e css3 para implementar interfaces responsivasUsando html5 e css3 para implementar interfaces responsivas
Usando html5 e css3 para implementar interfaces responsivasFelipe de Albuquerque
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
 
Conceito básicos de layout de páginas usando a framework bootstrap.
Conceito básicos de layout de páginas usando a framework bootstrap.Conceito básicos de layout de páginas usando a framework bootstrap.
Conceito básicos de layout de páginas usando a framework bootstrap.Francisco Soares Lima Filho
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de AlbuquerqueFelipe de Albuquerque
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignTalita Pagani
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosGilberto Crespo
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Mobile, por onde começar
Mobile, por onde começarMobile, por onde começar
Mobile, por onde começarPaulo Afonso
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UXEdu Agni
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte Iigorpimentel
 

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

Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
 
Usando html5 e css3 para implementar interfaces responsivas
Usando html5 e css3 para implementar interfaces responsivasUsando html5 e css3 para implementar interfaces responsivas
Usando html5 e css3 para implementar interfaces responsivas
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
Conceito básicos de layout de páginas usando a framework bootstrap.
Conceito básicos de layout de páginas usando a framework bootstrap.Conceito básicos de layout de páginas usando a framework bootstrap.
Conceito básicos de layout de páginas usando a framework bootstrap.
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Mobile, por onde começar
Mobile, por onde começarMobile, por onde começar
Mobile, por onde começar
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
PHP e o Desenvolvimento Mobile Web
PHP e o Desenvolvimento Mobile WebPHP e o Desenvolvimento Mobile Web
PHP e o Desenvolvimento Mobile Web
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
Canvas element
Canvas elementCanvas element
Canvas element
 

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