responsive-design - significado - responsive design tutorial
Diseño responsivo vs diseño adaptativo (9)
Diseño fluido
Se ajusta en forma de ajuste de palabras a medida que aumenta o reduce el ancho de la pantalla.
Diseño adaptativo
Hay tamaños predefinidos donde se disparan diferentes diseños. Estos se llaman puntos de interrupción . ¡El diseño adaptativo puede ser fluido o completamente estático!
Disposición Responsive
Combinación de fluido y diseño adaptativo. Proporciona una experiencia óptima.
Mejora progresiva
Proceso de honrar su contenido (y sus usuarios) mediante la aplicación de tecnologías de forma inteligente, capa por capa . La mejora progresiva no requiere que proporcione la misma experiencia en diferentes navegadores.
¿Podría explicar la diferencia entre RWD (Diseño web responsivo) y AWD (Diseño web adaptativo) de una manera sencilla?
Adaptable (AWD): no se establece necesariamente en una cuadrícula fluida; apunta a resoluciones de dispositivos específicos (320, 768, 1024, et.al.); puede tener anchos establecidos (fijos) o anchos relativos (%), controlados por consultas de medios.
Responsivo (RWD): Construido en una cuadrícula fluida; cambiará con el navegador, sin importar cuál sea la resolución de la pantalla; El contenido puede separarse y realinearse si es necesario.
En resumen: RWD es como AWD, excepto que se ha dado uno o dos pasos más, para probar en el futuro el diseño de dispositivos desconocidos y dispositivos conocidos.
"Diseño web sensible", como lo acuñó Ethan Marcotte, significa "cuadrículas fluidas, imágenes fluidas / medios y consultas de medios". "Diseño web adaptable", tal como lo uso, consiste en crear interfaces que se adapten a las capacidades del usuario (en términos de forma y función). Para mí, "diseño web adaptativo" es solo otro término para "mejora progresiva" de lo que el diseño web sensible puede (y debería a menudo ser) una parte integral, pero es un enfoque más holístico del diseño web en el sentido de que también tiene en cuenta diversos aspectos. Niveles de marcado, CSS, JavaScript y soporte asistencial.
Para el registro, creo que es importante hacer una distinción entre "diseño web adaptativo" y "diseños adaptativos" porque "diseños adaptativos" implica solo el uso de consultas de medios, que pueden no hacerse de una manera progresiva. Sin embargo, los diseños adaptativos logrados de manera móvil primero son, sin duda, una mejora progresiva y, por lo tanto, un medio de "diseño web adaptativo".
La diferencia entre el diseño web adaptativo y el diseño web sensible es más amplia y más importante que las distinciones que se han sugerido en este hilo. La diferencia no es una cuestión de dónde reside la funcionalidad del software ni qué unidad de medida se usa en condiciones CSS.
Ninguno de los términos (adaptativo o responsivo) es una marca, por lo que no debemos desviarnos de las definiciones básicas de las palabras. En informática, una respuesta es una acción, un evento o un mensaje generado sobre algún estímulo. Esta definición se originó a partir de la biología. La dilatación de los alumnos en respuesta a la luz es un diseño sensible.
La adaptación denota una funcionalidad mucho mayor que simplemente una respuesta programada. La capacidad para desarrollar alumnos que pueden dilatarse es un diseño adaptativo. La adaptación requiere el almacenamiento de la historia y su aplicación posterior. En biología, la adaptación requiere ADN para almacenar adaptaciones. En el diseño web, las adaptaciones se pueden almacenar en las cookies o en el perfil de la cuenta del usuario en el servidor.
Vamos a empezar con el más simple de los dos. Una buena definición formal de un diseño web sensible es la siguiente:
Un diseño web sensible examina las características de visualización y responde instantáneamente en la visualización de páginas en formas que van más allá de las capacidades de diseño automático incorporadas de HTML para proporcionar una experiencia conveniente, funcional y de máxima visibilidad en diversas condiciones de visualización.
Los dispositivos portátiles han aumentado la importancia de esta capacidad de respuesta de tamaño adicional. Muchas de estas técnicas de diseño se centran en la adición de condiciones al CSS (hojas de estilo en cascada u hojas) o mediante secuencias de comandos (como JavaScript). Cada condición basada en las características de visualización mejora la experiencia general del usuario al controlar los valores de parámetros de estilo específicos para un conjunto de elementos de documento (etiquetas), identificados por selectores de CSS. *
Utilizando la definición de diccionario o la definición común de ciencia informática de ADAPTIVE, el diseño del documento de un diseño web adaptativo debe variar de forma inteligente en función de algunos criterios más altos que un simple umbral de tamaño estático, criterios que se evalúan continuamente. Una buena definición de un diseño web adaptativo es esta:
Un diseño web adaptable registra los patrones de uso y las condiciones de uso y se adapta, con el tiempo, para proporcionar a los usuarios contenido y funcionalidad de manera más rápida, integral o individual.
Algunos de los otros usos del término ADAPTABLE con respecto al diseño web otorgan demasiado crédito a lo que es simplemente otra metodología de diseño receptivo, ni más inteligente ni más adaptable que cualquier otra.
Se pueden programar esquemas de adaptación simples en JavaScript para variar el CSS en función de los datos JSON devueltos desde las llamadas RestFUL al servidor para adquirir el desplazamiento del usuario y hacer clic en las estadísticas de una base de datos a través de SQL o NOSQL. El análisis más avanzado de la experiencia del usuario podría usar un sistema basado en reglas (como DRules o Prolog) o una lógica difusa, una red neuronal o esquemas bayesianos que se ejecutan de forma asíncrona.
Un ejemplo de una regla simple es: "Ordene los enlaces en orden desde el más frecuente hasta el que menos se hace clic y cada 10 pantallas colocan un enlace menos popular en el segundo lugar para garantizar que los elementos se puedan filtrar con el tiempo".
Las formas de retroalimentación triviales son mecanismos comunes de retroalimentación.
Para obtener más información acerca de RWD (Responsive) y AWD (Adaptive), consulte el siguiente enlace
Una definición alternativa que he visto desglosa por dónde ocurre la magia:
- Responsive ( del lado del cliente) : la misma página se devuelve a todos los dispositivos, pero la visualización de la página responde a los dispositivos, generalmente utilizando JavaScript y CSS (especialmente consultas de medios).
- Adaptativo - del lado del servidor - la información se pasa al servidor con respecto a las especificaciones del dispositivo, y se devuelve una página adaptada a ese dispositivo. Esto usaría algunas de las mismas técnicas de JavaScript / CSS que RWD, pero parte del contenido puede ser diferente / más pequeño.
Fuente: http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html
No estoy seguro de cómo esta definición encaja con algunas de las otras que hablan más sobre el flujo del contenido de la página.
Uno de los mejores enlaces para diferenciar entre diseños fluidos, fijos, receptivos y adaptativos. http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2 . En palabras simples para los estilos aplicados en su página html,
- Diseño fijo: Uso de píxeles.
- Disposición fluida: utilizando porcentaje.
- Diseño responsivo: usando solo porcentajes con consultas de medios
- Diseño adaptativo: uso de píxeles y porcentajes con consultas de medios
simplemente:
RWD (Responsive): es una estructura y diseño diferente del sitio web que se dirige a un dispositivo determinado. (Principalmente estamos hablando de un trabajo del lado del servidor porque estamos hablando de una estructura diferente y una funcionalidad diferente)
AWD (Adaptativo): es un diseño diferente con la misma estructura que se dirige a un dispositivo determinado. (principalmente estamos hablando de un trabajo del lado del cliente porque estamos hablando de un diseño diferente solamente)
tenga en cuenta que ambas técnicas tienen como objetivo crear una experiencia de usuario diferente más amigable para un determinado dispositivo
En sentido del diseño de sitios web: Diseño responsivo: Creación de páginas web con cuadrícula fluida y contenido flexible (por ejemplo, imágenes) y consulta de medios (en css). Esto adaptará el diseño de acuerdo con el ancho de los navegadores / dispositivos. En Diseño adaptativo: la creación de páginas web con diseño fijo no implica una cuadrícula fluida ni contenidos flexibles. Romper el diseño de la página con puntos específicos (por ejemplo, mediante una consulta de medios).