25 jQuery Plugins to Help with Responsive Layouts

The most popular topic of discussion at the moment is undoubtedly responsive layouts in web design. Without going into it too much, a responsive design allows you to offer a specific and optimised screen size based on whatever device (mobile, tablet…) the visitor uses.

You would typically use Media Queries to resize the overall layout, but what about all of those individual elements and features that make your page unique? Navigation, forms, images, sliders, carousels… they all need to be optimised as well.

That is where this post comes in, by highlighting 25 jQuery plugins that will help you optimise and resize those trickier web elements.

Responsly

The Responsly plugin is a set of simple responsive widgets written using CSS3 transformations. It is best used with a responsive CSS framework like 1140px or 320plus and currently there are only a slideshow and accordion widget available, but with much more to come soon.

Menu to a Dropdown for Small Screens

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from typical menu links into a dropdown menu. Using jQuery, this tutorial will show you how to recreate it.

Responsive Menu

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.

jFontSize

Elastislide

Elastislide is a responsive jQuery carousel that will adapt its size and its 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.

Blueberry

wmuSlider

wmuSlider Download Page →

PhotoSwipe

PhotoSwipe is an HTML/CSS/JavaScript-based image gallery specifically targeting mobile and touch devices. All modern mobile and touch devices, as well as the desktops and laptops, are supported. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

FlexSlider

Flexslider is a lightweight, fully responsive jQuery slider plugin. It has simple, semantic markup, slide and fade animations, and is supported by all major browsers so you won’t have any compatibility issues. Flexslider is built for beginners and pros alike.

Responsive jQuery Slideshow

Seamless Responsive Photo Grid

Seamless Responsive Photo Grid

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.

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

jQuery Masonry

Masonry is a dynamic grid layout plugin for jQuery. 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.

Isotope

Isotope is a jQuery plugin for intelligent, dynamic layouts that can’t be achieved with CSS alone. You can hide and reveal item elements easily with jQuery selectors and re-order item elements with sorting.

Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.

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. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements.

Adaptive Images in HTML

OK, this is not a jQuery plugin, but still its worthy of a mention. Adaptive Images, intended to be used with responsive and fluid layout techniques, is a solution that will automatically create, cache, and deliver device-appropriate (it detects the resolution of the visitors screen) of your website’s content images. No need to change your mark-up, it manages its own image re-sizing, and will work on any CMS or even on flat HTML pages.