Over the last several years, the amount of consumption in the tablet and smartphone market has surged! Web developers have been working on adapting to the various resolutions that are associated with BlackBerrys, iPhones, iPads, iPods, and Androids. Responsive layouts in web design has been a crucial element in this adaptation. Responsive layouts utilizes CSS and jQuery to make a single website appear like it was designed specifically for that device. This means that you may not necessarily need to scroll left and right to read overlapping content on a tablet or smartphone. In this post we will find 10 jQuery Plugins For Responsive Fluid Web Design.

Response

Response JS is a lightweight jQuery (or Zepto) 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 (or other media) progressively via HTML5 data attributes. Its methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Doubletake

A jQuery plugin for responsive images. Intended to be a proof of concept.

PhotoSwipe

Image Gallery for mobile and touch devices.

Responsive and Mobile-Friendly Tooltip

Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target.

Elastislide

A Responsive jQuery Carousel Plugin.

Javascript onMediaQuery

A neat way to trigger JS when media queries change.

RefineSlide

RefineSlide is a 3D transform/CSS transition-enabled jQuery plugin for displaying responsive, image-based content.

FitText

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.

Hoverizr

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. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.

Backstretch

a simple jQuery plugin that allows you to add a dynamically-resized background image to any page.