Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

6,579 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

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?

×