Diseño Adaptable o Responsive

¿Hay algo que pueda dar más rabia que estar mirando una página web con el móvil y que no se vean los botones, las imágenes o haya que mover la pantalla de izquierda a derecha? Este es un error que a mí me hace salir inmediatamente todas las páginas web y pasa porque la web no es responsive. Para que en tu página web no pase eso hoy vas a aprender todo acerca de este término.

¿Qué es el diseño web responsive?

Un diseño web responsive es aquel que es capaz de adaptarse a las pantallas de diferentes tamaños con un solo sitio. No solo estamos hablando de que cada ordenador tiene un tamaño diferente, sino que también tiene que ajustarse a tablet y smartphone, sin tener que hacer cambios en la URL. Esto se hace para mejorar la experiencia de usuario navegando por la página web y, tiene que afectar a toda ella, desde el menú hasta las imágenes, pasando por el texto. Todo tiene que estar perfectamente adaptado a cada una de las plataformas.

No es lo mismo web responsive que web para móviles

Estos dos términos muchas veces se confunden. Las webs para móvil son páginas que se hacen desde cero pensando únicamente en la experiencia en Mobile. Estas normalmente funcionan como Apps y otorgan una experiencia perfecta para este tipo de dispositivos, pero no suelen adaptarse tan bien al resto de plataformas. Durante los últimos años las visitas a webs por smartphonehan llegado hasta un 60% – 90% (dependiendo del sector), por eso no es una mala idea aprovecharse de este fenómeno y disminuir la carga de trabajo haciendo solo una versión de la página web para Mobile. Pero en ningún caso va a ser lo mismo que una página web responsive.

¿Es mejor una web para mobile o una adaptable?

Sin duda es mejor una página web adaptable. Es cierto que siempre hay algunos detalles que se escapan para una u otra plataforma y que no se acaban de ver 100% bien, pero siempre será mejor que se vean muy bien en todo tipo de plataforma, a que solo se vea perfecto en una y en el resto no funcione. Dependiendo del sector en el que estemos acabaremos perdiendo muchos clientes solo por este detalle.

Ventajas de tener una web Responsive

  • Todo el mundo a día de hoy tiene un móvil: Todos tenemos un smartphone en la mano todo el día, es con lo que buscamos información cada vez que nos surge una duda. Además, siete de cada diez personas afirman haber comprado mediante estos. Y estamos seguros de que este número va a ir aumentando y acabará relegando el ordenador solo a profesionales o para tareas específicas como jugar a videojuegos, diseñar…. Por lo tanto, tienes que estar en todas las plataformas para poder satisfacer las necesidades de tu cliente ahí donde esté.
  • Mejor experiencia para el usuario: El hacer que tu página web se adapte a todas las plataformas que puedas está ayudando a tu posible cliente, mejora la experiencia y la interacción que tienen estos con la página. Esto hará que permanezca más tiempo dentro de tu página web y sea más fácil que conviertas tus objetivos (consuman tu contenido, dejen tu email o te compren).
  • Imprescindible para el SEO: Esto no tiene mucho que ver con diseño pero, conseguir visitas para tu página web será esencial para que tu proyecto triunfe. El tener una página web responsive hará que: Google posicione mejor tu página dentro de los resultados de búsqueda (sobretodo para mobile), minimizará el rebote (la gente que se va de tu web), evitarás contenido duplicado… Bases muy importantes para el posicionamiento de tu página web.
  • Mejorará el impacto de tu diseño: Todos sabemos que la primera impresión es la más importante, y si estamos hablando de diseño aún más. Que tu página web sea responsive hará que puedas lucir perfecto tú diseño en todas las plataformas y no pierdas la mitad de la atención de los usuarios, que serían los usuarios de Mobile.

Aspectos a tener en cuenta para hacer tu web responsive

Cuando hablamos de diseño responsive nos referimos a que, todas y cada una de las partes de tu web tiene que adaptarse a todos y los dispositivos, pero vamos a resumir los más importantes, para que puedas pegarle una ojeada a tu web y ver si están funcionando correctamente tanto para ordenador como para Mobile.

  • Las tipografías: El tamaño de las letras se va a ver diferente para cada tipo de dispositivo, no tenemos las pantallas a la misma distancia, por lo que las letras del ordenador deberán ser un poco más grandes. Los títulos excesivamente largos, para ocupar todo el ancho de la pantalla del ordenador, se verán en varias líneas cuando lo visualicemos desde una pantalla de smartphone, por lo que habrá que acortarlo. Estos son algunos ejemplos que deberemos tener en cuenta a la hora de cambiar la tipografía de nuestra página web.
  • Las imágenes y los vídeos: Esto lo hace automáticamente WordPress si lo has hecho bien, simplemente adaptará la imagen y el vídeo para que se vea cómodamente en la pantalla. Normalmente la forma más sencilla para que se vea de forma óptima será que ocupe todo el ancho del smartphone.
  • Jugar con la posición de la pantalla: El ordenador se ve en forma horizontal y el smartphone se acostumbra a ver en forma vertical, pero podrás jugar un poco con estas direcciones para aprovecharte. Por ejemplo, mucha gente consume vídeos en YouTube de forma horizontal sin ningún tipo de problema, pero todo el mundo consume Instagram de forma vertical, incluyendo los vídeos. Tendrás que saber como consume tu audiencia para darle la mejor experiencia posible.
  • Ve con cuidado con los tiempos de carga: No es ningún secreto que los ordenadores son mucho más potentes que los móviles, por lo tanto los móviles tendrán un tiempo de carga bastante más lento. Intenta hacer el diseño lo más sencillo y simplificado posible para que no aumente excesivamente los tiempos de carga, pero lúcete todo lo que puedas a la hora de diseñar para ordenador.
  • Cuidado con los efectos: Hay algunos efectos que funcionan bien en ordenador y horriblemente mal en móvil. Los típicos efectos que se activan cuando pasas el ratón por encima, no funcionan en móvil, por lo tanto tendrás que eliminarlos para este tipo de visualización. Revisa todos los efectos que hayas utilizado para que se vean bien en ambas plataformas.

¿Cómo hacer tu web responsive?

Si utilizas WordPress, podrás acceder a un montón de plugins para transformar tu página web en responsive. Si utilizas el propio editor de Gutenberg, prácticamente te hace solo la transformación a mobile y con un resultado bastante decente. Si necesitas pulir un poco más el diseño, puedes utilizar constructores como Elementor que te permite ajustar algunos elementos para que solo se vean en Mobile. Los plugins más populares para hacer tu web responsive son:

  • Elementor: Un constructor que te permitirá hacer prácticamente cualquier cosa que quieras de diseño y por supuesto una versión mobile. Podrás decidir qué apartados se ven en que plataforma y editar cualquier tipo de variable para una plataforma en concreto. Es el que más utilizo, pero ve con cuidado porque aumentará un poco el tiempo de carga de tu página web. 
  • WP Touch: Otro plugin para WordPress que te hace la transformación a responsive totalmente automática y con una manera muy sencilla de utilizar. También posee una versión de pago en la que podrás acceder a extras bastante interesantes. 
  • WP Mobile Detector: Sirve para detectar automáticamente el dispositivo con el que accede a tu página web y carga un tema diferente dependiendo de cual sea el. A mí no acaba de gustarme porque ha generado algunas incompatibilidades y aumenta la carga en algunas ocasiones.

SI quieres conocer sobre mi trabajo puedes husmear en mi portfolio jeje

Espero que te haya gustado este artículo y se ha quedado cualquier duda puedes dejarla aquí abajo en los comentarios. O si quieres que te ayude con el diseño de tu próximo proyecto puedes encontrar mis servicios en diseñadora web en Mallorca.