This article was published 12 years ago, therefore the contents of this post may be out of date.

One of the hot topics in web design are responsive layouts. As it allows you to offer a specific and optimised screen size based on any device such as mobile, tablet that the visitor uses.

Typically we use Media Queries to resize the overall layout, but how do we go about just changing all of those individual elements and features that you want to make your page unique? Everything on your site need to be optimised like your menu(s), images, sliders. Today’s post will feature 15 great jQuery plugins for responsive layouts

1. Blueberry

Blueberry is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

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

3. PhotoSwipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

4. Adaptive Images

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. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

5. jQuery Mansory

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.

6. FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

7. wmuSlider

A jQuery responsive slider with touch support and AJAX image gallery

8. FlexSlider

an awesome, fully responsive jQuery slider plugin.

9.  Response JS

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 media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

10. Responsly.js

Responsly.js is a set of simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available, more to come!

11. Convert 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 a regular row of links into a dropdown menu.

12. Doubletake

A jQuery plugin for responsive images. Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.

13. The Heads Up Grid

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.

14. jFontSize

The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc.

This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content

15. Isotope

Isotope: An exquisite jQuery plugin for magical layouts


15 Great jQuery Plugins For Responsive Web Design


3 Responses

Comments are closed.