Con un acceso cada vez mayor a Internet desde los dispositivos móviles, ya no basta con tener un diseño de sitio web estático que solo se ve bien en la pantalla de un ordenador.

Sin mencionar que también hay que considerar las tabletas, los portátiles 2-en-1 y los diferentes modelos de smartphones con diferentes dimensiones de pantalla a la hora de idear un diseño.

Así que colocar tu contenido en una sola columna y darlo por hecho no va a ser suficiente.

Con un diseño web responsivo, puedes asegurarte de que tu sitio web se vea lo mejor posible en teléfonos móviles, tabletas, ordenadores portátiles y pantallas de escritorio.

Y esa mejora en la experiencia del usuario significa mayores conversiones y crecimiento del negocio.

Esta guía te dará todo lo que necesitas saber sobre el diseño web responsivo, incluyendo definiciones, un recorrido paso a paso, ejemplos y más.

¿Qué es el Diseño Web Responsivo?

El diseño responsivo es un enfoque del diseño web que hace que el contenido de la web se adapte a los diferentes tamaños de pantalla y ventana de una variedad de dispositivos.

Por ejemplo, tu contenido podría estar separado en diferentes columnas en las pantallas de escritorio, porque son lo suficientemente anchas para acomodar ese diseño.

Si separas el contenido en varias columnas en un dispositivo móvil, será difícil que los usuarios lo lean e interactúen con él.

El diseño responsivo permite ofrecer múltiples diseños separados de tu contenido y diseño a diferentes dispositivos dependiendo del tamaño de la pantalla.

No es suficiente que tu sitio web se vea bien en la pantalla de un ordenador. 🖥 Tabletas, portátiles 2-en-1 y teléfonos inteligentes son parte de la ecuación... y esta guía cubre todo lo que necesitas saber sobre el diseño responsivo 🤳Click to Tweet

Diseño Web Responsivo vs. Diseño Adaptativo

La diferencia entre el diseño responsivo y el diseño adaptativo es que el diseño responsivo adapta la representación de una única versión de la página. Por el contrario, el diseño adaptativo entrega múltiples versiones completamente diferentes de la misma página.

Diseño sensible vs. adaptable

Diseño Responsivo vs. adaptativo

Ambas son tendencias de diseño web importantes que ayudan a los webmasters a controlar cómo se ve su sitio en diferentes pantallas, pero el enfoque es diferente.

Con un diseño responsivo, los usuarios accederán al mismo archivo básico a través de su navegador, sin importar el dispositivo, pero el código CSS controlará el diseño y lo renderizará de forma diferente según el tamaño de la pantalla. Con el diseño adaptativo, hay un script que comprueba el tamaño de la pantalla, y luego accede a la plantilla diseñada para ese dispositivo.

Por qué es importante el diseño responsivo

Si eres nuevo en el diseño web, el desarrollo o los blogs, te preguntarás por qué es importante un diseño responsivo en primer lugar.

La respuesta es simple. Ya no basta con diseñar para un solo dispositivo. El tráfico web móvil ha sobrepasado el del escritorio y ahora constituye la mayoría del tráfico del sitio web, representando más del 51%.

Mobile, tablet, desktop market share

Cuota de mercado de los móviles, tabletas y ordenadores de escritorio

Cuando más de la mitad de tus visitantes potenciales usan un dispositivo móvil para navegar por Internet, no puedes simplemente servirles una página diseñada para el escritorio. Sería difícil de leer y usar, y conllevaría a una mala experiencia de usuario.

Pero eso no es todo. Los usuarios de dispositivos móviles también constituyen la mayoría de las visitas a los motores de búsqueda.

Tráfico de búsqueda móvil

Tráfico de búsqueda móvil

Finalmente, en los últimos años, el móvil se ha convertido en uno de los canales publicitarios más importantes. Incluso en un mercado post-pandémico, el gasto en publicidad móvil está creciendo un 4,8% hasta los 91.520 millones de dólares.

Tanto si eliges anunciarte en los medios sociales como si utilizas un enfoque orgánico como el SEO de YouTube, la gran mayoría de tu tráfico provendrá de los usuarios de móviles.

Si tus páginas de destino no están optimizadas para el móvil y no son fáciles de usar, no podrás maximizar el retorno de la inversión de tus esfuerzos de marketing. Las malas tasas de conversión conducirán a menos clientes potenciales y a un desperdicio de la inversión publicitaria.

¿Son responsivos los sitios de WordPress?

Si los sitios de WordPress son responsivos o no, depende del tema de tu sitio WP. Un tema de WordPress es el equivalente a una plantilla para un sitio web estático y controla el diseño y la disposición de tu contenido.

Si utilizas un tema predeterminado de WordPress, como Twenty Twenty, el diseño es responsivo, pero como es un diseño de una sola columna, es posible que no te des cuenta al mirarlo en diferentes pantallas.

Si utilizas otro tema de WordPress, puedes comprobar si es responsivo o no comparando su aspecto en distintos dispositivos o utilizando Chrome Developer Tools.

Los bloques de construcción del Diseño Web Responsivo

En esta sección, cubriremos la base subyacente para el diseño de sitios web responsivos y sus diferentes bloques de construcción.

CSS y HTML

La base del diseño responsivo es la combinación de HTML y CSS, dos lenguajes que controlan el contenido y el diseño de una página en cualquier navegador web.

HTML vs CSS

HTML vs. CSS (Fuente de la imagen: codingdojo.com)

El HTML controla principalmente la estructura, los elementos y el contenido de una página web. Por ejemplo, para añadir una imagen a una página web, tienes que usar código HTML como este:

<img src="image.gif" alt="image" class=”full-width-img”>

Puedes establecer una «clase» o un «id» que luego puedes atacar con el código CSS.

También puedes controlar atributos primarios como la altura y el ancho dentro de su HTML, pero esto ya no se considera la mejor opción.

En cambio, el CSS se utiliza para editar el diseño y la disposición de los elementos que se incluyen en una página con HTML. El código CSS puede ser incluido en una sección <style> de un documento HTML, o como un archivo de hoja de estilo separado.

Por ejemplo, podríamos editar el ancho de todas las imágenes HTML en el nivel de elemento como este:

img {
width: 100%;
}

O podríamos apuntar a la clase específica «full-width-img» añadiendo un punto al frente.

.full-width-img {
width: 100%;
}

También puedes controlar el diseño más allá de la altura, anchura y color. Usando CSS así es como haces que un diseño responda cuando lo combinas con una técnica llamada «media query».

Media Queries

Una media query es una parte fundamental de CSS3 que te permite renderizar el contenido para adaptarlo a diferentes factores como el tamaño de la pantalla o la resolución.

media queries - responsive web design

Media queries para desktop, tableta, teléfono inteligente

Funciona de manera similar a una cláusula «if» en algunos lenguajes de programación, básicamente comprobando si la vista de una pantalla es lo suficientemente amplia o demasiado amplia antes de ejecutar el código apropiado.

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

Si la pantalla tiene al menos 780 píxeles de ancho, las imágenes de la clase «full-width-img» ocuparán el 90% de la pantalla y serán centradas automáticamente por márgenes igualmente amplios.

Diseño Líquido

Un diseño líquido es una parte esencial del diseño responsivo moderno. En los viejos tiempos, se establecía un valor estático para cada elemento HTML, como 600 píxeles.

Un diseño líquido depende en cambio de valores dinámicos como un porcentaje del ancho de la vista.

Ejemplo de disposición de fluidos

Ejemplo de diseño líquido

Este enfoque aumentará o disminuirá dinámicamente los diferentes tamaños de los elementos del contenedor en función del tamaño de la pantalla.

Diseño Flexbox

Mientras que un diseño basado en porcentajes es el líquido, muchos diseñadores y desarrolladores de web sintieron que no era lo suficientemente dinámico o flexible. Flexbox es un módulo CSS diseñado como una forma más eficiente de diseñar múltiples elementos, incluso cuando se desconoce el tamaño del contenido dentro del contenedor.

Un contenedor flexible expande los artículos para llenar el espacio libre disponible o los encoge para evitar que se desborden. Estos contenedores flexibles tienen una serie de propiedades únicas, como el contenido de justificación, que no se puede editar con un elemento HTML normal.

Contenedor Flexbox

Contenedor Flexbox

Es un tema complicado, así que si quieres usarlo en tu diseño, deberías leer la guía de trucos de CSS para flexbox.

Imágenes Responsivas

La iteración más básica de imágenes responsivas sigue el mismo concepto que un diseño líquido, utilizando una unidad dinámica para controlar el ancho o la altura. El código CSS de muestra que hemos cubierto anteriormente ya logra esto:

img {
width: 100%;
}

La unidad de porcentaje se aproxima a un solo porcentaje de la anchura o la altura de la pantalla y asegura que la imagen permanezca en proporción con la pantalla.

El problema de este enfoque es que cada usuario tiene que descargar la imagen a tamaño completo, incluso en el móvil.

Para servir diferentes versiones escaladas para diferentes dispositivos, es necesario utilizar el atributo HTML srcset en sus etiquetas img, para especificar más de un tamaño de imagen a elegir.

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg  320w"
src="small.jpg"
/>

WordPress utiliza automáticamente esta funcionalidad para las imágenes incluidas en los mensajes o páginas.

Velocidad

Cuando intentas crear un diseño que responda a las necesidades de tu sitio web, la velocidad de carga debe ser una prioridad.

Las páginas que se cargan en 2 segundos tienen un promedio de 9% de tasa de rebote, mientras que las páginas que toman 5 segundos llevan a una tasa de rebote de 38%.

Tu enfoque de la respuesta no debe bloquear o retrasar la primera presentación de tu página más de lo necesario.

Hay varias maneras de hacer que tus páginas sean más rápidas. Optimizar tus imágenes, implementar el caching, la minificación, usar un diseño CSS más eficiente, evitar el bloqueo del renderizado JS, y mejorar tu ruta de renderización crítica son todas grandes ideas que deberías considerar.

También podrías intentar implementar Google AMP para tus páginas móviles, pero en nuestro caso de estudio de Google AMP, nuestras oportunidades para móviles cayeron un enorme 59%.

Puntos de ruptura Responsivas comunes

Para trabajar con las media queries, hay que decidir los «puntos de ruptura responsivas» o los puntos de ruptura del tamaño de la pantalla. Un punto de ruptura es el ancho de la pantalla en el que se utiliza media query para implementar nuevos estilos CSS.

Tamaños de pantalla comunes

Si eliges un enfoque de diseño de primero para móvil, con una sola columna y tamaños de fuente más pequeños como base, no es necesario incluir puntos de ruptura móviles – a menos que quieras optimizar el diseño para modelos específicos.

Diseño de Mobile-first

Diseño de Mobile-first (Fuente de la imagen: silocreativo.com)

Así que puedes crear un diseño básico de respuesta con solo dos puntos de ruptura, uno para tabletas y otro para portátiles y ordenadores de escritorio.

Los puntos de ruptura Responsivos de Bootstrap

Como uno de los primeros y más populares marcos responsivos, Bootstrap lideró el asalto al diseño estático de la web y ayudó a establecer el diseño de los primeros móviles como un estándar de la industria.

Como resultado, muchos diseñadores hasta el día de hoy siguen los puntos de ruptura de la pantalla de Bootstrap.

Los puntos de ruptura de respuesta de Bootstrap

Los puntos de ruptura Responsivos de Bootstrap

Utilizan media queries para apuntar a teléfonos apaisados (576px), tabletas (768px), portátiles (992px) y pantallas de escritorio extra grandes (1200px).

Cómo hacer que su sitio web sea Responsiva

Ahora que estás familiarizado con los bloques de construcción, es hora de hacer que tu sitio web sea Responsiva.

Establece tus parámetros de media query (puntos de ruptura responsivos)

Establece tus intervalos de media query basados en las necesidades únicas de tu diseño. Por ejemplo, si quisiéramos seguir los estándares de Bootstrap para nuestro diseño, utilizaríamos las siguientes:

Ajusta el tamaño de los elementos de la estructura con porcentajes o crea una estructura de cuadrícula CSS

El primer paso y el más importante es establecer diferentes tamaños para los distintos elementos de diseño en función del media query o del punto de ruptura de la pantalla.

El número de contenedores de diseño que tengas dependerá del diseño, pero la mayoría de los sitios web se centran en los elementos que se enumeran a continuación:

Diseño común

Diseño común

Utilizando un enfoque de «primero los móviles», puedes estilizar los elementos principales estructura de esta manera (sin media query para los estilos básicos de los teléfonos móviles):

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%;  margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%;  margin: 0 auto; }

}

En un enfoque basado en porcentajes, el atributo «flotante» controla en qué lado de la pantalla aparecerá un elemento, a la izquierda o a la derecha.

Si quieres ir más allá de lo básico y crear un diseño responsivo de vanguardia, necesitas familiarizarte con el diseño de la caja flexible de CSS y sus atributos como el tamaño de la caja y el flex.

Implementar imágenes responsivas

Una forma de asegurarse de que tus imágenes no se rompan es simplemente usar un valor dinámico para todas las imágenes, como hemos cubierto antes.

¿Necesitas un alojamiento rápido, seguro y fácil de desarrollar para los sitios de tus clientes? Kinsta está construido con los desarrolladores de WordPress en mente y proporciona un montón de herramientas y un potente panel de control. Mira nuestros planes

img {
width: 100%;
}

Pero eso no reducirá la carga de los visitantes con móvil cuando accedan a tu sitio web.

Asegúrate de incluir siempre un srcset que con diferentes tamaños de tu foto cuando añadas imágenes a tus páginas.

Hacerlo manualmente puede llevar bastante tiempo, pero con un CMS como WordPress, ocurre automáticamente cuando subes archivos de medios.

Tipografía Responsiva para el texto de tu sitio web

El enfoque principal del diseño web responsiva está en la capacidad de respuesta de los bloques de diseño, los elementos y los medios de comunicación. El texto es a menudo tratado como un asunto de última hora.

Pero para un diseño verdaderamente responsivo, también debes ajustar el tamaño de la fuente de manera apropiada para que coincidan con el tamaño de la pantalla.

La forma más fácil de hacerlo es establecer un valor estático para el tamaño de la fuente, como 22 px, y adaptarlo en cada media query.

El tamaño de la fuente vs. el tamaño de la vista de los puntos de dispersión

El tamaño de la fuente vs. el tamaño de la vista de los puntos de dispersión

Puedes apuntar a varios elementos de texto al mismo tiempo usando una coma para separar cada uno.

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

Prueba de optimización

Primero, quieres probar si tu sitio es amigable para los móviles con la prueba de Google para móviles. Introduce la URL de tu sitio web y haz clic en el botón «probar URL» para obtener los resultados.

La prueba de Google para móviles

La prueba de Google para móviles

No te preocupes si tarda un poco en llegar a tu sitio. Eso no refleja la velocidad de carga de tu página.

Si has seguido los pasos descritos en este artículo, debería indicarte que tienes un sitio web apto para móviles.

Luego quieres probar tu sitio en múltiples tamaños de pantalla con una herramienta como Chrome developer tools.

Presiona CTRL + Shift + I en ordenadores Windows, o Comando + Opción + I en Macs para abrir la vista del dispositivo correspondiente. Desde aquí, puedes seleccionar el dispositivo móvil o la tableta que deseas para probar la capacidad de respuesta de tu diseño.

Probando los diseños de respuesta y móviles en Chrome

Probando los diseños de respuesta y móviles en Chrome

Hay un par de preguntas que quieres responder cuando pases por este proceso.

Unidades y valores del CSS para el diseño responsivo

El CSS tiene unidades de medida tanto absolutas como relativas. Un ejemplo de una unidad de longitud absoluta es un cm o un px. Las unidades relativas o los valores dinámicos dependen del tamaño y la resolución de la pantalla o del tamaño de la fuente del elemento raíz.

PX vs. EM vs. REM vs. Viewport Units para el diseño responsivo

Un nuevo diseñador o desarrollador web probablemente debería atenerse a los píxeles para el texto porque son la unidad de longitud más directa en el CSS.

Pero al establecer el ancho y el ancho máximo de las imágenes y otros elementos, usar % es la mejor solución. Este enfoque asegurará que los componentes se ajusten al tamaño de la pantalla de cada dispositivo.

Ejemplos de diseño responsivo

A continuación, cubriremos algunos ejemplos de diseño web responsivo de diferentes industrias – y aprenderemos de los que hacen bien y mal.

1. Periódico en línea: New York Times

NYT en el móvil, tableta y portátil

NYT en el móvil, tableta y portátil

En el escritorio, el diseño del NYT recuerda a un periódico tradicional, lleno de imágenes y diferentes filas y columnas de contenido. Parece haber una columna o fila separada para cada categoría de noticias.

En el móvil, se ajusta a la norma de una sola columna y también ajusta el menú para que esté en el formato de acordeón para que sea más fácil de usar.

2. Blog: The Art of Non-Conformity

El arte de la inconformidad en el móvil, el tablet y el portátil

El arte de la inconformidad en el móvil, el tablet y el portátil

El blog de Chris Guillebeau “The Art of Non-Conformity” ha estado funcionando con fuerza por más de una década. Aunque el diseño no es el más vanguardista, es sensible y adapta la barra lateral de dos columnas y el diseño del contenido principal a un diseño de una sola columna en los dispositivos móviles.

3. Comercio electrónico: Amazon

Amazon en el móvil, la tableta y el portátil

Amazon en el móvil, la tableta y el portátil

Amazon es un líder mundial en el comercio electrónico por una razón, su interfaz de usuario es perfectamente fluida en todos los dispositivos.

El diseño para la tableta simplemente elimina parte del espacio en blanco y añade una sección de iconos que se puede desplazar para que quepa más contenido en un paquete más pequeño.

El diseño para el móvil lo reúne en una sola columna, centrándose en lo esencial, como el historial de compras recientes, en lugar de los diferentes iconos de enlaces de la sección de su página principal.

4. Sitio de video: YouTube

YouTube en el móvil, la tableta y el portátil

YouTube en el móvil, la tableta y el portátil

El núcleo del diseño de la página de inicio de YouTube es una cuadrícula flexible de videos que son relevantes para cada usuario. En las tabletas, el número de columnas en cada fila baja a tres. En los móviles, se reduce a un diseño de una sola columna.

La versión móvil también mueve el menú principal a la parte inferior de la pantalla, más cerca de los pulgares de sus usuarios de smartphones. Este simple movimiento mejora la navegación y el UX.

5. Revista en línea: Wired

Conectado a un móvil, una tableta y un portátil

Conectado a un móvil, una tableta y un portátil

El enfoque de Wired para un diseño web responsivo se centra en la implementación de un diseño de una sola columna en todas las pantallas pequeñas, comenzando con las tabletas.

Es un diseño básico, pero hace más fácil atraer la atención del usuario a las historias principales y su CTA para suscribirse.

¡Asegúrate de que tu sitio web tenga un aspecto impresionante ✨ a través de los dispositivos con esta guía de diseño responsivo!Click to Tweet

Resumen

Hay un montón de elementos diferentes que entran en el diseño de una web responsiva. Sin un entendimiento básico de HTML y CSS, puede ser fácil cometer errores.

Pero a través de la familiarización con los diferentes bloques de construcción, el análisis de los ejemplos con herramientas de desarrollo web, y la prueba a medida que se utiliza el código de muestra, deberías ser capaz de hacer que tu sitio web responda sin ningún problema importante.

Si eso te parece demasiado, siempre puedes contratar un desarrollador de WordPress o simplemente asegurarte de que tu tema ya sea responsivo.


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes