ALÉM DO
RESPONSIVE DESIGN
A MUDANÇA DE PARADIGMA DO
DESIGN ADAPTATIVO
E OS MÚLTIPLOS DISPOSITIVOS
@sergio_caelum
sergiolopes.org
casadocodigo.com.br
RESPONSIVE DESIGN
101
RESPONSIVE DESIGN
101
LAYOUT FLUÍDO
RESPONSIVE DESIGN
101
LAYOUT FLUÍDO
MEDIA QUERIES
RESPONSIVE DESIGN
101
LAYOUT FLUÍDO
MEDIA QUERIES
IMAGENS FLEXÍVEIS
www.uol.com.br
SITE MOBILE
m.uol.com.br
USAR DESIGN RESPONSIVO
NÃO ÉUMA ESCOLHA
DESIGNRESPONSIVO
FLEXÍVEL
ADAPTÁVEL
terra.com.br
m.terra.com.br
tablet.terra.com.br
MOBILE
MOBILE
TELA PEQUENA
MOBILE
PORTABILIDADE
TELA PEQUENA
MOBILE
3G
PORTABILIDADE
TELA PEQUENA
MOBILE
3G TOUCH
PORTABILIDADE
TELA PEQUENA
NÃO EXISTE
MOBILE
ONE
WEB
2005
2013
ILUSÃO DA WEB FIXA
ESQUEÇA
ESQUEÇA
MOBILE
RESPONSIVO
BUZZWORDS
DESIGN
ADAPTATIVO
RESPON
SIVO
A WEB É
FLEXÍVEL E
ADAPTÁVEL
A WEB É
FLEXÍVEL E
ADAPTÁVEL
SEMPRE FOI
O controle que os designers conhecem na
mídia impressa, e constantemente
desejam na web, é simplesmente em
função da limit...
Faça páginas que são acessíveis,
independentemente de navegador,
plataforma ou tela que seu leitor escolha
ou tenha que us...
VARIÁVEIS DE ADAPTAÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
ORIENTAÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
ORIENTAÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
ORIENTAÇÃO
VELOCIDADE
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
ORIENTAÇÃO
PROFUNDIDADE DE CORES
VELOCIDADE
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
INPUT
ORIENTAÇÃO
PROFUNDIDADE DE CORES
VELOCIDADE
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
INPUT
ORIENTAÇÃO
PROFUNDIDADE DE CORES
VELOCIDADE
RECURSOS
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
INPUT
ORIENTAÇÃO
PROFUNDIDADE DE CORES
ACESSIBILIDADE
VELOCIDADE
REC...
FEATURE
DETECTION
FEATURE
DETECTION
Modernizr
FEATURE
DETECTION
Modernizr
JavaScript
FEATURE
DETECTION
Modernizr
JavaScript
@media
FEATURE
DETECTION
Modernizr
JavaScript
@media
@supports
PROGRESSIVE
ENHANCEMENT
PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto
PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto
Semântico e estrutura com HTML
PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto
Semântico e estrutura com HTML
Visual com CSS e imagens
PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto
Semântico e estrutura com HTML
Visual com CSS e imagens
Interatividade ...
http://www.slideshare.net/nzakas/enough-
withthejavascriptalready
DESIGN
ADAPTATIVO
RESPON
SIVO
A WEB É
FLEXÍVEL E
ADAPTÁVEL
QUAL É A NOSSA
ALUCINAÇÃO ATUAL?
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.
Upcoming SlideShare
Loading in …5
×

Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.

6,162 views

Published on

Slides da palestra do Sérgio Lopes no Front In Sampa 2013.

Uma revolução aconteceu na Web e no mundo front-end com a explosão dos dispositivos móveis. Mais que ajustar seu site pra uma tela pequena com meia dúzia de media queries, o responsive web design traz reflexões importantes sobre o papel da Web como mídia adaptável, flexível, portável e democrática. Essa lightning talk discute a nova Web moderna, responsiva e adaptativa, seu papel hoje e como se preparar pro futuro.

Published in: Technology
2 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total views
6,162
On SlideShare
0
From Embeds
0
Number of Embeds
2,587
Actions
Shares
0
Downloads
70
Comments
2
Likes
24
Embeds 0
No embeds

No notes for slide

Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos.

  1. 1. ALÉM DO RESPONSIVE DESIGN A MUDANÇA DE PARADIGMA DO DESIGN ADAPTATIVO E OS MÚLTIPLOS DISPOSITIVOS
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. casadocodigo.com.br
  4. 4. RESPONSIVE DESIGN 101
  5. 5. RESPONSIVE DESIGN 101 LAYOUT FLUÍDO
  6. 6. RESPONSIVE DESIGN 101 LAYOUT FLUÍDO MEDIA QUERIES
  7. 7. RESPONSIVE DESIGN 101 LAYOUT FLUÍDO MEDIA QUERIES IMAGENS FLEXÍVEIS
  8. 8. www.uol.com.br
  9. 9. SITE MOBILE m.uol.com.br
  10. 10. USAR DESIGN RESPONSIVO NÃO ÉUMA ESCOLHA
  11. 11. DESIGNRESPONSIVO FLEXÍVEL ADAPTÁVEL
  12. 12. terra.com.br
  13. 13. m.terra.com.br
  14. 14. tablet.terra.com.br
  15. 15. MOBILE
  16. 16. MOBILE TELA PEQUENA
  17. 17. MOBILE PORTABILIDADE TELA PEQUENA
  18. 18. MOBILE 3G PORTABILIDADE TELA PEQUENA
  19. 19. MOBILE 3G TOUCH PORTABILIDADE TELA PEQUENA
  20. 20. NÃO EXISTE MOBILE
  21. 21. ONE WEB
  22. 22. 2005
  23. 23. 2013
  24. 24. ILUSÃO DA WEB FIXA
  25. 25. ESQUEÇA
  26. 26. ESQUEÇA MOBILE RESPONSIVO BUZZWORDS
  27. 27. DESIGN ADAPTATIVO RESPON SIVO
  28. 28. A WEB É FLEXÍVEL E ADAPTÁVEL
  29. 29. A WEB É FLEXÍVEL E ADAPTÁVEL SEMPRE FOI
  30. 30. O controle que os designers conhecem na mídia impressa, e constantemente desejam na web, é simplesmente em função da limitação da página impressa. Devemos abraçar o fato de que a Web não tem as mesmas restrições, e projetar para essa flexibilidade. “
  31. 31. Faça páginas que são acessíveis, independentemente de navegador, plataforma ou tela que seu leitor escolha ou tenha que usar para acessar suas páginas. Isso significa páginas que são legíveis independentemente da resolução ou tamanho da tela, ou do número de cores. “
  32. 32. VARIÁVEIS DE ADAPTAÇÃO
  33. 33. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA
  34. 34. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO
  35. 35. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO ORIENTAÇÃO
  36. 36. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO REDE ORIENTAÇÃO
  37. 37. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO REDE ORIENTAÇÃO VELOCIDADE
  38. 38. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO REDE ORIENTAÇÃO PROFUNDIDADE DE CORES VELOCIDADE
  39. 39. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO REDE INPUT ORIENTAÇÃO PROFUNDIDADE DE CORES VELOCIDADE
  40. 40. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO REDE INPUT ORIENTAÇÃO PROFUNDIDADE DE CORES VELOCIDADE RECURSOS
  41. 41. VARIÁVEIS DE ADAPTAÇÃO TAMANHO DE TELA RESOLUÇÃO REDE INPUT ORIENTAÇÃO PROFUNDIDADE DE CORES ACESSIBILIDADE VELOCIDADE RECURSOS
  42. 42. FEATURE DETECTION
  43. 43. FEATURE DETECTION Modernizr
  44. 44. FEATURE DETECTION Modernizr JavaScript
  45. 45. FEATURE DETECTION Modernizr JavaScript @media
  46. 46. FEATURE DETECTION Modernizr JavaScript @media @supports
  47. 47. PROGRESSIVE ENHANCEMENT
  48. 48. PROGRESSIVE ENHANCEMENT Base do conteúdo com texto
  49. 49. PROGRESSIVE ENHANCEMENT Base do conteúdo com texto Semântico e estrutura com HTML
  50. 50. PROGRESSIVE ENHANCEMENT Base do conteúdo com texto Semântico e estrutura com HTML Visual com CSS e imagens
  51. 51. PROGRESSIVE ENHANCEMENT Base do conteúdo com texto Semântico e estrutura com HTML Visual com CSS e imagens Interatividade com JavaScript
  52. 52. http://www.slideshare.net/nzakas/enough- withthejavascriptalready
  53. 53. DESIGN ADAPTATIVO RESPON SIVO
  54. 54. A WEB É FLEXÍVEL E ADAPTÁVEL
  55. 55. QUAL É A NOSSA ALUCINAÇÃO ATUAL?

×