hacer diseños web responsivos

Les compartimos una serie de excelentes plugins javascript perfectos para hacer diseños web responsivos, esto será de gran utilidad para seguir una de las tendencias de diseño web en 2014 que se trata de crear diseños web adaptables a cualquier plataforma sin importar navegador y mostrando contenido de calidad aprovechando las posibilidades que los diferentes dispositivos ofrecen tanto en imágenes de alta resolución como en interactividad.

Plugins JS para hacer diseños web responsivos

Adapt.Js

Es un alternativa al uso y dependencia de los Media Queries con CSS, que si bien cierto son excelentes aun no son reconocidos por todos los navegadores, lo cual puede causarnos algunos problemas, con Adapt.js eliminamos esa dependencia, también ofrece soporte para la mayoría de los navegadores incluso Internet Explorer, con este plugin podremos identificar el tamaño de la venta o resolución de pantalla de la persona que accede a nuestro sitio de tal modo que sirvamos las reglas CSS adecuadas según lo identificado.

adaptjs

FitText.Js

Este plugin nos permite ajustar el tamaño de nuestro texto a los contenedores según su tamaño, de tal modo que exista una relación entre tamaño del contenedor y el texto y este se adapte sin dejar de ser legible para el usuario.

FitTextJs

Retina Images

Este plugin javascript nos permite detectar si el dispositivo que visita nuestra pagina utiliza pantallas tipo retina display, de tal modo que si es el caso sirva imágenes del doble de resolución para aprovechar la calidad de estas pantallas, de este modo se optimiza el consumo de ancho de banda.

retina_images

jQuery Gridly

Un plugin que nos permite hacer diseños web responsivos con un sistema de bloques fluidos que se adaptan a las medidas de la ventana del usuario, agregando funcionalidad para gestionar los bloques, esto puede ser perfecto para un gestor de imágenes que nos permite visualizar un grid de bloques y que este se acomode automáticamente según la interacción que existe por parte del usuario.

hacer diseños web responsivos, jQuery Gridly

jResponsive

Un plugin muy similar a jQuery Gridly que nos permite trabajar con un sistemas de cajas fluidos que se adaptan al grid de nuestra pagina según el tamaño de la pantalla.

jResponsive

Salvattore

Un plugin que funciona como una alternativa al manejo de columnas por medio de CSS, para realizar un grid de columnas que se adapten automáticamente a las medidas de la pantalla.

Salvattore

Squishy

Squishy al igual que Fittext es un plugin que adapta el tamaño del texto al tamaño del contenedor que contenga las lineas de texto de tal modo que no se pierda la legibilidad del mismo.

Squishy

Glide.js

Este un excelente plugin para crear slides de imágenes o contenidos responsivos, cada slide se adaptara junto con su contenido al tamaño de la ventana de forma automática sin perder funcionalidad y con soporte para gestos touch.

Glide js

CollagePlus

CollagePlus es un plugin que permite crear diseños web con layouts del tipo de Pinterest y algunas revistas digitales con bloques flexibles que se adaptan de forma automática a la medida de la pantalla utilizando diferentes medidas para cada bloque dejan un interesante y bien ordenado layout.

CollagePlus

SlideMe

Otro plugin para crear slides de imágenes en diseños web responsivos, este también soporta gestos touch, ofrece soporte para Internet Explorer y soporta slides de pantalla completa para navegar en diferentes direcciones, muy bueno, lo he utilizado y ofrece excelentes resultados.

SlideMe

Sidr

Este plugin nos ayudara en la tarea de crear menus de navegación laterales tal y como los utilizan muchas aplicaciones móviles, crean menus adaptables que se muestran y oculta de forma lateral.

Sidr

FullPage.js

Es un plugin muy bueno y fácil de implementar, nos permite hacer diseños web responsivos de una pagina, tipo landing page y navegar entre sección con un efecto de scroll suave, haciendo cada sección a pantalla completa cuando en realidad seguimos en el mismo sitio, en este caso el uso de enlaces tipo “name” les permitirá optimizar asuntos de SEO.

fullpage

Tabslet

Plugin para organizar contenidos en tabs, muy fácil de implementar y con soporte multi navegador, incluido el odiado Internet Explorer, perfecto para sitios responsivos que necesiten organizar mucho contenido.

tablets

Extra…

Les recomendamos visitar nuestras sección de diseño web y también la sección de jQuery donde encontraran aun más recursos para hacer diseños web responsivos de forma practica y efectiva.