Seguramente en los últimos tiempos has escuchado el término «diseño web responsive«. También es conocido (aunque tiene menor aceptación) como diseño web adaptativo o adaptable. Viene del anglicismo responsive web design, y como resumen podríamos definirlo como el paradigma de desarrollo y diseño web enfocado en que la visualización de las páginas webs sea el mejor para cada dispositivo desde el cual se visiten.
¿Quien no ha sufrido entrando a una web antigua con el móvil? No es a día de hoy tan extraño que nos topemos aún con páginas cuyo diseño es obsoleto y cuyo uso es prácticamente imposible a través del smartphone o de la tablet y que para poder acceder a sus contenidos debemos sentarnos delante del pc. De hecho es algo muy común en páginas de organismos públicos, lo cual es especialmente sangrante dado que se gastan cantidades ingentes de dinero en su creación y mantenimiento.
En la actualidad el PC (o el Mac) no son ya los únicos dispositivos electrónicos desde los cuales accedemos a la información en internet. No hay que pensar mucho para darse cuenta de que en cualquier hogar medianamente «tecnificado» se disponen de múltiples aparatos con conexión a internet: los teléfonos inteligentes o smartphones, las tablets/tabletas, relojes, ebooks, ordenadores portátiles o incluso los mismos televisores son ya totalmente capaces para acceder a una página web.
Esto implica ya no solo una diferencia importante en el tamaño de las pantallas: evidentemente no será lo mismo mostrar un website para una pantalla de televisión de 60 pulgadas que para un reloj de pulsera. Las diferencias en cuanto a potencia, memoria o sistema operativo de cada uno de estos dispositivos es todo un reto para que una web sea accesible al 100% independientemente desde dónde la leamos.
El diseño web responsive se encarga justamente de que a partir de un único esquema y maquetación de una página web, se vea correctamente en cuaquier dispositivo imaginable. Para ello la propia web es la que adapta el tamaño de sus fuentes, el de las imágenes o la estructura de los menús, sin ir más lejos. Esto, al menos, es la teoría, sabemos que en la práctica no es tan sencillo como parece. Pero vamos a ver un poco la historia del diseño web adaptativo para entender cuando se empezó a vislumbrar la necesidad de su existencia.
Historia del diseño web adaptativo
Las primeras referencias que tenemos a este concepto de diseño es en el año 2008, en el documento «Mobile Best Practices«, del consorcio W3C. En él abogaban por la necesidad de llegar a un paradigma de diseño web en el que una única página pudiese servir contenidos a cualquier tipo de dispositivo, sin necesidad de crear versiones específicas adicionales.
Ventajas de disponer de una página web responsive
La verdad es que a día de hoy son muchísimos:
- El tráfico web es cada vez en mayor medida móvil. Si echamos la vista atrás, un puñado de años, veremos que normalmente accedíamos casi en exclusiva desde el ordenador a las páginas webs. En cambio ahora es todo lo contrario: hoy por mucho que trabajes con el PC o el Mac te darás cuenta que nuestras búsquedas cotidianas se realizan a través del móvil.
- Tu SEO lo agradecerá: Google (y otros buscadores) dan cada vez más importancia a que un sitio web sea responsive, y esta importancia se ve reflejada en la posición en la que apareceremos ahí para cualquier búsqueda. El diseño web responsive es una de las variables que más se tienen en cuenta, y cada vez más, de cara al posicionamiento web de un sitio.
- Tus usuarios se encontrarán mucho más cómodos en una web amigable desde dispositivos móviles. Ya hemos visto que el temido «rebote» (cuando entran a nuestra web y se van a otra porque la nuestra no les resuelve lo que estaban intentando buscar) es casi inevitable. Por ello, dar todas las facilidades a los visitantes de nuestra web es algo crucial para conseguir nuestros objetivos de conversión, ya sea vender un producto o servicio, conseguir que nos conozcan o simplemente que consuman nuestros contenidos.
- A nivel de reputación online, no es lo mismo acceder a una página web amigable que entrar a una obsoleta. La mala imagen que da esto último va más allá de que consigamos una venta o no: daremos una imagen descuidada de nuestro negocio.
- No tienes que crear una segunda web específica para dispositivos móviles: esto es muy importante, ya que un sólo diseño (con una serie de ajustes) te servirá y no deberás hacer duplicidad de contenidos y tareas.
Aspectos técnicos a tener en cuenta en el diseño web responsive
Si quieres que tu sitio sea adaptable como mínimo habrás de tener en cuenta estos factores:
- Los tamaños de fuentes: evidentemente no es lo mismo leer un artículo en una pantalla de 30 pulgadas que en un teléfono móvil. Por ello debemos pensar muy bien el tamaño de las tipografías, para que no suponga un esfuerzo (o que haya que hacer zoom) en pantallas de pequeñas dimensiones.
- Tamaño de imágenes: por supuesto las fotografías no pueden tener un tamaño fijo, será proporcional al tamaño de la pantalla.
- Tener en cuenta la orientación: deberemos comprobar que nuestra página soporta correctamente los giros de orientación que se hacen en el móvil. No es lo mismo ver una página en horizontal (entonces la página podrá expandirse más a lo ancho) que verticalmente.
- Los elementos de interacción son diferentes: no es lo mismo interactuar con una página a través del ratón que sobre una pantalla táctil. Ambos efectúan movimientos y gestos diferentes. Así, por ejemplo, el evento hover (pasar por encima con el ratón) se puede dar en PC pero nunca en una tablet por ejemplo.
- Tener en cuenta que la conexión a la red es diferente: Normalmente un ordenador se conectará a internet a través de cable o wifi, es decir, conexiones muy rápidas y eficaces. En ocasiones, los usuarios tendrán que hacerlo a través de redes móviles con sus dispositivos, por lo cual, la versión móvil deberá ser más ligera. Reducir los tiempos de carga de la página deberán ser lo más rápidos posibles.
- En el caso de que tu web esté desarrollada sobre WordPress (lo más habitual) deberás elegir un tema suficientemente probado y extendido como para que incluya esta característica.
Preguntas frecuentes
¿Es lo mismo el diseño web de un sitio móvil que el diseño web responsive?
No. Como hemos visto el diseño web responsive implica que un único diseño se vea lo mejor posible en cualquier plataforma. En cambio, diseñar un sitio web móvil implica crear una segunda página web adaptada a estos dispositivos. Esto tiene sus ventajas e inconvenientes, ya que es cierto que se pueden llegar a personalizaciones muy interesantes con un sitio web específico para móvil, pero también es verdad que cualquier cambio que queramos hacer requerirá su implementación en el sitio web «estándar» y en el móvil.
¿Deberían cobrarme más por ello?
¡No! En la actualidad, cualquier web nueva que se cree ha de estar hecha para poder ser correctamente visualizada en el 99,99% de dispositivos. Un diseño web profesional no puede verse mal o no ser utilizable en un teléfono moderno por ejemplo. Por ello, si alguien te quiere cobrar un sobrecoste por ello, desconfía. Pocos son los casos en los que esto tendría sentido, y todos ellos muy alejados de una página web normal.
Nuestra conclusión
No sólo ya viendo como es el mundo digital ahora mismo, sino su evolución futura, nosotros, como agencia de diseño web, recomendamos que si tu web está anticuada te pongas en manos expertas para hacerla responsive/adaptativa. Es la mejor forma de no perder posiciones en el ecosistema digital ante tus competidores. Que un posible cliente te visite y se vaya a otras webs porque la tuya no se ve correctamente es algo que debe preocuparnos tremendamente. Por ello, todos los diseños webs que hacemos en Cantabria Cloud tienen incorporada esta funcionalidad.
