{"id":12246,"date":"2019-04-11T15:33:46","date_gmt":"2019-04-11T13:33:46","guid":{"rendered":"https:\/\/www.veiss.com\/blog\/?p=12246"},"modified":"2023-01-30T13:10:56","modified_gmt":"2023-01-30T12:10:56","slug":"diseno-responsive","status":"publish","type":"post","link":"https:\/\/www.veiss.com\/blog\/diseno-responsive\/","title":{"rendered":"Dise\u00f1o responsive para ayudar a tus usuarios a navegar desde su m\u00f3vil"},"content":{"rendered":"<p><strong>\u00bfQu\u00e9 haces cuando navegas por tu smartphone y te resulta complicado navegar por una p\u00e1gina web?<\/strong> Es posible que como muchas personas, abandones la p\u00e1gina y acudas a otra m\u00e1s accesible. No dejes que esto suceda en tu propia p\u00e1gina web y ad\u00e1ptala a todos los dispositivos <strong>con un dise\u00f1o responsive adecuado.<\/strong><\/p>\n<p>M\u00e1s del 30% del tr\u00e1fico web proviene desde m\u00f3viles. En algunas p\u00e1ginas web, se acerca al 50% e incluso es el dispositivo mayoritario. \u00bfEst\u00e1s dispuesto a perder visitas porque tu web no tiene un dise\u00f1o responsive y no se visualiza correctamente en todos los dispositivos?<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_45 counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">&iquest;Qu&eacute; vas a leer en este contenido?<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" area-label=\"ez-toc-toggle-icon-1\"><label for=\"item-69e9b6cdc2faf\" aria-label=\"Tabla de contenidos\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #2a2a2a;color:#2a2a2a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #2a2a2a;color:#2a2a2a\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-69e9b6cdc2faf\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.veiss.com\/blog\/diseno-responsive\/#%C2%BFQue_es_diseno_responsive\" title=\"\u00bfQu\u00e9 es dise\u00f1o responsive?\">\u00bfQu\u00e9 es dise\u00f1o responsive?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.veiss.com\/blog\/diseno-responsive\/#Ventajas_del_diseno_web_responsive\" title=\"Ventajas del dise\u00f1o web responsive\">Ventajas del dise\u00f1o web responsive<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.veiss.com\/blog\/diseno-responsive\/#Ahorro_de_costes\" title=\"Ahorro de costes\">Ahorro de costes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.veiss.com\/blog\/diseno-responsive\/#Ayuda_al_posicionamiento_en_moviles\" title=\"Ayuda al posicionamiento en m\u00f3viles\">Ayuda al posicionamiento en m\u00f3viles<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.veiss.com\/blog\/diseno-responsive\/#Como_hacer_una_web_responsive\" title=\"C\u00f3mo hacer una web responsive\">C\u00f3mo hacer una web responsive<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_diseno_responsive\"><\/span>\u00bfQu\u00e9 es dise\u00f1o responsive?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Consigue que tu<strong>&nbsp;sitio web se vea correctamente en los diferentes dispositivos:<\/strong> ordenadores, port\u00e1tiles, tablets, m\u00f3viles. Incluso dentro de los mismos dispositivos existen diferentes tama\u00f1os de pantallas. Estos son los dispositivos m\u00e1s utilizados hoy en d\u00eda. En el futuro es posible que se popularicen otros como el libro electr\u00f3nico, televisi\u00f3n, pantallas de coches, etc.<\/li>\n<li><strong>Los elementos de tu web se adaptan al ancho de cada dispositivo<\/strong> para que se vean bien y faciliten la navegaci\u00f3n al usuario. De esta forma, evitaremos que el usuario abandone nuestra p\u00e1gina. Por ejemplo:\n<ul>\n<li><strong>Texto del tama\u00f1o adecuado<\/strong> para poder leerlo c\u00f3modamente.<\/li>\n<li><strong>Enlaces<\/strong> a una distancia adecuada para poder pincharlos correctamente.<\/li>\n<li>Tama\u00f1o adecuado de los <strong>botones t\u00e1ctiles.&nbsp;\u2003<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Ventajas_del_diseno_web_responsive\"><\/span>Ventajas del dise\u00f1o web responsive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Ahorro_de_costes\"><\/span>Ahorro de costes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Solo existe una versi\u00f3n de la Web<\/strong> y todos los usuarios ven el mismo contenido. Si bien en el desarrollo inicial invertir\u00e1s m\u00e1s tiempo, ahorrar\u00e1s en el mantenimiento con el dise\u00f1o responsive.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ayuda_al_posicionamiento_en_moviles\"><\/span>Ayuda al posicionamiento en m\u00f3viles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Durante varios a\u00f1os, las predicciones de fin de a\u00f1o auguraban que el que entraba ser\u00eda el a\u00f1o del m\u00f3vil. Cost\u00f3 m\u00e1s de lo anunciado, pero hace ya tiempo que lo que parec\u00eda una amenaza se ha convertido en una realidad. En lugar de verlo como un riesgo, debemos tomarlo como una oportunidad de conectar con nuestros clientes en cualquier lugar y momento.<\/p>\n<p>Google ya ven\u00eda trabajando en ello, pero ha sido en 2018 cuando ha empezado a tener en cuenta la versi\u00f3n responsive para el posicionamiento general de la web. El objetivo del buscador es mostrar resultados de calidad para sus usuarios y su opci\u00f3n preferida es la responsive web.<\/p>\n<p>Adem\u00e1s, <strong>la popularidad web se concentra en un solo dominio<\/strong> y no tendremos que conseguir enlaces para la versi\u00f3n desktop por un lado y la versi\u00f3n m\u00f3vil por el otro.<\/p>\n<h2><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-12256 size-full\" src=\"https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2019\/04\/dise\u00f1o_responsive.png\" alt=\"Dise\u00f1o responsive\" width=\"1032\" height=\"595\" srcset=\"https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2019\/04\/dise\u00f1o_responsive.png 1032w, https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2019\/04\/dise\u00f1o_responsive-300x173.png 300w, https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2019\/04\/dise\u00f1o_responsive-768x443.png 768w, https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2019\/04\/dise\u00f1o_responsive-600x346.png 600w, https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2019\/04\/dise\u00f1o_responsive-104x60.png 104w\" sizes=\"(max-width: 1032px) 100vw, 1032px\" \/><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Como_hacer_una_web_responsive\"><\/span>C\u00f3mo hacer una web responsive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Desde hace bastante tiempo, Gooogle, en su herramienta para webmaster <a href=\"https:\/\/search.google.com\/search-console\/about\" target=\"_blank\" rel=\"noopener\">Google Search Console<\/a>, tiene un informe de <a href=\"https:\/\/www.veiss.com\/blog\/nueva-version-de-google-search-console\/\">Informe usabilidad m\u00f3vil<\/a> que te indicar\u00e1 si hay algo que no est\u00e1s haciendo bien y a qu\u00e9 p\u00e1ginas dentro de tu web afecta. Algunos de los errores m\u00e1s habituales tienen que ver con estos:<\/p>\n<ul>\n<li><strong>Men\u00fa de navegaci\u00f3n:<\/strong> en un ordenador el men\u00fa de navegaci\u00f3n suele ocupar un espacio horizontal. En la navegaci\u00f3n m\u00f3vil no disponemos de ese espacio, por lo que el men\u00fa y la estructura de la p\u00e1gina en general suelen mostrar una presentaci\u00f3n vertical.<\/li>\n<li><b>Botones y enlaces de navegaci\u00f3n&nbsp;<\/b>que no est\u00e9n demasiado cerca entre s\u00ed, con espacio suficiente para que al hacer clic en uno no hagas clic en el de al lado sin querer.<\/li>\n<li><strong>Carga r\u00e1pida de la p\u00e1gina:<\/strong> para ello se limita la carga de c\u00f3digo hasta que el usuario necesita una funcionalidad. Permite un acceso inmediato a informaci\u00f3n que pueda necesitar el usuario en un m\u00f3vil (por ejemplo, las formas de contacto).<\/li>\n<li><strong>Tipograf\u00eda<\/strong>&nbsp;e im\u00e1genes adecuados tanto en tama\u00f1o como en color:&nbsp;que no sea necesario desplazarse horizontalmente para ver el contenido.<\/li>\n<li><strong>Definir la ventana gr\u00e1fica:<\/strong> para indicar a los navegadores c\u00f3mo se ajusta el tama\u00f1o de la p\u00e1gina a cada dispositivo.<\/li>\n<\/ul>\n<p>Si tu p\u00e1gina web a\u00fan no tiene un dise\u00f1o responsive o si piensas que es mejorable, no esperes m\u00e1s tiempo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 haces cuando navegas por tu smartphone y te resulta complicado navegar por una p\u00e1gina web? Es posible que como muchas personas, abandones la p\u00e1gina y acudas a otra m\u00e1s accesible. No dejes que esto suceda en tu propia p\u00e1gina web y ad\u00e1ptala a todos los dispositivos con un dise\u00f1o responsive adecuado. M\u00e1s del 30% [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":12665,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[1249,1247,1248,1251,1250],"_links":{"self":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12246"}],"collection":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/comments?post=12246"}],"version-history":[{"count":16,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12246\/revisions"}],"predecessor-version":[{"id":12666,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12246\/revisions\/12666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/media\/12665"}],"wp:attachment":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/media?parent=12246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/categories?post=12246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/tags?post=12246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}