{"id":3450,"date":"2022-07-02T02:29:07","date_gmt":"2022-07-02T02:29:07","guid":{"rendered":"https:\/\/clima.casa\/iberotest\/index.php\/2022\/07\/02\/diseno-responsive\/"},"modified":"2022-07-02T02:29:07","modified_gmt":"2022-07-02T02:29:07","slug":"diseno-responsive","status":"publish","type":"post","link":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/","title":{"rendered":"Dise\u00f1o responsive – \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web?"},"content":{"rendered":"

El dise\u00f1o responsive es totalmente necesario en cualquier web ya que tiene un alto impacto en la cantidad de visitantes que recibiremos y en el posicionamiento web SEO.\u00a0 En este art\u00edculo te explicamos lo que es y como implementarlo en tu p\u00e1gina web. <\/a>\u00a1No te lo pierdas!<\/p>\n

\u00bfQu\u00e9 es una web con dise\u00f1o responsive o web adaptativa?<\/h2>\n

Se conoce como web con dise\u00f1o responsive, web responsiva, o web adaptativa a aquella p\u00e1gina web que adapta su contenido al tama\u00f1o de cualquier pantalla. Dicha adaptaci\u00f3n, no consiste en reducir el tama\u00f1o de la p\u00e1gina web.<\/a> Sino en variar totalmente la estructura de la web de forma autom\u00e1tica, para que los elementos se redistribuyan aprovechando la forma y resoluci\u00f3n nativa de la pantalla del visitante, bien sea un PC, un m\u00f3vil un Smart TV o una tablet.<\/p>\n

Gracias al dise\u00f1o responsive, los textos no se ven peque\u00f1os, las im\u00e1genes caben perfectamente en la pantalla y no es necesario desplazarse horizontalmente, todo es vertical. Hoy en d\u00eda m\u00e1s del 70% de las visitas a p\u00e1ginas web se realizan desde dispositivos m\u00f3viles.<\/strong><\/p>\n

\u00bfC\u00f3mo se consigue hacer una web adaptativa?<\/h2>\n

Existen dos elementos que son necesarios para conseguir un dise\u00f1o responsive en una web. Primero reglas de estilo CSS especiales, ellas se encargan de darle un formato u otro a los elementos de la web seg\u00fan el tama\u00f1o de la pantalla del visitante. Son de mucha utilidad las reglas conocidas como @media querys.<\/a> Tambi\u00e9n frameworks como Bootstrap<\/a> te ayudar\u00e1n a ahorrar mucho tiempo y esfuerzo.<\/p>\n

\"dise\u00f1o<\/p>\n

Ejemplo de dise\u00f1o responsive y la redistribuci\u00f3n de elementos de la p\u00e1gina web seg\u00fan el tipo de pantalla.<\/em><\/p>\n

En segundo lugar, se emplea c\u00f3digo javascript para que elementos que interact\u00faan con el rat\u00f3n, lo hagan bien en pantallas t\u00e1ctiles. Por ejemplo, en un m\u00f3vil, un carroussel de im\u00e1genes se desplaza deslizando con el dedo, mientras que en el PC, se hace clic en unas flechas en pantalla. Muchas plantillas de WordPress, Prestashop y Joomla! funcionan de forma interna con total compatibilidad con el dise\u00f1o responsive e incluyen bootstrap en su n\u00facleo.<\/p>\n

Cuando menos es m\u00e1s. La clave del dise\u00f1o de p\u00e1ginas web para m\u00f3viles..<\/h2>\n

Para que una p\u00e1gina web<\/a> se vea bien en un m\u00f3vil, no solo es necesario el dise\u00f1o responsive. Una menor cantidad de elementos, una buena compresi\u00f3n de las im\u00e1genes y un buen sistema de cach\u00e9 ayudar\u00e1n a que la web cargue mejor en m\u00f3viles. Cuando dise\u00f1amos una web responsive, hacemos que algunos elementos no aparezcan en la versi\u00f3n m\u00f3vil y lo hacemos de forma intencionada.<\/p>\n

El visitante que entra desde un m\u00f3vil necesita informaci\u00f3n precisa, clara y r\u00e1pida y debemos d\u00e1rsela sin ponerle trabas. Si nuestra p\u00e1gina web dispone de dise\u00f1o responsive,<\/a> pero es lenta en cargar, complicada y est\u00e1 sobrecargada, los visitantes sencillamente, se ir\u00e1n. Ten en cuenta el consejo. Menos es m\u00e1s. Si una p\u00e1gina web tarda m\u00e1s de 3 segundos en cargar, el 87% de los visitantes la abandonan<\/strong> y van a otra, generalmente, de la competencia.<\/p>\n

El gran impacto del dise\u00f1o responsive en el posicionamiento web SEO.<\/h2>\n

Cada vez que Google indexa una p\u00e1gina web nueva, es decir, la a\u00f1ade a su \u00edndice, la prueba a conciencia. Verifica los tiempos de carga de la p\u00e1gina y lo hace emulando una conexi\u00f3n 3G lenta y digamos \u00abrudimentaria\u00bb desde un tel\u00e9fono m\u00f3vil. Google robot for Smartphones es el nombre de la herramienta que testea todas y cada unas de las p\u00e1ginas que aparecen en Google. Si tu p\u00e1gina no pasa correctamente el test, puede aparecer en Google, pero no adelantar\u00e1 a otras webs que si que pasen el test.\u00a0<\/strong><\/p>\n

Por este motivo, es muy importante el dise\u00f1o responsive, pero no solo eso, debemos testear la web a conciencia. Para ello chequearemos con frecuencia Google Search console y realizaremos el test manual de nuestras p\u00e1ginas web m\u00e1s importantes. As\u00ed comprobaremos que efectivamente el dise\u00f1o responsive se est\u00e1 cumpliendo bien con su funci\u00f3n. Por cierto, si necesitas crear una p\u00e1gina web con dise\u00f1o responsive, no dudes en contactar con nosotros ahora mismo.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

El dise\u00f1o responsive es totalmente necesario en cualquier web ya que tiene un alto impacto en la cantidad de visitantes que recibiremos y en el posicionamiento web SEO.  En este art\u00edculo te explicamos lo que es y como implementarlo en tu p\u00e1gina web. <\/a>\u00a1No te lo pierdas!<\/p>\n","protected":false},"author":1,"featured_media":8503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[],"class_list":["post-3450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"acf":[],"yoast_head":"\nDise\u00f1o responsive - \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web? - iberotecno new<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o responsive - \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web? - iberotecno new\" \/>\n<meta property=\"og:description\" content=\"El dise\u00f1o responsive es totalmente necesario en cualquier web ya que tiene un alto impacto en la cantidad de visitantes que recibiremos y en el posicionamiento web SEO.  En este art\u00edculo te explicamos lo que es y como implementarlo en tu p\u00e1gina web. \u00a1No te lo pierdas!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/iberotecno.com\/staging\/diseno-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"iberotecno new\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-02T02:29:07+00:00\" \/>\n<meta name=\"author\" content=\"supraimperio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"supraimperio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/\"},\"author\":{\"name\":\"supraimperio\",\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/#\\\/schema\\\/person\\\/2c44a6070b52a0ce4ef1e08522e3a866\"},\"headline\":\"Dise\u00f1o responsive – \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web?\",\"datePublished\":\"2022-07-02T02:29:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/\"},\"wordCount\":755,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/respsonsive.gif\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/\",\"url\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/\",\"name\":\"Dise\u00f1o responsive - \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web? - iberotecno new\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/respsonsive.gif\",\"datePublished\":\"2022-07-02T02:29:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/#\\\/schema\\\/person\\\/2c44a6070b52a0ce4ef1e08522e3a866\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#primaryimage\",\"url\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/respsonsive.gif\",\"contentUrl\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/respsonsive.gif\",\"width\":800,\"height\":600,\"caption\":\"dise\u00f1o responsive\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/diseno-responsive\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o responsive – \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/#website\",\"url\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/\",\"name\":\"iberotecno new\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/#\\\/schema\\\/person\\\/2c44a6070b52a0ce4ef1e08522e3a866\",\"name\":\"supraimperio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/935bde5987dec471aff84225fed14e5622eddc8864d8b02a1428ec425b71ef02?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/935bde5987dec471aff84225fed14e5622eddc8864d8b02a1428ec425b71ef02?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/935bde5987dec471aff84225fed14e5622eddc8864d8b02a1428ec425b71ef02?s=96&d=mm&r=g\",\"caption\":\"supraimperio\"},\"sameAs\":[\"https:\\\/\\\/iberotecno.com\\\/staging\"],\"url\":\"https:\\\/\\\/iberotecno.com\\\/staging\\\/author\\\/supraimperio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dise\u00f1o responsive - \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web? - iberotecno new","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Dise\u00f1o responsive - \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web? - iberotecno new","og_description":"El dise\u00f1o responsive es totalmente necesario en cualquier web ya que tiene un alto impacto en la cantidad de visitantes que recibiremos y en el posicionamiento web SEO.  En este art\u00edculo te explicamos lo que es y como implementarlo en tu p\u00e1gina web. \u00a1No te lo pierdas!","og_url":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/","og_site_name":"iberotecno new","article_published_time":"2022-07-02T02:29:07+00:00","author":"supraimperio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"supraimperio","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/#article","isPartOf":{"@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/"},"author":{"name":"supraimperio","@id":"https:\/\/iberotecno.com\/staging\/#\/schema\/person\/2c44a6070b52a0ce4ef1e08522e3a866"},"headline":"Dise\u00f1o responsive – \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web?","datePublished":"2022-07-02T02:29:07+00:00","mainEntityOfPage":{"@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/"},"wordCount":755,"commentCount":0,"image":{"@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/iberotecno.com\/staging\/wp-content\/uploads\/2022\/07\/respsonsive.gif","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/iberotecno.com\/staging\/diseno-responsive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/","url":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/","name":"Dise\u00f1o responsive - \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web? - iberotecno new","isPartOf":{"@id":"https:\/\/iberotecno.com\/staging\/#website"},"primaryImageOfPage":{"@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/#primaryimage"},"image":{"@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/iberotecno.com\/staging\/wp-content\/uploads\/2022\/07\/respsonsive.gif","datePublished":"2022-07-02T02:29:07+00:00","author":{"@id":"https:\/\/iberotecno.com\/staging\/#\/schema\/person\/2c44a6070b52a0ce4ef1e08522e3a866"},"breadcrumb":{"@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/iberotecno.com\/staging\/diseno-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/#primaryimage","url":"https:\/\/iberotecno.com\/staging\/wp-content\/uploads\/2022\/07\/respsonsive.gif","contentUrl":"https:\/\/iberotecno.com\/staging\/wp-content\/uploads\/2022\/07\/respsonsive.gif","width":800,"height":600,"caption":"dise\u00f1o responsive"},{"@type":"BreadcrumbList","@id":"https:\/\/iberotecno.com\/staging\/diseno-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/iberotecno.com\/staging\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o responsive – \u00bfPor qu\u00e9 es tan importante en una p\u00e1gina web?"}]},{"@type":"WebSite","@id":"https:\/\/iberotecno.com\/staging\/#website","url":"https:\/\/iberotecno.com\/staging\/","name":"iberotecno new","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/iberotecno.com\/staging\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/iberotecno.com\/staging\/#\/schema\/person\/2c44a6070b52a0ce4ef1e08522e3a866","name":"supraimperio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/935bde5987dec471aff84225fed14e5622eddc8864d8b02a1428ec425b71ef02?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/935bde5987dec471aff84225fed14e5622eddc8864d8b02a1428ec425b71ef02?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/935bde5987dec471aff84225fed14e5622eddc8864d8b02a1428ec425b71ef02?s=96&d=mm&r=g","caption":"supraimperio"},"sameAs":["https:\/\/iberotecno.com\/staging"],"url":"https:\/\/iberotecno.com\/staging\/author\/supraimperio\/"}]}},"_links":{"self":[{"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/posts\/3450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/comments?post=3450"}],"version-history":[{"count":0,"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/posts\/3450\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/media\/8503"}],"wp:attachment":[{"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/media?parent=3450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/categories?post=3450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iberotecno.com\/staging\/wp-json\/wp\/v2\/tags?post=3450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}