El diseño responsivo, también diseño responsive, es un tipo de desarrollo de páginas web que permite su óptima visualización en distintos tipos de dispositivos finales. El término diseño responsivo es tan antiguo como la web móvil y se generalizó en torno a 2013.
Antes de la llegada de la web móvil, el panorama de los dispositivos finales con acceso a Internet era relativamente homogéneo: existían los ordenadores portátiles y los de sobremesa, que eran muy similares en cuanto a medios de entrada y salida. Ambos tipos de dispositivos contaban con un teclado, un ratón o un trackpad, y una pantalla con una anchura de 1000-2000 píxeles.
En aquel entonces no era necesario hacer ningún esfuerzo especial para desarrollar una página web que se visualizara correctamente en cualquier dispositivo. La solución más sencilla era limitar el ancho de una página al mínimo común denominador. Un enfoque popular era mostrar las páginas con 800 píxeles de ancho y centradas o justificadas a la izquierda. En pantallas más grandes, podía haber algún espacio en blanco extra, pero las páginas eran fáciles de leer en todos los dispositivos.
Esto cambió con la llegada de los dispositivos móviles y la importante diversificación de los dispositivos finales. Las pantallas de los smartphones y las tabletas difieren de las de los ordenadores de sobremesa en varios aspectos. Las dimensiones de los píxeles juegan ahora un papel importante y la resolución física (píxeles por pulgada o ppi) también entró en escena con la llegada de las pantallas retina. Y, por supuesto, estos dispositivos se manejan con el dedo en lugar de con el ratón. Además de los teléfonos inteligentes y las tabletas, también han aparecido en el mercado grandes monitores de alta resolución, lo que significa que una página web moderna tiene que funcionar en pantallas con anchos que van desde 320 píxeles hasta más de 4000 píxeles.
| Pantalla más pequeña | Pantalla más grande | Factor | |
|---|---|---|---|
| Antes de la web móvil | ~1000 píxeles | ~2000 píxeles | ~2 |
| Después de la web móvil | ~320 píxeles | > 4000 píxeles | > 10 |
Una página web responsiva se ajusta al espacio disponible en una pantalla. A menudo se habla de “espacio en pantalla” en este contexto. Una página web debe verse bien en todos los dispositivos y garantizar una experiencia de usuario óptima (UX).
El diseño responsivo abarca una amplia gama de tecnologías y enfoques que se combinan para desarrollar una página web totalmente responsiva. Esto incluye:
Utiliza el IONOS editor de páginas web para hacer tu propia página web responsiva - sin necesidad de conocimientos previos.
El diseño de una página web responsiva ofrece varias ventajas. La principal consideración es la experiencia del usuario (UX). En teoría, se puede implementar una buena UX sin diseño responsivo, pero eso requeriría una página móvil propia o el uso de JavaScript. En definitiva, este tipo de enfoque sería mucho más complejo que un diseño adaptable basado en CSS y requeriría más mantenimiento.
El diseño de una página web desempeña un papel importante en la forma en que los visitantes perciben la información presentada en la página. Un buen diseño refleja la identidad de la organización que está detrás de la página web y ayuda a conectar al usuario con su marca. Los visitantes deben tener una experiencia positiva al visitar su página web. Veamos dos ejemplos de la importancia del diseño responsivo para la experiencia del usuario:
En general, una página web no responsiva se mostrará en la pequeña pantalla de un dispositivo móvil exactamente igual que en un ordenador de sobremesa, solo que más pequeño. Esto obliga al usuario a ampliar las partes individuales de la página. Por lo tanto, es mucho mejor ofrecer una versión optimizada. Un par de ejemplos:
Cada vez son más los usuarios que navegan por Internet en dispositivos móviles. Decidirse por una página web responsiva tiene importantes desventajas. Algunos ejemplos notables son:
En nuestro artículo “Responsive Test: 8 herramientas para probar el diseño responsivo de tu web”, presentamos ocho herramientas gratuitas para probar el diseño responsivo de tu página web.
El diseño responsivo incluye varios enfoques y tecnologías. Suelen existir varias soluciones para los diferentes escenarios que puedan surgir. El desarrollo todavía está en proceso de cambio.
Desde los inicios de Internet, implementar diseños complejos en las webs ha sido una ciencia. El lenguaje HTML tiene varios tipos de elementos que se comportan de forma diferente en función del diseño. Veamos en particular los tipos de elementos block, inline e inline-block. Los elementos de bloque ocupan todo el ancho disponible y aparecen uno encima de otro. Los elementos en línea solo ocupan el espacio que necesitan para su contenido y aparecen uno al lado del otro. Esta tabla debería dar una visión general de los elementos relevantes en el diseño responsivo.
| Tipo de elemento | Anchura | Flujo de elementos |
|---|---|---|
| block | Toda la anchura disponible o la asignada | Columna |
| inline | Anchura de los elementos que contiene | Fila |
| inline-block | Anchura de los elementos que contiene o anchura asignada | Fila |
| flex | Toda la anchura disponible | Fila o columna |
| grid | Toda la anchura disponible | Disposición compleja |
La implementación de un diseño suele requerir que los elementos del bloque se coloquen uno al lado del otro. Hay varias formas de conseguirlo. Antes de la llegada de CSS, los diseños basados en tablas eran el estándar; la llegada de CSS trajo consigo los diseños flotantes. Hoy, CSS Flexbox se utiliza para diseños simples basados en columnas o filas y el CSS Grid para diseños más complejos. Las dimensiones relativas de CSS se utilizan en todos los casos, para permitir la variación del número de elementos mostrados uno al lado del otro.
Un buen ejemplo: imaginemos una página con cuatro elementos de vista previa para las entradas del blog. Cada uno de los elementos de vista previa contiene una imagen, un título, un teaser y un botón de “Leer más”. Con Flexbox, se puede implementar fácilmente el siguiente diseño responsivo:
Este es un ejemplo de implementación con clases del marco CSS responsivo Tachyons. Para cada contenedor de vista previa definimos las clases “w-100 w-50-m w-25-l”. Los cuatro contenedores de vista previa están en un contenedor etiquetado como “flex-wrap”.
<div class="“flex" flex-wrap”></div>
<div class="“w-100" w-50-m w-25-l”></div>
<div class="“blog--preview”">…</div>
<div class="“w-100" w-50-m w-25-l”></div>
<div class="“blog--preview”">…</div>
<div class="“w-100" w-50-m w-25-l”></div>
<div class="“blog--preview”">…</div>
<div class="“w-100" w-50-m w-25-l”></div>
<div class="“blog--preview”">…</div>
A veces tiene sentido mostrar un elemento solo en pantallas de un determinado tamaño. Por ejemplo, los datos tabulados se muestran como una tabla en HTML utilizando la etiqueta <table>. Sin embargo, dependiendo del tamaño de la tabla, puede ser difícil adaptarla correctamente para una pantalla pequeña. Ahí es donde entra en juego un sencillo truco: indicar al usuario que gire su dispositivo para crear el espacio suficiente para que se muestre la tabla. Este texto, por supuesto, solo debe aparecer en los dispositivos de pantalla pequeña cuando el dispositivo se mantiene verticalmente.
Los elementos pueden ocultarse fácilmente utilizando la propiedad CSS display: none. Con una Consulta de medios CSS especial, se puede consultar tanto el ancho de la pantalla como la orientación del dispositivo. El texto adicional debe aparecer solo si la anchura de la pantalla es inferior a 640 píxeles cuando se muestra en vertical. En caso contrario, el elemento debe estar oculto:
@media screen and (min-width: 640px) and (orientation: landscape) {
.dn-landscape-ns { display: none; }
}Cuando se combina con el siguiente código HTML, la función está completa:
<p class=“dn-landscape-ns”>
Por favor, gira tu dispositivo para ver la tabla.
</p>
<table>
<!-- wide table -->
</table>Para que la experiencia del usuario sea óptima, el tamaño de la fuente de los elementos de texto debe adaptarse a la pantalla que se utilice. Existen varias técnicas de diseño responsivo para implementar esto.
El ingrediente básico es el elemento CSS rem (“root element” o “elemento raíz”), que vincula el tamaño de la fuente de un elemento proporcionalmente al elemento HTML “raíz”. Para escalar el texto de forma coherente, basta con adaptar el tamaño de la fuente del elemento “raíz” mediante puntos de rotura CSS.
Veamos un ejemplo. En primer lugar, de acuerdo con el enfoque “mobile first”, estableceremos los tamaños de las fuentes para las pantallas pequeñas:
/* mobile first */
html {
font-size: 16px;
}
h1 {
/* corresponds to 3 * 16px = 48px */
font-size: 3rem;
}A continuación, ajustaremos el tamaño de la fuente del elemento HTML para pantallas más grandes. Dado que el tamaño de los encabezados H1 se define mediante rem, se escalará automáticamente:
/* 'not-small' breakpoint */
@media screen and (min-width: 30em) {
html {
font-size: 18px;
/* H1 then has font size 3 * 18px = 54px */
}
}Otro enfoque popular es utilizar las unidades CSS vh y vw para adaptar de forma fluida el tamaño de la fuente a la altura o anchura de la pantalla. En teoría, este enfoque no requiere puntos de ruptura, pero a veces puede hacer que el texto aparezca diminuto en pantallas pequeñas. En este caso, puedes implementar puntos de interrupción selectivos o utilizar la función CSS calc para establecer un tamaño de fuente mínimo.
Para optimizar los encabezados que llenan toda la pantalla en dispositivos pequeños, hay un enfoque que no utiliza CSS. Se supone que los encabezados atraen la vista hacia ellos. Esto facilita que el usuario entienda rápidamente el contenido de una página. Sin embargo, esto a veces puede dar lugar a problemas de visualización, especialmente cuando se trata de palabras más largas. Con las indicaciones HTML “espacio no divisible” ( ) y “guión alto” (­), podemos definir dónde debe dividirse una palabra.
Además del diseño y la tipografía, las imágenes adaptativas son una parte importante del diseño responsivo. Obviamente, no tendría sentido cargar una imagen de 1920 píxeles de longitud en una pantalla de solo 400 píxeles de ancho. Por un lado, la imagen grande tendría que reducirse en el navegador, utilizando una buena cantidad de potencia de cálculo. Además, el tamaño del archivo de la imagen aumenta cuadriculadamente con el tamaño de su lado más largo.
Una imagen con dimensiones de 1920 x 1080 píxeles ocupará cuatro veces más espacio que una de 960 x 540 píxeles. Además, la imagen tardará mucho más en cargarse en un dispositivo móvil. Con todo esto, está claro que las imágenes no adaptativas tienen un efecto muy negativo en el rendimiento y la usabilidad de una web.
| Dimensiones de la imagen | Tamaño de la pantalla | Efecto |
|---|---|---|
| Imagen pequeña | Pantalla grande | La imagen se carga rápidamente y aparece pixelada |
| Imagen grande | Pantalla pequeña | La imagen se carga lentamente, aparece nítida y provoca un mal rendimiento en el sitio |
| Imagen grande | Pantalla grande | La imagen se carga lentamente, aparece nítida y tiene un rendimiento óptimo |
| Imagen pequeña | Pantalla pequeña | La imagen se carga rápidamente, aparece nítida y tiene un rendimiento óptimo |
La introducción de HTML5 trajo consigo dos nuevos atributos para la etiqueta <img>. Los atributos srcset y sizes se utilizan para definir varios archivos para una imagen, también denominados “activos”. Cada archivo individual se adjunta a la consulta de un elemento multimedia CSS. De este modo, el navegador puede cargar una imagen de la lista de activos disponibles que sea óptima para el dispositivo en cuestión.
Veamos un breve ejemplo. El siguiente código HTML define una imagen para la que hay dos activos que se han definido con srcset: uno con una longitud de 480 píxeles y otro con una longitud de 800 píxeles. También se ha determinado mediante tamaños que la imagen de 480 píxeles debe utilizarse en pantallas con una anchura de hasta 600 píxeles. En caso contrario, el navegador debería cargar la imagen de 800 píxeles.
<img srcset=“img-480w.jpg 480w,
img-800w.jpg 800w”
sizes=“(max-width: 600px) 480px,
800px”
src=“img-800w.jpg”>Tradicionalmente, las pantallas eran más anchas que altas. Hoy en día, las pantallas de los smartphones son más altas que anchas. Las imágenes en formato apaisado aparecen relativamente pequeñas en las pantallas de los smartphones o cualquier otra pantalla en formato vertical. Para obtener un mejor resultado, debes utilizar una imagen cuadrada o en formato vertical que hayas recortado tú mismo. La elección de los distintos cortes de una imagen se denomina “dirección artística”. Esto se puede implementar con el elemento HTML5 <picture>. El elemento <picture> permite definir varias imágenes equivalentes para diversos casos de uso.
Veamos un ejemplo. El siguiente código HTML define un elemento <picture> que establece varios activos para el formato horizontal y vertical. En ambos casos, hay diferentes versiones optimizadas para varios tamaños de pantalla:
<picture>
<source
media=“(orientation: landscape)”
srcset=“img-small-lndscp.png 320w,
img-large-lndscp.png 1200w”
sizes=“(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw”>
<source
media=“(orientation: portrait)”
srcset=“img-small-prt.png 160w,
img-small-prt.png 600w”
sizes=“(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw”>
<img src=“img-small.png” alt=“Image description”>
</picture>Tradicionalmente, la navegación de una página web se muestra en la parte superior de la página, normalmente como una lista horizontal de menús con submenús que se abren al pasar el ratón. Este tipo de navegación es claramente inadecuado para los dispositivos móviles: no hay suficiente espacio y no hay ratón.
Hay varios enfoques para abordar la navegación en los dispositivos móviles. Todos ellos ahorran espacio y no requieren un ratón. La atención del usuario suele dirigirse a la navegación con una animación. Los enfoques más populares para la navegación responsiva incluyen:
En Internet se encuentran gran cantidad de textos con diferentes tipos de letra. La expansión del diseño web responsivo también influye en la tipografía web, ya que la representación de la letra debería ajustarse siempre a la pantalla del dispositivo que se usa para asegurar la legibilidad de los contenidos. Una tipografía capaz de responder a estos ajustes debe ser flexible y usar las fuentes que...
Los requisitos a la hora de crear páginas web han aumentado considerablemente en los últimos años, sobre todo en lo referente a un aspecto en concreto: su adaptabilidad. Ya no es necesario que las páginas web puedan visualizarse debidamente solo en los ordenadores de escritorio y que se pueda navegar por ellos de una manera ideal, sino que la experiencia de los usuarios en otros terminales también...
La gran cantidad de comandos que contiene un lenguaje de programación como CSS puede suponer un desafío. No te preocupes: en nuestro artículo resumen sobre CSS padding vs. margin aprenderás las diferencias más importantes entre estos dos comandos de diseño. También te presentaremos el famoso modelo de cajas para que puedas distinguir fácilmente estos dos comandos CSS.
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver planes