COMO CREAR UN DISEÑO WEB RESPONSIVE CON HTML5 Y CSS3

Desde hace bastantes años los dispositivos móviles disponen de navegador para acceder a la web. Obviamente, la resolución y el tamaño de estos dispositivos es, en su mayoría, bastante inferior respecto a los portátiles o sobremesa. La solución típica antes del diseño web responsive era redimensionar la página hasta que cupiera en el navegador y asi podián ofrecer una navegación mediante zoom.

De la misma manera, algunas páginas entran en una tableta puesta en horizontal, pero si se pone vertical se reduce la página. Si el diseño web responsive tiene un ancho de 960px se reduce hasta 760px (ya que cada dispositivo tiene su resolución).

USO DE LA META VIEWPORT

Si queremos crear un diseño web responsve, además del uso de las media queries de CSS3, nos hará falta indicar el meta tag viewport de HTML5.

El viewport es el área visible de nuestro navegador, de tal forma que podemos manipularla como se ve, haciendo dentro del diseño web responsive, que ese área visible sea igual al ancho de dispositivo, esto es súper importante para los dispositivos móviles. Veámoslo en un ejemplo:

NUESTRO CODIGO HTML5

CODIGO CSS3

Aqui muestro nuestro codigo de estilo.

Es aquí en el CSS3 donde ocurre parte de la magia del diseño web responsive, pero sin nuestro hermoso HTML5 esto no sería tan fácil. En un principio maquetamos todo de una forma estática, como si no existiera Responsive Design.

De tal manera que nos queda así:

Ahora en las últimas líneas de este CSS3 escribiremos mas código. Haremos uso de @media, esto es lo que llamamos media queries.

MEDIA QUERIES

Las media queries son consultas condicionales al estado del medio (medio es todo lo que pueda estar reproduciendo la web). En este caso de diseño web responsive, nos interesa detectar el ancho del navegador, que obviamente se visualiza por pantalla, de tal forma que usamos @media screen y luego debemos darle la consulta que necesitamos. En este caso, un ancho máximo, quedando:

De esta forma podemos modificar estilos para resoluciones menores a 1000px de ancho.

Dentro de los media queries se conserva toda la herencia de CSS, así que sólo debemos modificar lo necesario.

Ahora ha ocurrido algo que en nuestro navegador desktop a fullscreen no vemos, pero sí cuando redimensionamos hasta llegar a menos de 1000px de ancho, la magía del diseño web responsive a comenzado.

Sí, sólo con cambiar el ancho de las etiquetas seccion de un tamaño fijo de 1000px a un tamaño dinámico de 100% hacemos magia en el diseño web responsive. De igual manera hacemos una segunda consulta a los medios para resoluciones aún más pequeñas, aplicando la misma regla de los seccion, pero esta vez para las etiquetas articles, obteniendo como resultado una web hermosa a una sola columna.

Y así es como logramos enfrentar el primer patrón de diseño web responsive.