Web responsive, adapta tu sitio a todos los dispositivos

Web responsive, adapta tu sitio a todos los dispositivos

La revolución tecnológica en la que nos encontramos ha traído diferentes dispositivos en los que navegar por internet. Leer las noticias, comprar un regalo o reservar alojamiento para las vacaciones de verano son algunos de los usos que últimamente le estamos dando a nuestros smartphones y tablets. Una web responsive adapta tu sitio a todos los dispositivos. Si un potencial cliente descubre tu negocio en Instagram y decide entrar en tu sitio para comprar, es muy probable que lo pierdas si tu página no está optimizada para móviles.

¿Qué es una web responsive?

Una web responsive es aquella cuyo diseño se adapta correctamente al tamaño de la pantalla del dispositivo. Si el diseño responsive está bien ejecutado, la página se verá perfectamente tanto en un ordenador, como en una tablet o en un smartphone. El sistema detecta el ancho de la pantalla y a partir de ahí acopla todos los elementos de la página para ofrecer una mejor experiencia al usuario.

El tráfico desde móviles no para de crecer

La tendencia es clara. El tráfico procedente de los usuarios que navegan en internet a través de su smartphone se incrementó un 30,6 por ciento entre 2017 y 2019, según un estudio de Similar Web. Por otro lado, el tráfico desde ordenadores de escritorio se redujo en un 3,3 por ciento en el mismo periodo. Cada vez utilizamos más los smartphones para navegar por internet y por eso es tan importante que nuestra web sea responsive. 

Como vemos en el siguiente gráfico, en los últimos años se ha producido un cambio significativo en este aspecto. Ya no se trata solamente de que la navegación desde un dispositivo crezca y desde el otro disminuya, sino que en términos absolutos el tráfico móvil ya supera al desktop.

desktop vs mobile

Todavía hay muchas empresas y marcas que no cuentan con una web responsive. Estas organizaciones deben ser conscientes de que la mayoría de los usuarios encontrará una página web que no sirve de nada y que además dará una mala imagen de su negocio.

Características de un buen diseño responsive

Un elemento fundamental del responsive es definir a partir de qué tamaños de pantalla el diseño cambia. Estos tamaños, que pueden variar, son conocidos como puntos de corte. Por ejemplo, un punto de corte habitual para hacer que una web cambie de diseño tablet a mobile es 767px de ancho. Siempre que la pantalla sea más pequeña que esta medida la web se mostrará en formato mobile.

Para que un diseño responsive funcione correctamente la web debe tener al menos dos puntos de corte. Uno que marque el cambio de escritorio a tablet y otro de tablet a móvil.

puntos-de-corte

Hay webs que solamente tienen definido un punto de corte, de desktop a mobile. El problema que esto genera es que esa web funcionará mal desde una tablet. 

Debido a la amplia variedad de tamaños de pantallas de móviles que podemos encontrar hoy en el mercado (la pantalla del iPhone 11 Pro Max es de 6.5 pulgadas mientras que la del 7 es de 4.7 pulgadas) se podría pensar que hace falta definir distintos puntos de corte dentro del diseño mobile. Sin embargo, si el desarrollo se ha hecho correctamente y la web es realmente adaptable, no será necesario. Esto no sucede solamente en mobile, también en desktop.

Las ventajas del diseño responsive

  • Permite reducir el tiempo de desarrollo.
  • Evita los contenidos duplicados.
  • Aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más natural.
  • Mejora el SEO.
  • Se ahorran costes de mantenimiento porque al incluir contenidos nuevos solamente es necesaria una actualización para todas las versiones de la web.
  • También se ahorran costes en el desarrollo ya que una web responsive adaptada a todos los dispositivos es más económica que una versión de la web para cada dispositivo.

Las webs responsive y el SEO

¿Qué tienen que ver las webs responsive y el SEO o posicionamiento en buscadores? Desde hace tiempo Google penaliza a aquellos sitios web que no adaptan su diseño a los distintos dispositivos. Esto es porque al necesitar varias versiones de una misma página web el contenido de los distintos sitios será idéntico, es decir, se duplica, algo que el buscador puede identificar como una técnica de black hat seo. Google sanciona a estas webs haciéndolas caer en el ranking de resultados o directamente las expulsa. 

Hay que tener en cuenta que Google reconoce para qué dispositivo se ha creado cada sitio web (dispositivos móviles, ordenadores…) y muestra unos resultados u otros dependiendo del tipo de dispositivo que se esté utilizando.

Un problema de crear una versión móvil desde cero es que supone comenzar una estrategia SEO completamente distinta, debido a que una nueva versión implica una nueva URL y un nuevo código HTML. La autoridad acumulada de las webs de origen no se transferirá a la versión móvil, lo que supone una gran desventaja en el SEO. Con el diseño web responsive no existe este problema, ya que solo existe una URL y toda la autoridad del sitio web se acumula en esa única URL. La suma de visitas desde cada dispositivo refuerza una única web y esto mejora su posicionamiento, indicando a Google que dicho sitio es informativo y de importancia.

Además, Google afirma abiertamente que la configuración que recomiendan es la full responsive design. Google favorece el diseño web responsive porque facilita el proceso de mostrar la web en diversos dispositivos.

La tendencia de las webs mobile first

Hace unos años lo normal era diseñar una web primero en desktop y después adaptarlo a mobile pero esto ha dejado de ser así. Ahora existe la tendencia de hacer una web primero en mobile para después trasladarla a desktop debido al creciente uso de los smartphones. Es lo que se conoce como las webs mobile first

La experiencia de usuario en un smartphone de una web mobile first siempre va a ser mejor que la de una web que se ha hecho inicialmente para desktop y que posteriormente se ha adaptado al formato móvil. Es muy común encontrar webs que han sido diseñadas para escritorio cuya adaptación a móvil no está bien conseguida y puede resultar incómoda para el usuario.

Sin embargo, a la hora de decidir si el diseño de una web debe ser mobile first o no se debe analizar el tipo de producto digital y la audiencia a la que queremos llegar.

El responsive en el futuro

Ya hemos visto que contar con una web responsive actualmente es fundamental para cualquier proyecto y todo hace pensar que esta tendencia aumentará incluso más. Están apareciendo dispositivos en el mercado como Smart TVs o relojes inteligentes que también se utilizan para navegar por internet. Esos distintos tamaños de pantalla también requerirán de un diseño específico. La web responsive adapta tu sitio a todos los dispositivos. Sé un buen anfitrión y mejora la experiencia del usuario que visite tu página.

Leave a Reply