There is always a new challenge for web designers and developers.

One of the latest is definitely responsive web design; the art of serving the same web page to multiple devices which look good on all of them.

Responsive Web Design

It is a getting-popular approach. As always, there are questioned parts (like the increasing number of screen sizes and the difficulty in setting breakpoints) but these are minor and creating a responsive website is nothing difficult.

Thanks to talented people out there that there are great resources simplifying development of such websites. Many tricky stuff can be handled easily with the right tools.

For jQuery users, there are a good number of responsive design plugins and here is a carefully collected and well-categorized list to bookmark and hit back when you are about to design responsively : ).

 

Layout & Tools


Response JS

The plugin has the mobile-first approach and enables us to dynamically arrange code blocks based on breakpoints + serve media progressively using HTML5 data attributes.

It also offers useful methods for easily testing screen properties that are important for creating responsive websites.

jquery responsive web

jQuery Responsive Web Plugin

This plugin adds dynamic classes to the <body> depending on the operating system, browser and window size so that you can use a single CSS to change every aspect of your design.

When you resize the window, it automatically changes the window size related class. There are also two functions called, one on init, and the other on resize, so that you can make design manipulations accordingly.

breakpoints.js

Breakpoint.js

Using this plugin you can define breakpoints for your design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.

Heads-Up Grid

Heads-Up Grid

jQuery powered grid gives you chance to set different grid options including padding, columns, page-width (percentage or px), margins and gutter width. With it, you can define different grid experiences depending on the platform and/or window size.

jQuery Masonry

jQuery Masonry

This is a dynamic grid layout plugin for jQuery. It differs from CSS floats, whereas floating arranges elements horizontally then vertically but 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.

Isotope

jQuery Isotope

If you like jQuery Masonry, you will definitely love this. Isotope enhances what Masonry does, and adds filtering and sorting possibilities, as well as few more enhancements with the layout modes and animation engine.

scrolldeck.js

Scrolldeck

With this plugin, you can easily make responsive slideshow / presentation / landing page websites. It includes the nice simple animations that scrollorama provides.

FitText

FitText

The plugin 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.

It is not advised for use on paragraphs, but its good-looking for headers especially with font-replacement.

 

Slideshows & Galleries


jQuery Responsive Thumbnail Gallery

jQuery Responsive Thumbnail Gallery

The plugin allows us to define each image in 2 different sizes, just set a breakpoint width and it decides which image to display according to the size of the screen.

FlexSlider

FlexSlider

This is a fully responsive jQuery slider plugin. It has a simple and semantic markup, supported in all major browsers, comes with various slide and fade animations, multiple slider support, callback API and hardware accelerated touch swipe support.

You can use any HTML elements in the slides.

Elastislide

Elastislide

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

Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. It uses the jQuery Touchwipe plugin to obtain the wipe event on mobile.

Responsive Image Gallery with Thumbnail Carousel

Responsive Gallery With Thumbnails

This plugin will help you create a responsive image gallery with an option to show or hide thumbnails.

There is also keyboard navigation and it also uses the jQuery Touchwipe Plugin to obtain the wipe event on mobile.

Dynamic Carousel

jQuery Responsive Carousel

This is a dynamic carousel with sliding divs (with any content inside) that can adapt to any layout. Previous-next links, auto-advance, pagination and keyboard support are available.

wmuSlider

wmuSlider

This is an easy-to-setup responsive image slider plugin. It has navigation and pagination controls, animations and touch support.

Blueberry

jQuery Blueberry Gallery Plugin

This resource uses unordered lists to generate a responsive image slider. It has pagination controls, animations and keyboard support.

supersized

Supersized jQuery Plugin

As it is a fullscreen background slideshow, supersized is a responsive plugin by default. The latest version will help you create a very nice background for your responsive web page or a nice responsive powerful image gallery.

Photo Swipe

jQuery PhotoSwipe

This is a jQuery Mobile plugin for creating image galleries specifically targeting mobile devices.

It provides an intuitive interface that makes it possible to interact with images on the mobile website. It can also be used as a stand-alone javascript library, aside from the jQuery implementation.

ResponsiveSlides.js

ResponsiveSlides.js

This is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It works with wide range of browsers including all IE versions.

It automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides.

 

Image Montage Grids & Effects


Automatic Image Montage

jQuery Automatic Image Montage

With this plugin you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.

The last image of the montage can fill the left space, so that the montage will not have any white space in the end.

Seamless Responsive Photo Grid

Responsive Photo Grid

In order to display multiple images getting them edge-to-edge on the browser window without any gaps you can use this plugin. All images can be of different sizes.

When resized, images will maintain their aspect ratio, while rearranging to fill the gaps.

Hoverizr

Hoverizr

A tiny responsive jQuery plugin that outputs manipulated images on top (or below) of any targeted images and has 3 built-in effects: grayscale, blur and color inversion.

 

Navigation


TinyNav.js

TinyNav.js

This is a tiny jQuery plugin that converts your "navigations created with lists" into select dropdowns when browsed on small screens. It also automatically selects the current page and adds selected="selected" for that item.

Responsive-Menu

jQuery Responsive Menu

This is also a simple jQuery plugin to convert list-based navigations into a select element for mobile devices and low browser widths.

 

Lightbox


fancybox 2

FancyBox

The powerful fancyBox is a tool that offers a nice and elegant way overlay images, html content and multi-media on your webpages.

The new version is now responsive so that your lightboxes will resize with the browser and it is completely rewritten with new features and updated graphics.

P.S. It is only free for personal and/or non-commercial use.

rlightbox

Rlightbox.js

rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has unique features like Panorama and live re-size.

Like other jQuery UI widgets, it is ThemeRoller ready. The plugin can adapt to browser size, and it is great for responsive design.

 

Adaptive media


FitVids

FitVids.js

This is a lightweight anf easy-to-use jQuery plugin for fluid width video embeds.

Its power lies in its ability to automate the "Intrinsic Ratio Method" by Thierry Koblentz to achieve fluid width videos in your responsive web design without black spaces anywhere around the video.

Doubletake

Doubletake jQuery Plugin

This plugin dynamically updates the src of your images based on the browser width by using a defined set of breakpoints.

You can resize images on the fly or simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created.

Adaptive Images

Adaptive Images

Adaptive Images detects your visitor's screen size and automatically creates, caches + delivers device appropriate re-scaled versions of your web page's embedded images.

In order to do that it uses a PHP and .htaccess file with a cache-folder on your server.

WebResourcesDepot Feed