Diseño Web y Desarrollo de Páginas Web – UruguayDiseño Web y Desarrollo de Páginas Web – UruguayDiseño Web y Desarrollo de Páginas Web – UruguayDiseño Web y Desarrollo de Páginas Web – Uruguay
  • Inicio
  • Sobre Nosotros
  • Nuestros Servicios
    • Marketing Online
    • Desarrollo Web
      • Web Landing Page
      • Web Site Corporativo
      • Ecommerce Web Site
    • Diseño Gráfico
    • Fotografía
  • Trabajos Realizados
  • Blog
  • Contacto
Siguiente Previo

Diferencias entre diseño ‘adaptative’ y ‘responsive’

ZURWEB 6 febrero, 2017
Diferencias entre diseño ‘adaptative’ y 'responsive'

El diseño adaptative (adaptado) y el diseño responsive (sensible) son dos términos confundidos incluso por miembros veteranos de la industria del diseño web. De hecho, muchos profesionales piensan estar realizando diseños responsive cuando en realidad están trabajando con una arquitectura adaptive. En realidad, ambos diseños son muy similares, pero con unas diferencias clave a tener muy en cuenta.

El diseño adaptative
El diseño adaptive forma escalones dependiendo del tamaño de la pantalla. A medida que el tamaño de la pantalla del dispositivo cambia, se ofrecen diferentes archivos o un mismo archivo CSS aplica ciertas clases y estilos distintos. Tradicionalmente los diseñadores utilizan tres o cuatro escalones distintos: pequeño (centrado normalmente en un smartphone), mediano (tablets y monitores de escritorio pequeños), grande (tablets grandes o ventanas de navegador de escritorio a pantalla completa) y por último, en algunos casos, incluso extragrande (para monitores de escritorio con mucha más resolución de lo habitual).

Otro punto clave del diseño adaptive es que intenta averiguar mediante elementos externos como JavaScript una estructura apropiada de forma predeterminada, sin tener en cuenta la pantalla en la que está siendo reproducido. Por ejemplo, cuando un navegador de escritorio muestra un diseño pensado para 1000 píxeles de ancho como mínimo, aunque la ventana haya sido desplazada a un lateral del monitor del usuario con 500 píxeles en total.

El diseño responsive, por el contrario, se deshace de estos escalones fijos y crea una estructura fluida y en cierto sentido agnóstica de la pantalla en la que se está reproduciendo. Utilizan porcentajes para especificar el ancho de los elementos de una estructura, y en ocasiones también el alto, en la pantalla. Para las unidades de tamaño de las tipografías, márgenes y otros atributos clave, en responsive se utilizan unidades relativas como los porcentajes, los em y ex.

Al ser fluido, utiliza puntos de ruptura para que determinados elementos sean recolocados en la pantalla, e incluso ocultados, a partir de que su tamaño se convierta en una aberración. Por ejemplo: un menú que debería cubrir el 20% del ancho de una pantalla se vería reducido a 64 píxeles de ancho en una ventana de 320 píxeles. En ese caso, lo mejor será desplazarlo a la parte inferior, cambiar su contenido, u ocultarlo.

¿Cuándo es mejor cada uno?
Si se está trabajando con un proyecto ya finalizado que mantener pero adaptar a las nuevas realidades, optar por elementos del diseño adaptive puede ahorrar trabajo y recursos. Si la estructura no es muy compleja, muchos diseñadores no tendrán mayor problema en saber qué puntos clave de su diseño cambiar con media queries o sirviendo distintos ficheros de estilos dependiendo del navegador.

Sin embargo, si se está planteando la base de un nuevo proyecto desde cero, utilizar las claves del diseño responsive acaba siendo una mejor opción no solo para empezar, sino también a largo plazo.

En realidad, lo más inteligente es siempre utilizar la mejor herramienta para cada trabajo. Esto se traduce en que a veces lo mejor, más rápido o más adecuado es utilizar elementos responsive y adaptive a la vez. Combinando las eficiencias de ambos métodos un diseñador o equipo de diseño profesional podrá crear con menos esfuerzo un proyecto más robusto.

Con un catálogo de dispositivos cada día más variado desde las que los visitantes leen a los sitios web de todo el mundo, se hace imperativo poder dominar un diseño que escale, adapte y mute para satisfacer no solo la pantalla del mismo; también sus capacidades de conexión y de procesador.

Es importante no servir más activos de diseño de los necesarios al usuario, y tomar decisiones inteligentes desde que se ponen las primeras piezas de una nueva estructura web. Servir iconos que no se van a ver o cargar tipografías que no están soportadas son algunas de las más obvias, pero también se debe evitar la carga de texturas específicas de elementos que un dispositivo en concreto no vaya a poder mostrar.

Utilizar diseño responsive o adaptive es una de las decisiones más importantes de un proyecto web nuevo o establecido, y conocer las debilidades y puntos fuertes de ambos métodos permitirá al equipo de diseño trabajar de forma más eficiente.

 

Fuente: Api Market

Entradas Recientes

  • Fuchsia el nuevo sistema operativo de Google
    17 abril, 2018
    0

    Fuchsia, el nuevo sistema operativo de Google

  • Se aprobó SpaceX internet vía satélite
    2 abril, 2018
    0

    Se aprobó SpaceX: internet vía satélite

  • Los grandes mitos sobre WordPress
    26 marzo, 2018
    0

    Los grandes mitos sobre WordPress

  • Tendencias del diseño web 2018
    19 marzo, 2018
    0

    Tendencias del diseño web 2018

Últimos Trabajos Realizados

  • movo-logo-1
  • sturmont-1
  • diagnostico-brochure-1
  • castro-3
  • pickup-web-1
  • diagnostico-dinamico-2

  • Te puede interesar

    Cómo influye el diseño web en las ventas

    ver ahora
  • Te puede interesar

    Cómo prevenir un ataque de “ransomware”

    ver ahora
  • Te puede interesar

    Meizu, el smartphone chino que quiere conquistar al público occidental

    ver ahora
  • Te puede interesar

    Cinco apps que convirtieron en multimillonarios a sus creadores

    ver ahora
  • Te puede interesar

    Lo más destacado de CES 2017

    ver ahora

Montevideo

Alzaibar 1278 of. 101, Montevideo, Uruguay

Tel: (+598) 2916 1214

contacto@zurweb.com

Lun. a Vier. de 9 a 13 y de 14 a 18hs.

México

Manuel M Ponce 220. CP 64640
Monterrey, Nuevo León, México

Tel: (+52) 1 81 8604 4370

contacto@zurweb.mx

Noticias Recientes

  • Fuchsia, el nuevo sistema operativo de Google
  • Se aprobó SpaceX: internet vía satélite

Últimos Proyectos

  • movo-logo-1
  • sturmont-1
  • diagnostico-brochure-1
  • Inicio
  • Sobre Nosotros
  • Nuestros Servicios
    • Marketing Online
    • Desarrollo Web
      • Web Landing Page
      • Web Site Corporativo
      • Ecommerce Web Site
    • Diseño Gráfico
    • Fotografía
  • Trabajos Realizados
  • Blog
  • Contacto
Diseño Web y Desarrollo de Páginas Web – Uruguay
  • Facebook
  • Instagram
  • Pinterest
  • LinkedIn