Responsive Web Design (básico)

El Responsive Web Design es una nueva tendencia en el diseño de páginas web, donde el sitio se adapta a la resolución del dispositivo del cliente. Lo que permite esta nueva forma de diseñar es la portabilidad del sitio a dispositivos moviles como celulares o tabletas, esencialmente se trata de hacer un diseño en HTML y CSS que se adapte a las diferentes resoluciones.

En realidad aunque pueda parecer difícil de lograr que una página se vea igual de bien en un monitor 15 pulgadas que en un celular de 4 pulgadas, esto es fácil de lograr cuando uno tiene la practica suficiente. El objetivo primordial es que el usuario no tenga que hacer scroll horizontalmente por lo que todo nuestro contenido (si así lo deseamos) tendrá que pasar a formar parte de una estructura vertical básicamente del ancho del dispositivo.

Lo principal esta en realizar un diseño que realmente pueda adaptarse, por que cuando pasamos a un dispositivo con una pantalla pequeña vamos a perder espacio y lo esencial es que el contenido que que no cabe en el ancho de la página se pase para abajo.   La clave en el diseño responsive es utilizar elementos flotantes con la propiedades CSS float:left o right, la utilizacion de min-width y max-width, min-height y max -height así como también el uso de Media Queries.

Por Ejemplo:

Si tenemos una página de tres columnas, una con el menú, otra con artículos y una tercera con información extra lo que queremos en primera instancia es que al ir achicando la pantalla las divisiones de derecha a izquierda bajen, esto se puede decir que es una de las cosas mas sencillas y se logra teniendo las tres divisiones con la propiedad css float: left (o right en el caso inverso) y el contenedor con una max-width y min-width establecidos correctamente. Así lo que se logra es que a medida que la resolución se achica, y esto lo podemos comprobar reduciendo el tamaño del navegador, las divisiones comienzan a bajar.

El código se ve algo así:

Para el documento HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilo_responsive.css" media="screen">
<title>Responsive</title>
</head>
<body>
  <div id="Div_contenedor">
    <div id="Div_menu">
    </div>
    <div id="Div_articulos">
    </div>
    <div id="Div_info">
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilo_responsive.css" media="screen">
<title>Responsive</title>
</head>
<body>
  <div id="Div_contenedor">
    <div id="Div_menu">
    </div>
    <div id="Div_articulos">
    </div>
    <div id="Div_info">
    </div>
  </div>
</body>
</html>

Y lo más interesante es el Código CSS: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#Div_contenedor{
   margin:0 auto; 
   max-width: 1020px;
   min-width: 320px;
   min-height: 500px;
   overflow: hidden;
   background-color: #e6e6e6;
   padding: 10px 10px 10px 10px;
}
#Div_menu{
   float: left;
   width: 300px;
   min-height: 400px;
   background-color: red;
   margin-bottom: 10px;
}
#Div_articulos{
   float: left; 
   width: 100%;
   min-width: 300px;
   max-width: 500px;
   min-height: 400px;
   background-color: blue;
   margin-left: 10px;
   margin-bottom: 10px;
}
#Div_info{
   float: left;
   width: 200px;
   min-height: 400px; 
   margin-left: 10px;
   background-color: green;
   margin-bottom: 10px;
}
#Div_contenedor{
   margin:0 auto; 
   max-width: 1020px;
   min-width: 320px;
   min-height: 500px;
   overflow: hidden;
   background-color: #e6e6e6;
   padding: 10px 10px 10px 10px;
}
#Div_menu{
   float: left;
   width: 300px;
   min-height: 400px;
   background-color: red;
   margin-bottom: 10px;
}
#Div_articulos{
   float: left; 
   width: 100%;
   min-width: 300px;
   max-width: 500px;
   min-height: 400px;
   background-color: blue;
   margin-left: 10px;
   margin-bottom: 10px;
}
#Div_info{
   float: left;
   width: 200px;
   min-height: 400px; 
   margin-left: 10px;
   background-color: green;
   margin-bottom: 10px;
}

A su vez también le puse un max y min-width a la #Div_articulos así como un width:100%, que significa esto? Bueno la cuestión es que al seguir achicando la página una vez que todas las divisiones están de forma vertical la división de los artículos podrá seguir achicándose hasta llegar a los 300 píxeles. En el caso del width: 100% lo coloque por que la división no tiene contenido y al no tener “obligación” la división tiende a utilizar el menor ancho posible tenga o no espacio para expandirse. Esto causa otro problema, digamos que la división si tiene contenido y que específicamente contiene una imagen o una división de 500px de ancho (width:500px;), bueno lo que pasa es que el contenido no se va a achicar y va a quedar cortado o desalineado.

Para solucionar este problema simplemente podemos colocarle una max y min-width a la división interna para que no haya problemas y en el caso de las imágenes tendremos que usar Media Queries.

Que son las Media Queries?

Bueno las Media Queries son código CSS que se ejecuta o acciona cuando se cumplen ciertas condiciones, por ejemplo cuando la resolución de la pantalla es menor a 500px y mayor a 320px, lo que determina esto es que para cualquier dispositivo que tenga una resolución entre estos dos valores se le aplicaran las reglas CSS contenidas dentro del Media Querie. Esto no significa que el resto del código CSS será ignorado, simplemente hace que el contendido CCS del Media Querie tenga preponderancia.

Creo que un ejemplo lo explica mejor:

Agregamos una imagen a la #Div_articulos:

1
2
3
<div id="Div_articulos">
    <img class="imagen" src="prueba.png" alt="prueba" >
</div>
<div id="Div_articulos">
    <img class="imagen" src="prueba.png" alt="prueba" >
</div>

Y luego agregamos a CSS:

1
2
3
@media only screen and (max-width:500px) and (min-width:320px){
   .imagen{width: 300px;}
}
@media only screen and (max-width:500px) and (min-width:320px){
   .imagen{width: 300px;}
}

La imagen tiene una ancho de 500px por lo que cuando la pantalla es menor a 500px la imagen se ve cortada, la solución es colocarle una clase a la imagen, en este caso llamada imagen !, y utilizar Media Queries para que cuando la pantalla sea menor a 500px la imagen pase a medir 300px solucionando el problema.

No voy a hablar de como se escriben las Media Queries ya que en el código de arriba se ve claramente, lo que si voy a recalcar es que utilizando las Media Queries uno puede camiar el ancho y alto de cualquier Div, así como cualquier otro parámetro CSS, claro siempre que se cumpla el ancho comprendido.

Para finalizar aclaro que el valor min-height también tiene mucha importancia, cuando tenemos una Div cuyo contenido se puede expandir hacia abajo, como por ejemplo texto, si utilizamos un height fijo seguramente el contenido saldrá de la caja o se esconderá, por eso cuando diseñamos responsive es necesario utilizar el min-height en buena parte de nuestras Divs, el max-height se utiliza para casos más puntuales.

Por ultimo 2 cosas primero pueden acceder al ejemplo bien sencillo que mostre aqui, y segundo este “tutorial” es de mi obra, por lo que pueden encontrar algunas carencias en cuanto a lo que información se refiere y con esto me refiero a que no profundizo en Media Queries por que yo no les doy otro uso que no sea este,  como autodidacta en esta materia aprendo sobre la marcha y la idea esta en que el lector comience a probar y experimentar con el código que en mi opinión es la mejor manera de aprender.

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

Un comentario en “Responsive Web Design (básico)

Deja un comentario