Consigue un responsive de calidad para tu web

Índice de contenidos

1. ¿Por qué es importante un responsive de calidad?
1. Por los usuarios que la visitan
2. Por los que indexan y posicionan las webs
2. ¿A qué llamamos «responsive de calidad»?
3. ¿Esto del responsive no lo resuelven directamente las herramientas modernas de maquetación?
4. ¿Cómo conseguimos un responsive de calidad en nuestra web?
1. Recordando siempre que no estamos diseñando un pdf ni una presentación estática
2. Diseño «mobile-first»: desarrollado en primer lugar para dispositivos móviles pequeños
3. Diseño evitando en lo posible medidas y tamaños fijos
4. El tamaño importa: empezamos con los muy pequeños
5. El tamaño mediano puede marcar la diferencia
6. Incluso el usuario de ordenador puede utilizar tamaños muy diversos
7. Los pequeños detalles cuentan:
1. Menús siempre en una sola fila
2. Evitando columnas demasiado estrechas
3. Atención a las filas que intercambian el orden de sus elementos
4. Los títulos grandes no han de romperse en ningún tamaño
5. Cuidamos también la visualización en apaisado
6. La imprescindible comprobación manual
5. Te ayudamos

¿Por qué es importante un responsive de calidad?

En primer lugar, voy a tratar de aclarar por qué es importante hoy día, para una web de acabado profesional, conseguir un buen responsive. Básicamente es por tres motivos: por una cuestión de imagen, por los usuarios que nos visitan, y por los rastreadores e indexadores de las webs. La «cuestión de imagen» es común para los usuarios que la visitan, y para los rastreadores e indexadores de las webs.

Por los usuarios que la visitan

Obviamente queremos causar a nuestros visitantes la mejor impresión posible. Eso refuerza la imagen de nuestra marca y de nuestro negocio. Pero además, podemos hacerles más fácil su uso, si conseguimos que, sea cual sea el dispositivo desde el que entren, la visibilidad sea buena (no sólo aceptable), y parezca que dicha web «se hubiese hecho expresamente para ese tamaño de dispositivo».

Por los que indexan y posicionan las webs

No sólo queremos causar esa buena impresión a los usuarios «reales» que nos visitan. También queremos causar ese mismo efecto en los rastreadores de las webs, como Google y los demás buscadores. Ellos son quienes posicionan mejor o peor las webs que rastrean, en los resultados de las búsquedas por internet. Si nuestra web les gusta, tendremos más opciones de verla bien posicionada. Y hoy día sabemos que un buen responsive les gusta mucho. Y más si es en concreto «mobile-first» (hecho en primer lugar para móviles).

¿A qué llamamos «responsive de calidad»?

Pese a que la práctica totalidad de las webs que hoy día se hacen, se elaboran teniendo en cuenta el responsive (verse bien en diferentes dispositivos), no siempre se consigue una calidad óptima en ese proceso. En muchas webs, no es difícil observar «diseños extraños» de algunos elementos de la web en determinados tamaños: cuadros de texto excesivamente estrechos, títulos que se rompen, menús de cabecera divididos en dos líneas y desorganizando la cabecera, textos que se salen del espacio que los contiene… si el responsive está bien hecho, podríamos por ejemplo en un ordenador ensanchar y estrechar al máximo la ventana del navegador y en cualquier punto de ese ensanchar y estrechar, el resultado tendría que ser óptimo. Esos errores mencionados (y muchos otros que pueden encontrarse) no tendrían que ocurrir en ningún ancho de pantalla, a partir de un mínimo inicial.

Tampoco tendría que observarse ningún error en las herramientas de desarrollador que nos ofrecen los navegadores, en los apartados en los que nos muestran el responsive. Nos muestran una simulación de cómo se visualiza esa web en una lista de dispositivos. Tendría que verse todo de forma óptima en todos ellos.

¿Esto del responsive no lo resuelven directamente las herramientas modernas de maquetación?

Desafortunadamente no. Los modernos «maquetadores visuales» para crear webs, acostumbran a trabajar 2-3 tamaños diferentes, con sus tres medidas fijas que la propia herramienta de maquetación ha querido determinar. Supuestamente, ante un diseño elaborado desde el tamaño de ordenador, el propio maquetador será capaz de crear las adaptaciones necesarias para «el tamaño tablet» y para «el tamaño móvil». Esto fácilmente puede verse que es algo muy genérico, demasiado. Esta generalidad y automatización en muchos casos es totalmente insuficiente, y da origen a errores como los que hemos mencionado antes.

Muy posiblemente queramos diferenciar más de esos tres tamaños pre-definidos (por ejemplo, añadir un móvil más pequeño). O incluso utilizar como referencia para el cambio de diseño otros tamaños que no están especificados por nuestra herramienta. Ahí ya necesitamos otros proceso más «manuales» o «artesanales». Simplemente con tener que retocar cada elemento para cada uno de los tres tamaños básicos, ya perdemos gran parte de la ventaja en automatización que nos ofrecen estos maquetadores.

¿Cómo conseguimos un responsive de calidad en nuestra web?

Una vez vista la problemática, vamos a ver cómo podemos eficazmente conseguir un responsive de calidad y acabado profesional en nuestra web (o en las de nuestros clientes, si las hacemos para otros).

Recordando siempre que no estamos diseñando un pdf ni una presentación estática

En primer lugar, algo que debemos recordar en todo momento: no estamos diseñando pdfs ni presentaciones tipo «powerpoint». No estamos haciendo algo estático. Lo que vamos a hacer «se mueve», es algo «fluido», modifica sus dimensiones y apariencia dependiendo del tamaño de la ventana o el dispositivo que lo visualice. Si el diseño se mantuviese exactamente en las mismas proporciones, y se viese correctamente en un ordenador, sería poco menos que imposible de leer en un dispositivo del tamaño de un móvil. Porque nuestro diseño no es sólo «una foto», sino que combina imágenes, texto, vídeo… La mejor forma de recordarlo cuando todavía no estamos familiarizados es, en el navegador en el que estamos comprobando el desarrollo, repetir continuamente el ejercicio de «estrechar la ventana – ensanchar la ventana». Así veremos, no sólo en teoría sino en realidad, esa «fluidez» que tiene nuestro diseño, y cómo se adapta y se modifica.

Diseño «mobile-first»: desarrollado en primer lugar para móviles

La forma «clásica» de hacer este tipo de desarrollo dinámico y responsive ha sido (y para muchos todavía es) la de hacer el diseño para escritorio (tamaño grande) y luego adaptarlo para otros tamaños más pequeños (a veces también adaptado para los muy grandes). Las pautas que se nos dan hoy día, nos hablan del mobile-first; o sea, de lo contrario: hacer las webs elaborando inicialmente el diseño en el tamaño más pequeño que queramos emplear, y después especificar cómo va a ir modificándose a medida que sea más y más grande. Esto no sólo hace referencia a que visualicemos todo primero más en pequeño. Hablamos de que, las especificaciones del estilo de nuestro diseño van a estar, por defecto, definidas para cuando hablamos de un tamaño pequeño. Y si utilizamos mediaqueries para especificar «otros tamaños», estas mediaqueries deberán ir definiendo tamaños progresivamente más grandes, no tamaños más pequeños.

Aquí podemos encontrar algunas dificultades. Por ejemplo, dentro del mundo de WordPress (la herramienta más utilizada hoy día para elaborar webs), la mayoría de los «themes» o temas de «plantillas» están definidos todavía «a la antigua», con sus mediaqueries definiendo los tamaños pequeños. Es importante encontrar y utilizar un «theme» o «tema» que esté definido según el concepto mobile-first. Nosotros, actualmente, uno que conocemos que lo hace así, y que nos gusta, es el tema Neve.

Diseño evitando en lo posible medidas y tamaños fijos

Definiremos las medidas y los tamaños de los elementos de nuestra web, en lo posible, con unidades de medida relativa, evitando en lo posible los tamaños fijos. En el diseño clásico se venían utilizando mayoritariamente unidades como los pixels (px) o los puntos (pt). Hoy día se prefiere emplear otro tipo de unidades, como los porcentajes, los em, o los rem. Hoy día, por ejemplo, ya no definiríamos un cuadro de texto a ancho completo con un ancho fijo. Pero tampoco un ancho completo con márgenes. Definiríamos, por ejemplo, un ancho del 100% con un máximo de 1200px.

Esto se extiende, no sólo a los elementos grandes o que contienen a otros; sino también incluso a las tipografías. En lo posible dejaremos de definir tipografías con pt o con px. Aquí hay que tener cuidado, pues no es sencillo el manejo de tipografías a través de la unidad em. Si queremos evitar los pt y los px, y también las «sorpresas», optaremos por la unidad rem. Podríamos decir que un rem es el tamaño inicial que utiliza esa web como tipo de letra, en ese dispositivo.

El tamaño importa: empezamos con los muy pequeños

Como ya hemos mencionado, hacemos el diseño inicialmente desde un tamaño de móvil, para después ir definiendo cómo se va a ir transformando cuando la pantalla sea más y más grande. Pero, ¿qué tamaño pequeño tendríamos que tomar inicialmente? Es decir, ¿cuál es el tamaño más pequeño que vamos a trabajar inicialmente, en el que vamos a pensar?

Para esto, como punto de partida, utilizaremos alguno de los tamaños más pequeños que nos proponen los navegadores en su apartado de «inspeccionar», donde nos diagnostican el responsive. Yo creo que es bueno soportar los dispositivos pequeños que Google nos propone. Especialmente porque el más pequeño de ellos es el que emplea también para su valoración de Google Page Speed Insights. Ahí tenemos al tamaño equivalente al Galaxy Fold, con 280px de ancho según podemos ver. De modo que ese es el tamaño que recomiendo que hoy día se tome como referencia de tamaño inicial más pequeño.

Para quien no lo quiera hacer «tan difícil» (pensar todo para un tamaño tan pequeño posiblemente incrementa la dificultad del diseño), el navegador Firefox nos propone dispositivos que comienzan en 360px de ancho. Sin embargo, no está de más en cubrir algo más pequeño por si acaso. Los modelos de móvil estrechos no es probable que dejen de fabricarse. Y recordar también algo: queremos «gustar» a los rastreadores de las webs. Google es un rastreador. Y considera tamaños desde 280px.

Recuerdo, no hace mucho, haber testeado una web de un cliente de consultoría WordPress. En 280px de ancho, el e-mail que muestra en el pie de página, fundamental para facilitar el contacto de posibles clientes, no podía visualizarse por completo, pues era una dirección de e-mail larga y no habían tenido en cuenta este detalle. Se trata de un detalle que podría restarle clientes. ¡Sólo imagina alguien que accediese a su web desde uno de esos teléfonos estrechos, y descubriese que no sólo había contenido que desbordaba de la pantalla, sino que además se trataba de la dirección de e-mail para contactar con esa empresa! El que visualiza la web nunca va a pensar que «está en el dispositivo equivocado».

El tamaño mediano puede marcar la diferencia

He incidido mucho en el tamaño pequeño, ese tamaño inicial a partir del cual hacer nuestros desarrollos web. Pero igualmente importante es matizar bien los tamaños intermedios. Es algo que puede marcar la diferencia entre un responsive «para justificar que se ha hecho» y un responsive con un acabado profesional.

Pensemos, por ejemplo, en una sección de la web que contiene cuatro elementos, que son iconos con texto por debajo. Inicialmente, en ese tamaño pequeño, están todos en una columna. Posiblemente nos interese que haya un momento en que pasen a estar en dos filas de dos elementos cada una, para guardar una buena simetría y un buen diseño. Y dejaríamos ya, para los tamaños grandes, el momento en que pudieran estar (no siempre es adecuado) los cuatro elementos en una sóla fila. Esto no ha de hacerse ni decidirse de forma automática y «prefabricada»; conviene verificar primero en qué momento es más adecuado pasar de una sola columna a dos filas de dos elementos. Y después, valorar si, en ese diseño, tiene cabida que lleguen a ponerse los cuatro elementos en la misma fila. Por supuesto, evitando la situación (he visto casos) de dos filas, una con tres elementos y otra con uno. (Esto sería aceptable en caso de que no fuese posible determinar la cantidad de elementos de esa sección).

Incluso el usuario de ordenador puede utilizar tamaños muy diversos

Podemos tener la tentación de englobar a todos los usuarios de ordenador en el mismo rango de usuarios: los de «tamaño grande». Esto puede ser también un error. Un usuario de ordenador puede utilizar, según su sistema operativo y su máquina, muy diversas resoluciones de pantalla. O puede estar usando un portátil, o también una pantalla grande y moderna de más de 2000px de ancho. El tamaño hoy día del «Full HD» es de 1920x1080px; y entre los profesionales utilizamos también pantallas de 2500px de ancho. Pero sigue habiendo muchos ordenador y equipos de hace algún tiempo que usan resoluciones de 1280px. E incluso algunos todavía emplean resoluciones de 1024px.

Por si esto fuera poco, desde luego que a ningún usuario de ordenador tenemos que «forzarle» a que maximice la ventana de su navegador o que la dimensione en unos tamaños concretos para ver bien una web. Este usuario puede estar organizando el tamaño de las ventanas de su escritorio de la forma que le sea más conveniente, y en cualquier tamaño en que tenga la ventana de ese navegador esa web ha de verse de forma óptima. Esto son los criterios de usabilidad que hemos mencionado al principio. Lo que hace que el usuario sí pueda percibir que «esa web se ha hecho pensando en las herramientas que él usa». La «cuestión de imagen» de la que hemos hablado al comenzar el artículo.

Por todo ello, estará bien que mantengamos la progresión de tamaño del diseño más allá de «cuando ya no es un móvil»; y hagamos una previsión lo más detallada posible de cómo puede seguir evolucionando ese diseño a partir de 960px, de 1024px, de 1200px…

Los detalles cuentan:

Como podemos comprobar, estar atentos a los pequeños detalles del responsive son esenciales para conseguir un acabado profesional. Voy a mencionar ahora algunos casos típicos de ejemplos de detalles a cuidar. Te invito además a comprobarlos con un sencillo ejercicio práctico. Pruébalo con alguna web que tú conozcas (mejor aún con varias diferentes). Ábrela en tu ordenador (sí, en este caso, en tu ordenador) pero pon la ventana lo más estrecha que puedas. Y comienza a ensancharla muy muy despacio.

Menús siempre en una sola fila

Los menús de la cabecera de la web son un ejemplo típico y particularmente importante de cuidar en una web; porque es lo primero que se ve de la misma. En nuestro diseño «mobile-first», primero habrá un «menú hamburguesa» propio de dispositivos móviles. Este menú se convertirá en un menú «clásico» a partir de que se alcance un cierto tamaño.

Compruébalo con el pequeño ejercicio que te he propuesto. No es raro que, en ciertos tamaños intermedios, justo cuando el menú hamburguesa se ha convertido en menú clásico, ese tamaño sea todavía demasiado pequeño para mostrar de una forma adecuada y óptima ese menú clásico; y ahí podemos encontrarnos cabeceras desajustadas, con menús en dos o más filas… hemos de prevenir esas situaciones. Podemos hacerlo de modo que el salto al menú clásico se haga más tarde, en un tamaño superior. O podemos, en esos «primeros tamaños grandes», con mediaqueries, establecer un menor margen entre los elementos del menú… A veces puede hasta recurrirse a tipografías más pequeñas; pero recomiendo máxima precaución con este tipo de solución. En fin, ahí la creatividad nos puede ayudar. Pero es importante que consigamos una perfecta transición del menú móvil al menú clásico, en todos esos tamaños intermedios.

Evitar columnas demasiado estrechas

Algo clásico y básico en el diseño web es poner diversos elementos en columnas. Sin embargo, no siempre se cuida la «calidad» de ese encolumnado. Lo más habitual es que, en el diseño original mobile-first, para ese tamaño móvil inicial no haya más que una columna, y se vayan presentando los diversos elementos en esa única columna. A medida que va creciendo el tamaño, se va recolocando en varias columnas (dos, tres, y hasta cuatro).

Ocurre que en demasiadas ocasiones (esto también lo puedes comprobar con el ejercicio que te propongo) esta transformación a múltiples columnas se hace de una forma mecánica, y sin atención hacia el resultado en los primeros tamaños «multi-columna». Y vemos columnas de proporciones absurdas, en ocasiones muy estrechas y con una altura excesiva para contener todo el texto que incorporan.

Esto puede solucionarse de dos formas. Podemos simplemente hacer que la transformación «multi-columna» comience en un tamaño más grande. O bien podemos generar, como en el ejemplo que dijimos anteriormente de cuatro elementos, situaciones transitorias: De la situación de una sola columna, pasar a filas de dos elementos en un primer tamaño intermedio-pequeño, de ahí cambiar a filas de tres (si tenemos un total de elementos múltiplo de tres)…

Atención a las filas que intercambian el orden de sus elementos

Un recurso de maquetación relativamente habitual, al emplear columnas, es ir invirtiendo el orden de los elementos. Por ejemplo, cuando queremos tener, en una misma fila, una imagen en una columna y un texto en otra. Y en posteriores filas, ir intercalando ese orden: en una fila imagen y texto, y en la siguiente texto e imagen.

En nuestro ejemplo de diseño mobile-first, primero diseñamos esa estructura pensando en un dispositivo móvil. De esa forma, tendremos que ordenar de forma diferente esa estructura para que se vea correctamente en una sola columna. En una columna no tiene lugar ni sentido intercalar el orden de los elementos, para que no se junten dos textos o dos imágenes de forma consecutiva. Así, colocaremos los elementos en este orden: texto – imagen – texto – imagen. Sin embargo, ese orden tendrá que modificarse cuando esté en dos columnas, a texto – imagen – imagen – texto.

Pueden encontrarse webs que no han cuidado el responsive (te digo que no es difícil encontrar webs así), en las que el orden de los elementos es el mismo para anchos de una columna y para anchos de dos columnas; de modo que en uno de los dos casos la visualización no será buena.

En este caso, sí estamos ante algo que tendría que poder solucionarse fácilmente con los maquetadores habituales. Es una cuestión de cuidar el detalle. Por ejemplo, en WordPress, su bloque nativo de «imagen y texto» (de lo que estamos hablando) no tenían prevista esa diferente visualización cuando hablamos de una sola columna; de modo que no se podía utilizar ese bloque cuando queremos utilizar varias filas en las que vayamos a intercalar el orden de los dos elementos, porque en móvil se verá de forma inadecuada. ¡Increíblemente, quienes crearon y lanzaron ese bloque no pensaron en esta circunstancia! Espero que, a día de hoy, este error esté ya solucionado.

Por otro lado, hay que recordar que este tipo de recursos hay que utilizarlo ocasionalmente, y si realmente ayuda y refuerza el mensaje que la web pretende comunicar. Se considera que modificar el orden de presentación de los elementos de una web va en contra de la accesibilidad; ya que los lectores de pantalla de usuarios invidentes lo van a leer en un orden diferente al que van a mostrarse en realidad. Los lectores de pantalla leen el contenido en el orden «lógico» en el que está programado.

Títulos grandes que no han de romperse en ningún tamaño

En ocasiones queremos utilizar un pequeño texto con tipografía grande, impactante. Es fácil encontrar sitios web con estos «grandes titulares», que después se rompen o se visualizan mal en tamaños pequeños: con letras que se salen de pantalla, que no se visualizan… o la palabra rota con una o dos letras en la línea siguiente.

Los tamaños especiales de tipografías hay que trabajarlos con mucho cuidado en la maquetación web responsive. Hay que recordar una vez más que no estamos ante un pdf o un powerpoint. El texto se tiene que ir adaptando al dispositivo que lo muestra. El texto más pequeño es más fácil de adaptar que el grande. Una vez más, el ejercicio de estrechar al máximo la ventana de nuestro navegador e ir ensanchándola muy poco a poco nos puede ayudar. Eso sí; en este caso es importante ver primero el tamaño mínimo inicial (posiblemente la ventana de nuestro navegador ya comience con un tamaño superior). Ahí, recordamos, siempre tenemos la herramienta «inspeccionar» de nuestro navegador.

Podemos optar por establecer más mediaqueries para esta situación concreta. O podemos buscar fórmulas de establecer y calcular «tipografías responsive»; aunque esto último es una cuestión de cierta complejidad, que no entra en los objetivos de este artículo.

Cuidamos también la visualización en apaisado

También tenemos que tener en cuenta que, en ocasiones, los usuarios de móviles optan por la visualización en apaisado. Por supuesto, tenemos que facilitar también esta forma de uso. De hecho, las mediaqueries permiten definirse expresamente para dispositivos en apaisado (indicando si es «portrait» o «landscape»). También puede indicarse simplemente un tamaño de referencia de altura, en lugar de el habitual de anchura.

No habría que complicarse demasiado aquí. El scroll está totalmente asumido y normalizado, no sería importante que un elemento no pudiese verse en toda su altura al verse en apaisado. Sin embargo, en ocasiones sí queremos que ese elemento (por su tipo de contenido) se visualice sin scroll de forma completa. O puede ocurrir que hayamos definido ese elemento como de «altura completa» de la ventana de navegador; y entonces el elemento se deforma o rompe en dispositivos muy estrechos. Para ese caso, sí deberíamos definir mediaqueries especiales del tipo «cuando el alto del dispositivo sea inferior a…».

Esta solución que comento tuvimos que aplicarla recientemente en un proyecto real de diseño web. Teníamos una web que, en su página de inicio, comenzaba con una imagen a altura completa (hasta donde se empieza a hacer scroll), que incluía un texto de presentación y un botón. Ese texto estaba centrado horizontal y verticalmente. Ocurría que, al estar centrado verticalmente, en dispositivos estrechos, la altura era muy pequeña y hacía que se solapasen el menú de la web con el texto de la imagen de fondo. Tuvimos que trabajar este fondo de una forma muy específica para alturas inferiores a 320px (pudimos comprobar que era ahí, con menos de esa altura, donde surgía el problema).

La imprescindible comprobación manual

No sé si hará falta que explique este último punto. Imagino que se comprende que este nivel de detalle que estoy describiendo necesita una exhaustiva comprobación manual de cada elemento que vamos elaborando en una web. Obviamente no podemos disponer físicamente de múltiples dispositivos; pero nos apoyaremos en esas fantásticas herramientas para desarrolladores ya mencionadas que nos ofrecen los navegadores, que normalmente encontramos simplemente con botón derecho y seleccionando «inspeccionar» (así es tanto en Firefox, como en Chrome, como en Brave… y posiblemente en otros más). Y una vez ahí dentro, las opciones que analizan el responsive.

Mi recomendación es que, una vez ahí, revisemos todos los dispositivos propuestos por el navegador. Y si queremos revisar algo muy en concreto (por ejemplo para buscar tamaños exactos para nuevas mediaqueries), podemos seleccionar el tamaño «reactivo», con el que podemos hacer el famoso ejercicio que he propuesto antes (empezar con la ventana del navegador muy muy estrecha e ir ensanchándola), con la ventaja de que aquí nos muestra en cada momento qué medidas en píxels tenemos.

Te ayudamos

En definitiva, teniendo en cuenta estas claves, entendemos que puedes conseguir un diseño responsive de calidad para tu web. Y si necesitas ayuda al respecto, no dudes contar con nosotros y pondremos toda nuestra experiencia en tus manos