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 qué es el 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 hemos visto que a la Web ya no se accede únicamente desde un ordenador, sino que se accede desde diferentes dispositivos, y seguro que en el futuro se accederá desde muchos otros dispositivos. ¿Cómo se puede crear un sitio web para que se pueda visualizar de una forma correcta en todos los diferentes dispositivos que existen en la actualidad y en los que puedan aparecer en el futuro?

Bueno, los milagros no existen, así que tampoco esperes que exista una solución que te asegure que tu página web se vea sin problemas en cualquier dispositivo futuro. Pero si utilizas los estándares, y aplicas lo que te explico en este vídeo, es muy probable que tu página web se siga viendo bien dentro de muchos años.

La clave es utilizar lo que se conoce en inglés como “responsive design”, y en español se suele llamar “diseño flexible”, “diseño adaptable” o “diseño adaptativo”. Pero, por favor, no lo llames diseño responsivo o diseño sensible; queda muy mal.

El origen del término “responsive web design” se suele situar en un artículo que llevaba ese título publicado por Ethan Marcotte en mayo de 2010. Su artículo se hizo muy famoso y, en el año 2011, Ethan Marcotte publicó un libro con el mismo título.

Con “responsive web design” ha pasado lo mismo que ha ocurrido en el pasado con otras técnicas: alguien le ha puesto un nombre a un conjunto de técnicas y se ha puesto de moda. Ocurrió hace más de 15 años con el HTML dinámico, algo que nunca existió como tal, pero sobre lo que se escribieron numerosos libros. Y también ha ocurrido lo mismo más recientemente con AJAX, que a partir del artículo de Jesse James Garrett del año 2005, empezó a ponerse de moda algo que ya existía desde hacía años.

Un diseño adaptable se basa en emplear, de forma bastante ingeniosa, ciertas propiedades de CSS que no eran muy conocidas o que no se podían utilizar por falta de soporte por los navegadores. En otro vídeo te explicaré cómo se realiza un diseño adaptable con CSS.

En este vídeo te voy a mostrar un ejemplo de diseño adaptable y otro ejemplo de diseño no adaptable. El sitio web “Smashing Magazine” es muy conocido entre los profesionales del diseño y del desarrollo web por la alta calidad de los artículos que publica.

En esta captura de pantalla podemos ver cómo se visualiza esta página web con una resolución de 1920 píxeles de ancho. Y en esta otra vemos cómo se ve con una resolución de 1280 píxeles de ancho. Si comparamos las dos capturas de pantalla, podemos apreciar que ya aparece un cambio en el diseño de la página, ya que esta parte de la página que estaba en la columna izquierda se ha desplazado a la parte superior de la página.

Para comprobar cómo se visualiza esta página web en otros tamaños de pantalla, como por ejemplo en la pantalla de una tableta o un teléfono móvil, podemos hacer algo tan simple como redimensionar el tamaño de la ventana del navegador. Conforme se hace la ventana del navegador más pequeña, la presentación visual de la página web va cambiando.

También se puede emplear un simulador, como el Opera Mini Simulator que está disponible a través de una página web, pero no es muy cómodo de usar y además necesita Java. Es mucho mejor descargarse el simulador de Opera Mobile, que permite elegir entre diferentes dispositivos.

Aquí podemos ver cómo se visualiza la misma página principal de “Smashing Magazine” en un Samsung Galaxy S II. En la barra de estado de Opera Mobile aparece el nombre del dispositivo, las dimensiones de la pantalla, la densidad de píxeles y un botón para cambiar la visualización de vertical a horizontal y viceversa.

Ahora comprobamos la visualización con otro dispositivo, el Samsung Galaxy Tab. En la cabecera de la página no se aprecian muchos cambios; lo que más destaca es el cambio de tamaño del logotipo de este sitio web. Pero en el pie de página sí que se aprecian tres cambios importantes:

Cambio del diseño de 1 columna a 2 columnas.

Cambio del color de fondo.

Cambio del color del texto de los encabezados.

¿Por qué esos cambios? Eso hay que preguntárselo al diseñador de la página.

Veamos ahora la página principal de la Universidad de Alicante, una página web que no tiene diseño adaptativo. Así es como se visualiza con una resolución de pantalla de 1920 píxeles de ancho. Si la comparamos con “Smashing Magazine”, notamos un detalle importante: dos amplias zonas vacías en las que no se muestra ningún contenido. Esto se debe a que esta página está realizada con un diseño fijo de 960 píxeles.

No voy a decir si es un buen diseño o un mal diseño, que luego en mi universidad se enfadan. Sin embargo, en el caso de “Smashing Magazine”, el diseño aprovecha los 1920 píxeles de la pantalla, ya que emplea un diseño flexible que se adapta al tamaño de la ventana del navegador.

Los problemas de esta página aparecen cuando se visualiza con pantallas más pequeñas. A la izquierda tenemos cómo se muestra en un Samsung Galaxy S II, a la derecha cómo se muestra en un Samsung Galaxy Tab. Podemos ver que se muestra exactamente igual; el diseño y el contenido de la página no sufren ninguna alteración.

Podemos pensar que eso está bien, pero el problema es que nos olvidamos de algo. Cuando veamos esta página en un dispositivo pequeño, en un teléfono móvil, realmente la veremos así. ¿Qué opinas ahora?

Y ya para terminar, otra herramienta que te puede ser de gran ayuda, ya que te muestra cómo se ve una página web con diferentes tamaños de pantalla. Aquí tenemos una prueba con “Smashing Magazine”, volvemos a comprobar que la presentación de la página se adapta a los diferentes tamaños de pantalla. Y aquí con la página principal de la Universidad de Alicante, volvemos a comprobar que la presentación de la página no se adapta a los diferentes tamaños de pantalla.

Y ya lo último de lo último, una lectura recomendada sobre diseño adaptativo que puedes encontrar en, por supuesto, “Smashing Magazine”. 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.