{"id":69705,"date":"2022-09-18T07:31:45","date_gmt":"2022-09-18T05:31:45","guid":{"rendered":"https:\/\/rmarketingdigital.com\/wiki\/diseno-responsive-2\/"},"modified":"2024-10-28T22:46:04","modified_gmt":"2024-10-28T21:46:04","slug":"diseno-responsive","status":"publish","type":"glossary","link":"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-responsive\/","title":{"rendered":"Responsive Design"},"content":{"rendered":"<p><\/p>\n<div id=\"mw-content-text\" lang=\"es\" dir=\"ltr\" class=\"mw-content-ltr\">\n<p>En un <b>dise\u00f1o responsible<\/b>, una web se mostrar\u00e1 de forma distinto seg\u00fan el tama\u00f1o de la pantalla y\/o el tipo de dispositivo, con la finalidad de garantizar la facilidad de uso. Se aplica concretamente a las peque\u00f1as pantallas de visualizaci\u00f3n de los dispositivos m\u00f3viles, donde se requiere una representaci\u00f3n distinto de la p\u00e1gina.\n<\/p>\n<h2>\n<span class=\"mw-headline\" id=\"Antecedentes\">Antecedentes<\/span><br \/>\n<\/h2>\n<p>El dise\u00f1o usual de una p\u00e1gina web se basa en las pantallas de PC, tal y como hay en un lugar de trabajo. En los \u00faltimos a\u00f1os, no obstante, se han desarrollado dispositivos m\u00f3viles que disponen pantallas significativamente m\u00e1s peque\u00f1as, por ejemplo, netbooks, tablets y smartphones. En una pantalla peque\u00f1a, las p\u00e1ginas web disponen un aspecto distinto al de las pantallas grandes y la facilidad de uso (Usabilidad) se reduce considerablemente. Un dise\u00f1o responsible reacciona flexiblemente al dispositivo correspondiente. Se puede garantizar una buena experiencia de usuario en dispositivos m\u00f3viles con un dise\u00f1o separado para pantallas peque\u00f1as. Esto se denomina <b>Experiencia de usuario tel\u00e9fono celular<\/b>. En el concepto \u00abMobile First\u00bb, primero se crea la web tel\u00e9fono celular y despu\u00e9s se hacen extensiones para pantallas m\u00e1s grandes.\n<\/p>\n<h2>\n<span class=\"mw-headline\" id=\"Motivaci.C3.B3n\">Motivaci\u00f3n<\/span><br \/>\n<\/h2>\n<p>El n\u00famero de dispositivos m\u00f3viles est\u00e1 creciendo y el n\u00famero de usuarios de Internet que acceden a Internet en dichos dispositivos adem\u00e1s est\u00e1 aumentando. Se necesitar\u00edan dise\u00f1os responsive para proporcionar a estos visitantes una buena experiencia en la web. La falta de una buena experiencia de usuario con sitios web comunes en dispositivos con pantallas peque\u00f1as resultar\u00e1 en p\u00e9rdidas de conversi\u00f3n. El uso de un dise\u00f1o responsible <b>mira hacia el futuro<\/b>, puesto que la oferta est\u00e1 habilitada para todos los usuarios en un dise\u00f1o f\u00e1cil de utilizar. La comunicaci\u00f3n entre el operador web y sus visitantes no se ve afectada por el tipo de dispositivo utilizado.\n<\/p>\n<h2>\n<span class=\"mw-headline\" id=\"Implementaci.C3.B3n\">Implementaci\u00f3n<\/span><br \/>\n<\/h2>\n<p>Los dise\u00f1os responsible se pueden realizar con HTML5 y CSS3. Se proporcionan consultas a los medios de comunicaci\u00f3n, con las que se puede solicitar informaci\u00f3n desde el dispositivo en cuesti\u00f3n. Esto incluye caracter\u00edsticas como el tama\u00f1o de la pantalla, la resoluci\u00f3n y el formato, as\u00ed como capacidades como el teclado, la huella, el idioma, etc.). El contenido y el dise\u00f1o de una p\u00e1gina deben estar estrictamente separados para que el dise\u00f1o responsive funcione correctamente.\n<\/p>\n<h3>\n<span class=\"mw-headline\" id=\"Media_Query\">Media Query<\/span><br \/>\n<\/h3>\n<p>Otras propiedades est\u00e1n disponibles al mismo tiempo de la distinci\u00f3n entre \u00abpantalla\u00bb e \u00abimpresi\u00f3n\u00bb<sup id=\"cite_ref-1\" class=\"reference\">[1]<\/sup>.\n<\/p>\n<pre><\/pre>\n<p>Este ejemplo muestra el link del documento HTML a la hoja de estilo. Al mismo tiempo de la especificaci\u00f3n de \u00abpantalla\u00bb, la consulta de medios, o Media Query, adem\u00e1s contiene otra restricci\u00f3n, espec\u00edficamente que debe ser un formato vertical. El p\u00e1rrafo respectivo en el archivo CSS \u00abexample.css\u00bb tiene el siguiente aspecto:\n<\/p>\n<pre>@media all and (orientation:portrait) { \u2026 }\n<\/pre>\n<h3>\n<span class=\"mw-headline\" id=\"Aspecto\">Aspecto<\/span><br \/>\n<\/h3>\n<p>Por medio de el uso de dise\u00f1os responsive, el mismo contenido se proporciona en un formato ligeramente modificado para distintos dispositivos. La disminuci\u00f3n de los items puede ser apropiada para tama\u00f1os de pantalla peque\u00f1os. En esencia, los items existentes se muestran estructuralmente distintos. Un ejemplo es el cambio entre formato vertical y horizontal. Las proporciones de p\u00e1ginas modificadas requieren una reestructuraci\u00f3n de los items, pero su funci\u00f3n sigue siendo la misma. El <b>c\u00f3digo HTML permanece inalterado<\/b>, s\u00f3lo se usa una hoja de estilo distinto.\n<\/p>\n<p>La priorizaci\u00f3n de los items existentes juega un papel importante en la reestructuraci\u00f3n de la p\u00e1gina web. Una consideraci\u00f3n completa de qu\u00e9 items se deslizar\u00e1n hacia abajo en la p\u00e1gina y cu\u00e1les pueden ser eliminados debido a su menor importancia es importante. Este desarrollo consume mucho tiempo y proporciona espacio para las medidas de SEO.\n<\/p>\n<h2>\n<span class=\"mw-headline\" id=\"Relevancia_para_el_SEO\">Relevancia para el SEO<\/span><br \/>\n<\/h2>\n<p>El desarrollo de un dise\u00f1o responsible es muy complejo dependiendo del tama\u00f1o de la web. Pero una vez desarrollado, es muy sencillo de mantener, porque el contenido s\u00f3lo tiene que crearse una vez y est\u00e1 habilitada en cada dise\u00f1o. El esfuerzo de desarrollo puede valer la pena desde una perspectiva de SEO, puesto que mejora la experiencia del usuario para las personas se conectan a internet con su dispositivo tel\u00e9fono celular. Esto aumenta su tiempo de permanencia en la web, lo que tendr\u00e1 un efecto positivo en el posicionamiento de la p\u00e1gina. A parte de esto, la tasa de rebote disminuir\u00e1, porque un portal web f\u00e1cil de utilizar es recibido de forma positiva. Un dise\u00f1o responsible tampoco limitar\u00e1 el uso de la web a dispositivos convencionales. El relanzamiento de una web es una buena posibilidad para ofrecerlo con un dise\u00f1o responsive en el futuro.\n<\/p>\n<p>Otra respuesta al creciente n\u00famero de dispositivos m\u00f3viles es crear un portal web separado para los usuarios m\u00f3viles, lo que no es recomendable desde una perspectiva de SEO. Este dominio aut\u00f3nomo deber\u00e1 optimizarse y mantenerse de forma separada. Apenas estar\u00e1 enlazado, apenas obtendr\u00e1 enlace juice y por lo general contendr\u00e1 contenido duplicado. De este modo, el sitio tel\u00e9fono celular no ser\u00e1 encontrado por los visitantes mediante de los motores de b\u00fasqueda y de esta manera raramente utilizado.\n<\/p>\n<p>El concepto de dise\u00f1o responsible conduce a ideas m\u00e1s avanzadas para la optimizaci\u00f3n de palabras clave. Los t\u00e9rminos de b\u00fasqueda introducidos en un dispositivo tel\u00e9fono celular tienden a ser m\u00e1s cortos y a formularse de forma distinto que en el caso de un teclado f\u00edsico. De este modo, la diferencia en los dispositivos de usuario adem\u00e1s podr\u00eda dar lugar a un cambio de palabras clave.\n<\/p>\n<p>Google apoya y recomienda un dise\u00f1o responsive. Una ventaja es que el Googlebot ahorra recursos y puede indexar m\u00e1s contenido de una web. Como requerimiento previo, el crawler necesitar\u00e1 entrar ilimitado a archivos externos como CSS y JavaScript.\n<\/p>\n<h2>\n<\/h2>\n[Category:Marketing M\u00f3vil]]\n<\/p>\n<p><!-- \nNewPP limit report\nCached time: 20200502183532\nCache expiry: 86400\nDynamic content: false\nCPU time usage: 0.008 seconds\nReal time usage: 0.007 seconds\nPreprocessor visited node count: 63\/1000000\nPreprocessor generated node count: 122\/1000000\nPost\u2010expand include size: 0\/2097152 bytes\nTemplate argument size: 0\/2097152 bytes\nHighest expansion depth: 2\/40\nExpensive parser function count: 0\/100\n--><\/p>\n<p><!-- \nTransclusion expansion time report (%,ms,calls,template)\n100.00%    0.000      1 - -total\n--><\/p>\n<p><!-- Saved in parser cache with key es_:stable-pcache:idhash:514-0!*!0!!es!*!* and timestamp 20200502183532 and revision id 2624\n -->\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In a responsible design, a website will be displayed differently depending on the size of the screen and \/ or the type of device, in order to guarantee the ease of ...<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"template":"","glossary-cat":[],"class_list":["post-69705","glossary","type-glossary","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Dise\u00f1o Responsive - R Marketing Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o Responsive\" \/>\n<meta property=\"og:description\" content=\"En un dise\u00f1o responsible, una web se mostrar\u00e1 de forma distinto seg\u00fan el tama\u00f1o de la pantalla y\/o el tipo de dispositivo, con la finalidad de garantizar la facilidad de...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-28T21:46:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-responsive\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-responsive\\\/\",\"name\":\"Dise\u00f1o Responsive - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"datePublished\":\"2022-09-18T05:31:45+00:00\",\"dateModified\":\"2024-10-28T21:46:04+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-responsive\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dise\u00f1o Responsive - R Marketing Digital","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:\/\/rmarketingdigital.com\/en\/wiki\/diseno-responsive\/","og_locale":"en_US","og_type":"article","og_title":"Dise\u00f1o Responsive","og_description":"En un dise\u00f1o responsible, una web se mostrar\u00e1 de forma distinto seg\u00fan el tama\u00f1o de la pantalla y\/o el tipo de dispositivo, con la finalidad de garantizar la facilidad de...","og_url":"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-responsive\/","og_site_name":"R Marketing Digital","article_modified_time":"2024-10-28T21:46:04+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/wiki\/diseno-responsive\/","url":"https:\/\/rmarketingdigital.com\/wiki\/diseno-responsive\/","name":"Dise\u00f1o Responsive - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"datePublished":"2022-09-18T05:31:45+00:00","dateModified":"2024-10-28T21:46:04+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/wiki\/diseno-responsive\/"]}]},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary\/69705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/glossary"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary\/69705\/revisions"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=69705"}],"wp:term":[{"taxonomy":"glossary-cat","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary-cat?post=69705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}