Creación de un sitio web sensible al dispositivo

Vivimos en un mundo móvil, y como constructores de sitios web, es importante abordar el creciente uso de smartphones y tablets y empezar a pensar primero en móviles a medida que construimos nuevos sitios. Si la mayoría de los usuarios que visitan nuestros sitios se encuentran en pantallas pequeñas, sería aconsejable que ofreciéramos una experiencia de usuario incleíble, independientemente del dispositivo que estén utilizando. Afortunadamente para nosotros, Drupal 8 aborda muchos de los desafíos de renderizan nuestros sitios en variedad de anchos de pantalla y en este capítulo vamos a aprovechar las herramientas responsivas de Drupal 8 y Temas, así como entrar en temas básicos de CSS para abordar la capacidad de respuesta.

1. Definido con responsive

Escuchaste toda esta charla sobre “sensible” y “móvil amigable”, pero ¿qué significa realmente que un sitio web sea responsive? En pocas palabras, responsive significa que tu sitio es visible y utilizable en multitud de dispositivos con diferentes anchos de pantalla,y que el contenido sigue siendo los suficientemente grande como para leer en dispositivos más pequeños. Responsive también significa que la experiencia del usuario en tu sitio está diseñada para adaptarse mejor al dispositivo con el que el usuario accede a tu sitio. Por ejemplo, si ciertos elementos de tu sitio no se muestran bien en dispositivos más pequeños, puedes optar por no mostrar esos elementos a los visitantes que accedan con ese tipo de dispositivo, pero seguir mostrándolos a los visitantes que vean tu sitio en un ordenador. Responsive también puede significar aprovechar las capacidades de un dispositivo, como gestos o desplazamientos, para navegar a través de tu sitio en lugar de requerir interfaces más tradicionales de apuntar y hacer clic. Independientemente de la definición que elijas, el concepto fundamental del diseño responsive es hacer que tu sitio sea utilizable en todos los dispositivos.

2. Cómo funciona el diseño web responsive

El diseño web responsive funciona a través de una combinación de detección del ancho de la pantalla que el visitante del sitio está utilizando y aprovechando CSS que define cómo se muestran los elementos en la página en función del ancho de la pantalla. Por ejemplo, una página que tiene tres columnas de igual anchura (33% de la pantalla cada una). Si ves la página en una computadora con pantalla de 15 pulgadas con una resolución de 1680 píxeles, cada columna tiene aproximadamente 560 píxeles de ancho y el sitio se ve muy bien (ver figura 18-1).

Figura 18-1.

Abre esa misma página en un iPhone y las columnas se reducen al 33% de 320 píxeles, o aproximadamente 106 píxeles. Las columnas se vuelven estrechas y largas, y el texto dentro de las columnas se vuelve ilegible o, en el mejor de los casos, el visitante tiene que desplazarse hacia la izquierda y la derecha para ver columnas muy pequeñas de texto e imágenes muy pequeñas (figura 18-2).

Figura 18-2.

Un mejor enfoque sería detectar que el usuario está viendo el sitio en un dispositivo de 320 píxeles de ancho y, en lugar de ofrecer tres columnas horizontalmente, apilar las columnas una encima de otra. Con 320 píxeles de ancho, cada columna es casi tan ancha como en la pantalla del ordenador, y muy legible en un iPhone 5 (ver figura 18-3).

Figura 18-3.

Media Query es una herramienta CSS que, junto con el navegador que informa sobre el ancho de la pantalla, te permite escribir CSS específicamente para dispositivos de un ancho dado. El formato general de un Media Query (consulta de medios) es:

@media (max-width: 600px) { .body { font-size: .9em; } }

La consulta comienza con @media y max-width: 600px, que especifica que el CSS dentro de {} sólo debería ser aplicado cuando el ancho de la ventana del explorador sea 600px o menor. También puede especificar rangos de anchos dentro de la consulta, tales como:

@media (min-width: 321px) and (max-width: 599px) { .body { font-size: .7em; } }

En este caso, cualquier dispositivo con un ancho de pantalla de 321px o mayor y menor o igual a 599px tendrá el CSS contenido en {}. En los dos ejemplos anteriores, cualquier texto del cuerpo en un dispositivo de más de 600px tendrá un tamaño de fuente de .9em, mientras que los dispositivos que están entre 321px y 599px lo tendrán de .7em (las unidades em se explican más adelante, en este capítulo).

Al mirar los diferentes dispositivos del mercado, verás que puede que tengas que usar varias Media Query en tus archivos CSS para tratar el procesamiento de tu sitio en varios dispositivos. El número de Media Query depende del tipo de cambio que debe producirse en el contenido y de la estructura de las páginas. Si tu sitio es un diseño de una sola columna, entonces podrías escapar a la utilización de Media Query. Sin embargo, la mayoría de los sitios tienen más de una columna e incluso un sitio de una sola columna aún necesita diseño responsive para cosas como menús horizontales.

3. Haciendo tu sitio responsive

Existen tres opciones básicas para tu sitio Drupal 8:

  • Elige un tema estándar de Drupal.org que tenga las media query definidas en los archivos CSS.

  • Elige un tema inicial, como Zen, de Drupal.org que tenga el framework responsive actualizado.

  • Elegir un tema no responsive y agregar las media query y el CSS de anchos específicos.

Cada enfoque tiene sus méritos y depende de tu nivel en el manejo de CSS y tu capacidad de identificar los elementos que deben cambiarse para cada ancho de pantalla.

La solución más popular es la segunda opción, comenzar con un subtema como Zen y personalizarlo según las necesidades de cada sitio web.

Independientemente del enfoque que elijas, vale la pena comprar el libro “Beginning responsive web design with HTML5 and CSS3” de Jonathan Fielding (Apress, 2014) para guiarte por el camino.

3.1. Herramientas del navegador para ayudarte a probar tu tema responsive

Después de seleccionar e instalar el tema deseado, es una buena idea descargar un complemento de navegador que facilita la visualización de tu sitio en varios anchos de dispositivo. Chrome tiene una excelente herramienta llamada Responsive Web Design Tester. Es un complemento gratuito disponible en Google Store que proporciona una lista desplegable de los dispositivos más utilizados. Haz clic en el icono de herramientas del navegador y verás una lista de dispositivos (ver figura 18-4). Selecciona de esa lista y se abrirá una nueva ventana de Chrome que mostrará tu sitio tal y como aparecerá en ese dispositivo. Firefox y Safari tienen plugins similares que funcionan igual de bien.

Figura 18-4.

Con la herramienta del navegador en su lugar, el siguiente paso es mirar tu sitio en los distintos anchos de pantalla y responder a las siguientes preguntas:

¿Qué elementos de la página requieren que el cambio de tamaño aparezca correctamente (ej. columnas, imágenes y tamaños de fuente)?

Para pantallas más pequeñas, ¿qué elementos se deben quitar de la página? El foco debe estar en el contenido que es más probable que sea importante para los usuarios en pantallas más pequeñas.

¿Qué elementos de navegación deben cambiarse para facilitar la navegación a los usuarios de dispositivos pequeños sin un ratón para apuntar y hacer clic?

Es probable que encuentres varios elementos en varios anchos de pantalla que necesiten cambiar para poder utilizarlos con anchos de pantalla más pequeños. Para habilitar la posibilidad de cambiar la forma en que se muestran los elementos, necesitarás encontrar las hojas de estilo de tu tema (normalmente se encuentran en la carpeta themes/<nombre del tema>/css) y agrega las consultas de medios necesarias para habilitar el ajuste de CSS. La siguiente es una lista recomendada de media query que se refieren a la mayoría de anchos de pantalla en el mercado actual:

/* Smartphones (vertical y apaisado) ---------------------- */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Styles */ } /* Smartphones (apaisado) --------------*/ @media only screen and (min-width: 321px) { /* Styles */ } /* iPads (vertical y apaisado) ----------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Styles */ } /* iPads (apaisado) -----------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) (orientation:landscape) { /* Styles */ } /* iPads (vertical) --------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) (orientation:portrait) { /* Styles */ } /* Ordenadores de escritorio y portátiles */ @media only screen and (min-width: 1224px) { /* Styles */ } /* Pantallas grandes */ @media only screen and (min-width: 1824px) { /* Styles */ } /* iPhone 4 ----------------*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* Styles */ }

Observarás que algunas de las media query especifican la orientación del dispositivo que se está utilizando, vertical o apaisado (horizontal). Esta es sólo otra herramienta para ayudar a reducir el CSS que se aplicará a un dispositivo determinado.

Dependiendo del tema que estés utilizando, las media query se colocarán a menudo al final de los archivos style.css o layout.css. Si estás utilizando un tema que ya admite la capacidad responsive a través de media query, es una buena idea aprovechar lo que ya existe. En el caso del tema Bartik, mirando el directorio css, verás tres archivos CSS: layout.css, style.css y colors.css. Si examinas el archivo layout.css, verás que el creador del tema ya tiene dos media query:

@media all and (min-width: 560px) and (max-width: 850px) @media all and (min-width: 851px)

Ambas media query contienen una serie de anulaciones de CSS a elementos que aparecen en las distintas páginas de un sitio creado con ese tema. Las dos media query se refieren a la mayoría de los casos en los que los elementos de la página deben ajustarse para que puedan utilizarse en la mayoría de los dispositivos, pero puede haber casos en los que desees abordar elementos específicos para el iPhone 4. En ese caso, añadiendo la siguiente media query y el CSS asociado, se ocuparían de los cambios específicos de los dispositivos iPhone 4 o pantallas más pequeñas:

@media all and (max-width: 320px)
Los elementos comunes que puede que desees ajustar son: anchos de columna, tamaños de fuente y tamaños de image. La visualización del sitio mediante una de las herramientas de diseño web del navegador te ayudará a identificar qué elementos necesitan cambiar.

3.2. Cambios comunes de CSS para un diseño responsive

Una de las primeras cosas a tener en cuenta al diseñar un sitio web sensible es la necesidad de cambiar de anchos fijos de píxeles y tamaños de fuente basados en puntos. Durante años hemos estado diseñando sitios para que sean perfectos en píxeles, pero con un diseño responsive necesitamos cambiar nuestro pensamiento de píxeles exactos a porcentajes y ems. Si eres un diseñador experimentado y desarrollador de CSS, esto puede ser uno de los aspectos más difíciles de cambiar. Una vez que hayas hecho la transición, el proceso será relativamente simple, pero para empezar, tenemos que pensar en el tamaño de los elementos de la página desde una perspectiva del porcentaje de la anchura de pantalla que van a usar. Si te quedas con anchos fijos de píxeles, los resultados serán que tus visitantes en dispositivos de pantalla pequeña tendrán que desplazarse horizontalmente para ver el ancho completo de tu sitio web. Consulta whitehouse.gov en tu smartphone como ejemplo. Por desgracia no es responsive (en 2015) y requiere que uses el dedo para desplazarte a la derecha para ver el ancho completo del sitio.

Una de las primeras cosas a examinar son los elementos de la página que, cuando se ven en una pantalla más pequeña, resultan en que tu sitio se contraiga para encajar dentro de la ventana o que necesite desplazarse hacia la derecha para ver el ancho completo. Los elementos típicos de un sitio de Drupal que a menudo requieren ajuste incluyen regiones, bloques, apariencia de tabla y vistas.

Normalmente, estos elementos se establecen en un ancho fijo de píxeles y, para que se conviertan en sensibles, deben configurarse con anchos porcentuales. Para identificar qué elementos CSS cambiar, utiliza el comprobador de diseño web de Google Chrome, simplemente haz clic con el botón derecho del ratón en el elemento que desees cambiar y selecciona la opción Inspeccionar elemento (ver figura 18-5).

Figura 18-5.

El tema responsive se convierte en una tarea relativamente fácil con la combinación de media query, la herramienta de diseño responsive del navegador, como Responsive Web Design Tester de Chrome y la capacidad de hacer clic con el botón derecho del ratón en un elemento e identificar el elemento CSS que deseas cambiar. Lo único que queda es añadir ese selector CSS dentro de los corchetes de media query y cambiar el atributo CSS, como width, a un valor apropiado. El navegador hace el resto.

Hay una curva de aprendizaje para aprender el diseño responsive y hacer que las cosas aparezcan adecuadamente en distintas anchuras de dispositivos. El viaje comienza con el primer paso, y ahora tienes suficiente conocimiento para salir con gusto!