Qué es diseño web responsive y cómo hago que mi web sea responsive

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Una web responsive es aquella que se adapta al tamaño de la pantalla desde la que se visita. Cada vez nos conectamos más a internet desde dispositivos que no son ordenadores y debemos facilitar una buena experiencia.

En España, el 94% de las personas mayores de 14 años se conectan a internet desde el móvil.

Estudio General 2020 de AIMC

Responsive es un anglicismo y lo podemos ver traducido como diseño web adaptable, diseño web adaptativo, incluso diseño web responsivo. El diseño responsive se basa en que los elementos que forman parte de la página, cambian de tamaño, posición o visibilidad; dependiendo de la pantalla. También afecta a los efectos aplicados a estos elementos. Hay efectos que se ejecutan dependiendo de la posición del ratón y otros basados en la pantalla táctil.

En los últimos años el diseño web ha sido mobile-first. Se diseña pensando primero en la pantalla del móvil. La pantalla es más pequeña y la manera de navegar con móvil es diferente. Debemos ser cuidadosos con cada elemento que aparezca en pantalla.

¿Por qué necesitamos que nuestra web sea responsive?

Mejor accesibilidad

El concepto de accesibilidad está relacionado con el uso universal de la web. La accesibilidad trabaja el acceso de personas con cualquier discapacidad y el acceso desde cualquier lugar y cualquier dispositivo.

Mejor usabilidad

Una web responsive facilita su uso desde cualquier dispositivo y adapta su funcionamiento a este.

Para facilitar el acceso a los usuarios de móvil

La visita de páginas web desde el móvil es la más elevada y sigue creciendo. Debemos hacer que el usuario lo pueda hacer sin problemas.

Se mejora la experiencia de usuario

Supongo que tú también te has encontrado páginas web que no se adaptan, que no son responsive. Haces la búsqueda en Google, accedes y encuentras que todo es diminuto. Tienes que hacer zoom y desplazarte por la pantalla para encontrar cualquier cosa.

Se mejora nuestra imagen de marca

En un mundo con tanta competencia, tu diferencia puede ser que el usuario tenga una buena experiencia. Pon ese factor a tu favor.

Mejor velocidad de carga

Si pensamos en el móvil a la hora de diseñar, tenemos que tener en cuenta que la velocidad de la red en móvil es más lenta. 

Ayuda al SEO

El resultado de todo lo anterior, nos ayudará en el posicionamiento. Google valora tu trato al usuario.

Mejores resultados

No deja de ser una consecuencia de todo lo anterior. Si mejoramos la accesibilidad, tendremos más visitas. Incrementando la usabilidad, daremos mejor experiencia al usuario, navegará más y puede que vuelva. Cuando Google sabe esto, nos mostrará en las primeras posiciones. 

Es evidente que nadie va a comprar nada en una web que es difícil de usar. El visitante huirá con una mala imagen nuestra y, evidentemente, ni comprará hoy ni volverá. 

Cómo hacemos que una web sea responsive

Esto se consigue con CSS (Cascading Style Sheets) u Hojas de Estilo en Cascada. El contenido de la web se estructura con HTML. La apariencia visual se define con CSS.

Con la tercera versión de CSS, se crearon las llamadas media-queries y W3C recomienda su uso desde 2012.

Las media-queries son una serie de condiciones que se añaden en el código CSS de la web para definir diferentes estilos, dependiendo de varios factores como si es para pantalla o imprimir, tamaño de pantalla, orientación de la pantalla y otros.

Como puedo hacer mi web responsive

Lo más probable es que tu web esté creada con un CMS. La mayoría de temas actuales ya son responsive, busca un tema que te guste y actualízate.

Cambiar de tema no es tan sencillo como elegir otro, tendrás que adaptar tu contenido actual al nuevo tema.

Si eres un valiente, empóllate CSS, aprende el uso de media-queries y disponte a modificar tu código. ¡Ánimo!

Un poco de historia de las web responsive

En los primeros tiempos, solo había un tipo de web. Con la llegada de los smartphones, hubo una transición en que hubo varias tendencias. Una de ellas era la creación de sitios diferentes para móvil u ordenador.

A partir de la recomendación de las media-queries, se desarrolló el concepto de diseño responsive tal como he explicado. Una única web que se adapta al dispositivo.

Parece que es algo que ha llegado para quedarse y si no tienes ya una web responsive, prepárate para actualizarla o verás como tu relevancia online va descendiendo.

Referencias

Comparte este artículo en

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Álvaro Rosa

Álvaro Rosa

Grado Multimedia.

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable Álvaro Rosa Albalat.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  Siteground.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies. Si continuas navegando, estás aceptándolas.    Más información
Privacidad