Imagen ilustrativa para la entrada '¿Cómo hacer mi web responsive?'

¿Cómo hacer mi web responsive?

Si has llegado hasta aquí es porque de algo te suena el término «responsive» pero no tienes muy claro qué es exactamente. Hoy día, cualquier agencia que ofrezca Diseño Web te pondrá la palabra responsive por todos sitios y, si les preguntas, la respuesta que pueden darte será más o menos esta: es para que se vea bien en todos los dispositivos. Pero, ¿qué quiere decir eso?

El principal objetivo del web responsive design es encargarse de que, independientemente del dispositivo en el que estés visitando un sitio web, puedas acceder a la información más relevante del sitio. Fíjate que digo «información» y no «todo el sitio», ya que, al fin y al cabo, un sitio web tiene como objetivo mostrar información referente a un tema o, si es una aplicación web, darte las herramientas para interactuar con ella de la forma más simple posible.

Digo esto porque, gracias a esta técnica, podremos obviar el contenido que no es imprescindible para la web en pantallas que no merezca la pena mostrarlo. Algunos ejemplos de esto podemos verlos en un blog: elementos del sidebar, un slide con imágenes que no aporte información al contenido, etc.

Técnicas para diseñar un sitio web responsive

Existen diferentes técnicas y criterios a la hora de realizar un sitio responsive como, por ejemplo:

  • Usar una tipografía de por lo menos 16 píxeles en pantallas pequeñas.
  • Usar imágenes en formato apaisado, para que no ocupen toda la pantalla en formato vertical de dispositivos pequeños.
  • Tener en cuenta que la interfaz posiblemente sea táctil, por lo que los elementos de interacción deben tener un tamaño adecuado para que puedan ser pulsados, etc.

Nosotros, en Baética Digital, llevamos realizando sitios responsive desde que la palabra no tenía ni significado ni traducción. De hecho, puedes ver algunos ejemplos de ellos visitando nuestros trabajos. Decidimos en su día invertir tiempo en aprender la mejor manera posible de afrontar el diseño de sitios responsive. Nos dimos cuenta de que en el futuro, presente de hoy, la navegación móvil llegaría a superar en números a la navegación en ordenador. Y esta predicción se ha hecho realidad.

En la actualidad, es tal el convencimiento de que la navegación móvil debe ser la prioridad, que existen modelos de diseño web que tienen siempre en mente la vista móvil, antes de desarrollar el sitio completo de escritorio, como por ejemplo, Mobile First. Es decir:

  • Si tu sitio no es responsive y, por tanto, no ofrece la información importante viéndola desde cualquier dispositivo, tu web está fallando y no está aprovechando cada una de las visitas que tiene para ofrecer tu contenido, ya seas una tienda, un sitio de noticias o un simple blog personal.

Google te posicionará mejor si tu sitio web es responsive

Otro apartado a tener muy en cuenta es el apartado del Posionamiento SEO, ya que desde hace bastante tiempo, Google «ranquea» con una puntuación mayor a los sitios responsive como medida para premiar a los desarrolladores que se preocupan por sus lectores.

Espero haberte dejado más o menos claro de qué se trata el Responsive Web Design y que lo hayas entendido correctamente.

Hoy día es un «must» que tu información llegue correctamente, veas tu web donde la veas, sino, tu esfuerzo por comunicar no tendrá sentido.

Una aplicación web a medida es tu mejor solución Meltdown y Spectre. ¿Qué son?