Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

jQuery Plugins for Responsive Web Design

So, do you want your website to be properly displayed on mobile devices and tablets? If yes (and we're pretty sure it is 'yes') then it is time to think about how to make your layout more responsive. Being one of the most discussed web design trends of the year of 2011 responsive web design keeps moving forward by providing new efficient solutions for web developers and webmasters.

Today this trend will be presented by the awesome jQuery plugins for responsive design. We've tried to put together various types of plugins that will help you to properly display your content on mobile devices, and by content we mean not only images but also fonts, videos and even grid system to make things look nice on small screens. Also don't forget to look trough our article that would guide you through the basics of responsive web design - How to Get Started with Responsive Web Design. Now let's get back to our list of jQuery plugins.

1. Responsly.js

jquery-plugins-responsive-design

Responsly jQuery plugin perfectly works with laptops, tablets and mobile device screens. It has pure CSS styling and is compatible with all modern browsers (IE drops transition support only). It is a very lightweight plugin that can be easily customized be editing CSS file.

* * *

2. Photo Swipe

jquery-plugins-responsive-design

Photo Swipe is a Javascript-powered image gallery plugin that has been created mostly for mobile devices. With it your visitors will be able to browse your website with a familiar and intuitive interface.

* * *

3. FitText

jquery-plugins-responsive-design

FitText makes font sizes flexible which means that all headlines on your website will be scalable. This plugin is another step that will help you make your layout more responsive.

* * *

4. Responsive Menu

jquery-plugins-responsive-design

This is a very simple and small jQuery plugin which will convert menus into a select element for mobile devices and low browser widths.

* * *

5. Adaptive Images

jquery-plugins-responsive-design

Adaptive images is efficient solution that allows you to deliver a mobile friendly version of your website images. This plugin detects screen size and creates appropriate re-scaled versions of the images on your web page. No mark-up changes needed.

* * *

6. jQuery Masonry

jquery-plugins-responsive-design

jQuery Mansory is a grid layout plugin that arranges elements vertically reducing huge vertical gaps. So, this plugin creates nice mobile-friendly layout.

* * *

7. FitVidJS

jquery-plugins-responsive-design

This is a lightweight jQuery plugin that was created with only one aim in mind - to properly display embedded videos by using fluid width.

* * *

8. Convert a Menu to a Dropdown for Small Screens

jquery-plugins-responsive-design

This plugin creates a mobile-friendly dropdown menu instead of classical row of links in your navigation menu.

* * *

9. jFontSize

jquery-plugins-responsive-design

This is a special plugin created to facilitate that notoriously famous A+/A- button that allows you to increase or reduce the font size in desktop versions of some websites. Basically jFontSize adapts fonts on website for the resolution of your device's screen.

* * *

10. jQuery UI mediabox

jquery-plugins-responsive-design

rlightbox is a jQuery UI plugin that displays various content including images, YouTube and Vimeo videos. Among its features we must mark out Panorama and Live Re-size.

* * *

Also check out following responsive web design interactive infographic where all info about RWD is gathered.


Edward Korcheg

Edward is a professional technical writer who is also passionate about making stunning designs in Photoshop. You can find many useful tutorials in his collection of articles at MonsterMost.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

14 responses to “jQuery Plugins for Responsive Web Design”

  1. I simply couldn’t depart your site before suggesting that I really loved the usual
    information an individual supply on your visitors?
    Is going to be again incessantly in order to investigate cross-check new posts

  2. Responsive WordPress says:

    Oh so true! Responsiveness and jQuery is like the future meets even a better future 🙂

  3. Web Design El Paso says:

    As the design is an core issue of any web site.
    The major aim is to get the intention from the users which  puts a lot off stress on web designers. & make their work challenging.
    A nice post shared, Thanks for sharing the helping one stuff.

  4. San Diego Plumbing says:

    Great list of plugins! Especially important with the growing popularity of mobile browsing.

  5. Webguy says:

    A welcome resource, many thanks for these valuable links.

  6. amitabha197 says:

    a new concept i find here

  7. websolutionspk says:

    Great Collection its really help

  8. Web Designer Developers says:

    Good helping one stuff defined , Nice post shared , Thanks for the info .

  9. Kraghvandra says:

    this is really helpfull

  10. Nuno Miguel M. C. says:

    Great solutions. Thanks

  11. Jessica Swan says:

    Thanks for the informative post, I’ve been working on my website for a long time, and I am still not capable of resolving the problem that it is never displayed properly on mobile devices. These tips are useful, I think I should try.

  12. Livelifenow7 says:

    That’s a very good post. Thanks for this collection

  13. דפי צביעה says:

    פוסט מצויין איישם באתר! תודה!

  14. Marcin says:

    That’s a very good post. Thanks for this collection Edward, I’ve already tried jQuery Masonry, I hope the other will be at least equally helpfull.

Leave a Reply

Your email address will not be published. Required fields are marked *