10 jQuery Plugins to help with Responsive Layouts
Responsive layout in web design is an important topic of discussion at the moment. Basically a responsive layout allows you to offer a specific and optimized screen size based on whatever device (mobile, tablet…) the visitor uses. Typically, you would use Media Queries to resize the overall layout, but navigation, forms, images, sliders, carousels… they all need to be optimized as well. This is why we are giving you our collection of 10 jQuery plugins that will help you optimize and resize those trickier web elements. Have fun!
Related Posts:
- 10 jQuery Layout Tutorials
- 10 jQuery Plugins for your Webpage Customization
- 8 Stunning jQuery Page Layout Plugins
1. The Heads-Up Grid
Built with HTML, CSS & JavaScript. 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.
2. FitVids.JS
Is a lightweight, easy-to-use jQuery plugin for responsive width video embeds. It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
3. AdaptiveMedia
With AdaptiveMedia, you need only one CSS file for any window sizes, no need LESS or same solutions, no need CSS3 Media Queries. Less than 3KB, HTML5 and IE6 compatible. User callback: execute user function before completed all job.
4. rlightbox
Is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size and like other jQuery UI widgets, it is ThemeRoller ready.
5. Elastislide
Is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size.
6. Responsive Image Gallery with Thumbnail Carousel
Using the Elastislide plugin (above), this technique will show you how to implement a responsive gallery that adapts to the view-port width. The gallery will has a view switch that allows you to view it with the thumbnail carousel or without. It also supports keyboard navigation.
7. Seamless Responsive Photo Grid
Maintains the aspect ratio of your images.
8. Responsive jQuery Slideshow
This example makes it possible to have fluid jQuery slideshow which scales responsively. This is the same method which is used on the new kiskolabs.com.
9. wmuSlider
Please keep in mind that it’s still very raw (really) and under the MIT LICENSE, which basically means: break it, steal it but THE STUFF IS PROVIDED “AS IS”!
10. Doubletake
Intended to be a proof of concept, Doubletake is a plugin that dynamically updates the src of your images based on the browser width. You start with a small, mobile-friendly image in your HTML. Doubletake will then use a defined set of breakpoints to update image SRCs when necessary.
