10 jQuery Plugins to help with Responsive Layouts

Sam Deering

Responsive layout in web design is an important topic of discussion at the moment. Basically a responsive layout allows you to offer a specific and optimized screen size based on whatever device (mobile, tablet…) the visitor uses. Typically, you would use Media Queries to resize the overall layout, but navigation, forms, images, sliders, carousels… they all need to be optimized as well. This is why we are giving you our collection of 10 jQuery plugins that will help you optimize and resize those trickier web elements. Have fun!

Related Posts:

1. The Heads-Up Grid

Built with HTML, CSS & JavaScript. The Heads-Up Grid is a responsive overlay grid for in-browser website development. It has been created to make it relatively easy to adapt to the needs of responsive web design.


The Heads-Up Grid

Source + Demo

2. 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

Source + Demo

3. AdaptiveMedia

With AdaptiveMedia, you need only one CSS file for any window sizes, no need LESS or same solutions, no need CSS3 Media Queries. Less than 3KB, HTML5 and IE6 compatible. User callback: execute user function before completed all job.


AdaptiveMedia

Source
Demo

4. 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 and like other jQuery UI widgets, it is ThemeRoller ready.


rlightbox

Source + Demo

5. Elastislide

Is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size.


Elastislide

Source
Demo

6. Responsive Image Gallery with Thumbnail Carousel

Using the Elastislide plugin (above), this technique 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

Source
Demo

7. Seamless Responsive Photo Grid

Maintains the aspect ratio of your images.


eamless Responsive Photo Grid

Source
Demo

8. Responsive jQuery Slideshow

This example makes it possible to have fluid jQuery slideshow which scales responsively. This is the same method which is used on the new kiskolabs.com.


Responsive jQuery Slideshow

Source
Demo

9. wmuSlider

Please keep in mind that it’s still very raw (really) and under the MIT LICENSE, which basically means: break it, steal it but THE STUFF IS PROVIDED “AS IS”!


wmuSlider

Source
Demo

10. 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

Source + Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.