{"id":2231,"date":"2019-03-31T12:07:26","date_gmt":"2019-03-31T15:07:26","guid":{"rendered":"https:\/\/www.grid.cl\/blog\/?p=2231"},"modified":"2019-03-31T10:12:04","modified_gmt":"2019-03-31T13:12:04","slug":"por-que-deberias-prestarle-mas-atencion-al-diseno-web-responsive","status":"publish","type":"post","link":"https:\/\/www.grid.cl\/blog\/por-que-deberias-prestarle-mas-atencion-al-diseno-web-responsive\/","title":{"rendered":"\u00bfPor que deber\u00edas prestarle mas atenci\u00f3n al dise\u00f1o web responsive?"},"content":{"rendered":"

Hoy en d\u00eda accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone<\/strong>. Por lo que, cada vez m\u00e1s, nos surge la necesidad de que nuestra web se adapte a los diferentes tama\u00f1os de los mismos<\/strong>. El dise\u00f1o web responsive o adaptativo es una t\u00e9cnica de dise\u00f1o web que busca la correcta visualizaci\u00f3n de una misma p\u00e1gina en distintos dispositivos<\/strong>.<\/p>\n

La preocupaci\u00f3n por crear sitios web adaptables ha ido creciendo en los \u00faltimos a\u00f1os<\/strong>, y cada vez son m\u00e1s los que trabajan en esta l\u00ednea con el objetivo de proporcionar una experiencia \u00f3ptima de navegaci\u00f3n adecuada a los distintos tipos de usuario<\/strong>. Este concepto hace referencia a la adaptabilidad de un sitio web, es decir a su capacidad para adaptarse a los diferentes dispositivos desde los que puede ser consultado<\/strong>.<\/p>\n

\u00bfEn qu\u00e9 consiste el dise\u00f1o responsive?<\/strong><\/h1>\n

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualizaci\u00f3n y una mejor experiencia de usuario<\/strong>. Se caracteriza porque los contenidos e im\u00e1genes son fluidos y se usa c\u00f3digo media queries de CSS3.<\/p>\n

El dise\u00f1o responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho m\u00e1s r\u00e1pida y natural<\/strong>. Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo m\u00e1s similar posible, frente a otras aproximaciones al desarrollo web m\u00f3vil como la creaci\u00f3n de apps, el cambio de dominio o webs servidas din\u00e1micamente en funci\u00f3n del dispositivo.<\/strong><\/p>\n

\u00bfPor qu\u00e9 necesitas tener una web responsive?<\/strong><\/h1>\n

Porque el mundo es cada vez m\u00e1s m\u00f3vil<\/strong><\/h3>\n

Uno de cada dos usuarios consulta el smartphone en los primeros cinco minutos desde que se levanta<\/strong> y tres de cada diez revisan el tel\u00e9fono cada diez minutos. A nivel mundial, m\u00e1s de la mitad del tr\u00e1fico web procede de m\u00f3viles. En definitiva, si tu web no se visualiza adecuadamente desde dispositivos m\u00f3viles, tienes un serio problema.<\/strong><\/p>\n

Mejora la experiencia de usuario<\/strong><\/h3>\n

El responsive ofrece una experiencia optimizada para todos los usuarios, independientemente del dispositivo que usen, y eso redunda en beneficios para la marca.<\/p>\n

Es imprescindible para tu SEO<\/strong><\/h3>\n

Si no cuentas con un sitio web responsive, est\u00e1s posicionando peor cada vez que un usuario te busca y perdiendo una gran fuente de tr\u00e1fico.<\/strong><\/p>\n

Te ayudar\u00e1 a mejorar tu branding<\/strong><\/h3>\n

Si un usuario intenta acceder a tu sitio web desde el m\u00f3vil y no tiene una experiencia satisfactoria, se llevar\u00e1 la impresi\u00f3n de que tu marca est\u00e1 desfasada y tu empresa no se preocupa por la satisfacci\u00f3n del cliente.<\/strong> En cambio, un sitio responsive, moderno y con buena usabilidad le crear\u00e1 una buena impresi\u00f3n que se contagiar\u00e1 de manera natural a tus productos y servicios.<\/strong><\/p>\n

Obtendr\u00e1s m\u00e1s conversiones y leads<\/strong><\/h3>\n

Mejorar la navegaci\u00f3n en los diferentes dispositivos asegura que los usuarios lo tienen f\u00e1cil para encontrar lo que buscan,<\/strong> pasan m\u00e1s tiempo en tu web y tienen m\u00e1s probabilidades de acabar dej\u00e1ndote tus datos o confirmando la compra en tus landing pages.<\/strong><\/p>\n

Estar\u00e1s preparado para el futuro<\/strong><\/h3>\n

Los usuarios emplean una variedad de dispositivos con diferentes tama\u00f1os de pantalla y resoluciones. <\/strong>Ya es complicado dise\u00f1ar una soluci\u00f3n individual para cada tipo de dispositivo. Si tienes un sitio responsive, no solo estar\u00e1 preparado para verse bien en todos los dispositivos que existen hoy en d\u00eda, sino que tambi\u00e9n podr\u00e1s adaptarte a resoluciones y tipos de pantalla que a\u00fan no existen<\/strong>.<\/p>\n

Ventajas de un dise\u00f1o responsive<\/strong><\/h1>\n

\"\"<\/p>\n

Elegir este tipo de dise\u00f1o para nuestra web es sin\u00f3nimo de facilidad<\/strong>, suponiendo un gran acierto que nos permite las siguientes ventajas:<\/p>\n

    \n
  • URL \u00fanica, para una indexaci\u00f3n com\u00fan efectiva<\/strong> para un posterior posicionamiento.<\/li>\n
  • Se realiza un solo dise\u00f1o para los 3 dispositivos<\/strong>, ahorr\u00e1ndonos tiempo y costes.<\/li>\n
  • Se evita duplicar contenido <\/strong>entre las diferentes versiones.<\/li>\n
  • Dise\u00f1o soportado por todos los navegadores<\/strong>.<\/li>\n<\/ul>\n

    Existen ciertos aspectos a tener en cuenta para definir este dise\u00f1o, como procurar que los contenidos en bloques tengan una distribuci\u00f3n l\u00f3gica y legible para todos los dispositivos.<\/strong> Si nos decidimos por el dise\u00f1o responsive hemos de saber que existen diferentes emuladores o programas que nos ofrecen una previsualizaci\u00f3n de c\u00f3mo ser\u00eda nuestra web con este nuevo dise\u00f1o<\/strong>.<\/p>\n

    Elementos que hay que tener en cuenta para dise\u00f1ar un buen sitio responsive<\/strong><\/h1>\n

    Las tipograf\u00edas<\/strong><\/h3>\n

    Evidentemente, el tama\u00f1o de letra tiene que ser diferente en funci\u00f3n de la pantalla, <\/strong>de manera que podamos leer los textos sin necesidad de hacer zoom.<\/p>\n

    Las im\u00e1genes y los v\u00eddeos <\/strong><\/h3>\n

    Los elementos visuales de la p\u00e1gina deben seguir una proporci\u00f3n l\u00f3gica en funci\u00f3n del dispositivo donde se muestren<\/strong>, de manera que podamos verlos con comodidad.<\/p>\n

    El formato horizontal o vertical<\/strong><\/h3>\n

    Es necesario tener en cuenta que los usuarios de m\u00f3viles suelen preferir el vertical<\/strong>, pero pueden alternar entre ambos para visualizar un contenido determinado.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Hoy en d\u00eda accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone. Por lo que, cada vez m\u00e1s, nos surge la necesidad de que nuestra web se adapte a los diferentes tama\u00f1os de los mismos. El dise\u00f1o web responsive o adaptativo es una t\u00e9cnica de dise\u00f1o web que busca la correcta visualizaci\u00f3n […]<\/p>\n","protected":false},"author":2,"featured_media":2232,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-2231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno"],"_links":{"self":[{"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/posts\/2231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/comments?post=2231"}],"version-history":[{"count":2,"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/posts\/2231\/revisions"}],"predecessor-version":[{"id":2235,"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/posts\/2231\/revisions\/2235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/media\/2232"}],"wp:attachment":[{"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/media?parent=2231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/categories?post=2231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.grid.cl\/blog\/wp-json\/wp\/v2\/tags?post=2231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}