Frameworks Responsive Web Design (RWD)

El “Responsive Web Design” es algo que toda empresa comercial aspira tener. Día a día el número de dispositivos móviles  va incrementando (desde computadores “desktop”, portátiles, teléfonos, tabletas e incluso televisores) y la gente los utiliza para buscar recursos e información en la web.

Todos estos dispositivos tienen diferentes resoluciones de pantalla y por tanto el diseños también cambia, y si no se tiene las herramientas necesarias, el ajustar manualmente la configuración de sitio web para todos los dispositivos, puede volverse un cáos.  Y es así como los frameworks CSS para la creación de diseños web receptivo fueron creados.

A continuación se describen algunos frameworks CSS para “Responsive Web Design”. Algunos ya son bastante conocidos y otros que recién fueron creados en las necesidades de las nuevas tendencias de diseño web.

Less+ Framework
http://lessframework.com/

less

Este Framework permite a los diseñadores crear sitios “sensibles” con capacidad de adaptar su contenido en función de la resolución de la pantalla, utilizando jQuery.

Responsive Grid System
http://responsive.gs/

Responsive-Grid-System

Éste es un framework CSS de cuadricula fluida que permite el desarrollo rápido de sitios web. Está listo para ser utilizado en 12, 16 y 24 columnas. También ofrece reajuste clearfix y de forma opcional un archivo de “reset” .

1 Kb CSS Grid 
http://www.1kbgrid.com/

1kb

Esta es una solución fácil de implementar sistemas de grillas, “reset” de estilo, tipografía y estilos básicos de formulario y todo en 1Kb, algo realmente importante.

Boostrap
http://twitter.github.com/bootstrap/

bootstrap

Éste framework fue creado por Twitter para los desarrolladores Web, renderea los contenendores tanto en navegadores de escritorio, como así también en tablets y teléfonos inteligentes. Cuenta con 12-columna de la grilla principal, tambien posee varios plugin Javascript para aumentar su funcionalidad.

Titan Framework
http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs

Titan-Framework

Éste utiliza las mismas clases CSS como 960.gs, por lo que el cambio entre las dos es muy fácil. Esto lo destaca a Titan Framework del resto.

320 and Up
http://stuffandnonsense.co.uk/projects/320andup/

320andup

320 and Up contiene 5 CSS3 Media Querys incrementales. Está construido con LESS y Sass, CSS mixins.

Fundation
http://foundation.zurb.com/

fundation

Un rápido y flexible framework, destinado especialmente para front-end. Sitios web creados con este framework funcionará en casi cualquier dispositivo sin importar el tamaño de la resolución.

Gridiculous – A Fully Responsive Grid Boilerplate
http://gridiculo.us/

gridiculous

Este es un texto modelo de grillas con columnas variables (ancho máximo de 1200px, 960px, 640px, 320px ancho y también dispone de pantalla completa). Gracias a este framework, el desplazamineto de las columnas esta asegurado, por lo que las columnas anidadas y fotos y los vídeos permanecerá totalmente “sensible”, independientemente del tamaño de la pantalla.

Simple Grid
http://simplegrid.info/

simple_grid

Simplegrid es un sistema de grillas basada en “una clase por elemento” asi de simple. Este framework  libera de las barras de desplazamiento horizontales.

Anuncios

3 pensamientos en “Frameworks Responsive Web Design (RWD)

  1. Y a su concepto, cual es mejor? Y al de cualquiera de la comunidad que lea esto. Bootstrap 3 ya salió. 320 up sigue dándose a conocer y ya hace meses que se trabaja. Y el papá de ambos, boilerplalete, ahora tiene una versión móbil.
    Quería preguntarle a los desarrolladores que han trabajado ya un tiempo con estos o que trabajaron pues…pues si aún los recomiendan?? Qué experiencia y concepto se han formado y qué consejos podrían dar, después de este tiempo, a un equipo que debate entre utilizar boilerplate puro (hacia quien nos inclinamos un poco en este momento), 320 up y bootstrap 3?? O alguno de los otros??

    Les agradezco de antemano cualquier comentario.

    • Hola Efrain, el concepto de mejor siempre va a estar ligado al tema de funcionalidad y adaptación de un determinado proyecto (Web). Con relación al Bootstrap 3, que es con el que estoy trabajando últimamente, comentar que vi en el RC1 (Release Candidate 1) bastantes mejoras, empezando por el concepto de “Mobile First” y abandono de soporte de navegadores antiguos (IE7 e IE8). Ademas presenta un cambio estructural de archivos, reduciendo la cantidad de archivos CSS y JS, ademas de integrar desde un inicio el soporte para Responsive Web Design. También se separo el proyecto de los iconos “Glyphicons” como proyecto separado del framework. Lo mas recomendable en este caso es utilizar Font Awesome (basado en font-face) y que es totalmente escalable. Wow, hay tantas cosas de las cuales hablar, que un día de estos escribo un post enteramente dedicado a la nueva versión de Boostrap (pero se tendría que esperar por lo menos una RC más antes de la versión final)

      • Hola Luis. Amigo gracias por tu respuesta.
        Sí. Estaré pendiente de ese post. Sólo que entonces me parece que Bootstrap 3 no es lo que necesito. No si no da soporte a exploradores viejos. Creo que usaremos boilerplate normal. Te explico: soy parte del impresionantemente grande porcentaje de la humanidad que odia a I.E. 6. Pero tenemos un Web site dinámico con muchos muchos usuarios, y un porcentaje de ellos aún usa I.E. 6 y 7 y no podemos olvidarlos porque esos usuarios son dinero y los socios nos matarían jeje. De hecho, así llegamos a este artículo: queremos mejorar el sitio. Pero también que se vea bien en móbiles y en exploradores viejos. Nuestra idea era literalmente tomar el sitio existente y montarlo sobre boilerplate o algún framework similar que corrija eso y ayude a que se vea bien. Y arreglar los conflictos de CSS que quizá habrían. Pero es que no tenemos aún fondos para crear de nuevo toda la parte de back end, que es algo grande.
        Crees que sea buena idea lo de montarlo sobre boilerplate??
        Por cierto, por si quisieras verlo. Ya salió el sustituto de 320 up. Se llama Rock-Hammer

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s