O documento discute o design responsivo e adaptativo para múltiplos dispositivos, enfatizando que a web sempre foi flexível e adaptável às diferentes telas. Apresenta as variáveis de adaptação como tamanho da tela, resolução, rede, orientação e outros fatores, e aborda técnicas como feature detection, media queries e progressive enhancement para criar experiências consistentes em diferentes contextos.

1. ALÉM DO
RESPONSIVE DESIGN
A MUDANÇA DE PARADIGMA DO
DESIGN ADAPTATIVO
E OS MÚLTIPLOS DISPOSITIVOS

2. @sergio_caelum
sergiolopes.org

3. casadocodigo.com.br

4. RESPONSIVE DESIGN
101

5. RESPONSIVE DESIGN
101
LAYOUT FLUÍDO

6. RESPONSIVE DESIGN
101
LAYOUT FLUÍDO
MEDIA QUERIES

7. RESPONSIVE DESIGN
101
LAYOUT FLUÍDO
MEDIA QUERIES
IMAGENS FLEXÍVEIS

13. www.uol.com.br

14. SITE MOBILE
m.uol.com.br

17. USAR DESIGN RESPONSIVO
NÃO ÉUMA ESCOLHA

18. DESIGNRESPONSIVO
FLEXÍVEL
ADAPTÁVEL

19. terra.com.br

20. m.terra.com.br

21. tablet.terra.com.br

22. MOBILE

23. MOBILE
TELA PEQUENA

24. MOBILE
PORTABILIDADE
TELA PEQUENA

25. MOBILE
3G
PORTABILIDADE
TELA PEQUENA

26. MOBILE
3G TOUCH
PORTABILIDADE
TELA PEQUENA

27. NÃO EXISTE
MOBILE

28. ONE
WEB

29. 2005

30. 2013

32. ILUSÃO DA WEB FIXA

33. ESQUEÇA

34. ESQUEÇA
MOBILE
RESPONSIVO
BUZZWORDS

35. DESIGN
ADAPTATIVO
RESPON
SIVO

36. A WEB É
FLEXÍVEL E
ADAPTÁVEL

37. A WEB É
FLEXÍVEL E
ADAPTÁVEL
SEMPRE FOI

39. 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.
“

40. 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.
“

41. VARIÁVEIS DE ADAPTAÇÃO

42. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA

43. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO

44. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
ORIENTAÇÃO

45. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
ORIENTAÇÃO

46. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
ORIENTAÇÃO
VELOCIDADE

47. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
ORIENTAÇÃO
PROFUNDIDADE DE CORES
VELOCIDADE

48. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
INPUT
ORIENTAÇÃO
PROFUNDIDADE DE CORES
VELOCIDADE

49. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
INPUT
ORIENTAÇÃO
PROFUNDIDADE DE CORES
VELOCIDADE
RECURSOS

50. VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
RESOLUÇÃO
REDE
INPUT
ORIENTAÇÃO
PROFUNDIDADE DE CORES
ACESSIBILIDADE
VELOCIDADE
RECURSOS

51. FEATURE
DETECTION

52. FEATURE
DETECTION
Modernizr

53. FEATURE
DETECTION
Modernizr
JavaScript

54. FEATURE
DETECTION
Modernizr
JavaScript
@media

55. FEATURE
DETECTION
Modernizr
JavaScript
@media
@supports

56. PROGRESSIVE
ENHANCEMENT

57. PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto

58. PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto
Semântico e estrutura com HTML

59. PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto
Semântico e estrutura com HTML
Visual com CSS e imagens

60. PROGRESSIVE
ENHANCEMENT
Base do conteúdo com texto
Semântico e estrutura com HTML
Visual com CSS e imagens
Interatividade com JavaScript

61. http://www.slideshare.net/nzakas/enough-
withthejavascriptalready

63. DESIGN
ADAPTATIVO
RESPON
SIVO

64. A WEB É
FLEXÍVEL E
ADAPTÁVEL

65. QUAL É A NOSSA
ALUCINAÇÃO ATUAL?