{"id":454,"date":"2025-04-29T04:41:53","date_gmt":"2025-04-29T02:41:53","guid":{"rendered":"https:\/\/www.unsa.edu.pe\/ucps\/?p=454"},"modified":"2025-04-29T04:42:02","modified_gmt":"2025-04-29T02:42:02","slug":"la-importancia-de-contar-con-diseno-responsive-en-tu-web","status":"publish","type":"post","link":"https:\/\/www.unsa.edu.pe\/ucps\/2025\/04\/29\/la-importancia-de-contar-con-diseno-responsive-en-tu-web\/","title":{"rendered":"La importancia de contar con dise\u00f1o responsive en tu web"},"content":{"rendered":"\n<p><strong>Es la creaci\u00f3n de p\u00e1ginas web que se ajustan a las necesidades asociadas al tama\u00f1o de la pantalla, y condiciones del sistema, del dispositivo elegido por el usuario para entrar y navegar por ellas.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"950\" height=\"534\" src=\"https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web1.webp\" alt=\"\" class=\"wp-image-455\" srcset=\"https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web1.webp 950w, https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web1-300x169.webp 300w, https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web1-768x432.webp 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>Cuando una web se idea desde el punto de vista del<strong>&nbsp;dise\u00f1o<em>&nbsp;responsive<\/em><\/strong>&nbsp;lo que est\u00e1 buscando la empresa es garantizar que, con independencia del dispositivo desde el que se navegue por ella \u2014desde un ordenador a un m\u00f3vil pasando por una&nbsp;<em>tablet<\/em>&nbsp;o un televisor inteligente\u2014, las caracter\u00edsticas de la p\u00e1gina, as\u00ed como la disposici\u00f3n de sus elementos, se adec\u00faen al tama\u00f1o de la pantalla.<\/p>\n\n\n\n<p>Los responsables de crear estas vers\u00e1tiles p\u00e1ginas son desarrolladores web que se han formado, por ejemplo, con el&nbsp;<a href=\"https:\/\/www.unir.net\/diseno\/master-artes-visuales-produccion-multimedia\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>M\u00e1ster en Producci\u00f3n Multimedia y Dise\u00f1o online<\/strong><\/a>&nbsp;de UNIR, donde se aprende a manejar el paquete Adobe, programas de edici\u00f3n de v\u00eddeo e imagen, de desarrollo de apps y web, as\u00ed como de creaci\u00f3n de contenidos digitales y marketing digital.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es el dise\u00f1o&nbsp;<em>responsive<\/em>?<\/h2>\n\n\n\n<p>El&nbsp;<em>responsive design<\/em>&nbsp;hace referencia al dise\u00f1o de una p\u00e1gina para que sea capaz de&nbsp;<strong>adaptarse al tama\u00f1o y condicionantes de la pantalla de los diferentes dispositivos<\/strong>, con conexi\u00f3n a internet, desde los que se puede acceder a la misma.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"950\" height=\"534\" src=\"https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web.jpg\" alt=\"\" class=\"wp-image-456\" srcset=\"https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web.jpg 950w, https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web-300x169.jpg 300w, https:\/\/www.unsa.edu.pe\/ucps\/wp-content\/uploads\/2025\/04\/La-importancia-de-contar-con-diseno-responsive-en-tu-web-768x432.jpg 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>En este sentido, una web&nbsp;<em>responsive<\/em>&nbsp;est\u00e1 creada por desarrolladores que buscan asegurarse de que los diferentes elementos que configuran y dan forma al&nbsp;<em>site<\/em>&nbsp;vayan&nbsp;<strong>modific\u00e1ndose seg\u00fan d\u00f3nde se vaya a visualizar<\/strong>. Entre aquellos aspectos que se ver\u00e1n afectados destacan desde la priorizaci\u00f3n de contenidos \u2014especialmente relevante en el caso de los espacios informativos o de entretenimiento\u2014 hasta la disposici\u00f3n del men\u00fa o la escalabilidad del texto y la imagen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Caracter\u00edsticas del dise\u00f1o web&nbsp;<em>responsive<\/em><\/h2>\n\n\n\n<p>Tras explicar qu\u00e9 es el dise\u00f1o&nbsp;<em>responsive<\/em>, es el momento de analizar los elementos que lo caracterizan. En concreto, qu\u00e9 aspectos se deben valorar a la hora de idear el&nbsp;<em>site<\/em>&nbsp;para garantizar que la persona que acceda a \u00e9l, con independencia del dispositivo que utilice al hacerlo,&nbsp;<strong>tenga garantizada la mejor experiencia de usuario<\/strong>&nbsp;sin que se vea perjudicada la maquetaci\u00f3n de la web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Los elementos visuales del&nbsp;<em>responsive design<\/em><\/h3>\n\n\n\n<p>Es una caracter\u00edstica primordial del dise\u00f1o web&nbsp;<em>responsive&nbsp;<\/em>que&nbsp;<strong>el texto sea escalable al espacio de la pantalla<\/strong>&nbsp;desde el que se est\u00e9 consumiendo el contenido. La programaci\u00f3n que se encuentra en las entra\u00f1as de la p\u00e1gina tiene que permitir esta adaptabilidad hasta alcanzar el tama\u00f1o de fuente predefinida por la persona en su dispositivo.<\/p>\n\n\n\n<p>Esta caracter\u00edstica tambi\u00e9n ser\u00e1 exigible a la&nbsp;<strong>disposici\u00f3n de las im\u00e1genes y contenidos interactivos<\/strong>, as\u00ed como a las campa\u00f1as de publicidad digital a trav\u00e9s de los<em>&nbsp;banners<\/em>.<\/p>\n\n\n\n<p>Por \u00faltimo,&nbsp;<strong>el men\u00fa se ajustar\u00e1 de una versi\u00f3n horizontal a otra vertical<\/strong>&nbsp;si las dimensiones de la pantalla as\u00ed lo requieren.<\/p>\n\n\n\n<p>Tambi\u00e9n debe modificar el&nbsp;<strong>tama\u00f1o de los botones<\/strong>&nbsp;si es necesario y garantizar que la interacci\u00f3n con la web sea t\u00e1ctil en espacios como la&nbsp;<em>tablet<\/em>&nbsp;o el&nbsp;<em>smartphone<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Los aspectos internos del dise\u00f1o web adaptable<\/h3>\n\n\n\n<p>Reducir al m\u00ednimo el tiempo que transcurre desde que un usuario entra en una web hasta que se visualizan correctamente todos sus contenidos es clave a la hora de idear un dise\u00f1o web adaptable, y es que<strong>&nbsp;los tiempos de carga de la p\u00e1gina deben ser \u00f3ptimos<\/strong>.<\/p>\n\n\n\n<p>Este punto es el mayor desaf\u00edo al que se enfrentan los desarrolladores, dado que el peso de las im\u00e1genes y los contenidos interactivos muchas veces ralentizan la carga. Por ello,&nbsp;<strong>ser\u00e1 necesario encontrar un punto de equilibrio<\/strong>&nbsp;en el que sea posible reducir la calidad de fotograf\u00edas y v\u00eddeos, algo m\u00e1s adecuado para un m\u00f3vil, sin que su visualizaci\u00f3n se vea perjudicada cuando el contenido se consuma en una pantalla m\u00e1s grande, como la de un port\u00e1til.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fundamentos del dise\u00f1o&nbsp;<em>responsive<\/em><\/h2>\n\n\n\n<p>El pilar sobre el que se fundamenta el dise\u00f1o&nbsp;<em>responsive<\/em>&nbsp;es la&nbsp;<a href=\"https:\/\/www.unir.net\/revista\/marketing-comunicacion\/que-es-usabilidad-web\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>usabilidad web<\/strong><\/a>, esto es, asegurar que siempre que una persona entre en una p\u00e1gina navegar\u00e1 por ella de manera intuitiva, podr\u00e1 acceder a todos los contenidos r\u00e1pidamente y se desplazar\u00e1 por ellos sin dificultad. Todo ello es clave en&nbsp;<a href=\"https:\/\/www.unir.net\/revista\/ingenieria\/que-es-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX<\/a>, es decir, en la experiencia que tendr\u00e1 el usuario al que se dirige el&nbsp;<em>site<\/em>, la cual ser\u00e1 determinante para que decida volver a entrar o no en \u00e9l.<\/p>\n\n\n\n<p>Para lograr todo esto, es habitual que los desarrolladores apuesten por un<strong>&nbsp;dise\u00f1o<em>&nbsp;responsive<\/em>&nbsp;con<em>&nbsp;Bootstrap<\/em><\/strong>, una herramienta de c\u00f3digo abierto que ofrece grandes opciones para adaptar los m\u00f3dulos y herramientas que conforman una web.<\/p>\n\n\n\n<p>Tambi\u00e9n es recomendable que el c\u00f3digo utilizado en la programaci\u00f3n&nbsp;<strong>a\u00fane el habitual HTML con el CSS<\/strong>, centrado en el estilo del portal y que ayudar\u00e1 a ir ajustando la forma en la que se presenta la p\u00e1gina sin que ello afecte a su identidad visual.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ventajas del dise\u00f1o&nbsp;<em>responsive<\/em>&nbsp;vs. dise\u00f1o&nbsp;<em>mobile<\/em><\/h2>\n\n\n\n<p>Una p\u00e1gina web&nbsp;<em>responsive<\/em>&nbsp;permite que con un<strong>&nbsp;\u00fanico dise\u00f1o&nbsp;<\/strong>la configuraci\u00f3n visual del&nbsp;<em>site<\/em>&nbsp;se vaya adaptando a los diferentes tama\u00f1os de pantalla de los dispositivos con conexi\u00f3n a internet. Solo se necesita un desarrollo de p\u00e1gina que facilite que pueda ser disfrutada con independencia del lugar desde el que se acceda a ella, sin que ello perjudique a la calidad de la experiencia del usuario.<\/p>\n\n\n\n<p>Sin embargo, el dise\u00f1o&nbsp;<em>mobile<\/em>&nbsp;ha sido ideado para que el consumo del contenido de ese espacio digital sea disfrutado,&nbsp;<strong>exclusivamente, a trav\u00e9s de un m\u00f3vil<\/strong>. Toda la configuraci\u00f3n de la p\u00e1gina est\u00e1 enfocada a que la experiencia del usuario tenga lugar desde un dispositivo concreto, con una pantalla y unas caracter\u00edsticas propias asociadas a \u00e9l. Ello afectar\u00e1 a la configuraci\u00f3n del men\u00fa, a la disposici\u00f3n del contenido interactivo o a la accesibilidad, en la que se har\u00e1 primar el tiempo de respuesta t\u00e1ctil.<\/p>\n\n\n\n<p>En conclusi\u00f3n, el dise\u00f1o<em>&nbsp;responsive&nbsp;<\/em>permite a una empresa contar con una web que se podr\u00e1 utilizar desde cualquier dispositivo con pantalla y conexi\u00f3n a internet. Por el contrario,&nbsp;<strong>el dise\u00f1o<em>&nbsp;mobile<\/em>&nbsp;obligar\u00e1 a la compa\u00f1\u00eda a crear un segundo<em>&nbsp;site<\/em><\/strong>&nbsp;para cuidar la experiencia del usuario en caso de que no acceda desde un&nbsp;<em>smartphone<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Es la creaci\u00f3n de p\u00e1ginas web que se ajustan a las necesidades asociadas al tama\u00f1o de la pantalla, y condiciones del sistema, del dispositivo elegido por el usuario para entrar y navegar por ellas. Cuando una web se idea desde el punto de vista del&nbsp;dise\u00f1o&nbsp;responsive&nbsp;lo que est\u00e1 buscando la empresa es garantizar que, con independencia &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.unsa.edu.pe\/ucps\/2025\/04\/29\/la-importancia-de-contar-con-diseno-responsive-en-tu-web\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abLa importancia de contar con dise\u00f1o responsive en tu web\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articulos-usefc"],"_links":{"self":[{"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/posts\/454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/comments?post=454"}],"version-history":[{"count":1,"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/posts\/454\/revisions"}],"predecessor-version":[{"id":457,"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/posts\/454\/revisions\/457"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/media\/455"}],"wp:attachment":[{"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/media?parent=454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/categories?post=454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unsa.edu.pe\/ucps\/wp-json\/wp\/v2\/tags?post=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}