El diseño responsivo, también conocido como diseño adaptable, es el arte de la creación de páginas web cuya estructura se adapta al ancho de pantalla de cualquier dispositivo, ya sea un monitor de escritorio, un teléfono, una televisión o un reloj.
Al principio se seguía la filosofía de crear una versión para cada dispositivo, aunque dada la variedad de dispositivos terminó por ser impracticable, por lo que se comenzaron a usar diversas técnicas CSS que permitían establecer reglas para los diferentes anchos de pantalla, y no tardaron mucho en aparecer dispositivos como Bootstrap, Foundation, Skeleton o más recientemente, Tailwind.
Sin embargo, existen ciertas consideraciones que debes tener en cuanta antes de usar estos Frameworks. Por ejemplo, Bootstrap incluye todos los componentes que podrías necesitar para crear una web responsiva en cuestión de horas, pero también es cierto que agregará un montón de código CSS que quizás no utilices en tu proyecto. En caso de que quieras personalizar cualquier componente con Bootstrap, tendrás que sobrescribir el CSS de dicho componente. Por otro lado, Tailwind no incluye estos componentes, pero incluye todas las clases que necesitas para crearlos sin la necesidad de usar una hoja de estilos por separado.
Sin embargo, todavía existe otra aproximación que podrías tomar, y consiste en no usar ningún framework. De hecho, si no eres capaz de crear una web responsiva sin usar un farmework, es altamente recomendable que al menos pruebes a crearla una sola vez. No es necesario que sea un proyecto complejo; basta con un pequeño proyecto de prueba. Tendrás que tener en cuenta cosas como la estructura o sistema de grids que utilizarás, el menú de navegación, los breakpoints o la compatibilidad de la estructura con los diferentes navegadores, de modo que sea lo más homogénea posible.
A continuación vamos a ver cómo puedes crear un diseño responsivo desde cero, por lo que veremos todos estos componentes uno por uno. Crearemos una plantilla básica HTML y también incluiremos el código CSS y JavaScript necesario para lograr un diseño adaptable. Comenzamos.
Contenidos
Define el Viewport
Lo primero que tendrás que definir en tu documento HTML es el viewport, mediante el cual podrás eliminar el scroll horizontal de la página. De este modo, el contenido se adaptará al ancho de la pantalla. Para ello, debes agregar la siguiente meta etiqueta en la cabecera de la página:
<meta name="viewport" content="width=device-width, initial-scale=1" />Estandarización de estilos
Aunque cada vez las diferencias son menores, cada navegador siempre agrega sus propios estilos por defecto a los componentes que renderiza. Si quieres que el aspecto de estos elementos sea más o homogéneo, puedes usar algunas hojas de estilos existentes que te ayuden con esto,. Los frameworks más utilizados son Reset CSS y Normalize.css.
La diferencia entre ambos scripts es que, mientras que Reset CSS elimina por completo todos los estilos que los navegadores agregan por defecto, Normalize.css intenta que estos elementos sean consistentes. Si quieres partir de una base ya existente sin tener que agregar de nuevo montones de estilos, lo recomendable es que uses Normalize.
- Normalize CSS: Página del proyecto
- Reset CSS: Página del proyecto
Puedes encontrar el código de Normalize aquí, que puedes descargar e incluir en tu proyecto:
<link rel="stylesheet" href="css/normalize.min.css" />Además también es imprescindible que el padding de los elementos de tu página sea consistente, especialmente cuando usas la propiedad box-sizing: border-box. De lo contrario, las columnas del sistema grid que creemos tendrán un ancho inconsistente que podría estropear el diseño. Agrega esto a tu archivo CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}Breakpoints y Media Queries
Las media queries se usan para establecer breakpoints, que harán que ciertas propiedades CSS solamente se tengan en cuenta cuando se cumplan ciertas restricciones. Un breakpoint establece el número de pixels de ancho en el cual, por ejemplo, el contenido pasará de mostrarse en varias columnas a mostrarse en una sola. Es decir, que tu sistema de rejilla o grid pasará de estar organizado en varias columnas, con disposición horizontal, a estar organizado en una sola columna, con unos elementos debajo de los otros. También el menú podría cambiar su aspecto y cualquier otro elemento que quieras.
La filosofía que más se usa actualmente es la filosofía mobile first, que establece que primero se definan los estilos para pantallas propias de dispositivos móviles y que luego, mediante el uso de media queries, se vayan definiendo los estilos para otras pantallas más anchas. Para ello usarás la propiedad min-width de las media queries, que establecen el número de pixels de ancho a partir del cual se aplicarán las reglas que se definan en el interior de la media query:
@media screen and (min-width: 992px) {
/* Estilos */
}Por otro lado, también podríamos usar la propiedad max-width, que establece el ancho máximo a partir del cual se dejarán de aplicar las reglas que se definan en la media query:
@media screen and (max-width: 1200px) {
/* Estilos */
}En el ejemplo que ves a continuación, vamos a establecer que el tamaño de los encabezados h2 sea diferente según el ancho de la pantalla:
h2 {
font-size: 1.5rem;
}
@media screen and (min-width: 992px) {
h2 {
font-size: 1.8rem;
}
}Como ves, hemos usado unidades rem para el tamaño de la fuente. Puedes usar las unidades que prefieras para cualquier elemento a excepción de las fuentes, que es recomendable que usen unidades rem para así asegurar que este siempre sea legible.
Estructura y sistema grid
Actualmente ya se han dejado de lado los clásicos diseños que consistían en una página central con el contenido principal de la página y una barra vertical o sidebar lateral en la que se colocaban el resto de los elementos, aunque lo cierto es que todavía es una estructura que funciona muy bien en blogs. El caso es que independientemente del diseño que escojas, ahora siempre es preferible el uso de un sistema de rejilla o grid adaptable que permita dividir la página en un conjunto de filas y columnas de diferentes tamaños.
Grids en los diferentes frameworks
Si echamos un ojo a los principales sistema de grids, vemos que la grid de Bootstrap contiene 12 columnas. Es decir, el ancho de todas las columnas que definamos en una fila tiene que sumar un total de 12:
<div class="container">
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-9">.col-md-9</div>
</div>
</div>Si sumamos el ancho de la columna .col-md-3 y el ancho de .col-md-9 tendríamos el ancho equivalente de una única columna .col-md-12.
En cuanto a Foundation, también usa un sistema de rejilla con 12 columnas
<div class="row">
<div class="medium-3 columns">.medium-3</div>
<div class="medium-9 columns">.medium-9</div>
</div>Si sumamos el ancho de la columna .medium-3 y el ancho de .medium-9 tendríamos el ancho equivalente de una única columna .medium-12.
En cuanto a Skeleton, como no podía ser de otro modo también usa un sistema de 12 columnas:
<div class="row">
<div class="one-third column">.one-third</div>
<div class="two-thirds column">.two-thirds</div>
</div>Si sumamos el ancho de la columna .medium-3 y el ancho de .medium-9 tendríamos el ancho equivalente de una única columna .medium-12.
Crea tu propio sistema Grid
Como ves, usando un framework es difícil salir del sistema de 12 columnas flotantes. A vece es mejor basarte en un sistema de porcentajes, ya que en algunas ocasiones solamente necesitarás tres columnas, pero en otras necesitarás 15.
Si partes del 100% del ancho de cualquier elemento, siempre podrás dividirlo a tu gusto agregando clases que te permitan establecer el ancho de columna que tu quieras. Por ejemplo, podrías crear una fila de 10 columnas y asignar un 10% de ancho a cada una. Si necesitas 100 columnas, podrías aplicar el 1% de ancho a cada una. También podrás aplicar un ancho del 33% a una columna y un ancho del 67% a otra, o lo que prefieras, siempre y cuando el total sume el 100%.
Tienes una alternativa que consiste en la creación de un sistema grid de Flexbox, que no resulta demasiado complicado. Si quieres crearla, basta con que sigas los pasos que describo en el siguiente tutorial, en el que creamos un sistema grid flexbox de 10 columnas, aunque realmente podrás usar el número de columnas que prefieras, ya que se usan procentajes:
- Grid responsiva Flexbox: Tutorial de creación de una grid adaptable Flexbox
Independientemente de la filosofía que sigas, las filas suelen estar contenidas en el interior de un elemento padre el que le asignaremos la clase .container. Es recomendable que este elemento tenga un ancho máximo, definido en pixels, ya que en caso de que la pantalla en la que se vea el contenido sea demasiado grande, podríamos obtener líneas de texto con un largo indeseado. La lectura resultaría poco agradable.
Por ejemplo, vamos a definir el elemento contenedor así, con un ancho máximo de 1200px:
.container {
margin: 0 auto;
padding: 0 10px;
max-width: 1200px;
}A continuación vamos a definir la filas mediante la clase .row, cuyo único objetivo es el de poder definir columnas en su interior, de modo que las filas estén separadas:
.row::before,
.row::after {
display: table;
content: ' ';
clear: both;
}Como ves, hemos asignado un contenido predefinido, de modo que el ancho de la fila sea tenido en cuenta.
Ahora vamos a definir los estilos de las columnas, que ocuparán el 100% de la pantalla en dispositivos móviles. Para el nombre de las clases CSS usaremos una sintaxis semántica como la del framework Skeleton:
.one,
.one-third,
.two-thirds,
.one-fourth,
.half {
width: 100%;
}Ahora vamos a crear una media query en la que especificaremos el ancho que tendrán las columnas en pantallas que superen los 991px de ancho:
@media only screen and (min-width: 992px) {
.one {
width: 100%;
}
.one-half {
width: calc(100% / 2);
}
.one-third {
width: calc(100% / 3);
}
.one-fourth {
width: calc(100% / 4);
}
.two-thirds {
width: calc(100% / 3 * 2);
}
.column {
float: left;
}
}Y con esto ya se suficiente, aunque realmente podrías definir los tipos de columna que quisieses.
A continuación vamos a ver un ejemplo en el que definimos tres filas. La primera fila tiene una sola columna de un 100% de ancho. La segunda tiene dos filas de un 50% de ancho cada una y finamente la tercera tiene cuatro columnas de un 25% de ancho cada una:
<div class="container">
<div class="row">
<div class="one column">100%</div>
</div>
<div class="row">
<div class="one-half column">50%</div>
<div class="one-half column">50%</div>
</div>
<div class="row">
<div class="one-fourth column">25%</div>
<div class="one-fourth column">25%</div>
<div class="one-fourth column">25%</div>
<div class="one-fourth column">25%</div>
</div>
</div>Existen multitud de filosofías que podrías seguir a la hora de crear el menú principal de tu web. Podrías crear la típica barra de menús o podrías también crear un menú a pantalla completa, entre otras muchas opciones. En su versión móvil, siempre es común que se muestre un botón con tres líneas horizontales, con forma de hamburguesa, que despliegue el menú cuando se pulsa encima de él.
Lo más importante a la hora de diseñar tu menú es que pienses en tu contenido. Por ejemplo, en muchas ocasiones me han pedido diseños que, aunque estuvieron de moda un tiempo, no se adaptaban en absoluto al tipo de contenido del proyecto.
Si quieres crear un menú responsivo, consulta el siguiente tutorial en el que explico cómo crear un menú responsivo desde cero. También puedes consultar aquí el código del menú.
Creación de otros elementos
Todavía existen muchos otros elementos a los que les tendrás que aplicar estilos, como por ejemplo las tabla o los botones y elementos de los formularios. Si quieres obtener un resultado final como el de Bootrastrap, puede que te resulte un tanto complicado si siempre has usado un framework, pero lo importante es que cuando termines tu diseño, seguramente consideres el uso de otros frameworks.
En mi caso, el framework que considero más útil para mis proyectos a día de hoy es Tailwind CSS, aunque todavía uso Bootstrap en algunos pequeños proyectos.
Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.
