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

  • View
    4.939

  • Download
    4

Embed Size (px)

DESCRIPTION

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.

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

  • 1. ALM DO RESPONSIVE DESIGN A MUDANA DE PARADIGMA DO DESIGN ADAPTATIVO E OS MLTIPLOS DISPOSITIVOS

2. @sergio_caelum sergiolopes.org 3. casadocodigo.com.br 4. RESPONSIVE DESIGN 101 5. RESPONSIVE DESIGN 101 LAYOUT FLUDO 6. RESPONSIVE DESIGN 101 LAYOUT FLUDO MEDIA QUERIES 7. RESPONSIVE DESIGN 101 LAYOUT FLUDO MEDIA QUERIES IMAGENS FLEXVEIS 8. www.uol.com.br 9. SITE MOBILE m.uol.com.br 10. USAR DESIGN RESPONSIVO NO UMA ESCOLHA 11. DESIGNRESPONSIVO FLEXVEL ADAPTVEL 12. terra.com.br 13. m.terra.com.br 14. tablet.terra.com.br 15. MOBILE 16. MOBILE TELA PEQUENA 17. MOBILE PORTABILIDADE TELA PEQUENA 18. MOBILE 3G PORTABILIDADE TELA PEQUENA 19. MOBILE 3G TOUCH PORTABILIDADE TELA PEQUENA 20. NO EXISTE MOBILE 21. ONE WEB 22. 2005 23. 2013 24. ILUSO DA WEB FIXA 25. ESQUEA 26. ESQUEA MOBILE RESPONSIVO BUZZWORDS 27. DESIGN ADAPTATIVO RESPON SIVO 28. A WEB FLEXVEL E ADAPTVEL 29. A WEB FLEXVEL E ADAPTVEL SEMPRE FOI 30. O controle que os designers conhecem na mdia impressa, e constantemente desejam na web, simplesmente em funo da limitao da pgina impressa. Devemos abraar o fato de que a Web no tem as mesmas restries, e projetar para essa exibilidade. 31. Faa pginas que so acessveis, independentemente de navegador, plataforma ou tela que seu leitor escolha ou tenha que usar para acessar suas pginas. Isso signica pginas que so legveis independentemente da resoluo ou tamanho da tela, ou do nmero de cores. 32. VARIVEIS DE ADAPTAO 33. VARIVEIS DE ADAPTAO TAMANHO DE TELA 34. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO 35. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO ORIENTAO 36. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO REDE ORIENTAO 37. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO REDE ORIENTAO VELOCIDADE 38. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO REDE ORIENTAO PROFUNDIDADE DE CORES VELOCIDADE 39. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO REDE INPUT ORIENTAO PROFUNDIDADE DE CORES VELOCIDADE 40. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO REDE INPUT ORIENTAO PROFUNDIDADE DE CORES VELOCIDADE RECURSOS 41. VARIVEIS DE ADAPTAO TAMANHO DE TELA RESOLUO REDE INPUT ORIENTAO PROFUNDIDADE DE CORES ACESSIBILIDADE VELOCIDADE RECURSOS 42. FEATURE DETECTION 43. FEATURE DETECTION Modernizr 44. FEATURE DETECTION Modernizr JavaScript 45. FEATURE DETECTION Modernizr JavaScript @media 46. FEATURE DETECTION Modernizr JavaScript @media @supports 47. PROGRESSIVE ENHANCEMENT 48. PROGRESSIVE ENHANCEMENT Base do contedo com texto 49. PROGRESSIVE ENHANCEMENT Base do contedo com texto Semntico e estrutura com HTML 50. PROGRESSIVE ENHANCEMENT Base do contedo com texto Semntico e estrutura com HTML Visual com CSS e imagens 51. PROGRESSIVE ENHANCEMENT Base do contedo com texto Semntico e estrutura com HTML Visual com CSS e imagens Interatividade com JavaScript 52. http://www.slideshare.net/nzakas/enough- withthejavascriptalready 53. DESIGN ADAPTATIVO RESPON SIVO 54. A WEB FLEXVEL E ADAPTVEL 55. QUAL A NOSSA ALUCINAO ATUAL?