{"id":59987,"date":"2022-10-26T14:59:54","date_gmt":"2022-10-26T14:59:54","guid":{"rendered":"https:\/\/mailrelay.com\/glossary\/responsive-design\/"},"modified":"2024-01-18T13:30:39","modified_gmt":"2024-01-18T13:30:39","slug":"responsive-design","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/","title":{"rendered":"Responsive design"},"content":{"rendered":"<p>El responsive design, tambi\u00e9n conocido como dise\u00f1o responsivo, es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla donde se muestren.<\/p>\n<p>Ello se consigue haciendo que el contenido se adapte autom\u00e1ticamente a los distintos tipos de pantalla y plataformas (ordenadores de sobremesa, port\u00e1tiles, tabletas, tel\u00e9fonos m\u00f3viles, televisores, etc.)<\/p>\n<p>Del mismo modo, en email marketing tambi\u00e9n se habla de responsive design en lo referente a la correcta visualizaci\u00f3n de las <a title=\"Campa\u00f1as de email marketing\" href=\"https:\/\/mailrelay.com\/es\/\">campa\u00f1as de email marketing<\/a> en los distintos dispositivos en los que los suscriptores puede abrir los newsletters.<\/p>\n<h2>1. Dise\u00f1o web responsive y dise\u00f1o web adaptive<\/h2>\n<p>En muchas ocasiones el dise\u00f1o web responsive y dise\u00f1o web adaptive se confunden, dado que ambos buscan ofrecer una buena visualizaci\u00f3n de los sitios web en cualquier circunstancia, pero no son lo mismo.<\/p>\n<p>El dise\u00f1o web responsive es una t\u00e9cnica para desarrollar interfaces que ese cale del uso de media queries y hojas de estilos, para as\u00ed autoajustar de forma proporcional la forma en la que se visualizan los contenidos de una web a distintas resoluciones.<\/p>\n<p>Trabajo de forma porcentual, en base a porcentajes del espacio de pantalla disponible y como no, a la resoluci\u00f3n de salida demandada.<\/p>\n<p>Por su parte el dise\u00f1o web adaptado es una t\u00e9cnica que se basa en la utilizaci\u00f3n de tama\u00f1os de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px, etc.<\/p>\n<p>Crea un dise\u00f1o para cada uno de los tama\u00f1os, de tal manera que al identificar el dispositivo sobre el que ofrecer la visualizaci\u00f3n, muestra el dise\u00f1o que mejor se adapte de entre los disponibles. Trabaja con medidas fijas, no en base a tama\u00f1os porcentuales.<\/p>\n<h2>2. Ventajas del responsive design<\/h2>\n<p>El auge de los tel\u00e9fonos smartphones y la tabletas, hace vital que cualquier contenido que consuman desde esos dispositivos tenga una correcta visualizaci\u00f3n, por lo que resulta de vital importancia hace uso del responsive design.<\/p>\n<p>Ademas, ello nos reporta una serie de ventajas en comparaci\u00f3n con los dise\u00f1os no responsive. Entre esas ventajas destacan:<\/p>\n<ul>\n<li><strong>Mejora la experiencia de los usuarios.<\/strong> Los que visiten el contenido van a tener una experiencia de uso unificada, sin importar el tipo de dispositivo que utilicen y si posteriormente acceden utilizando otro, no notaran cambios relevantes.<\/li>\n<li><strong>Adi\u00f3s a los contenidos duplicados.<\/strong> Ya no es necesario contar con una versi\u00f3n espec\u00edfica para los que accedan a la web desde un tel\u00e9fono m\u00f3vil y con ello tener duplicados los contenidos (el SEO de tu web te lo agradecer\u00e1). La versi\u00f3n responsive es una sola.<\/li>\n<li><strong>Ahorro de costes de mantenimiento y desarrollo web.<\/strong> Esta ventaja es obvia, dado que al solo ser necesario mantener una versi\u00f3n de la web el coste de mantenimiento de la misma se ve reducido con respecto a disponer de versiones para cada tipo de dispositivo.<\/li>\n<li><strong>Mejora el <a href=\"https:\/\/mailrelay.com\/es\/glosario\/seo-search-engine-optimization\/\" target=\"_blank\" rel=\"noopener\">SEO<\/a>.<\/strong> La velocidad de carga del sitio mejora, ello unido a que los visitantes consiguen una mejor visualizaci\u00f3n de los contenidos y con ello el tiempo medio de la visita tiende a ser mayor, potencia positivamente el posicionamiento del sitio web responsive.<\/li>\n<li><strong>Aumenta las opciones viralidad.<\/strong> La mayor parte del trafico web se lleva a cabo desde dispositivos m\u00f3viles, donde se tienen instaladas las distintas apps de redes sociales. Por ello, gracias al responsive y su excelente comportamiento con dispositivos m\u00f3viles, los usuarios est\u00e1n en mejor disposici\u00f3n para compartir los contenidos que son visualizados de forma correcta y atractiva.<\/li>\n<\/ul>\n<h2>3. Caracter\u00edsticas de un dise\u00f1o responsive<\/h2>\n<p>El dise\u00f1o responsive apareci\u00f3 en el 2010, cuando el dise\u00f1ador gr\u00e1fico Ethan Marcotte se vali\u00f3 de HTML y <a href=\"https:\/\/mailrelay.com\/es\/glosario\/css-cascading-style-sheets\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> para llevar a cabo un sitio responsive.<\/p>\n<p>No siendo hasta pocos a\u00f1os despu\u00e9s, hasta 2013, cuando su uso comenz\u00f3 a ser generalizado para dar soluci\u00f3n a las ingente cantidad de tr\u00e1fico web que se generaba desde los tel\u00e9fonos m\u00f3viles.<\/p>\n<p>Los dise\u00f1os tienen que tener una serie de caracter\u00edsticas para poder ser considerados como responsive:<\/p>\n<ul>\n<li>Adaptarse al ancho del dispositivo, de forma correcta e instant\u00e1nea.<\/li>\n<li>Hacer uso de media-queries de CSS3.<\/li>\n<li>Dar los contenidos e im\u00e1genes al visitante con total fluidez.<\/li>\n<li>Ser capaz de reorganizar los elementos de la web para disposiciones horizontales y verticales.<\/li>\n<li>De ser necesario, dar una apariencia distinta a ciertos elementos e incluso llegar a eliminarlos.<\/li>\n<li>Evitar la existencia de contenidos duplicados.<\/li>\n<li>Compensar el tama\u00f1o y espaciado de las tipograf\u00edas en pro de una mejor legibilidad.<\/li>\n<li>Facilitar al visitante que comparta los contenidos r\u00e1pidamente.<\/li>\n<\/ul>\n","protected":false},"template":"","class_list":["post-59987","glossary","type-glossary","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive design - Mailrelay<\/title>\n<meta name=\"description\" content=\"El responsive design es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive design - Mailrelay\" \/>\n<meta property=\"og:description\" content=\"El responsive design es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Mailrelay\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Mailrelay\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-18T13:30:39+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@mailrelay\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/\",\"url\":\"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/\",\"name\":\"Responsive design - Mailrelay\",\"isPartOf\":{\"@id\":\"https:\/\/mailrelay.com\/es\/#website\"},\"datePublished\":\"2022-10-26T14:59:54+00:00\",\"dateModified\":\"2024-01-18T13:30:39+00:00\",\"description\":\"El responsive design es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla\",\"breadcrumb\":{\"@id\":\"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mailrelay.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mailrelay.com\/es\/#website\",\"url\":\"https:\/\/mailrelay.com\/es\/\",\"name\":\"Mailrelay\",\"description\":\"Mailrelay.com - Email Marketing Software\",\"publisher\":{\"@id\":\"https:\/\/mailrelay.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mailrelay.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mailrelay.com\/es\/#organization\",\"name\":\"Mailrelay\",\"url\":\"https:\/\/mailrelay.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mailrelay.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg\",\"contentUrl\":\"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg\",\"width\":613,\"height\":291,\"caption\":\"Mailrelay\"},\"image\":{\"@id\":\"https:\/\/mailrelay.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Mailrelay\/\",\"https:\/\/x.com\/mailrelay\",\"https:\/\/www.youtube.com\/mailrelay-email-marketing\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive design - Mailrelay","description":"El responsive design es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/","og_locale":"es_ES","og_type":"article","og_title":"Responsive design - Mailrelay","og_description":"El responsive design es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla","og_url":"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/","og_site_name":"Mailrelay","article_publisher":"https:\/\/www.facebook.com\/Mailrelay\/","article_modified_time":"2024-01-18T13:30:39+00:00","twitter_card":"summary_large_image","twitter_site":"@mailrelay","twitter_misc":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/","url":"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/","name":"Responsive design - Mailrelay","isPartOf":{"@id":"https:\/\/mailrelay.com\/es\/#website"},"datePublished":"2022-10-26T14:59:54+00:00","dateModified":"2024-01-18T13:30:39+00:00","description":"El responsive design es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla","breadcrumb":{"@id":"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mailrelay.com\/es\/glosario\/responsive-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mailrelay.com\/es\/"},{"@type":"ListItem","position":2,"name":"Responsive design"}]},{"@type":"WebSite","@id":"https:\/\/mailrelay.com\/es\/#website","url":"https:\/\/mailrelay.com\/es\/","name":"Mailrelay","description":"Mailrelay.com - Email Marketing Software","publisher":{"@id":"https:\/\/mailrelay.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mailrelay.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/mailrelay.com\/es\/#organization","name":"Mailrelay","url":"https:\/\/mailrelay.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mailrelay.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg","contentUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg","width":613,"height":291,"caption":"Mailrelay"},"image":{"@id":"https:\/\/mailrelay.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Mailrelay\/","https:\/\/x.com\/mailrelay","https:\/\/www.youtube.com\/mailrelay-email-marketing"]}]}},"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Mailrelay","author_link":"https:\/\/mailrelay.com\/es\/blog\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"El responsive design, tambi\u00e9n conocido como dise\u00f1o responsivo, es una t\u00e9cnica de dise\u00f1o web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tama\u00f1o de pantalla donde se muestren. Ello se consigue haciendo que el contenido se adapte autom\u00e1ticamente a los distintos tipos de pantalla y plataformas&hellip;","_links":{"self":[{"href":"https:\/\/mailrelay.com\/es\/wp-json\/wp\/v2\/glossary\/59987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mailrelay.com\/es\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/mailrelay.com\/es\/wp-json\/wp\/v2\/types\/glossary"}],"version-history":[{"count":2,"href":"https:\/\/mailrelay.com\/es\/wp-json\/wp\/v2\/glossary\/59987\/revisions"}],"predecessor-version":[{"id":77879,"href":"https:\/\/mailrelay.com\/es\/wp-json\/wp\/v2\/glossary\/59987\/revisions\/77879"}],"wp:attachment":[{"href":"https:\/\/mailrelay.com\/es\/wp-json\/wp\/v2\/media?parent=59987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}