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!
- 10 jQuery Layout Tutorials
- 10 jQuery Plugins for your Webpage Customization
- 8 Stunning jQuery Page Layout Plugins
1. The Heads-Up Grid
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.
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.
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.
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.
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”!
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.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well