Este documento presenta una introducción al diseño web responsivo. Explica conceptos como diseños fijos y fluidos usando píxeles, porcentajes y ems. También cubre temas como diseño adaptativo, puntos de ruptura y consultas de medios para crear diseños que se adapten a diferentes dispositivos. El objetivo final es diseñar para la web en lugar de solo para dispositivos específicos.

1. ORLANDO
DEL AGUILA

2. Como perder 20 kilos
en 2 semanas con
HERBALIFE

3. Diseño web para
dispositivos móviles.

4. @odelaguila
orlandodelaguila
orlandodelaguila.com
www.bakedweb.net

5. La Web Móvil

6. La Web Móvil
Fixed y Fluid Layouts

7. La Web Móvil
Fixed y Fluid Layouts
Adaptive Design
Breakpoints
Responsive Design

8. La Web Móvil
Fixed y Fluid Layouts
Adaptive Design
Breakpoints
Responsive Design
Extras y Closing

9. La Web Móvil

10. La Web Móvil
No existe
la web móvil

11. La Web

12. La Web
Cualquier tipo de Contenido
Debe ser accesible desde
cualquier dispositivo

13. La Web
Diseño Móvil
Adaptive Design
Responsive Design

14. La Web
Diseño Móvil
Adaptive Design
Diseño Web
Responsive Design

15. Cosas que vamos a usar

16. Cosas que vamos a usar

17. Cosas que vamos a usar

18. Fixed y Fluid Layouts

19. Fixed Layouts

20. Wrapper

21. Header

22. Content

23. Fixed Layouts
Tamaño fijo (pixeles)
#wrapper {
margin: 50px auto;
width: 1010px;  Fijo
}

24. Wrapper

25. Fixed Layouts

26. Fixed Layouts

27. Fixed Layouts

29. Fluid Layouts
Porcentajes
Ems

30. Fluid Layouts
Porcentajes

31. Fluid Layouts
Porcentajes
html,body{
width: 100%;
height: 100%;
}

32. Fluid Layouts
Agarra el 100% de la
pantalla
html,body{
width: 100%;
height: 100%;
}

33. Fluid Layouts
Mi pantalla
1280 x 768
Ancho - Alto

34. Fluid Layouts
1280
80%
1024

35. Fluid Layouts
#wrapper {
margin: 50px auto;
width: 1010px;  Fijo
}

36. Fluid Layouts
#wrapper {
margin: 50px auto;
width: 80%;  Fluido
}

37. Fluid Layouts
Ems

38. Fluid Layouts
Ems
Se usan para texto

39. EMS
Hacen que nuestro
texto no sea fijo y
que pueda
cambiar con el
layout

40. EMS

41. HTML
<h3>
Este es un h3
<span>
Esto es un span
</span>
</h3>

42. CSS
h3 {
font-size: 50px;
font-weight: bold;
color: black;
span{
color: red;
font-size: 30px;
font-weight: lighter;
}
}

43. CSS
h3 {
font-size: 50px;
font-weight: bold;
color: black;
span{
color: red;
font-size: 30px;
font-weight: lighter;
}
}

44. CSS
html{
font-size: 16px;
}
body{
font-size: 62.5%;
}

45. EMS
Para hacer las cuentas
sencillas, hacemos lo
siguiente

46. Regla de Oro
Target / Contexto

47. EMS
10px/ 16px = 0,625

48. EMS
0,625 x 100 = 62,5%

49. EMS
1em = 10px

50. EMS
h3 {
font-size: 5em; *50px*
font-weight: bold;
color: black;
span{
color: red;
font-size: 3em; *30px*
font-weight: lighter;
}
}

51. EMS

53. Regla de Oro
Target / Contexto

54. EMS
El contexto del
span cambio, ya
no es el body,
ahora es el h3

55. EMS
h3 {
font-size: 5em; == 50px
font-weight: bold;
color: black;
span{
color: red;
font-size: 3em;
font-weight: lighter;
}
}

56. EMS
30px / 50px = 0.6em

57. EMS
h3 {
font-size: 5em; == 50px
font-weight: bold;
color: black;
span{
color: red;
font-size: 0.6 em; *30px / 50px*
font-weight: lighter;
}
}

58. EMS

59. Fluid Layout
Para que nuestro
diseño sea fluido,
todo tiene que estar
en ems o %

60. Fixed Layouts

61. Wrapper
#wrapper {
margin: 50px auto;
width: 80%;  Fluido
}

62. Header
header{
margin-bottom: 20px
width: 1010px;
#name{
font-size:50px
float:left;
}
nav{
float:right;
}
}

63. Header
header{
margin-bottom: 20px
width: inherit;
#name{
font-size:5em; *50px / 10px*
float:left;
}
nav{
float:right;
}
}

64. Contenido
#content {
height: auto;
width: inherit;
}

65. Secciones

66. Secciones
<h1>
ABOUT
</h1>
<div class="img">
<img src="/img/me.jpg">
</div>

67. Secciones
h1 {
font-family: "museo-sans"
font-size: 25px;
padding: 0 25px;
}

68. Secciones
h1 {
font-family: "museo-sans"
font-size: 2.5em; 25px/10px
padding: 0 25px;
}

69. Secciones
Para pasar el padding a
porcentaje, se toma como
contexto el tamaño del
mismo elemento

70. Secciones
1010px de ancho

71. Secciones
1010px de ancho
25px /1010px =
2.47524752475%

72. Secciones
h1 {
font-family: "museo-sans"
font-size: 2.5em; 25px/10px
padding: 0 2.47524752475%;
}

73. Secciones
Al contrario del padding, el
margin se calcula igual que
los ems, usando como
contexto el elemento que
contiene al elemento que
estamos evaluando.

74. Secciones

75. Secciones
<h1>
ABOUT
</h1>
<div class="img">
<img src="/img/me.jpg">
</div>

76. Secciones
Alguno quizás dirá, tener
img tags para imágenes
que son del layout y no
del contenido es una mala
practica

77. Secciones
img {
width: auto;
max-width: 100%;
}

78. Secciones
img,video,object… {
width: auto;
max-width: 100%;
}

79. Secciones

80. Secciones

81. Adaptive Design
Breakpoints
Responsive Design

82. Adaptive Design
Adaptar nuestro diseño a un
contexto, ejemplo un
dispositivo en especifico, un
iPhone o un iPad por
ejemplo

83. Adaptive Design

84. Adaptive Design
dribble noto que un
numero importante de
usuarios acensaban a su
pagina desde iPhones

85. Adaptive Design

86. Adaptive Design
Hay que tener en cuenta
• Dispositivos
• Tamaño de Pantalla
• Resolución

87. Adaptive Design
Puntos a considerar
• Quien es mi usuario
• Como usa mi sitio
• Contexto (Dispositivo)
• Contenido (¿como se
adaptaría?)

88. Adaptive Design

89. Adaptive Design
Breakpoints
Responsive Design

90. Breakpoints
Breakpoints son los
puntos en los cuales mi
diseño se rompe.

91. Breakpoints
También son los
puntos importantes
como el tamaño de las
pantallas de los
distintos dispositivos

92. Breakpoints
Tamaño != Resolución

93. Breakpoints
iPhone 4s
Resolución: 640 x 960
Tamaño: 480 x 320

94. Breakpoints

95. Breakpoints
Para atender los
problemas que tenían
los dispositivos móviles
para visualizar la web…

96. Breakpoints
Se creo:
• Meta viewport
• Mediaquery

97. Meta viewport
Secciones
<meta
name='viewport‘,
content='width=device-width
/>

98. Meta viewport
Secciones
Con esto limitamos
el lienzo web al
tamaño del
dispositivo.

99. Meta viewport

100. Meta viewport
Secciones
html,body {
height: 100%; = 480px
width: 100%; = 320px
}

101. MediaQueries
Secciones
Reglas CSS, solo
para dispositivos
especificos

102. MediaQueries
Secciones
Reglas CSS, solo
para dispositivos
específicos

103. MediaQueries
Secciones
Existen varios
mediaqueries, pero
aquí solo vamos a
usar el de max-width

104. MediaQueries
Secciones
Documentación
http://mzl.la/L28U6F

105. MediaQueries
Secciones
/* Phones (portrait) */
@media only screen and
(max-width : 320px){
/* Reglas aki */
}

106. MediaQueries
Secciones
/* Phones (landscape) */
@media only screen and
(max-width : 480px){
/* Reglas aki */
}

107. MediaQueries
Secciones
/* Tables (portrait) */
@media only screen and
(max-width : 768px){
/* Reglas aki */
}

108. MediaQueries
Secciones
Los mediaqueries se
colocan al final de
nuestras hojas de
estilo (stylesheets)

109. MediaQueries
Secciones

110. MediaQueries
Secciones
Si usan Chrome
http://bit.ly/L29FfZ

111. MediaQueries
Secciones
Creamos un
mediaquery para
atender ese
breakpoint

112. MediaQueries
Secciones
@media only screen and
(max-width : 850px){
nav, #name{
float:none;
width:100%;
}
}

113. MediaQueries
Secciones

114. MediaQueries
Secciones
@media only screen and
(max-width : 850px){
nav, #name{
float:none;
width:100%;
text-align:center;
}
}

115. MediaQueries
Secciones

116. MediaQueries
Secciones
@media only screen and
(max-width : 850px){
header{ margin-bottom:50px;}
nav, #name{
float:none;
width:100%;
text-align:center;
}
}

117. MediaQueries
Secciones

118. MediaQueries
Secciones
En este punto hay que
probar y corregir los
breakpoints hasta que
tengamos lo que
queremos

120. Responsive Design

121. Responsive Design
Imaginen un adaptive
design, pensado para
todos los dispositivos,
actuales y futuros.

122. Extras y Closing

123. Extras y Closing
El responsive design no es
un silverbullet, no va ser
viable en todos los casos

124. Extras y Closing
En otros casos, app
nativas para móviles es la
solución, o alternativas
como jQuery Mobile

125. Extras y Closing

126. Extras y Closing
IE6-8 no soportan
mediqueries, pero hay un
polyfill para eso
Respond.js
http://bit.ly/LQaei0

127. Extras y Closing
Hay frameworks de CSS
que se basan en fluid
layouts y responsive
design
• Twitter Bootstrap
• Zurb Foundation

128. Extras y Closing
A Book Apart, Responsive Web Design
http://bit.ly/LQbXUP

129. Gracias 