Responsive Web Design
conteúdo em todos os dispositivos
CSS
Javascript
HTML
CSS
Javascript
HTML Linguagem de marcação
Folha de estilos
Linguagem de programação
interpretada
Internetcomo usamos?
Sites que se reajustam
conforme o tamanho da
tela do aparelho
CONCEITO
O problemado 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
●...
“m ponto”
técnica
www.globo.com m.globo.com
VS
Análise:
● Funciona bem com algumas telas se tem layout fluido
● Resolve problema do mobile com versão exclusiva
● Ruim pa...
Responsivos
Análise:
● Funciona bem em todos dispositivos
● Bom para SEO (Search Engine Optimization)
● Tratamento de imagens caminhan...
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 ultrapassa...
Boas referências
http://sergiolopes.org/
http://mediaqueri.es
http://tableless.com.br/
http://www.maujor.com
Obrigado!diogo@diogomachado.com
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Próximos SlideShares
Carregando em…5
×

Responsive web design, conteúdo em todos os dispositivos

358 visualizações

Publicada em

Visão geral do que vem a ser responsive design.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
358
No SlideShare
0
A partir de incorporações
0
Número de incorporações
35
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Responsive web design, conteúdo em todos os dispositivos

  1. 1. Responsive Web Design conteúdo em todos os dispositivos
  2. 2. CSS Javascript HTML
  3. 3. CSS Javascript HTML Linguagem de marcação Folha de estilos Linguagem de programação interpretada
  4. 4. Internetcomo usamos?
  5. 5. Sites que se reajustam conforme o tamanho da tela do aparelho CONCEITO
  6. 6. O problemado css fixo.
  7. 7. #wrapper { margin: 0 auto; text-align: left; width: 1024px; }
  8. 8. 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
  9. 9. “m ponto” técnica
  10. 10. www.globo.com m.globo.com VS
  11. 11. 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
  12. 12. Responsivos
  13. 13. Análise: ● Funciona bem em todos dispositivos ● Bom para SEO (Search Engine Optimization) ● Tratamento de imagens caminhando
  14. 14. O que torna possível design responsivo?
  15. 15. Imagens & Recursos flexíveis img { max-width: 100%; } Representa 100% de largura no espaço em que estão contidas.
  16. 16. Imagens & Recursos flexíveis Peso vs Tamanho 530kb 700px / 894px
  17. 17. Tag viewport <meta name="viewport" content="width=device-width, initial-scale=1">
  18. 18. @media queries @media screen and (min-width: 768px) and (max-width: 992px){ ul, p{ line-height: 1.72em; font-size: 1.0em; } }
  19. 19. Developer tools
  20. 20. www.browserstack.com/responsive
  21. 21. Twitter Bootstrap
  22. 22. Suporte Nos diversos tipos de navegadores
  23. 23. Hoje, não precisamos se preocupar tanto com IE porque até minha mãe sabe o que é navegador
  24. 24. www.caniuse.com
  25. 25. É possível dar suporte a navegadores sem suporte?
  26. 26. Porque Nem todos os sites são responsivos hoje?
  27. 27. Estrutura muito grande O custo não vale o esforço Falta de profissionais qualificados Padrões ainda inconsistentes
  28. 28. Porque Responsive design é tão importante?
  29. 29. 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
  30. 30. Boas referências http://sergiolopes.org/ http://mediaqueri.es http://tableless.com.br/ http://www.maujor.com
  31. 31. Obrigado!diogo@diogomachado.com

×