Así es. Seguramente has podido oír alguna vez el tan utilizado término «diseño responsive«. Este tipo de diseño, utilizado en diseño Web, tiene que ver con una técnica de diseño que busca la correcta visualización de una página Web en el mayor número de dispositivos posibles. Cuando hablamos de dispositivos nos referimos a ordenadores, portátiles, tablets, smartphones o cualquier dispositivo que pueda acceder a la Web. Hoy en día es posible acceder a Internet y a páginas Webs casi de cualquier sitio. Tanto es así que ya hasta las televisiones de última generación cuentan con su propio sistema operativo y, por ende, con su propio navegador Web.

Hasta hace no mucho, tener una página Web con un diseño responsive (también llamado diseño adaptativo) era más bien un lujo, un extra que las empresas querían añadir a su página Web para un acabado más profesional. En cambio, a día de hoy, ya se ha convertido en una necesidad total. El crecimiento de dispositivos capaces de acceder a páginas Web es tal que cualquier página Web que no tenga un diseño adaptativo o no pueda ser visionada correctamente en cualquier dispositivo está condenada al rebote de sus visitas (entendiendo por rebote al abandono de la página Web por parte del usuario en cuestión de segundos).

¿EN QUÉ CONSISTE EL DISEÑO RESPONSIVE O ADAPTATIVO?

Es un proceso sencillo a la par que muy difícil. Sencillo porque conceptualmente no tiene mucha dificultad: redimensionar y colocar los elementos de una Web de forma que estos se adapten al ancho (y a veces al alto) de los dispositivos que puedan visualizar nuestra página Web. Esta adaptación se realizará de manera automática, por lo que todo parecerá por arte de magia, pero el trabajo que hay detrás es muy importante.

Estos cambios tendrán tres efectos fundamentales:

• Mejoraremos la experiencia de usuario, ya que todo el mundo podrá acceder a nuestra página Web desde cualquier lugar y desde cualquier dispositivo, mejorando la usabilidad de la Web.
• La visualización de la Web será más fluida y daremos un aspecto más profesional a nuestra página.
• A la hora de compartir nuestra página Web, siempre es más fácil hacerlo mediante dispositivos móviles, por lo que ganaremos tráfico gracias a ello.

Basamos el diseño responsive o adaptativo en proporcionar, a todos los usuarios posibles, una web con contenido y usabilidad lo más parecido a la navegación Web en dispositivos de sobremesa como ordenadores o portátiles. Bien es cierto que muchos desarrolladores y diseñadores de Web prefieren crear una versión nueva de la página Web para otros dispositivos distintos, cambiando totalmente los elementos y el contenido de la Web. Es un hecho interesante, pero el diseño responsive se basa siempre en mantener la mayor cantidad de contenido posible en nuestra Web adaptada, ofreciendo similitudes entre la versión de escritorio y la versión móvil, por ejemplo.

ELEMENTOS A TENER EN CUENTA

Vamos a enumerar algunos de los elementos que tenemos que tener en cuenta a la hora de diseñar un buen sitio adaptado y responsive.

• Tipografía. El tamaño de la letra importa, así como sus formas. Si ponemos letras pequeñas en un dispositivo con pantalla reducida, evidentemente no es una buena decisión. Del mismo modo, tampoco debemos caer en la trampa del «gigantismo». Es un error muy común, que nos hará que nuestra página Web parezca demasiado grande.
• Colores. Hay ciertos colores que pueden ser dañinos a la vista. Tenemos que tener en cuenta que los dispositivos móviles, por ejemplo, están más cerca de la cara, por lo que tenemos que tener una paleta de colores clara y concisa, pero siempre que respete los brillos de las pantallas que queremos que muestren nuestra página Web.
• Imágenes, vídeos y contenido multimedia en general. Uno de los aspectos más críticos a la hora de tener una página Web adaptada a distintos dispositivos. La resolución de las imágenes y los vídeos es muy importante, ya que sino tendremos elementos pixelados o que no se reproduzcan correctamente. Al mismo tiempo, tener las imágenes adaptadas y comprimidas para distintos dispositivos nos permitirá reducir los tiempos de carga de la página Web.
• Usabilidad, accesibilidad y botonería. Tenemos que tener cuidado con este aspecto, ya que tenemos que hacer que la Web sea usable y accesible para los usuarios, evitando tener botones juntos o que no se puedan utilizar. La navegación por la Web tiene que ser limpia y ordenada. Un recurso muy utilizado es utilizar distintos tipos de menú según los dispositivos.
• Tiempos de carga y velocidad Web. Otro aspecto importante. Nuestra página Web tiene que cargar rápido siempre que sea posible. De esta manera tenemos que evitar la sobrecarga de efectos o de llamadas a otras aplicaciones externas, de modo que nuestra instalación Web sea lo más limpia posible.

Es evidente que estos son algunos de los ejemplos de los elementos Web que podemos y debemos adaptar a priori, pero luego, conforme comienza la adaptación Web, siempre veremos nuevos elementos que tengamos que dedicar algo de tiempo para que se vea correctamente en cualquier dispositivo. En Knovas sabemos la importancia que tiene la adaptación Web, por lo que contamos con un equipo preparado para hacer que tu página Web pueda verse en la mayor cantidad de dispositivos posibles.