Responsive Web Design

conteúdo em todos os dispositivos

HTML
CSS
Javascript
HTML Linguagem de marcação

CSS Folha de estilos

Javascript Linguagem de programação

interpretada
Internet
como usamos?
 Sites que se reajustam
CONCEITO conforme o tamanho da
tela do aparelho
O problema
do css fixo.
#wrapper {
margin: 0 auto;
text-align: left;
width: 1024px;
}
Análise:

● Funciona bem com algumas telas maiores ou iguais

tamanho definido (960px, 1000px)
● Não se importa com mobile
● Não se importa com acessibilidade
 técnica

“m ponto”
www.globo.com
VS m.globo.com
Análise:

● Funciona bem com algumas telas se tem layout fluido

● Resolve problema do mobile com versão exclusiva
● Ruim para técnicas SEO (Search Engine Optimization)
● Usuário fica confuso com os dois endereços
● Redirecionamentos de mobile/desktop e inverso
Responsivos
Análise:

● Funciona bem em todos dispositivos

● Bom para SEO (Search Engine Optimization)
● Tratamento de imagens caminhando
O que torna possível design responsivo?
Imagens & Recursos flexíveis

img {
max-width: 100%;
}
Representa 100% de largura no espaço em que estão contidas.
Imagens & Recursos flexíveis
Peso vs Tamanho

530kb
700px / 894px
 Tag viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
 @media queries
@media screen and (min-width: 768px) and (max-width: 992px){
ul, p{
line-height: 1.72em;
font-size: 1.0em;
}
}
Developer tools
www.browserstack.com/responsive
Twitter Bootstrap
 Suporte
Nos diversos tipos de navegadores
Hoje, não precisamos se preocupar
tanto com IE porque até minha mãe
sabe o que é navegador
www.caniuse.com
 É possível dar suporte a
navegadores sem suporte?
 Porque
Nem todos os sites são responsivos hoje?
 Estrutura muito grande

O custo não vale o esforço

Falta de profissionais qualificados

Padrões ainda inconsistentes

 Porque
Responsive design é tão importante?
US$ 10 milhões de pagamentos mobile via Paypal

Vendas no Ebay mobile = US$ 2 bilhões

Vendas de aparelhos móveis ultrapassam a taxa de

natalidade no mundo

Aplicativos híbridos (HTML5 + CSS3)

Webviews
Boas referências
http://sergiolopes.org/
http://mediaqueri.es
http://tableless.com.br/
http://www.maujor.com
Obrigado!
diogo@diogomachado.com