Layout Responsive / Adaptativo / Flexible

4/feb/2013 4

Nuevos conceptos pero no tan nuevas técnicas. La moda del diseño/desarrollo responsive hace necesaria una aclaración de algunas definiciones. Y qué mejor que hacerlo con un ejemplo utilizando las mismas técnicas descritas, para que puedan bucear por el código fuente.

Responsive

Acuñado en 2010 por Ethan Marcotte, corresponde a una grilla fluida que responde al cambio del ancho de un browser mediante mediaqueries, el cual incluye imágenes y videos.

Adaptativo

Rama del responsiveness, responde a múltiples versiones del mismo diseño que se adapta según el tamaño de la pantalla bajo diferentes anchos ya definidos.

Flexible

El más antiguo y soportado por todos los browsers, también denominado líquido. Usa unidades de medidas como porcentajes y no requiere mediaqueries.

Ejemplo

Comentarios

  1. Lydia [#]

    Muy interesante esto, porque no tenía ni idea de las diferencias y lo más util, a mi parecer, es diferenciar entre Adaptativo y Responsive. Los estaba confundiendo o, mejor dicho, creía que eran lo mismo.

    Gracias.

  2. Marcela [#]

    Me gusto la definicion clara de cada concepto. No se si has hablado hacerca de http://herramientas-online.com/responsive/responsive-design-test-online.php la cual es una herramienta que ha tenido bastante auge dentro de este mundo Responsive.

    Saludes Jorge.

  3. Conoce cómo funciona el browser y optimiza tu código front-end | CSSLab | Laboratorio de ideas web [#]

    […] vez que el árbol de render cambia (por ej. mediante JavaScript) o el viewport cambia (utilizando interfaces líquidas, adaptativas ó responsive) estructura y pintado vuelven a […]

  4. Detectando media queries con JavaScript | CSSLab | Laboratorio de ideas web [#]

    […] mediante jQuery, logrando crear un plugin para ello. BrowserSizr fue pionero en una época donde responsive no existía como palabra ni concepto. Desde entonces se ha masificado y estandarizado este […]

Responder a Detectando media queries con JavaScript | CSSLab | Laboratorio de ideas web ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab