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.
Consulta nuestro videotutorial sobre el Diseño Web Responsivo:
¿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.
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.
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%.
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.
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.
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.
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.
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.
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.
Los clientes de Kinsta tienen acceso a una manera rápida y fácil de conseguirlo utilizando la función de minificación de código que está integrada en el panel de control de MyKinsta, permitiendo a los clientes habilitar la minificación automática de CSS y JavaScript con un solo clic.
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
- Móvil: 360 x 640
- Móvil: 375 x 667
- Móvil: 360 x 720
- iPhone X: 375 x 812
- Pixel 2: 411 x 731
- Tableta: 768 x 1024
- Un ordenador portátil: 1366 x 768
- Un ordenador portátil o desktop de alta resolución: 1920 x 1080
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.
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.
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:
- 576px para teléfonos móviles
- 768px para las tabletas
- 992px para portátiles
- 1200px para los grandes dispositivos
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:
- Envoltorio o contenedor
- Encabezado
- Contenido
- Columna Lateral
- Pie de página
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.
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.
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.
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.
Hay un par de preguntas que quieres responder cuando pases por este proceso.
- ¿Se ajusta el diseño a la cantidad correcta de columnas?
- ¿El contenido encaja bien dentro de los elementos de diseño y los contenedores en diferentes pantallas?
- ¿Los tamaños de las fuentes se ajustan a cada pantalla?
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
- PX – un solo pixel
- EM – unidad relativa basada en el tamaño de la fuente del elemento.
- REM – unidad relativa basada en el tamaño de la fuente del elemento.
- VH, VW – % de la altura o anchura del mirador.
- el porcentaje del elemento padre.
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
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 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 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
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
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.
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.
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta