La importancia del diseño web adaptativo (Responsive Web Design)
Hace muchos años, el diseño web era algo ultramoderno, todos accedíamos a Internet a través de nuestro ordenador de sobremesa, compartiendo resoluciones casi idénticas y navegadores similares (probablemente internet Explorer o alguna versión de Mozilla) … lo que hacía que existieran unos formatos unificados y corrientes a la hora de diseñar páginas web.
Antiguamente existían principalmente 3 resoluciones y todas las páginas webs se veían siempre en monitores de sobremesa:
- Diseño web para dispositivos de 800x600, es decir los ordenadores muy viejos.
- Diseño web para dispositivos de 1024x768, la mayoría de PC por aquel entonces.
- Diseño web para dispositivos de 1280x1020, aquellos privilegiados con pantallas de última generación en aquella época.
Con eso era más que suficiente, y no te tenías que preocupar mucho más en ese aspecto a la hora de abordar el desarrollo de la página web que estuvieras realizando.
Evolución y cambio del Diseño Web
En el mundo de internet y el desarrollo web, como en otros tantos, los tiempos cambian. Hoy en día, la mayoría de usuarios acceden a la web y a internet a través de dispositivos portátiles, como Smartphones, tabletas, portátiles, ebooks, media stations, smarts TVs ...etc. Además, fabricantes cada vez son más y más, perdiéndose los estándares y quedando el tamaño del dispositivo que tendrá el usuario que acceda a nuestra página web en un completo azar.
A día de hoy todavía existen muchas páginas que no cuentan con un diseño web adaptado a todos estos dispositivos. Si la tuya se encuentra dentro de este grupo te recomendamos sacarla de él cuanto antes.
A la hora de mostrar nuestra web desde los distintos formatos móvil, existen varias opciones: web móvil, app nativa y web responsive. Como es lógico, todas ellas tienen sus pros y sus contras, pero la que más adeptos ha ganado en los últimos años es la web responsive. ¿Por qué? Principalmente porque supone un importante ahorro de tiempo y dinero, lo que no significa, por otro lado, que sea la más sencilla a la hora de ponerse manos a la obra.
¿Qué es el Diseño Web Responsive?
Entrando en arena, el diseño web adaptativo o responsive es aquel que se realiza para que nuestra página web sea visible, accesible y usable desde todos los dispositivos, de manera que se ‘adapte a ellos’. Por lo tanto, una única web se adapta a la mayoría de resoluciones y de esta forma no es necesario tener, por ejemplo, una versión web aparte que ha quedado ya en desuso con dominios que comenzaban con la M de mobile: m.nombreDominio.com
El diseño web responsive permite además mejorar la visibilidad y posicionamiento del sitio, reducir el tiempo y los costes dedicados al desarrollo web, evita los contenidos duplicados y favorece la viralidad de los contenidos, ya que incrementa las posibilidades de que sean compartidos a través de las redes sociales.
Las 5 reglas de oro a la hora de diseñar una web responsive
Como hemos señalado, el diseño responsive tiene múltiples ventajas, pero no por ello es la opción más sencilla. Si aun así estás decidido a incorporarlo a tu página, desde nuestro estudio de diseño web en Zaragoza te damos 5 aspectos a tener muy en cuenta:
1. Optimiza las imágenes.
Incluir fotografías comprimidas en la web es fundamental para disminuir el consumo de datos y acelerar su proceso de carga. Piensa que es imposible saber qué dispositivo y qué tipo de conexión utilizarán los usuarios de nuestro sitio y en el caso de los teléfonos móviles, pueden acceder desde una red muy débil. Los estudios aseguran que la mayoría de los visitantes abandonan una página desde un dispositivo móvil si esta tarda más de 5 segundos en cargar. ¡Ya sabes, la velocidad cuenta y mucho!
2. Presta atención a los tamaños de las fuentes.
Si ya de por sí es complicado leer el contenido de algunas webs desde el ordenador, imagínate desde un teléfono móvil. Comprueba que la fuente no quede demasiado pequeña en las distintas pantallas. La vista de tus visitantes te lo agradecerá.
3. Limita el uso de efectos.
Muchos de los efectos que aparecen en la versión de escritorio no funcionarán en la web responsive. Imagina, por ejemplo, que el “leer más” de una noticia aparece en el hover, que no existe en los dispositivos móviles. Puede que te encuentres con que los tiempos de visita desde el móvil serán extrañamente bajos en relación a los de la web de escritorio y no será para menos.
4. Separa los botones y dales un tamaño adecuado.
A la hora de planificar un diseño responsive, debes tener en cuenta que no todos tenemos dedos de pianista. Ten siempre en mente el tamaño de los elementos interactivos y de los botones de la web y comprueba en un dispositivo móvil que ninguno de ellos entorpece la navegación. ¡No hay nada más frustrante que intentar clicar sobre un punto de la pantalla y ser incapaz de hacerlo!
5. Intenta mantener el mismo contenido.
Como norma general, en el diseño responsive solo suelen modificarse los formatos de los menús y el emplazamiento de la publicidad, si la hubiese. Procura mantener todo el contenido (o al menos, la mayor parte) en la versión para móvil. Así te asegurarás de que tu estrategia de posicionamiento web se mantiene intacta.