En los últimos años el concepto de web responsive pasó de ser una tendencia a una buena práctica. Hoy día es un must y es imprescindible tener una web responsive completa.

Las estadísticas demuestran que cada día consumimos más contenidos en internet a través de nuestros terminales móviles. E incluso las compras desde el móvil van en aumento (aunque todavía miramos más por móvil y compramos más con el ordenador).

Además de la experiencia de usuario que damos si nuestra web es completamente responsive, Google posiciona mejor las webs responsive que las que no lo son. Pero…

¿Qué es una web responsive completa?

El responsive web design comenzó hace unos años de forma básica como respuesta a la llegada y democratización de móviles y tabletas. Pero desde entonces hemos ido evolucionando hacia el diseño Mobile First donde nuestras webs se diseñan primero para dispositivos móviles y después se adaptan a los dispositivos de escritorio.

Para tener una web responsive completa necesitamos que todos los elementos de la misma se adapten a cualquier dispositivo para facilitar la usabilidad y experiencia de usuario en todos los aspectos. Algunos ejemplos de ello son:

  • Fotografías responsive que se adaptan a cada tamaño de pantalla y siguen viéndose con calidad.
  • Vídeos responsive que abarcan todo el ancho en cualquier dispositivo.
  • Fuentes que cambian de tamaño para respetar el diseño y seguir siendo legibles incluso en pantallas pequeñas.
  • Elementos que aparecen o desaparecen según desde que dispositivo se visualicen
  • Llamadas a la acción distintas según el dispositivo

¿Cómo puedo tener una web responsive?

Si quieres que tu web sea responsive puedes encontrar la solución de diferentes formas. Te dejo aquí algunos ejemplos.

Plantillas WordPress preparadas para tener una web responsive

Hoy día, casi cualquier plantilla premium que compres ya viene preparada para tener una web responsive sin que tengas que hacer prácticamente nada más. Quizá debas ajustar algunos detalles. Pero poca cosa.

Usar un maquetador visual en WordPress para diseñar una web responsive

Una opción muy interesante es que te diseñes tú mismo tu página responsive con un maquetador visual. Hay muchos en el mercado y son muy sencillos de usar. Te dejo aquí un contenido de mi blog donde te muestro 12 de estos constructores web y te hablo en especial de Elementor Page Builder.

Nuevas propiedades CSS como Fluid Grid y Flex para codificar una web responsive

Casi todos los navegadores web ya aceptan nuevas propiedades CSS como Fluid Grid y Flex. Éstos son ideales porque nos permiten crear un código CSS optimizado para que nuestros diseños se adapten a cualquier tamaño de pantalla. Una pasada. Si sabes CSS y HTML es la mejor opción en mi opinión.

Frameworks ya listos para usarse y conseguir una web responsive

Bootstrap y Foundation son ejemplos de frameworks o librerías opensource totalmente listas que puedes utilizar para desarrollar tu página web responsive si sabes CSS, HTML y JS. Aquí puedes leer una definición de Bootstrap.

Otras formas de servir nuestro contenido adaptado a móviles

Aunque ya es otro tema, no quería dejar pasar la oportunidad de hablar de otras formas de adaptar nuestras webs a los dispositivos móviles. Y es que no todo es responsive design.

Versión desktop / versión mobile

Existen sites que directamente crean una versión diferente para cada dispositivo. Por ejemplo si entras desde tu ordenador en https://mobile.twitter.com/home verás la versión móvil de la famosa red social. No es la misma web adaptada sino que es una versión distinta. Fíjate que el dominio cambia si ahora entras en https://twitter.com/

AMP

Accelerated Mobile Pages es una nueva versión del código html de toda la vida que Google ha creado para que las páginas web carguen mucho más rápido y de forma totalmente adaptada en dispositivos móviles.

Básicamente, con este sistema se re-ordena el CSS y Javascript o directamente se elimina si Google lo considera prescindible, de manera que la web está mejor preparada para móviles.

Por último, decir que Google ya está avisando de que tendrá en cuenta si tu web tiene AMP o no a la hora de posicionar en el buscador. Y cuando Google dice algo…

App

Crear un App para tu web es otra alternativa para servir el contenido de forma totalmente adaptada a dispositivos móviles. Además crear una app ofrece muchas posibilidades muy interesantes para interactuar con los usuarios como por ejemplo las notificaciones push.

Conclusión

Si quieres tener una web moderna, adaptada a los tiempos que corren, que posicione bien y que sea muy usable para los usuarios necesitas tener una web responsive. Es imprescindible para cualquier proyecto serio.

Como hemos visto, todos podemos tener una web responsive completa porque hay soluciones para todo tipo de usuarios. Desde comprar una plantilla ya preparada a crear tu propio código CSS optimizado para que tu web sea responsive.

También hemos visto que además del diseño responsive existen otras alternativas muy interesantes a las webs responsives.

Y hasta aquí el contenido de hoy. Espero que te sea útil. ¡Nos vemos en el próximo artículo!