{"id":700,"date":"2022-08-16T18:11:56","date_gmt":"2022-08-16T23:11:56","guid":{"rendered":"https:\/\/pontual.mx\/blog\/?p=700"},"modified":"2022-08-17T14:14:12","modified_gmt":"2022-08-17T19:14:12","slug":"diseno-responsivo","status":"publish","type":"post","link":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/","title":{"rendered":"Ventajas y Funcionamiento del Dise\u00f1o Responsivo"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Dise\u00f1o Web responsivo<\/h1>\n\n\n\n<p>El dise\u00f1o web responsivo es una funcionalidad que tienen las p\u00e1ginas de internet que adapta su contenido seg\u00fan el tama\u00f1o de la pantalla desde el que se ingresa.<\/p>\n\n\n\n<p>En la parte t\u00e9cnica el c\u00f3digo HTML puede utilizar un solo archivo para todos los dispositivos, usando etiquetas \u00abtags\u00bb o bien l\u00edneas de CSS con el fin de adecuar el contenido dependiendo del tama\u00f1o de la pantalla del dispositivo.<\/p>\n\n\n\n<p>Este tipo de dise\u00f1o web no solo trae beneficios de visualizaci\u00f3n, veamos qu\u00e9 m\u00e1s trae consigo:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 usar el dise\u00f1o responsivo?<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/Picture1.jpg\" alt=\"\" class=\"wp-image-702\" width=\"262\" height=\"200\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Facilita el compartir contenido<\/h3>\n\n\n\n<p>Cuando se usa este tipo de dise\u00f1o, facilita a los usuarios compartir y vincular tu contenido mediante una sola <span style=\"color:gray; font-weight:bold\" title=\"Una URL es la direcci\u00f3n de internet&#013;\nde una p\u00e1gina web, archivo o componente.&#013;\nPor sus siglas en ingl\u00e9s Uniform Resource Locators\">URL<\/span>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mejora el puntaje del sitio ante motores de b\u00fasqueda<\/h3>\n\n\n\n<p>El dise\u00f1o web responsivo permite a los algoritmos de b\u00fasqueda como Google la asignaci\u00f3n de manera correcta las propiedades de la p\u00e1gina sin necesidad de diferenciar entre p\u00e1ginas para computadoras de escritorio o dispositivos m\u00f3viles.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/el-cliente-te-encuentra.jpg\" alt=\"\" class=\"wp-image-723\" width=\"296\" height=\"197\" srcset=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/el-cliente-te-encuentra.jpg 420w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/el-cliente-te-encuentra-300x200.jpg 300w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/el-cliente-te-encuentra-360x240.jpg 360w\" sizes=\"auto, (max-width: 296px) 100vw, 296px\" \/><\/figure><\/div>\n\n\n\n<p>Esto hace que tu sitio web sea m\u00e1s f\u00e1cil de rastrear. Cuando tu p\u00e1gina tiene un dise\u00f1o responsivo se rastrea una vez, esto mejora la eficiencia que permite de manera indirecta indexar una mayor parte del contenido del sitio es decir mantenerlo actualizado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; F\u00e1cil mantenimiento<\/h3>\n\n\n\n<p>El dise\u00f1o responsivo de nuestro sitio web simplifica su contenido, y esto sucede porque para una p\u00e1gina solo tendremos un solo archivo, por ejemplo; p\u00e1gina de inicio para todos los tipos de dispositivos o al menos en su mayor\u00eda (Computadora de escritorio, Tabletas, Smartphones, etc.), entonces s\u00ed tenemos menos archivos para nuestra p\u00e1gina, ser\u00e1 m\u00e1s sencillo de cargar y m\u00e1s f\u00e1cil de realizar tareas de mantenimiento o cambios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mitigaci\u00f3n de errores<\/h3>\n\n\n\n<p>Se reduce el margen de errores comunes que normalmente afectan a los sitios para dispositivos m\u00f3viles.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/menos-errores.jpg\" alt=\"\" class=\"wp-image-724\" width=\"393\" height=\"206\" srcset=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/menos-errores.jpg 588w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/menos-errores-300x158.jpg 300w\" sizes=\"auto, (max-width: 393px) 100vw, 393px\" \/><\/figure><\/div>\n\n\n\n<p>Para conocer un poco m\u00e1s de ello consulte la siguiente informaci\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-seo\/common-mistakes?hl=es-419\" target=\"_blank\" rel=\"noreferrer noopener\">Errores comunes del dise\u00f1o web<\/a>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Reducci\u00f3n de tiempo de carga del sitio<\/h3>\n\n\n\n<p>El Dise\u00f1o responsivo no requiere redireccionar a otras p\u00e1ginas al detectar el tipo de dispositivo ya que la p\u00e1gina ya est\u00e1 optimizada para detectar el tama\u00f1o de la pantalla y comportarse seg\u00fan se requiera, esto se traduce en menos tiempo de carga del sitio. Adicionalmente el sistema de redireccionamiento podr\u00eda fallar lo cual puede afectar la experiencia del usuario en tu sitio web.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/pontual.mx\/contacto\/?form=contacto&amp;subject=paginas-web&amp;mostrar=true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"270\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2018\/11\/estrena-un-sitio-web-de-impacto-1024x270.png\" alt=\"\" class=\"wp-image-209\"\/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo funciona el dise\u00f1o web responsivo?<\/h2>\n\n\n\n<p>S\u00ed llegaste hasta aqu\u00ed quiere decir que te interesa saber un poco m\u00e1s a nivel t\u00e9cnico sobre la funcionalidad de este tipo de dise\u00f1o web, as\u00ed que adentr\u00e9monos un poco m\u00e1s.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"679\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-1024x679.jpg\" alt=\"\" class=\"wp-image-725\" srcset=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-1024x679.jpg 1024w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-300x199.jpg 300w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-768x509.jpg 768w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-360x240.jpg 360w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo.jpg 1142w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En la imagen de arriba podemos tener un mejor panorama sobre el funcionamiento del dise\u00f1o web responsivo:<\/p>\n\n\n\n<ul><li>Un solo contenido.<\/li><li>Un solo c\u00f3digo.<\/li><li>Uso de <span style=\"color:gray; font-weight: bold\" title=\"del ingl\u00e9s Cascading Style Sheets,&#013;que no es otra cosa m\u00e1s que el&#013;archivo de estilos de nuestro sitio web.\">CSS.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2 puntos importantes:<\/h3>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li>Tama\u00f1o del texto<\/li><li>Adaptabilidad de elementos<\/li><\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tama\u00f1o del texto<\/h4>\n\n\n\n<p>El uso de elementos en el sitio es fundamental para darle un mejor orden y f\u00e1cil administraci\u00f3n. Incluso usar clases nos ayudar\u00e1 a mantener identificadores y estilos. S\u00ed tuvi\u00e9ramos una p\u00e1gina principal llamada <strong>index.html <\/strong>este podr\u00eda ser nuestro c\u00f3digo inicial<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Las mejores P\u00e1ginas Web&lt;\/h1&gt;\n&lt;p class=\u201danuncio\u201d&gt;\n  Se hacen aqu\u00ed: &lt;a href=\u201dhttps:\/\/pontual.mx\/paginas-web\u201d&gt;Empieza hoy&lt;\/a&gt;\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Utiliza la unidad de medida relativa <strong>em <\/strong>para ayudarnos con el tama\u00f1o de nuestro texto. Este ser\u00eda un ejemplo breve de nuestro archivo <strong>style.css<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body { \n  font-size:80%;\n}\nh1 {  \n  font-size:2em;\n}\n.anuncio {\n  font-size:0.9em;\n} \n@media screen and (min-width:800px) {\n  body {\n  \/* agrandamos todos los textos que est\u00e9n en la p\u00e1gina s\u00ed la pantalla mide m\u00e1s de 800px *\/    \n    font-size:100%;  \n  }\n}\n@media screen and (min-width:1200px) {\n  body { \n    \/* agrandamos m\u00e1s a\u00fan los textos si mide m\u00e1s de 1200px *\/ \n    font-size:120%;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Este ser\u00eda nuestro resultado (Visalizaci\u00f3n de escritorio \/ M\u00f3vil respectivamente):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"239\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-1.png\" alt=\"\" class=\"wp-image-708\" srcset=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-1.png 758w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-1-300x95.png 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/figure>\n\n\n\n<p>Aunque no se observa una gran diferencia, considerar el texto responsivo nos ayudar\u00e1 a siempre mantener una escritura legible as\u00ed como una mejor distribuci\u00f3n del contenido en pantallas de diferentes tama\u00f1os utilizando una sola p\u00e1gina (index.html).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adaptabilidad de elementos<\/h4>\n\n\n\n<p>Hace falta unas cuantas l\u00edneas de c\u00f3digo para crear una cuadricula responsiva, similar a esta:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"640\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/Tailwind-CSS-product-grid.gif\" alt=\"\" class=\"wp-image-701\"\/><\/figure>\n\n\n\n<p>Empecemos con 8 tarjetas dentro de una con el nombre de la clase \u00abcards\u00bb:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"cards\"&gt;\n  &lt;div class=\"card\"&gt;UNO&lt;\/div&gt;\n  &lt;div class=\"card\"&gt;DOS&lt;\/div&gt;\n  &lt;div class=\"card\"&gt;TRES&lt;\/div&gt;\n  &lt;div class=\"card\"&gt;CUATRO&lt;\/div&gt;\n  &lt;div class=\"card\"&gt;CINCO&lt;\/div&gt;\n  &lt;div class=\"card\"&gt;SEIS&lt;\/div&gt;\n  &lt;div class=\"card\"&gt;SIETE&lt;\/div&gt;\n  &lt;div class=\"card\"&gt;OCHO&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Agreguemos algo de estilo a estos elementos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body { \n  padding: 1rem; \n}\n.card {\n  background-color: dodgerblue;\n  color: white;\n  padding: 1rem;\n  height: 4rem;\n}\n.cards {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  gap: 1rem;\n}<\/code><\/pre>\n\n\n\n<p>Despu\u00e9s de darle algo de estilo comencemos en el archivo de estilos para dispositivos de pantallas peque\u00f1as, las siguientes lineas mostraran una tarjeta por fila:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 600px) {\n  .cards { \n    grid-template-columns: repeat(2, 1fr); \n  }\n}<\/code><\/pre>\n\n\n\n<p>Para pantallas m\u00e1s grandes de 900px mostremos 3 tarjetas por fila:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 900px) {\n  .cards { \n    grid-template-columns: repeat(3, 1fr); \n  }\n}<\/code><\/pre>\n\n\n\n<p>El resultado de nuestra cuadr\u00edcula responsiva ser\u00eda el siguiente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"853\" height=\"653\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-2.png\" alt=\"\" class=\"wp-image-719\" srcset=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-2.png 853w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-2-300x230.png 300w, https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/diseno-responsivo-2-768x588.png 768w\" sizes=\"auto, (max-width: 853px) 100vw, 853px\" \/><\/figure>\n\n\n\n<p>En donde las cuadr\u00edculas s\u00e9 iran acoplando de 3 a 1 columnas dependiendo del tama\u00f1o del navegador.<\/p>\n\n\n\n<p>\u00bfNecesitas un asesor para estos temas? \u00bfTienes problemas con tu sitio web actual? <a href=\"https:\/\/pontual.mx\/contacto\/\">Cont\u00e1ctanos<\/a> hoy&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/pontual.mx\/contacto\/?form=contacto&amp;subject=desarrollo-de-software&amp;mostrar=true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"268\" src=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2018\/11\/automatiza-tus-procesos-para-simplificarlos-1024x268.png\" alt=\"\" class=\"wp-image-211\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1o Web responsivo El dise\u00f1o web responsivo es una funcionalidad que tienen las p\u00e1ginas de internet que adapta su contenido seg\u00fan el tama\u00f1o de la pantalla desde el que se ingresa. En la parte t\u00e9cnica el c\u00f3digo HTML puede utilizar un solo archivo para todos los dispositivos, usando etiquetas \u00abtags\u00bb [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":721,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[71,38,11],"class_list":["post-700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-paginas-web","tag-desarrollo-de-software","tag-diseno-de-paginas-web","tag-mejores-practicas"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ventajas y Funcionamiento del Dise\u00f1o Responsivo - Tecnolog\u00eda de Negocio<\/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:\/\/pontual.mx\/blog\/diseno-responsivo\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ventajas y Funcionamiento del Dise\u00f1o Responsivo - Tecnolog\u00eda de Negocio\" \/>\n<meta property=\"og:description\" content=\"Dise\u00f1o Web responsivo El dise\u00f1o web responsivo es una funcionalidad que tienen las p\u00e1ginas de internet que adapta su contenido seg\u00fan el tama\u00f1o de la pantalla desde el que se ingresa. En la parte t\u00e9cnica el c\u00f3digo HTML puede utilizar un solo archivo para todos los dispositivos, usando etiquetas \u00abtags\u00bb [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/\" \/>\n<meta property=\"og:site_name\" content=\"Tecnolog\u00eda de Negocio\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-16T23:11:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-17T19:14:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"pontualtdn\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"pontualtdn\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/\"},\"author\":{\"name\":\"pontualtdn\",\"@id\":\"https:\/\/pontual.mx\/blog\/#\/schema\/person\/ef0bf5b59e412fe5dd3ec1a7fd2b6232\"},\"headline\":\"Ventajas y Funcionamiento del Dise\u00f1o Responsivo\",\"datePublished\":\"2022-08-16T23:11:56+00:00\",\"dateModified\":\"2022-08-17T19:14:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/\"},\"wordCount\":801,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/pontual.mx\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png\",\"keywords\":[\"Desarrollo de Software\",\"Dise\u00f1o de P\u00e1ginas Web\",\"Mejores Pr\u00e1cticas\"],\"articleSection\":[\"P\u00e1ginas Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/\",\"url\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/\",\"name\":\"Ventajas y Funcionamiento del Dise\u00f1o Responsivo - Tecnolog\u00eda de Negocio\",\"isPartOf\":{\"@id\":\"https:\/\/pontual.mx\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png\",\"datePublished\":\"2022-08-16T23:11:56+00:00\",\"dateModified\":\"2022-08-17T19:14:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage\",\"url\":\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png\",\"contentUrl\":\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/pontual.mx\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ventajas y Funcionamiento del Dise\u00f1o Responsivo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pontual.mx\/blog\/#website\",\"url\":\"https:\/\/pontual.mx\/blog\/\",\"name\":\"Tecnolog\u00eda de Negocio\",\"description\":\"Consejos pr\u00e1cticos para aprovechar la tecnolog\u00eda en los negocios.\",\"publisher\":{\"@id\":\"https:\/\/pontual.mx\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pontual.mx\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/pontual.mx\/blog\/#organization\",\"name\":\"Tecnolog\u00eda de Negocio\",\"url\":\"https:\/\/pontual.mx\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/pontual.mx\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2020\/01\/cropped-revista-pontualtdn-1.png\",\"contentUrl\":\"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2020\/01\/cropped-revista-pontualtdn-1.png\",\"width\":801,\"height\":163,\"caption\":\"Tecnolog\u00eda de Negocio\"},\"image\":{\"@id\":\"https:\/\/pontual.mx\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/pontual.mx\/blog\/#\/schema\/person\/ef0bf5b59e412fe5dd3ec1a7fd2b6232\",\"name\":\"pontualtdn\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/9485fd72bba0bb967feab489621d3f7dbc38d5e8eca9f54585d9628ee3dcf56f?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9485fd72bba0bb967feab489621d3f7dbc38d5e8eca9f54585d9628ee3dcf56f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9485fd72bba0bb967feab489621d3f7dbc38d5e8eca9f54585d9628ee3dcf56f?s=96&d=mm&r=g\",\"caption\":\"pontualtdn\"},\"description\":\"PontualTDN es una empresa mexicana dedicada a la Asesor\u00eda en TI, Dise\u00f1o de P\u00e1ginas Web, Desarrollo de Software y Servicios de Sistemas.\",\"sameAs\":[\"http:\/\/www.pontual.mx\"],\"url\":\"https:\/\/pontual.mx\/blog\/author\/pontual\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ventajas y Funcionamiento del Dise\u00f1o Responsivo - Tecnolog\u00eda de Negocio","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:\/\/pontual.mx\/blog\/diseno-responsivo\/","og_locale":"es_ES","og_type":"article","og_title":"Ventajas y Funcionamiento del Dise\u00f1o Responsivo - Tecnolog\u00eda de Negocio","og_description":"Dise\u00f1o Web responsivo El dise\u00f1o web responsivo es una funcionalidad que tienen las p\u00e1ginas de internet que adapta su contenido seg\u00fan el tama\u00f1o de la pantalla desde el que se ingresa. En la parte t\u00e9cnica el c\u00f3digo HTML puede utilizar un solo archivo para todos los dispositivos, usando etiquetas \u00abtags\u00bb [&hellip;]","og_url":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/","og_site_name":"Tecnolog\u00eda de Negocio","article_published_time":"2022-08-16T23:11:56+00:00","article_modified_time":"2022-08-17T19:14:12+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png","type":"image\/png"}],"author":"pontualtdn","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"pontualtdn","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#article","isPartOf":{"@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/"},"author":{"name":"pontualtdn","@id":"https:\/\/pontual.mx\/blog\/#\/schema\/person\/ef0bf5b59e412fe5dd3ec1a7fd2b6232"},"headline":"Ventajas y Funcionamiento del Dise\u00f1o Responsivo","datePublished":"2022-08-16T23:11:56+00:00","dateModified":"2022-08-17T19:14:12+00:00","mainEntityOfPage":{"@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/"},"wordCount":801,"commentCount":0,"publisher":{"@id":"https:\/\/pontual.mx\/blog\/#organization"},"image":{"@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage"},"thumbnailUrl":"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png","keywords":["Desarrollo de Software","Dise\u00f1o de P\u00e1ginas Web","Mejores Pr\u00e1cticas"],"articleSection":["P\u00e1ginas Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pontual.mx\/blog\/diseno-responsivo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/","url":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/","name":"Ventajas y Funcionamiento del Dise\u00f1o Responsivo - Tecnolog\u00eda de Negocio","isPartOf":{"@id":"https:\/\/pontual.mx\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage"},"image":{"@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage"},"thumbnailUrl":"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png","datePublished":"2022-08-16T23:11:56+00:00","dateModified":"2022-08-17T19:14:12+00:00","breadcrumb":{"@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pontual.mx\/blog\/diseno-responsivo\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#primaryimage","url":"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png","contentUrl":"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2022\/08\/responsive-design.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/pontual.mx\/blog\/diseno-responsivo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/pontual.mx\/blog\/"},{"@type":"ListItem","position":2,"name":"Ventajas y Funcionamiento del Dise\u00f1o Responsivo"}]},{"@type":"WebSite","@id":"https:\/\/pontual.mx\/blog\/#website","url":"https:\/\/pontual.mx\/blog\/","name":"Tecnolog\u00eda de Negocio","description":"Consejos pr\u00e1cticos para aprovechar la tecnolog\u00eda en los negocios.","publisher":{"@id":"https:\/\/pontual.mx\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pontual.mx\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/pontual.mx\/blog\/#organization","name":"Tecnolog\u00eda de Negocio","url":"https:\/\/pontual.mx\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/pontual.mx\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2020\/01\/cropped-revista-pontualtdn-1.png","contentUrl":"https:\/\/pontual.mx\/blog\/wp-content\/uploads\/2020\/01\/cropped-revista-pontualtdn-1.png","width":801,"height":163,"caption":"Tecnolog\u00eda de Negocio"},"image":{"@id":"https:\/\/pontual.mx\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/pontual.mx\/blog\/#\/schema\/person\/ef0bf5b59e412fe5dd3ec1a7fd2b6232","name":"pontualtdn","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/9485fd72bba0bb967feab489621d3f7dbc38d5e8eca9f54585d9628ee3dcf56f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9485fd72bba0bb967feab489621d3f7dbc38d5e8eca9f54585d9628ee3dcf56f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9485fd72bba0bb967feab489621d3f7dbc38d5e8eca9f54585d9628ee3dcf56f?s=96&d=mm&r=g","caption":"pontualtdn"},"description":"PontualTDN es una empresa mexicana dedicada a la Asesor\u00eda en TI, Dise\u00f1o de P\u00e1ginas Web, Desarrollo de Software y Servicios de Sistemas.","sameAs":["http:\/\/www.pontual.mx"],"url":"https:\/\/pontual.mx\/blog\/author\/pontual\/"}]}},"_links":{"self":[{"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/posts\/700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/comments?post=700"}],"version-history":[{"count":18,"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/posts\/700\/revisions"}],"predecessor-version":[{"id":734,"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/posts\/700\/revisions\/734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/media\/721"}],"wp:attachment":[{"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/media?parent=700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/categories?post=700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pontual.mx\/blog\/wp-json\/wp\/v2\/tags?post=700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}