soy Kseso y esto EsCSS

Diseño Web Interactivo o "Responsive Web Design". Qué es y Colección de Frameworks

Diseño Web Interactivo o "Responsive Web Design". Qué es y Colección de Frameworks

·Por Kseso ✎ 4

El "Responsive Web Design" o Diseño Web Interactivo[*↓] lo podríamos definir como:

Realizar webs utilizando las reglas @medias queries de Css3 para lograr páginas que se adapten al entorno donde se visualicen. Concepto de rabiosa actualidad debido a la proliferación de dispositivos muy dispares, tanto en tamaño como resolución de las pantallas, así como de la capacidad para manejar los contenidos.
Este concepto abarca a todo: los contenidos (textos e imágenes), los lenguajes utilizados (Css, Js, librerías de cualquier tipo...) y la estructura de la página (el layout, tramoya o maquetación como se presenta).

Amparados en esta idea o formando parte de ella se inscriben también los conceptos "mejora progresiva" (Progressive Enhancement), "Javascript discreto" o no invasivo (Unobtrusive JavaScript) y las imágenes sensibles al medio "responsive images".

O dicho de manera coloquial: hacer las páginas webs de tal manera que se manejen igual de bien en todas las pantallas y todos los dispositivos, ya sean de escritorio, tabletas o teléfonos móviles. Y en estos dos tipos de dispositivos con independencia de la orientación de la pantalla.

Interactividad en este contexto:

No es de la página con el usuario. Es la respuesta o comportamiento de la página al dispositivo donde se muestra y a los cambios que pueda haber en el aparato (orientación, redimensionado...) una vez cargada la página. También debe tener presente las capacidades técnicas (incluidos ancho de banda, velocidad de descarga, prestaciones técnicas...)[*↑]

Responsive CSS Frameworks o Estructuras Css Interactivas

Uno de los recursos disponibles para ayudar a crear páginas web bajo este marchamo del "Responsive Web Design" o Diseño Web Interactivo sin tener que crear todo desde cero son los "Responsive CSS Frameworks" o Estructuras Css Interactivas.

Pros de su uso

Las ventajas de utilizar este tipo de recursos en el desarrollo de un proyecto podrían resumirse en:

  • Rapidez en el desarrollo
  • Economía de recursos y tiempo
  • Son gratuitas
  • Realizadas según estándares y convenios
  • Los bugs y problemas con los navegadores ya suelen están resueltos
  • Necesitas menos pruebas y tests.

Contras

  • Tiempo para conocerlos y dominarlos.
  • Esfuerzo extra para personalizarlos o adaptarlo a tu CMS.
  • Marcado prolijo e innecesarias para tu proyecto.
  • Archivos y/o complementos innecesarios --> Demoras en la carga.
  • Mantenimiento para incluir las mejoras

Colección de "Responsive CSS Frameworks" o Estructuras Css Interactivas

Estructuras o layouts para crear tus páginas bajo el Diseño Web Interactivo o "Responsive Web Design"

Boilerplate

Mobile Boilerplate

52Framework

Skeleton

Gumby

Yaml4

Framelessgrid

Foundation

Twitter-bootstrap

1140 css grid

The Semantic Grid System

Gridless

Blueprint

Amazium

Inuitcss

Blucss

Punto y seguido

Ni están todos los que son y posiblemente no sean todos los que están. Es sólo una recopilación de algunos Frameworks. Faltan algunos de los clásicos como 960grid o los basados en los procesadores de Css (Css preprocess): Less, Sass... aunque sí haya recogido alguno de éstos últimos.

Pero de una cosa sí tengo certeza. Me he olvidado de ese que tú utilizas porque consideras que es el mejor. ¿Cuál es?

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso