15 jQuery Plugins for Building Responsive Layouts


There are some cases that you will find media queries not powerful enough to handle the optimization of responsive website – and so the help of jQuery plugins for building responsive layouts are in need. The optimization of other web elements such as navigation, image sliders, font size, image gallery and other elements that are part of your layout are required especially if you are building powerful responsive web design.

Here’s a collection of jQuery plugins for building responsive layouts or responsive web design to help you create multiple device-friendly websites. There is also, of course, a lot of mobile frameworks to develop multi-platform apps which will help you to do the same thing. As long as you come up with the benefits of making the experience of web browsing more exciting, then you can use any of these tools.
[related_posts]

Responsive Image Gallery with Thumbnail Carousel

Using the Elastislide plugin (above), this tecnique will show you how to implement a responsive gallery that adapts to the view-port width. The gallery will has a view switch that allows you to view it with the thumbnail carousel or without. It also supports keyboard navigation.
Responsive Image Gallery with Thumbnail Carousel
[action-button title=”View Source” url=”http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/”]

Response JS: Progressive Enhancement in HTML5

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images progressively via HTML5 data attributes.
Response JS: Progressive Enhancement in HTML5
[action-button title=”View Source” url=”http://responsejs.com/”]

FitText – A Plugin for Inflating Web Type

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
FitText - A Plugin for Inflating Web Type
[action-button title=”View Source” url=”http://fittextjs.com/”]

Supersized – Full Screen Background Slideshow jQuery

Supersized is a fullscreen background slideshow built using the jQuery library – a project by Sam Dunn of One Mighty Roar.
Supersized – Full Screen Background Slideshow jQuery Plugin
[action-button title=”View Source” url=”http://buildinternet.com/project/supersized/”]

PhotoSwipe

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.
PhotoSwipe
[action-button title=”View Source” url=”http://www.photoswipe.com/”]

ResponsiveSlides.js – Responsive jQuery Slider & Slideshow

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.
ResponsiveSlides.js - Responsive jQuery Slider & Slideshow

    [action-button title=”View Source” url=”http://responsive-slides.viljamis.com/”]

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.
The Heads-Up Grid
[action-button title=”View Source” url=”http://bohemianalps.com/tools/grid/”]

jQuery Masonry

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
jQuery Masonry
[action-button title=”View Source” url=”http://masonry.desandro.com/”]

Doubletake

Intended to be a proof of concept, Doubletake is a plugin that dynamically updates the src of your images based on the browser width. You start with a small, mobile-friendly image in your HTML. Doubletake will then use a defined set of breakpoints to update image SRCs when necessary.
Doubletake
[action-button title=”View Source” url=”http://www.grahambird.co.uk/lab/doubletake/”]

rlightbox – a jQuery UI Mediabox

rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.
rlightbox – a jQuery UI Mediabox
[action-button title=”View Source” url=”http://ryrych.github.com/rlightbox2/”]

Blueberry – Responsive jQuery Image Slider

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Blueberry – Responsive jQuery Image Slider
[action-button title=”View Source” url=”http://marktyrrell.com/labs/blueberry/”]

FitVids.JS – jQuery Plugin for Fluid Width Video Embeds

FitVids.JS is a lightweight, easy-to-use jQuery plugin for responsive width video embeds. It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
FitVids.JS - jQuery Plugin for Fluid Width Video Embeds
[action-button title=”View Source” url=”http://fitvidsjs.com/”]

Hoverizr – A Responsive jQuery Image Manipulation

Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion.
Hoverizr – A responsive jQuery Image manipulation and overlay plugin
[action-button title=”View Source” url=”http://tympanus.net/codrops/2011/08/30/automatic-image-montage/”]

Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.
Elastislide – A Responsive jQuery Carousel Plugin
[action-button title=”View Source” url=”http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/”]

Adaptive Images in HTML

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images.
Adaptive Images in HTML
[action-button title=”View Source” url=”http://adaptive-images.com/”]

A Collection of Christmas Resources and Inspirations
Authored by: Manuel Garcia

Manuel Garcia is the founder and the brain behind Designrshub.com, a community that provides High Quality Design Inspirations and Resources. He’s a student from Philippines who loves to write for design community and dedicated in sharing inspirational resources. He fell in love with creative writing when he was 15.