{"id":730,"date":"2016-06-14T16:34:24","date_gmt":"2016-06-14T21:34:24","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=730"},"modified":"2017-11-16T12:13:44","modified_gmt":"2017-11-16T18:13:44","slug":"que-es-responsive-design","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/que-es-responsive-design\/","title":{"rendered":"Qu\u00e9 es Responsive Design: Consideraciones"},"content":{"rendered":"

Responsive Design se refiere al uso de t\u00e9cnicas para adaptar una web a la mayor cantidad de dispositivos. En \u00e9ste art\u00edculo aprenderemos lo que debemos tener en cuenta a la hora de realizar un sitio que sea Responsive.<\/span><\/p>\n

\"Responsive<\/a><\/p>\n

<\/p>\n

Por qu\u00e9 necesitamos Responsive Design.<\/span><\/h2>\n

Principalmente por dos razones. <\/span><\/p>\n

    \n
  1. Los smartphones son cada d\u00eda m\u00e1s comunes<\/strong>. Cada vez hay m\u00e1s personas utilizando smartphones para acceder a internet, y cualquiera que cuente con uno puede ingresar a tu sitio y convertirse en un cliente, por lo que es muy importante que tu web se adapte a cualquier tipo de pantalla.\u00a0<\/span><\/li>\n
  2. Debes considerar que existen diversos tipos de tama\u00f1o de pantalla<\/strong>, y van desde un smartphone con una pantalla muy reducida, hasta pantallas muy grandes y de mucha resoluci\u00f3n. Con Responsive Design tu sitio est\u00e1 preparado para ser visto desde cualquier dispositivo.<\/span><\/li>\n<\/ol>\n

    Brevemente explicamos qu\u00e9 se debe tener en cuenta para realizar un dise\u00f1o Responsive<\/strong>.<\/span><\/p>\n

    1. Patrones de dise\u00f1o<\/h3>\n

    Existen diversos patrones o formas de dise\u00f1ar\u00a0un sitio Responsive Design. Son las siguientes:<\/span><\/p>\n

      \n
    1. Most fluid<\/strong>. El contenido principal se distribuye. Como se muestra en la imagen, a medida que la pantalla es m\u00e1s peque\u00f1a, cada caja que conforma la cuadr\u00edcula va cayendo y empujando a la siguiente que a su vez empuja a las otras, as\u00ed hasta que nos quedamos en una sola columna con las cajas apiladas verticalmente. \u00a0\"mostly-fluid\"<\/a><\/span><\/li>\n
    2. Column drop.<\/strong> Son columnas una al lado de la otra que van a ir cayendo seg\u00fan sea el tama\u00f1o de la pantalla.\u00a0\"column-drop\"<\/a><\/span><\/li>\n
    3. Layout shifter.<\/strong> Reajusta el dise\u00f1o del sitio de acuerdo al ancho de la pantalla. Cambia mucho la disposici\u00f3n de los elementos, no solamente \u201cempuja\u201d o \u201ccaen\u201d los elementos, sino que el dise\u00f1o cambia de acuerdo a las necesidades.\u00a0\"layout-shifter\"<\/a><\/span><\/li>\n
    4. Tiny tweaks.<\/strong> O \u201cPeque\u00f1os cambios\u201d en el dise\u00f1o, como ajustar el tama\u00f1o de la fuente, cambiar el tama\u00f1o de las im\u00e1genes o desplazar el contenido de diferentes maneras. A veces pareciera que \u00fanicamente se redujo el tama\u00f1o del sitio para que entrase en la pantalla.\u00a0\"layout-shifter\"<\/a><\/span><\/li>\n
    5. Off canvas.<\/strong> El contenido menos usado se coloca fuera de la pantalla y solo se muestra cuando el tama\u00f1o de la pantalla es lo suficientemente grande; en las pantallas m\u00e1s peque\u00f1as se requiere que el usuario se desplace hacia la derecha o izquierda.\u00a0\"off-canvas\"<\/a><\/span><\/li>\n<\/ol>\n

      2. Orientaci\u00f3n de la pantalla. <\/span><\/h3>\n

      Antes el usuario no pod\u00eda cambiar la orientaci\u00f3n del enorme monitor de video de su computadora. Con la diversidad de dispositivos m\u00f3viles actuales un sitio web debe verse bien en Portrait como en Landscape. (Vertical y Horizontal). Un dise\u00f1o web responsive debe considerar este hecho.\u00a0<\/span><\/p>\n

      \"iphone-landscape-portrait\"<\/a><\/p>\n

      3. El ViewPort. <\/span><\/h3>\n

      Se utiliza para definir el alto, ancho y escala del navegador para visualizar el contenido. En <\/span>Viewportsizes.com<\/span><\/a> vemos informaci\u00f3n relacionada al Viewport para diversos dispositivos.<\/span><\/p>\n

      4. Unidades de medida. <\/span><\/h3>\n

      Existen absolutas<\/em> como el pixel (px) y relativas<\/em> (como porcentaje (%), altura de fuente (em), root-em (rem), viewport-height (vh) y viewport-width (vw). <\/span><\/p>\n

      5. Densidad de pixel. <\/span><\/h3>\n

      Se debe tomar en cuenta la cantidad de pixeles que se pueden mostrar en una determinada pantalla. De no hacerlo as\u00ed, algunas im\u00e1genes se podr\u00edan ver muy bien en determinados dispositivos y verse mal (o \u201cpixeleadas\u201d) en otros.<\/span><\/p>\n

      6. Gestos t\u00e1ctiles. <\/span><\/h3>\n

      En los dispositivos m\u00f3viles no existe el clic, sino el \u201ctap\u201d y una buena cantidad de gestos t\u00e1ctiles. Algunos nuevos dispositivos incluyen \u201cforce touch\u201d que diferencia entre un toque simple y uno con m\u00e1s presi\u00f3n.\u00a0\"captura-pantalla-2012-04-22-124458_36605_640\"<\/a><\/span><\/p>\n

       <\/p>\n

      7. Estrategia de creaci\u00f3n. <\/span><\/h3>\n

      Existen dos vertientes: el Graceful degradation y el progressive enhancement. Al primero tambi\u00e9n se le conoce como Desktop first y al segundo como Mobile First. La elecci\u00f3n bien puede ser determinada por el principal objetivo a alcanzar, si el proyecto se orienta m\u00e1s a Desktop o a dispositivos m\u00f3viles. Un conocido ejemplo de Mobile First es Instagram, que comenz\u00f3 siendo \u00fanicamente para dispositivos m\u00f3viles pero que debido al \u00e9xito de la app ahora cuenta con una aplicaci\u00f3n web que puede verse en Desktop.<\/span><\/p>\n

      8. Tiempo de carga del sitio. <\/span><\/h3>\n

      Se debe considerar que a\u00fan existen muchos usuarios con conexiones lentas y que deben estar considerados al momento de dise\u00f1ar y crear el sitio.<\/span><\/p>\n

       <\/p>\n

      Referencias\u00a0<\/span><\/h3>\n

      1. LePage (2015). Patrones de dise\u00f1o web receptivos<\/strong> . Disponible en [<\/span>https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/patterns\/?hl=es<\/span><\/a>] consultado el [14-06-2016].<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

      Responsive Design se refiere al uso de t\u00e9cnicas para adaptar una web a la mayor cantidad de dispositivos. En \u00e9ste art\u00edculo aprenderemos lo que debemos tener en cuenta a la hora de realizar un sitio que sea Responsive.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171],"tags":[161,48,160],"class_list":["post-730","post","type-post","status-publish","format-standard","hentry","category-programacion-web","tag-diseno-web","tag-programacion-web","tag-responsive-design"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":7,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":745,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions\/745"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}