Comenzando con el Responsive Design
Indice de la serie:
Un diseño sensible o responsive design se caracteriza por adaptarse a cualquier tamaño de dispositivo tal y como aprendimos en el primer capítulo de esta guia. En él aprendimos que era, como se definia y que caracterizaba a un diseño sensible.
En este segundo capítulo veremos como crear nuestro primer diseño sensible sencillo. Nuestro diseño tendrá una estructura básica de header, columna principal, sidebar derecho y un footer o pie.
En tres simples pasos conseguiremos que nuestro HTML básico se adapte a 3 tamaños de dispositivo, los 3 más comunes (Ordenador de sobremesa, Tableta/iPad y smartphone/iPhone).
Empecemos: Estructura básica HTML
Para empezar partiremos de la siguiente estructura HTML. Como vemos y comente anteriormente es una estructura básica con Cabecera, Columna de contenido, barra lateral derecha y un pie de página. Todo contenido por una wrapper.
Guiabreve
Un blog de diseño que mola
article section h2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.
Y este será nuestro CSS para colocarlo todo un poco. El header arriba, contenido a la izquierda, sidebar a la derecha y footer abajo. Cosas básicas.
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
header {
height: 180px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
footer {
clear: both;
}
Ahora tenemos, un diseño normal, estático que pasaremos a responsive design añadiendo 2 cosas.
Convertimos el diseño estático en responsive
1º. Añadimos la metatag viewport
Aunque esto pueda sonar a chino es muy sencillo. La mayoría, por no decir todos, de navegadores móviles escalan las páginas HTML para ajustarlas al ancho del dispositivo. Por medio de la meta etiqueta viewport podemos resetear esto. Nuestro contenido no necesitará ser escalado ya que lo vamos a adaptar para que se visione correctamente en estos dispositivos.
Para ello añadimos la siguiente linea entre las etiquetas <head>...</head>:
2º Añadimos las Media Queries adecuadas
Ahora es cuando definiremos el tamaño y el comportamiento de los elementos dependiendo del tamaño de la ventana.
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
Con esto ya hemos creado nuestro primer diseño sensible o responsive design. Como vemos no requiere mucho más esfuerzo que un diseño normal, eso si, por ahora esto es un uso básico, las posibilidades son mucho mayores, pero vamos poco a poco, capítulo por capítulo.