O documento discute os benefícios de um design responsivo para uma web única, capaz de se adaptar a diferentes telas. Defende a abordagem "mobile-first" e o uso de CSS3 e frameworks para criar layouts flexíveis, ao invés de sites separados para mobile. A estratégia de "uma web" melhora a experiência do usuário e o SEO.

1. DESIGNRESPONSIVO
POR UMA
WEB ÚNICA

2. @sergio_caelum
sergiolopes.org

3. sergiolopes.org
10% off:
OLHOSEO10

4. MOBILE
BOMBANDO

12. APP ou
WEB?

13. WEB-FIRST

14. SITE MOBILE ou
DESIGN RESPONSIVO?

15. www.uol.com.br

16. SITE MOBILE
m.uol.com.br

17. bostonglobe.com

22. SITE MOBILE ou
DESIGN RESPONSIVO?

23. SITE MOBILE ou
DESIGN RESPONSIVO?
MOBILE
???

24. MOBILE

25. MOBILE
TELA PEQUENA

26. MOBILE
PORTABILIDADE
TELA PEQUENA

27. MOBILE
3G
PORTABILIDADE
TELA PEQUENA

28. MOBILE
3G TOUCH
PORTABILIDADE
TELA PEQUENA

29. NÃO EXISTE
MOBILE

30. terra.com.br

31. m.terra.com.br

32. tablet.terra.com.br

33. DESIGNRESPONSIVO

34. LAYOUT FLUÍDO

36. 960px
470px470px

37. MEDIDAS
FLEXÍVEIS

38. MEDIDAS
FLEXÍVEIS
%,em,rem,vh

39. 100%
49%49%

40. PROPORÇÕES

41. NUMA TELA
DE 320px
100%
49% 49%

42. LAYOUT
CONDICIONAL

43. NUMA TELA
DE 320px

44. .formulario,
.endereco {
width: 49%;
}
@media (max-width: 600px) {
.formulario,
.endereço {
width: 100%;
}
}
CSS

45. .formulario,
.endereco {
width: 49%;
}
@media (max-width: 600px) {
.formulario,
.endereco {
width: 100%;
}
}
CSS

46. CSS3
MEDIA QUERIES

47. .formulario,
.endereco {
width: 49%;
}
@media (max-width: 600px) {
.formulario,
.endereco {
width: 100%;
}
}
CSS

48. DESIGNRESPONSIVO
FLEXÍVEL
ADAPTÁVEL

52. FRAMEWORKS
&
FERRAMENTAS

53. CRIAÇÃO
PHOTOSHOP?

54. CRIAÇÃO
DESIGN IN THE BROWSER

55. GRIDS
BOOTSTRAP,FOUNDATION,ETC

56. TESTES
EMULADORES & APARELHOS

57. LIBS
ZEPTO,HAMMER,MICROJS

58. SITE MOBILE ou
DESIGN RESPONSIVO?

59. DESIGN
ADAPTATIVO
RESPON
SIVO

60. DESIGN
ADAPTATIVO
RESPON
SIVOSEMPRE

61. SITE MOBILE ou
DESIGN RESPONSIVO?

62. SITE MOBILE ou
DESIGN RESPONSIVO?
SITE ÚNICO

63. www.uol.com.br

64. SITE MOBILE
m.uol.com.br

65. m.uol.com.br

66. SEO

74. ONE WEB

79. ESTRATÉGIA

80. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"

81. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"

82. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"

83. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"

84. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"

85. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"

86. MOBILE-FIRST

87. DESIGNRESPONSIVO
POR UMA
WEB ÚNICA

88. OBRIGADO
sergiolopes.org
@sergio_caelum

89. sergiolopes.org
10% off:
OLHOSEO10