Site   Web

August 18, 2016

7 Must-Try Responsive jQuery Plugins for Your Website

Google’s updates toward mobile-friendly website optimization have made it extremely important to have a responsive website design, especially when it is about gaining page ranking. Due to the significance of these updates, all small to large companies across the globe have decided to take their businesses to responsive designs. Though, in the beginning, it seemed too difficult, with the passage of time, developers have built a lot of tools such as CSS3, HTML5, Bootstrap and most importantly JQuery which all have made it much easier to go responsive.

There are various popular tools like mentioned above, but jQuery has become much more popular among designers because of its capability to create amazingly beautiful and responsive layouts. Responsiveness is something that can make even the simplest designs look impressive. With the help of jQuery responsive plugins, a designer can easily resuscitate images, sliders, calendars, carousels, navigation and other important components of the site.

Fortunately, now you can choose from a large number of plugins which can be used to transform a dead website into a lively one. If you really want to get some of the best plugins, you will find this article an interesting read — I am going to discuss some of the best jQuery plugins available today.

1. ANIMSITION – CSS Animated Page Transitions

ANIMSITION is an extremely simple-to-use plugin that proves to be highly powerful when developers need to put page transitions along with CSS animations. With this plugin, you can have 58 animations such as:

  • Fade Up
  • Fade Down
  • Fade Left
  • Fade Right
  • Rotate
  • Zoom
  • Many others

2. FlowType.JS – Web Typography At Its Finest

Today most of the websites use a kind of typography that allows 45-75 characters in a line which sometimes becomes quite difficult to read due to unchangeable screens because of specific CSS media features, however, FlowType.JS can help you experience the best form of web typography. FlowType.JS enables users to adjust font-size according to the specific element width. Options that you can avail:

  • Thresholds: To control magical features of FlowType.JS, you can set width thresholds to minimum or maximum limit.
  • Font-size: FontRatio variable allows you to set font size.
  • Webfonts: The plugin works great with Google webfonts, cloud.typography, Typekit and various other major services.

3. anoFlow – Responsive Lightbox Gallery

anoFlow is another popular plugin for jQuery and easily available to use for personal as well as commercial purposes. Some of its features are as follows:

  • Responsive gallery
  • Amazingly lightweight
  • Useful for mobile development
  • Captions support
  • Integrated images
  • Various configurable options

4. BrickWork – Create Dynamic Layouts

When you want to create impressively dynamic layouts, BrickWork can help you do it. It has been developed for the developers with an only requirement of Zepto/jQuery. It is also important to mention here that it can work with all popular browsers such as:

  • Chrome
  • Firefox
  • Opera
  • IE 8.0+
  • Safari

5. nanoGALLERY – Image Gallery Simplified

nanoGALLERY is an excellent jQuery plugin to create image galleries. It is touch-enabled and allows designers to create image galleries based on different types of layouts with full responsive features. If you want to add elegance to your site’s image gallery, nano can be a perfect choice for you. Some of its best features are:

  • It is a full-featured jQuery plugin;
  • Images can be displayed in full length view;
  • Support for photo sharing sites such as Google photos or flickr etc.;
  • Display thumbnails with title as well as description;
  • You can choose grid, cascading or justified layout.

6. Responsive Tables – Never Let Your Table Break Layout

A lot of designers complain that the tables break responsive layout because of their inability to adjust with different sizes of screens, especially the smaller ones. This prominent issue can be resolved with Responsive Tables, a combo of CSS/JS that has been designed to modify an existing table so it could be adjusted with small screen devices. Once you apply it, it can easily:

  • Stop breaking of responsive layouts;
  • Stop hiding of data unnecessarily;
  • Allow you to compare different rows.

The plugin works perfectly with Windows phone 7, Android 3 and up and iOS devices.

7. SlabText.js – Produce Big, Bold & Responsive Headlines

Big, bold and responsive headlines play a vital role in giving an attention-grabbing look to your website and, if you are a designer, you can get perfect support from SlabText.js which has been developed to work with different screens. What can this simple plugin can do for you?

  • It can split headlines into rows;
  • It can calculate best set of characters to fit in rows;
  • It can break headlines into perfect word combination;
  • It can create individual rows automatically as per the requirement.

Final Words

There are various other responsive jQuery plugins available for use but the ones discussed above are some of the best that must be tried at least once. You can easily give an elegant look to your dead-looking website with the help of these simple-to-use plugins.


Micheal Grant is a freelance blogger. Currently, he is associated with Dissertation Help Love through which he provides academic excellence for students, and helps them cope with their assignments and dissertation needs.