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.
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.
* * *
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.
* * *
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.
* * *
This is a very simple and small jQuery plugin which will convert menus into a select element for mobile devices and low browser widths.
* * *
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.
* * *
jQuery Mansory is a grid layout plugin that arranges elements vertically reducing huge vertical gaps. So, this plugin creates nice mobile-friendly layout.
* * *
This is a lightweight jQuery plugin that was created with only one aim in mind - to properly display embedded videos by using fluid width.
* * *
This plugin creates a mobile-friendly dropdown menu instead of classical row of links in your navigation menu.
* * *
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.
* * *
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 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.
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
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
Oh so true! Responsiveness and jQuery is like the future meets even a better future 🙂
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.
Great list of plugins! Especially important with the growing popularity of mobile browsing.
A welcome resource, many thanks for these valuable links.
a new concept i find here
Great Collection its really help
Good helping one stuff defined , Nice post shared , Thanks for the info .
this is really helpfull
Great solutions. Thanks
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.
That’s a very good post. Thanks for this collection
פוסט מצויין איישם באתר! תודה!
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.