Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo se crea un diseño adaptable, también llamado adaptativo o flexible.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

En otro vídeo te he explicado qué es un diseño adaptable, adaptativo o flexible. En este vídeo vamos a ver cómo crear un diseño adaptable. Recuerda que hoy existe un problema: a la Web ya no se accede únicamente desde un ordenador, sino que también se accede desde otros dispositivos muy diferentes.

En un diseño adaptable, la visualización de la página web se ajusta de forma dinámica a las características particulares de cada dispositivo, para ofrecer al usuario la mejor experiencia posible. Un diseño adaptable se basa en emplear, de forma bastante ingeniosa, ciertas propiedades de CSS que no eran muy conocidas. El secreto del diseño adaptable está en el uso de las “media queries”. Con las media queries podemos adaptar la visualización de la página web en función de diferentes parámetros, como por ejemplo, la densidad de píxel, la resolución de pantalla, la orientación de la pantalla, y otros parámetros.

Un elemento clave es que debemos emplear tamaños relativos en vez de tamaños fijos. Hay que emplear unidades de medida como el porcentaje para las anchuras y “em” para los tamaños de texto.

En el artículo “Multi-Device Layout Patterns”, se explican varios patrones de diseño adaptativo. Vamos a repasarlos rápidamente.

El primero, llamado “Casi fluido”, es quizás el diseño más popular, y consiste en modificar la anchura de los componentes de la página hasta cierto límite que ya no se puede más, pasando a un diseño de una sola columna.

El segundo, “Caída de columna”, es muy parecido al anterior; en este caso se van situando las columnas una debajo de otra hasta llegar a un diseño en una sola columna.

El tercero, “Cambio de la estructura”, es quizás el más potente, y consiste en utilizar un diseño distinto para cada situación contemplada.

El cuarto, “Pequeños cambios”, se puede aplicar en diseños sencillos, basados en una sola columna, que sólo necesitan pequeños ajustes en algunos elementos de la página.

Y el último, “Fuera de la pantalla”, consiste en situar fuera de la pantalla ciertos elementos que aparecen solamente cuando el usuario los solicita, por ejemplo, a través de la activación de un botón o un enlace.

En un diseño real, lo normal es que mezclemos varios patrones a la vez. Así, es muy común utilizar la “caída de columna” junto con los “pequeños cambios”.

Antes de realizar un diseño adaptable, hay que pensarlo muy bien, porque lo que es válido para la pantalla del ordenador puede no serlo para la pantalla de un teléfono móvil. Antes de ponerse a escribir el código CSS, es imprescindible realizar un diseño en papel de lo que se quiere lograr. Existen plantillas, como esta que te recomiendo, que te pueden ayudar a hacer tu diseño en papel.

En el papel tienes que jugar con los distintos módulos que componen tu página web y tienes que decidir qué mostrar, dónde mostrar y cómo mostrar cada módulo.

Ya para terminar, te aconsejo la lectura del artículo “Responsive Web Design”, de Ethan Marcotte, el artículo que puso nombre a todas estas técnicas. Ahora, te invito a que veas la segunda parte de este vídeo, en el que se desarrolla un diseño adaptable desde cero.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.