El estado actual del diseño web responsivo

Al adentrarnos en este 2015 es un momento perfecto para repasar el estado actual del diseño web responsivo.

Vamos a revisar lo que sabemos del RWD, lo que se ha quedado recientemente por el camino, los nuevos trucos que hoy podemos incorporar a la partida y que es lo que se vislumbra en el horizonte.

La historia hasta la fecha

Antes de ponernos a ello, empecemos por definir a que nos referimos realmente cuando decimos diseño web responsivo.

Originalmente cuando, hace ahora cinco años, Ethan Marcotte acuñó el término en su artículo en A List Apart, él hablaba de rejillas fluidas (fluid grids), imágenes flexibles (flexible images) y consultas a dispositivos (media queries) como de los tres ingredientes técnicos del RWD.

Para inmediatamente completar estas especificaciones diciendo:

"... pero también requiere una forma de pensar distinta."

Desde aquel artículo del 2010 hemos presenciado la constante evolución de la tecnología que usamos para acceder a internet, así como la aparición de nuevos componentes técnicos que añadir a nuestras herramientas de desarrollo.

Seguimos utilizando cuadrículas fluidas, imágenes flexibles y consultas a medios (media queries), pero estas tres cosas solas no conforman por ellas mismas una imagen completa de lo que implica el desarrollo web responsivo.

La tecnología y las técnicas de diseño web están en estado permanente de flujo, por lo tanto lo ideal sería que la definición de RWD nos proporcionara una forma distinta de pensar que fuera aplicable hoy y dentro de otros cinco años de cambios.

Desde mi punto de vista, esta forma de pensar diferente puede resumirse como sigue.

"El diseño web responsivo es un enfoque para la creación de páginas web capaces de responder a todos los dispositivos de navegación web conocidos y con la entrega de contenidos y la interacción con la IU optimizadas en el mayor grado posible para todos sus visitantes."

Fijándonos en la forma de pensar que subyace bajo el diseño web responsivo, en lugar de hacerlo en ingredientes técnicos específicos, permaneceremos libres para esforzarnos por encontrar la mejor manera de crear páginas responsivas en el siempre cambiante panorama de nuestra industria.

El diseño web responsivo que conocemos

Si bien es cierto que han cambiado muchas cosas en el RWD, también lo es que algunas cosas han permanecido esencialmente sin cambios y que muchos desarrolladores están de acuerdo en que se trata de buenas prácticas.

Aquí están algunos de los aspectos más ampliamente aceptados del RWD actual que conocemos.

Soporte para múltiples tipos de dispositivos de salida

Todos sabemos que necesitamos cubrir una larguísima lista de resoluciones de pantalla posibles, de múltiples densidades de píxel y de tamaños de pantalla variados.

Soporte para múltiples mecanismos de entrada

Necesitamos tomar en consideración los diferentes métodos de entrada, por ejemplo despidiendonos de la dependencia del ratón y haciendo que los elementos de la IU sean más amigables con los toques.

Uso de las consultas a medios (media queries) y de los puntos de interrupción

Necesitamos usar las consultas a medios (media queries) para desplegar los ajustes de nuestro diseño cuando y como sean necesarios.

Sabemos que los puntos de interrupción no deben colocarse a un ancho predeterminado, sino mejor en puntos donde se "interrumpe" el diseño y se garantiza el ajuste.

Mostrar recursos audiovisuales con flexibilidad

Nuestras imágenes necesitan ajustar fluidamente su tamaño para que no sean ni demasiado grandes ni demasiado pequeñas en los distintos tamaños de pantalla.

Otros recursos audiovisuales, como reproductores de video y audio, también necesitan adaptarse con la misma fluidez.

Usar la etiqueta meta viewport

Hemos de incluir una etiqueta meta viewport (y, mirando más allá, el equivalente CSS) de forma que nuestros diseños se comporten según esperamos que lo hagan:

1

<meta name="viewport" content="initial-scale=1.0">

En la linea de salida

Hay algunas filosofías y tecnologías que en el pasado fueron bien incorporadas al diseño web responsivo, o que no fueron excluidas completamente, que están siendo desplazadas gradualmente fuera de la escena por alternativas mejoradas.

Pensamiento "sobremesa" vs. "móvil"

Considera la siguiente colección de dispositivos de navegación web:

• Un netbook Acer eMachine de 10.1 pulgadas de 1024x600 sin control táctil.
• Una tableta Panasonic Toughpad de 20 pulgadas de 3840x2560 solo con control táctil.
• Un televisor Ultra HD de 78 pulgadas de 3840x2161, con una Xbox ejecutando IE navegado vía gestos de Kinect y comandos de voz.
• Un monitor de 27 pulgadas rotado a posición vertical ejecutándose a 1020px de ancho por 1980px de alto.
• Un monitor de 24 pulgadas de 1920x1080 con el navegador ajustado por el usuario a 125% de zoom y 20px como tamaño de fuente por defecto, navegado con un teclado auxiliar y sin ratón.

Ten presente que esta lista está compuesta integramente por casos de uso reales y actuales.

Digamos que mi página dispone de un conjunto de componentes de tamaño reducido, para uso táctil, específicos para móviles, y otro conjunto de elementos de mayor tamaño, para el ratón y específicos para dispositivos de sobremesa. ¿A que ancho establecer las consultas a medios (media queries) para desplegar las características para dispositivos "móvil" y de "sobremesa" de manera que todos los usuarios de cualquiera estos dispositivos tengan una experiencia de primera?

Nuestra lista cubre un puñado de ejemplos diferentes, pero ahí afuera hay cientos, si no miles, de casos de uso extras que añaden aún más trabajo.

En realidad hoy en día ya no existe una clara distinción entre dispositivos móviles y de sobremesa, así que la mejor forma de avanzar es hacerlo dando soporte simultaneamente a todos los métodos conocidos de navegación web.

Si tus páginas web están construidas de abajo arriba para responder perfectamente a todos los casos de uso conocidos, no solo a aquellos tradicionalmente definidos como móvil y sobremesa, entonces habrás logrado la capacidad de respuesta más extensa posible.

Código basado en píxeles fijos "px"

Primero dejamos de intentar crear diseños basados en píxeles fijos enteramente en Photoshop, porque no eran suficientemente fluidos o flexibles para satisfacer el abanico emergente de requisitos de visualización.

Ahora también empezamos a abandonar los diseños en píxeles fijos en nuestro código, básicamente por el mismo motivo. Creando en su lugar nuestros diseños usando una combinación de valores en rem, em y %, nuestras páginas permanecen completamente redimensionables y flexibles.

Con el planteamiento de unidad flexible, los diseños pueden ampliarse y reducirse uniformemente con solo cambiar un único valor básico. Los ajustes de usuario relativos a fuente y zoom en los navegadores pueden ser respetados y soportados. Varias de las problemáticas relacionadas con el tamaño de pantalla pueden ser resueltas inmediatamente. Lo más importante, siempre puede conservarse la legibilidad y accesibilidad de los contenidos.

Los frameworks front-end de "los dos grandes" ya está abandonando el Buen Navío PX y embarcandose en sus vuelos al País de la Unidad Flexible.

Bootstrap 4 se ha puesto a ello y se basará completamente en rem / em / %, dejando atrás los diseños basados en px de Bootstrap 3. Y Foundation 5 ya ha completado su transición para trabajar con unidades flexibles.

Los días de la vieja unidad px, que todos aprendimos a conocer tan bien a lo largo de los años, están llegando a su fin.

Puede que bien pronto se encuentre sentada en la mecedora de un asilo, junto a sus viejos amigos de pasados días de gloria: el soporte para IE6 y las cabeceras animadas con Flash.

Y hablando de Flash...

Contenido dependiente de Flash (y de otros complementos para navegadores)

Es cierto que hemos visto desaparecer las cabeceras animadas con Flash desde hace algún tiempo, pero seguimos viendo surgir con regularidad videos, galerías de imágenes y juegos basados en Flash. No estoy hablando solo de pequeñas páginas de aficionados, sino también de páginas importantes y con grandes volúmenes de visitas que siguen mostrando este mensaje si no usas Flash e intentas ver sus videos:

Es muy común que los dispositivos móviles no soporten Flash, así que confiar en ello para mostrar contenidos no es el planteamiento más seguro.

De hecho, por razones basicamente de seguridad y estabilidad, los navegadores web están empezando a dejar de dar soporte a complementos como Flash, Silverlight y Java, todo a la vez, en favor de tecnología alternativa que trabaja solo vía inclusiones nativas de los navegadores.

Ha llegado el momento de empezar a abandonar el despliegue de contenidos usando complementos y de hacer la transición a una nueva era de técnicas para despliegue de medios.

Recien llegados al mundo del RWD

Algunas de estas tecnologías son casi completamente nuevas, y algunas han estado en circulación desde hace algún tiempo, pero están mejorando constantemente, y todas tienen una cosa en común: son recien llegados al mundo del RWD que va má allá de la atención original a las cuadrículas flexibles, las imágenes fluidas y las consultas a dispositivos (media queries).

Medios audiovisuales con HTML5

Solo porque Flash y sus competidores estén deslizandose por la pendiente, eso no significa que ya no podamos disfrutar de cosas estupendas. Video, audio, animación e incluso 3D y juegos completos están todos incluidos en el conjunto gracias al HTML5 y a las maravillas, basadas en CSS3 y Javascript, que aporta al conjunto.

Donde una vez hubo complementos para el navegador, ahora tenemos HTML5 nativo en reproductores de video y audio, animaciones CSS3, herramientas como Google Web Designer, Canvas, WebGL y una lista siempre creciente de innovaciones interesantes.

Uso de <picture> para la gestión responsiva de imagen

El nuevo elemento de HTML5 <picture> crea un tipo de funcionalidad para imágenes como la que vimos en los ya bien establecidos elementos <video> y <audio>.

Nos permite realizar comprobaciones acerca del tamaño de la salida y la densidad de píxel del dispositivo y luego cargar la versión más adecuada de una imagen dependiendo de los resultados.

Si bien todavía no cuenta con soporte nativo completo en navegadores, existe un polyfill muy sólido llamado Picturefill (de Scott Jehl, el hombre tras Responsible Responsive Design, Diseño responsivo responsable) que posibilita empezar a usar <picture> inmediatamente.

Puedes leer más acerca de como funciona todo ello en Quick Tip: How to Use HTML5 "picture" for Responsive Images, Consejo breve: Como usar "picture" de HTML5 para imágenes responsivas.

Iconos de fuentes

¿Por qué usar iconos de tamaño fijo cuando podemos tener la libertad completa para redimensionarlos modificando un único ajuste de tamaño en CSS?

A través de librerías web de fuentes como Font Awesome, Entypo, Typicons y otras, podemos disponer de todo tipo de imágenes en nuestras páginas, desde cohetes a clips a logotipos de redes sociales. Pero al estar disponibles como fuentes y no como imágenes, podemos modificar su color y dimensiones todo ello vía CSS.

Esto significa que podemos garantizar que nuestros iconos responderán bien al tamaño de la salida, apareciendo siempre bien y fácilmente visibles y manejables según se requiera.

En el horizonte

Flexbox

Flexbox está para solucionar muchos de los mayores quebraderos de cabeza que los diseñadores web han intentado aliviar durante años.

El único impedimento para que Flexbox funcione plenamente es que para muchos casos de uso la proporción de navegadores que no lo soportan es aún muy significativa. Si trabajas en un proyecto que ha decido no dar soporte a IE8, IE9 y Opera Mini, entonces inclúyelo.

En cualquier caso, CanIUse.com señala que los porcentajes globales de uso para esos tres navegadores son del 3.18%, el 2.13% y 2.82% respectivamente. No existe por ahora una solución aceptable para el mal funcionamiento de Flexbox en estos navegadores. Esto significa, para una página con un volúmen de tráfico de medio a alto, que cada mes entre centenares y miles de usuarios se encontrarán con una página que no funciona.

Todos deseamos que Flexbox se convierta en estándar de la gestión de diseños para que podamos dejar de soñar maneras de realizar tareas de diseño que deberín ser relativamente simples y, en cuanto desaparezcan esas tres marcas rojas del gráfico de CanIUse, ocurrirá.

Componentes web

Hemos hablado hace poco acerca de los componentes web , y se nos vienen encima como senda a seguir en el futuro, acercandose día a día para incorporarse a la corriente principal.

Antes mencionamos los elementos video, audio y picture y lo útiles que son para el diseño web responsivo. Cuando los componentes web lleguen con fuerza, cada uno de nosotros será efectivamente capaz de crear elementos personalizados exactamente iguales que estos, para satisfacer cualquier propósito que tengamos. Por encima de todo, los componentes web se podrán compartir, lo que significa que habrá una cantidad virtualmente ilimitada de nuevos elementos responsivos que podremos usar en nuestros diseños.

Esto esencialmente democratiza el HTML, lo que resulta algo colosal.

Si apareciera un nuevo elemento del que todo el mundo pudiera realmente hacer un gran uso, no tendríamos que esperar a que los navegadores lo implementaran, solo necesitamos ver a un desarrollador open source construir algo y tomar la generosa decisión de compartir su trabajo.

Por ejemplo, mencionamos antes que el RWD requiere de una ubicación flexible de los recursos audiovisuales, y esto incluye posibilitar que recursos insertados en iframes, como videos de YouTube, puedan ser redimensionados manteniendo sus proporciones.

El desarrollador Joselito Junior ha creado y compartido como open source un componente web que hace eso precisamente, usando este simple HTML:

1

<responsive-embed ratio="16:9">

2

  <iframe src="//www.youtube.com/embed/UpuJS4LO_Ms" frameborder="0" allowfullscreen></iframe>  

3

</responsive-embed>

Lee más acerca de esta fascinante nueva tecnología en How to Create Your Own HTML Elements With Web Components, "Como crear tus propios elementos HTML con componentes web".

En conclusión

Porque la tecnología está siempre cambiando minuto a minuto, es extremadamente importante para nosotros permanecer concentrados en las metas subyacentes del diseño web responsivo, y no apegarnos demasiado a ninguna manera concreta de hacer las cosas. De esta forma nos aseguramos de permanecer siempre abiertos a descubrir nuevas maneras de crear mejores experiencias para la gente que usa nuestras páginas.

Para que esto ocurra, necesitamos mantener nuestros oídos bien abiertos, atentos a los últimos desarrollos en los dispositivos de navegación web y en las técnicas de diseño.

Si deseas pulir tus técnicas de diseño web, es posible que te interese nuestro curso Responsive Web Design Revisited. En poco más de dos horas te guiaré por todo aquello que necesitas conocer para crear una página responsiva completa con las técnicas más actuales. Los dos primeros videos son gratuitos, así que adelante y échale un vistazo a la página que vas a crear y a todo lo que vas a aprender.

¡Que tengas un gran 2015, y nos vemos aquí con el siempre cambiante diseño web responsivo!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!