¿Cómo hacer mi web responsive?

Hacer una web responsive consiste en adaptarla a todos los tamaños de pantalla existentes, para que así, cualquier persona desde cualquier dispositivo pueda acceder a ella. En el inicio del desarrollo web no existía la necesidad de adaptar las páginas a diferentes formatos, pero con el avance de la tecnología y, sobre todo, la aparición de tablets y smartphones esta práctica se ha convertido en un esencial. Pero… ¿Cómo hacer mi web responsive?

En las décadas de los 90~2000, cuando se empezaba a popularizar las páginas web, las pantallas de todos los ordenadores tenían un ancho común, desde los 640px y 14″ de las primeras a los 1024px algunos años más adelante. En esta época o se fijaba un ancho máximo de 640px o se daba un ancho en porcentajes para que se adaptase mínimamente a la pantalla.

Todo esto cambió el día en el que llegaron los smartphones, de repente el formato era completamente distinto y lo que existía no servía. Además de los nuevos dispositivos móviles se sumó la aparición de las tabletas. Sumando todo esto nos situamos en una situación nueva tanto para desarrolladores como para diseñadores. Ahora ya no solo importaba que nuestra web se viese bien en ordenador, sino que tiene que verse bien en todo tipo de dispositivos.

Diseño responsive vs adaptative

Para solventar estos problemas que se habían creado se plantearon dos soluciones, hacer un diseño «Responsive» (que se adapte a los nuevos formatos) o crear uno «Adaptative» (crear un diseño adaptado, que no adaptable para ese formato)

Diseño responsive:

El diseño web responsive es aquel que, mediante media queries en una hoja de estilo CSS, consigue hacer que nuestra web se adapte a la pantalla desde la que la visita el usuario. Esto se consigue usando porcentajes y medidas que funcionan en función al ancho de la pantalla utilizado en cada dispositivo y consiguiendo una adaptación flexible.

Diseño adaptative:

Esta otra técnica utiliza diseños personalizados para ciertos tamaños preestablecidos 320px, 480px, 750px, 960px, 1200px, 1500px… En este caso cuando el navegador abre la web detecta el tamaño de pantalla y escoge cuál es el formato más adecuado y lo adapta mínimamente. Esta solución no es flexible.

¿Qué son las Media Queries?

Una Media Query es una regla que se introducen en una hoja de estilo CSS para adaptar las características del diseño a las propiedades de la pantalla en la que se muestra. Fueron creadas en 1994, pero no es hasta el 2012, con la llegada de CSS3 y la necesidad de adaptar las páginas a diferentes tamaños de pantalla cuando los navegadores las convirtieron en un estándar.

Este es un ejemplo de una Media Query:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Si quieres saber más sobre Media Queries puedes visitar la página oficial de W3C donde explican todas sus propiedades y usos.

Bloques flexibles

Al igual que con las Media Queries, con la llegada de CSS3 también se incluyeron los bloques flexibles o «flexbox». Con ellos llego la posibilidad de crear filas o columnas que con un par de líneas de CSS se adaptasen automáticamente al contenedor al que pertenecían.

Gracias a flexbox podemos desde seleccionar la posición de los elementos, ajustar su posición, decidir si colapsan, o incluso marcar cuantos elementos por columna o fila queremos, una de las mejores y más utilizadas herramientas de CSS a día de hoy (Y mi favorita 😁).

Si quieres saber todas sus propiedades y como usarlos te recomendamos que le eches un ojo a la explicación de css-tricks.

Medidas adaptables

Otra de las cosas que debemos tener en cuenta a la hora de desarrollar nuestra página es que no vemos igual los elementos en un PC que en un móvil. Es decir, en un PC en el que tenemos la pantalla a medio metro debemos poner una tipografía más grande, en cambio, en un móvil en el que lo utilizamos a escasos cm y que el espacio en pantalla es mucho más reducido debemos disminuir sensiblemente el tamaño de la letra.

Para dar solución a esto se crearon unidades relativas al tamaño de su contenedor o al de la pantalla. Para textos se suelen usar medidas como em, que dan un tamaño relativo a su contenedor, por lo que si al encoger el ancho de la pantalla damos un tamaño de fuente del contenedor de, por ejemplo, un 80% haremos que el texto se reduzca un 80% frente a su valor original.

body {
	font-size:100%;
}
h1 {
	font-size:2em;
}
h2 {
	font-size:1.4em;
}
p {
	font-size:0.8em;
}

/* Media Queries */

/* Para pantallas inferiores a 1000px */
@media screen and (max-width: 1000px) {
	body {
		font-size:80%; 
                /* Reducimos al 80% los textos en pantallas inferiores a 1000px  */
	}
}

/* Para pantallas inferiores a 400px */
@media screen and (max-width: 400px) {
	body {
		font-size:70%;
		/* Reducimos al 70% los textos en pantallas inferiores a 400px  */
	}
}

Otra herramienta muy útil a la hora de dar dimensiones a los contenedores de nuestra página es usar las unidades VW y VH, estas son relativas al ancho (VW) y al alto (VH) de la pantalla. Son muy útiles para que secciones como el banner principal de nuestra web se vea a pantalla completa o que cualquier contenedor se adapte según crezca o encoja la pantalla.

Hoy en día ya son más los usuarios que acceden a internet a través de dispositivos móviles que desde ordenadores de sobremesa. Incluso a veces se diseña pensando más en la versión móvil que en la de escritorio. Por esto es tan importante que nuestras páginas tengan una buena versión responsive, que se adapte a las necesidades de todos los usuarios que nos visiten. Ahora ya que ya sabes como hacer tu web responsive ¿A qué esperas para adaptarla? 😀