El diseño adaptable, también conocido como el diseño responsivo (responsive design), es el tipo de diseño que debe aplicarse para una página web de hoy en día. Aunque el diseño responsive para web es el más común, también lo aplicaremos si es necesario para mostrar una presentación o incluso un video. Cualquier diseño cuyo contenido se muestre en un dispositivo deberá ser adaptable.
El objetivo es conseguir que el contenido se adapte al tamaño de la pantalla, de modo que el usuario final pueda leer de forma cómoda, sin tener que hacer muchos movimientos de scroll.
El diseño web adaptable o responsive además deberá ir totalmente asociado con la UI y UX. UX es aquello que una persona percibe al interactuar con un producto o servicio. La Usabilidad es un atributo de una buena experiencia de usuario y la UI o Interfaz del Usuario es con lo que se interactúa.
Pero volvamos al Responsive. Como comentaba, es imprescindible “adaptar” el diseño al dispositivo que se esté utilizando. No és lo mismo visualizar el contenido de una web en una pantalla de sobremesa, en la de un portátil, que verlo en una tablet o un Smartphone. O incluso, navegar por un iPhone X que por un Samsung Galaxy. El ancho, el alto de pantalla, siempre variará.El contenido que diseñemos deberá adapatarse a todas las resoluciones y formatos.
Por supuesto, todos los logros exigen un sacrificio y los principales factores que se tendrán que tener en cuenta son el coste y el tiempo a dedicar para convertir una web no adaptable a una web adaptable.
Si partimos de cero, para el diseñador también seguirá siendo más trabajo y deberá pensar bien como diseñar ese contenido en distintos formatos. Para ello, dispondrá de una serie de herramientas que le facilitarán el trabajo. Antes de “ponerlo todo bonito”, deberá diseñar la estructura de contenidos, con la información bien organizada, y presentarlo mediante unos wireframes donde se muestren las distintas propuestas responsive, para posteriormente, pasarlo a programación.
Para el maquetador/programador más de lo mismo. Pero si el diseñador le ha preparado correctamente el diseño, le facilitará bastante el trabajo (por ejemplo utilizando el framework Bootstrap. Una vez programada la página, dependiendo del tipo de dispositivo que se conecte a nuestra web, se mostrará el contenido y diseño en una página u otra).
También se puede plantear utilizar una plantilla prediseñada y adaptada a móviles para reducir los costes y la complejidad. Plantillas por ejemplo como las que presenta WordPress, que son totalmente adaptables y fáciles de personalizar.
Pero la experiencia nos demuestra que, a largo plazo, personalizar una plantilla casi conlleva el mismo tiempo que partir de cero. Eso si, si estás usando un CMS como WordPress, puedes valorar la posibilidad de cambiar el diseño responsive cuantas veces quieras y utilizar, personalizar y guardar los elementos como plantillas. Existen numerosas plantillas prediseñadas de WordPress que ya están adaptadas a móviles y son fáciles de instalar. Un tiempo invertido que luego podrás aprovechar para otras maquetaciones.
Importante para Google
Actualmente tener un diseño web adaptado a móviles es un factor de ranking para Google. Google distingue 3 maneras de adaptar una web para diferentes dispositivos.
1. Diseño web adaptable.
2. Contenido servido dinámicamente.
3. Usar diferentes URLs para cada versión.
De estas 3 formas, para Google la recomendada es usar diseños adaptables, ya que permite usar el mismo código HTML, además de usar también la misma URL, por lo que se lo ponemos más fácil a Google.
Google también repasa el código de una web para determinar en qué posición de sus listados situarla, y uno de los factores que tendrá en cuenta es si se muestra de forma correcta en dispositivos móviles.
Si el diseño de la web, o mas bien, el “contenido de la web” no es mobile friendly, no será incluido en los listados de búsquedas en móviles y seguramente Google también lo penalice en los listados de búsquedas principales (desde dispositivos desktop o de sobremesa).
Lo mismo ocurre con un eCommerce: si quieres mayores ventas online, un diseño web responsive reducirá la tasa de rebote y mejorará las conversiones.
¿Tu web aún no es responsive?
Así que, si tu web aún no es responsive, no dudes en actualizarte. Seguramente hace bastante tiempo que no la renuevas.En la actualidad, visitar una web desde nuestro móvil es lo mas normal, pero no hace tantos años que únicamente consultábamos páginas web a través de nuestro ordenador desktop o nuestro portátil. Ahora ocurre lo contrario y el 87% de consultas se realizan desde el móvil.
Internet avanza rápidamente y si no quieres quedarte atrás, deberías pasar cuanto antes por el taller… Como ves, las web no adaptables, además de obsoletas, penalizan en el posicionamiento y no consiguen los mismos resultados que las que sí lo son.
Noviembre 2020
Jordi Granell / Creative & Design
