{"id":36115,"date":"2020-09-17T02:23:18","date_gmt":"2020-09-17T09:23:18","guid":{"rendered":"https:\/\/kinsta.com\/?p=78861&preview=true&preview_id=78861"},"modified":"2025-02-17T14:57:35","modified_gmt":"2025-02-17T13:57:35","slug":"diseno-de-paginas-web-sensibles","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/","title":{"rendered":"La Gu\u00eda para Principiantes del Dise\u00f1o Web Responsivo (muestras de c\u00f3digos y ejemplos de dise\u00f1o)"},"content":{"rendered":"

Con un acceso cada vez mayor a Internet desde los dispositivos m\u00f3viles, ya no basta con tener un dise\u00f1o de sitio web est\u00e1tico<\/a> que solo se ve bien en la pantalla de un ordenador.<\/p>\n

Sin mencionar que tambi\u00e9n hay que considerar las tabletas, los port\u00e1tiles 2-en-1 y los diferentes modelos de smartphones con diferentes dimensiones de pantalla a la hora de idear un dise\u00f1o.<\/p>\n

As\u00ed que colocar tu contenido<\/a> en una sola columna y darlo por hecho no va a ser suficiente.<\/p>\n

Con un dise\u00f1o web<\/a> responsivo, puedes asegurarte de que tu sitio web se vea lo mejor posible en tel\u00e9fonos m\u00f3viles, tabletas, ordenadores port\u00e1tiles y pantallas de escritorio.<\/p>\n

Y esa mejora en la experiencia del usuario significa mayores conversiones y crecimiento del negocio.<\/p>\n

Esta gu\u00eda te dar\u00e1 todo lo que necesitas saber sobre el dise\u00f1o web responsivo, incluyendo definiciones, un recorrido paso a paso, ejemplos y m\u00e1s.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Consulta nuestro videotutorial sobre el Dise\u00f1o Web Responsivo:<\/h3>\n<\/kinsta-video>\n

\u00bfQu\u00e9 es el Dise\u00f1o Web Responsivo?<\/h2>\n

El dise\u00f1o responsivo es un enfoque del dise\u00f1o web que hace que el contenido de la web se adapte a los diferentes tama\u00f1os de pantalla y ventana de una variedad de dispositivos.<\/p>\n

Por ejemplo, tu contenido podr\u00eda estar separado en diferentes columnas en las pantallas de escritorio, porque son lo suficientemente anchas para acomodar ese dise\u00f1o.<\/p>\n

Si separas el contenido en varias columnas en un dispositivo m\u00f3vil, ser\u00e1 dif\u00edcil que los usuarios lo lean e interact\u00faen con \u00e9l.<\/p>\n

El dise\u00f1o responsivo<\/a> permite ofrecer m\u00faltiples dise\u00f1os separados de tu contenido y dise\u00f1o a diferentes dispositivos dependiendo del tama\u00f1o de la pantalla.<\/p>\n\n

Dise\u00f1o Web Responsivo vs. Dise\u00f1o Adaptativo<\/h2>\n

La diferencia entre el dise\u00f1o responsivo y el dise\u00f1o adaptativo es que el dise\u00f1o responsivo adapta la representaci\u00f3n de una \u00fanica versi\u00f3n de la p\u00e1gina. Por el contrario, el dise\u00f1o adaptativo entrega m\u00faltiples versiones completamente diferentes de la misma p\u00e1gina.<\/p>\n

\"Dise\u00f1o
Dise\u00f1o Responsivo vs. adaptativo<\/figcaption><\/figure>\n

Ambas son tendencias de dise\u00f1o web<\/a> importantes que ayudan a los webmasters a controlar c\u00f3mo se ve su sitio en diferentes pantallas, pero el enfoque es diferente.<\/p>\n

Con un dise\u00f1o responsivo, los usuarios acceder\u00e1n al mismo archivo b\u00e1sico a trav\u00e9s de su navegador, sin importar el dispositivo, pero el c\u00f3digo CSS<\/a> controlar\u00e1 el dise\u00f1o y lo renderizar\u00e1 de forma diferente seg\u00fan el tama\u00f1o de la pantalla. Con el dise\u00f1o adaptativo, hay un script que comprueba el tama\u00f1o de la pantalla, y luego accede a la plantilla dise\u00f1ada para ese dispositivo.<\/p>\n

Por qu\u00e9 es importante el dise\u00f1o responsivo<\/h2>\n

Si eres nuevo en el dise\u00f1o web, el desarrollo<\/a> o los blogs<\/a>, te preguntar\u00e1s por qu\u00e9 es importante un dise\u00f1o responsivo en primer lugar.<\/p>\n

La respuesta es simple. Ya no basta con dise\u00f1ar para un solo dispositivo. El tr\u00e1fico web m\u00f3vil ha sobrepasado el del escritorio y ahora constituye la mayor\u00eda del tr\u00e1fico del sitio web<\/a>, representando m\u00e1s del 51%<\/a>.<\/p>\n

\"Mobile,
Cuota de mercado de los m\u00f3viles, tabletas y ordenadores de escritorio<\/figcaption><\/figure>\n

Cuando m\u00e1s de la mitad de tus visitantes potenciales usan un dispositivo m\u00f3vil para navegar por Internet, no puedes simplemente servirles una p\u00e1gina dise\u00f1ada para el escritorio. Ser\u00eda dif\u00edcil de leer y usar, y conllevar\u00eda a una mala experiencia de usuario.<\/p>\n

Pero eso no es todo. Los usuarios de dispositivos m\u00f3viles tambi\u00e9n constituyen la mayor\u00eda de las visitas a los motores de b\u00fasqueda<\/a>.<\/p>\n

\"Tr\u00e1fico
Tr\u00e1fico de b\u00fasqueda m\u00f3vil<\/figcaption><\/figure>\n

Finalmente, en los \u00faltimos a\u00f1os, el m\u00f3vil se ha convertido en uno de los canales publicitarios m\u00e1s importantes. Incluso en un mercado post-pand\u00e9mico, el gasto en publicidad m\u00f3vil est\u00e1 creciendo un<\/a> 4,8% hasta los 91.520 millones de d\u00f3lares.<\/p>\n

Tanto si eliges anunciarte en los medios sociales<\/a> como si utilizas un enfoque org\u00e1nico como el SEO de YouTube<\/a>, la gran mayor\u00eda de tu tr\u00e1fico provendr\u00e1 de los usuarios de m\u00f3viles.<\/p>\n

Si tus p\u00e1ginas de destino<\/a> no est\u00e1n optimizadas para el m\u00f3vil y no son f\u00e1ciles de usar, no podr\u00e1s maximizar el retorno de la inversi\u00f3n de tus esfuerzos de marketing. Las malas tasas de conversi\u00f3n<\/a> conducir\u00e1n a menos clientes potenciales y a un desperdicio de la inversi\u00f3n publicitaria.<\/p>\n

\u00bfSon responsivos los sitios de WordPress?<\/h2>\n

Si los sitios de WordPress son responsivos o no, depende del tema de tu sitio WP. Un tema de WordPress<\/a> es el equivalente a una plantilla para un sitio web est\u00e1tico y controla el dise\u00f1o y la disposici\u00f3n de tu contenido.<\/p>\n

Si utilizas un tema predeterminado de WordPress, como Twenty Twenty<\/a>, el dise\u00f1o es responsivo, pero como es un dise\u00f1o de una sola columna, es posible que no te des cuenta al mirarlo en diferentes pantallas.<\/p>\n

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

Los bloques de construcci\u00f3n del Dise\u00f1o Web Responsivo<\/h2>\n

En esta secci\u00f3n, cubriremos la base subyacente para el dise\u00f1o de sitios web responsivos y sus diferentes bloques de construcci\u00f3n.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

CSS y HTML<\/h3>\n

La base del dise\u00f1o responsivo es la combinaci\u00f3n de HTML y CSS<\/a>, dos lenguajes que controlan el contenido y el dise\u00f1o de una p\u00e1gina en cualquier navegador web.<\/p>\n

\"HTML
HTML vs. CSS (Fuente de la imagen: codingdojo.com)<\/figcaption><\/figure>\n

El HTML controla principalmente la estructura, los elementos y el contenido de una p\u00e1gina web. Por ejemplo, para a\u00f1adir una imagen a una p\u00e1gina web<\/a>, tienes que usar c\u00f3digo HTML como este:<\/p>\n

<img src=\"image.gif\" alt=\"image\" class=\u201dfull-width-img\u201d><\/code><\/pre>\n
Puedes establecer una \u00abclase\u00bb o un \u00abid\u00bb que luego puedes atacar con el c\u00f3digo CSS<\/a>.<\/p>\n
Tambi\u00e9n puedes controlar atributos primarios como la altura y el ancho dentro de su HTML, pero esto ya no se considera la mejor opci\u00f3n.<\/p>\n
En cambio, el CSS<\/a> se utiliza para editar el dise\u00f1o y la disposici\u00f3n de los elementos que se incluyen en una p\u00e1gina con HTML. El c\u00f3digo CSS puede ser incluido en una secci\u00f3n <style><\/code> de un documento HTML, o como un archivo de hoja de estilo separado.<\/a><\/p>\n
Por ejemplo, podr\u00edamos editar el ancho de todas las im\u00e1genes HTML en el nivel de elemento como este:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
O podr\u00edamos apuntar a la clase espec\u00edfica \u00abfull-width-img\u00bb a\u00f1adiendo un punto al frente.<\/p>\n
.full-width-img {\nwidth: 100%;\n}<\/code><\/pre>\n
Tambi\u00e9n puedes controlar el dise\u00f1o m\u00e1s all\u00e1 de la altura, anchura y color<\/a>. Usando CSS as\u00ed es como haces que un dise\u00f1o responda cuando lo combinas con una t\u00e9cnica llamada \u00abmedia query\u00bb.<\/p>\n
Media Queries<\/h3>\n
Una media query<\/a>\u00a0es una parte fundamental de CSS3 que te permite renderizar el contenido para adaptarlo a diferentes factores como el tama\u00f1o de la pantalla o la resoluci\u00f3n.<\/p>\n
\"media
Media queries para desktop, tableta, tel\u00e9fono inteligente<\/figcaption><\/figure>\n
Funciona de manera similar a una cl\u00e1usula \u00abif\u00bb en algunos lenguajes de programaci\u00f3n<\/a>, b\u00e1sicamente comprobando si<\/em> la vista de una pantalla es lo suficientemente amplia o demasiado amplia antes de ejecutar el c\u00f3digo apropiado.<\/p>\n
@media screen and (min-width: 780px) {\n.full-width-img {\nmargin: auto;\nwidth: 90%;\n}<\/code><\/pre>\n
Si la pantalla tiene al menos 780 p\u00edxeles de ancho, las im\u00e1genes de la clase \u00abfull-width-img\u00bb ocupar\u00e1n el 90% de la pantalla y ser\u00e1n centradas autom\u00e1ticamente por m\u00e1rgenes igualmente amplios.<\/p>\n
Dise\u00f1o L\u00edquido<\/h3>\n
Un dise\u00f1o l\u00edquido es una parte esencial del dise\u00f1o responsivo moderno. En los viejos tiempos, se establec\u00eda un valor est\u00e1tico para cada elemento HTML, como 600 p\u00edxeles.<\/p>\n
Un dise\u00f1o l\u00edquido depende en cambio de valores din\u00e1micos como un porcentaje del ancho de la vista.<\/p>\n
\"Ejemplo
Ejemplo de dise\u00f1o l\u00edquido<\/figcaption><\/figure>\n
Este enfoque aumentar\u00e1 o disminuir\u00e1 din\u00e1micamente los diferentes tama\u00f1os de los elementos del contenedor en funci\u00f3n del tama\u00f1o de la pantalla.<\/p>\n
Dise\u00f1o Flexbox<\/h3>\n
Mientras que un dise\u00f1o basado en porcentajes es el l\u00edquido, muchos dise\u00f1adores y desarrolladores de web sintieron que no era lo suficientemente din\u00e1mico o flexible. Flexbox es un m\u00f3dulo CSS dise\u00f1ado como una forma m\u00e1s eficiente de dise\u00f1ar m\u00faltiples elementos, incluso cuando se desconoce el tama\u00f1o del contenido dentro del contenedor.<\/p>\n
Un contenedor flexible expande los art\u00edculos para llenar el espacio libre disponible o los encoge para evitar que se desborden. Estos contenedores flexibles tienen una serie de propiedades \u00fanicas, como el contenido de justificaci\u00f3n, que no se puede editar con un elemento HTML normal.<\/p>\n
\"Contenedor
Contenedor Flexbox<\/figcaption><\/figure>\n
Es un tema complicado, as\u00ed que si quieres usarlo en tu dise\u00f1o, deber\u00edas leer la gu\u00eda de trucos de CSS para flexbox<\/a>.<\/p>\n
Im\u00e1genes Responsivas<\/h3>\n
La iteraci\u00f3n m\u00e1s b\u00e1sica de im\u00e1genes responsivas sigue el mismo concepto que un dise\u00f1o l\u00edquido, utilizando una unidad din\u00e1mica para controlar el ancho o la altura. El c\u00f3digo CSS de muestra que hemos cubierto anteriormente ya logra esto:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
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\u00f3n con la pantalla.<\/p>\n
El problema de este enfoque es que cada usuario tiene que descargar la imagen a tama\u00f1o completo, incluso en el m\u00f3vil.<\/p>\n
Para servir diferentes versiones escaladas para diferentes dispositivos, es necesario utilizar el atributo HTML srcset<\/code> en sus etiquetas img, para especificar m\u00e1s de un tama\u00f1o de imagen a elegir.<\/p>\n
<img srcset=\"large-img.jpg 1024w,\nmiddle-img.jpg 640w,\nsmall-img.jpg \u00a0320w\"\nsrc=\"small.jpg\"\n\/><\/code><\/pre>\n
WordPress utiliza autom\u00e1ticamente esta funcionalidad para las im\u00e1genes incluidas en los mensajes o p\u00e1ginas.<\/p>\n
Velocidad<\/h3>\n
Cuando intentas crear un dise\u00f1o que responda a las necesidades de tu sitio web, la velocidad de carga debe ser una prioridad<\/a>.<\/p>\n
Las p\u00e1ginas que se cargan en 2 segundos tienen un promedio de 9% de tasa de rebote<\/a>, mientras que las p\u00e1ginas que toman 5 segundos llevan a una tasa de rebote de 38%.<\/p>\n
Tu enfoque de la respuesta no debe bloquear o retrasar la primera presentaci\u00f3n de tu p\u00e1gina m\u00e1s de lo necesario.<\/p>\n
Hay varias maneras de hacer que tus p\u00e1ginas sean m\u00e1s r\u00e1pidas. Optimizar tus im\u00e1genes<\/a>, implementar el caching<\/a>, la minificaci\u00f3n, usar un dise\u00f1o CSS m\u00e1s eficiente, evitar el bloqueo del renderizado JS<\/a>, y mejorar tu ruta de renderizaci\u00f3n cr\u00edtica<\/a> son todas grandes ideas que deber\u00edas considerar.<\/p>\n
Los clientes de Kinsta<\/a> tienen acceso a una manera r\u00e1pida y f\u00e1cil de conseguirlo utilizando la funci\u00f3n de minificaci\u00f3n de c\u00f3digo<\/a> que est\u00e1 integrada en el panel de control de MyKinsta<\/a>, permitiendo a los clientes habilitar la minificaci\u00f3n autom\u00e1tica de CSS y JavaScript con un solo clic.<\/p>\n
Tambi\u00e9n podr\u00edas intentar implementar Google AMP para tus p\u00e1ginas m\u00f3viles, pero en nuestro caso de estudio de Google AMP<\/a>, nuestras oportunidades para m\u00f3viles cayeron un enorme 59%.<\/p>\n
Puntos de ruptura Responsivas comunes<\/h2>\n
Para trabajar con las media queries, hay que decidir los \u00abpuntos de ruptura responsivas\u00bb o los puntos de ruptura del tama\u00f1o 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.<\/p>\n
Tama\u00f1os de pantalla comunes<\/h3>\n