{ Pasión por el código }

© Blog Ailon Webs

Diseño web responsive ¿Qué es y cómo funciona la web en el móvil?

Publicado el 15/12/2020, por M. Soutto

diseño web responsive
Diseño web responsive ¿Qué es y cómo funciona la web en el móvil?

El diseño web responsive hace referencia a la respuesta que tiene la arquitectura del diseño web en función del medio o dispositivo y el contenido que se inyecta. Es el diseño web que como resultado da la mejor experiencia de usuario, sobre todo para la web en el móvil. Este diseño web responsive permite que el conjunto de las páginas que constituyen un sitio web se adapten a la pantalla del dispositivo del usuario que le visita, sin importar que sea desde un teléfono móvil o smartphone, tableta o tablet, portátil o desde un ordenador. Es una web visible para múltiples navegadores web, anchos de pantalla, resoluciones y potencia de hardware.

¿Qué es el diseño web responsive?

Del inglés responsive web design, el diseño web responsive o como muchos llaman diseño web adaptable, lo ideó Ethan Marcotte, para mejorar la experiencia de los visitantes con móvil a las páginas web.

Con un diseño web responsive desarrollamos páginas web con un sólo código y obtenemos una web visible para múltiples anchos de pantalla, resoluciones de pantalla y/o potencia de hardware.

El término "responsive"

Para no confundirnos, es necesario aclarar el término con el que se denominó esta forma de diseño web. Como ya sabemos, en inglés se le denominó responsive web design y habitualmente usamos la palabra ‘responsive’, sin traducir al castellano. Si buscamos en el diccionario de la Real Academia Española, el término en castellano se traduciría como ‘responsivo’ cuyo significado es "perteneciente o relativo a la respuesta".

Origen del diseño web responsive

En 2008 la W3C (World Wide Web Consortium), comenzaron a sentar las bases para crear One Web (Una Web) y se marcó el objetivo de trabajar para crear una sola web ('One Web').

El diseñador web Ethan Marcotte acuña el término de "responsive web design", en el artículo Responsive Web Design que se publicó el 25 de mayo de 2010. Fue quien propuso un método para diseñar el código necesario para la web que permitiera adaptarse a múltiples tipos de dispositivos, smartphone (móviles), tabletas, portátiles, computadoras u ordenadores de sobremesa.

En lugar de adaptar diseños desconectados a cada uno de un número cada vez mayor de dispositivos web, podemos tratarlos como facetas de la misma experiencia. Podemos diseñar para una experiencia de visualización óptima, pero incorporar tecnologías basadas en estándares en nuestros diseños para hacerlos no solo más flexibles, sino más adaptables a los medios que los generan.

Por aquel entonces usábamos portátiles y ordenadores de sobremesa, al aparecer los teléfonos inteligentes (smartphones) fue necesario idear una forma de crear páginas web con un código capaz de hacer posible que el contenido fluya, o se adapte para así ser visualizado con una apariencia correcta en cualquier dispositivo que use un visitante de la web.

diseño web responsive
Diseño web responsive ¿Qué es y cómo funciona la web en el móvil?

¿Qué es y cómo funciona la web en el móvil, cómo funciona el diseño web responsive?

El diseño web responsive utiliza el mismo código HTML para todos los tipos de dispositivos que acceden al sitio web, y a través de las hojas de estilo en lenguaje CSS3 que integra el modulo de 'media queries' para mostrar el contenido correctamente al visitante de la web sin importar el dispositivo con el que esté navegando.

Los 'media queries' son instrucciones que se añaden al código CSS3 para que muestre, por ejemplo, el contenido de una manera u otra en función de si es un móvil, tablet, una pantalla grande o una impresora.

El contenido y su contenedor

Para explicar como funciona el diseño web responsive vamos a poner un ejemplo.
Imaginemos que el contenido web es un líquido, por ejemplo agua. Llenamos una jarra con agua, entonces el agua toma la forma de la jarra y se extiende hasta encontrar los límites de la estructura que es la jarra. Ahora vamos a rellenar con el agua de la jarra una botella, vemos que sucede lo mismo, el agua toma la forma de la botella. Y si vertemos el agua de la botella en un vaso, el agua toma la forma del vaso.

Bien, ahora el objetivo del diseño web responsive es que el contenido web fluya dentro del contenedor sea el que sea, y así conseguir la mejor experiencia que el usuario de la web pueda tener. Ya conocemos los inconvenientes de las webs que aun hoy no usan diseño web responsive, seguro que muchas veces has tenido que ampliar la pantalla porque el texto o la imagen es demasiado pequeña, o el contenido se desborda por el lateral derecho y tienes que realizar un desplazamiento horizontal de la pantalla (scrolling horizontal) para conseguir visualizar el contenido. Bueno, usando diseño web responsive esto no te hubiera sucedido y la web en el móvil te daría una experiencia de usuario óptima.

"Como el agua". Camarón de la Isla y Paco de Lucía.

¿Qué lenguajes de programación usamos?

Una página web básica está formada por un lado por un documento en lenguaje HTML (lenguaje de marcas de hipertexto) y por otro por un documento en lenguaje CSS (hojas de estilo en cascada) con el que conseguimos el diseño visual de los documentos web y también de la interfaz de usuario escritas en lenguaje HTML.

  • HTML (HyperText Markup Language): lenguaje de marcas de hipertexto.
  • CSS (Cascading Style Sheets): hojas de estilo en cascada. Y sus media queries.

De forma simple podríamos decir que el diseño web responsive funciona con un ÚNICO código HTML controlado por código CSS usando los media queries. En la práctica podemos desarrollar proyectos web mucho más complicados que requieran combinar diferentes lenguajes de programación a la estructura del HTML, como son los lenguajes PHP o ASP, y también JavaScript o librerías como jQuery para conseguir 'Una Web'.

HTML

El documento en HTML del inglés HyperText Markup Language o lenguaje de marcas de hipertexto, define la estructura para el contenido de una página web. El contenido sería por ejemplo, texto, imágenes, videos, etc.

CSS

CSS es la sigla en inglés de Cascading Style Sheets, en castellano "Hojas de estilo en cascada". Este lenguaje es el que utilizamos para el diseño de páginas web, nos permiten definir y crear la parte gráfica de la web, es decir, controla la parte visible de la página web. El CSS controla por ejemplo las capas, los colores, iconos, imágenes, las fuentes para los textos y los ‘media queries’.

Media Queries

Las media queries, en español "consultas de medios", son un módulo CSS nivel 3 que nos permiten adaptar la representación del contenido a características del dispositivo como la resolución de pantalla. Es un estándar recomendado por la W3C desde el año 2012, hoy es un principio básico de la tecnología de diseño web responsive.

Una media query consiste de forma básica en una instrucción escrita en lenguaje CSS3 donde una o más expresiones realizan una función según sea verdadera o falsa la condición que especificamos. Veamos esto con un ejemplo: supongamos que necesitamos mostrar una imagen de fondo según un ancho especifíco de pantallas porque queremos que sea diferente para que fluya según el dispositivo y se visualice mejor. Entonces, a través de nuestro documento CSS y gracias a los media queries (@media screen and (min-width:768px) { ... }), nos comunicamos con los dispositivos que visitan nuestra página web realizada con diseño web responsive, y establecemos como condición que muestre la imagen device-big.svg a los dispositivos que accedan a nuestra página web con un ancho de pantalla igual o mayor a a 768 píxeles y los dispositivos inferiores a 768 píxeles que les muestre de fondo la imagen device-small.svg. El código de CSS y su media query para el ejemplo podría ser así:

body{
    /* Pantalla ancho < 768px. Pantalla de Móvil */
    background-image: url(device-small.svg); 

    @media screen and (min-width: 768px) {
        /* Pantalla ancho = ó > 768px. Pantalla de Portátil, etc. */
        background-image: url(device-big.svg);
    }
}

El resultado, sería que un dispositivo móvil tipo smartphone vería en la página web la imagen pequeña (device-small.svg), adecuaríamos visualmente la imagen, mostraríamos una imagen de menor dimensión y menor tamaño, esto será beneficioso para que cargue más rápido y por supuesto la experiencia de usuario sea la óptima. Y los dispositivos como tabletas con pantallas mayores de 768px, o bien ordenadores verían como imagen de fondo la imagen grande (device-big.svg), siempre con un mismo diseño pero adaptado a cada dispositivo.

diseño web responsive
Diseño web responsive ¿Qué es y cómo funciona la web en el móvil?

¿Qué ventajas tiene el diseño web responsive?

Las principales ventajas de que tu web tenga un diseño web responsive son:

  • Mejora la experiencia de usuario:
    • Se visualiza mejor el contenido web.
    • Rápida de cargar, ayuda al posicionamiento.
    • Fácil de usar
    • Navegación más intuitiva, con tamaños apropiados para usar pantallas táctiles.
    • Ayuda a mejorar las ventas si es una web tienda online.
  • Recomendado por Google para el posicionamiento natural en buscadores.
  • A nivel de desarrollo 'Una Web' con un código, sin duplicar contenidos.
  • Reducción de los costes de desarrollo y mantenimiento.
  • Beneficia a la analítica de tu web, con Google Analytics, puesto que te informa del tipo de dispositivos que acceden a tu web y puedes actuar en consecuencia.
  • Se ha visto estadísticamente que ayuda a que se comparta más el contenido a redes sociales cuando el usuario accede desde un dispositivo móvil.

Conclusión

Todos debemos apoyar para que los sitios web se desarrollen con un diseño web responsive, puesto que como ya hemos comentado, permite una visualización cómoda de las páginas web, sin importar el Sistema Operativo (Android, Windows, MacOS, Linux...), ancho de la pantalla o la tecnología del dispositivo.

Todas las empresas deberían adaptarse a las necesidades del consumidor y apostar por mejorar o tener una buena infraestructura TIC (Tecnologías de la Información y la Comunicación) y así conseguir crear nuevas formas de comunicación con sus presentes y futuros clientes.

Sabemos que el desarrollo digital en España es bueno, respecto a la media del resto de los países de la UE pero aun es un reto para un porcentaje importante de las empresas españolas conseguir la digitalización. Cada vez son más los usuarios que se conectan a Internet desde todo tipo de dispositivos, generalmente móviles. Es por ello, que Ailon Webs recomienda a todos sus clientes con empresas que estén en proceso de desarrollar un plan para la transformación digital, que dispongan de web responsive, esto les otorgará también disponer de una web optimizada para móviles.

Si tu web tiene diseño web responsive no perderás visitas y ofrecerás la mejor experiencia a tus usuarios.

En el diseño web todo avanza muy deprisa, desde hace unos años al diseño web responsive de 'One Web' ahora se ha añadido 'Mobile First' o Móvil primero (puedes leer sobre este tema en nuestro artículo Web móvil Mobile First, lo mejor para el SEO 2021), los desarrolladores web debemos tener la capacidad de adaptación y seguir avanzando al ritmo que nos marcan las nuevas incorporaciones tecnológicas.

Vacía tu mente, no tengas forma, ni figura, como el agua.
Si pones agua en una taza, se convierte en la taza.
Si pones agua en una botella, se convierte en la botella, si pones agua en una tetera, se convierte en una tetera.
El agua puede fluir, o puede golpear.
Se agua, amigo mío.

Fuentes

Recibe nuestras promociones

Por favor escriba un email válido
No ha leído y aceptado el aviso de protección de datos

Categorías: Diseño de páginas web

Etiquetas: diseño páginas web, responsive, móvil