One of the most popular topic of discussion for a while is responsive websites and this discussion has presented designers and developers some challenges, as they are now to required to create websites for by which to provide the best optimal viewing experience by having easy to read text objects, navigation that uses simplicity resizing, panning and scrolling across a whole wide of screen sizes.
You would normally use media queries to resize the overall layout, but how about those individual elements & features that you are wanting to use to make your page unique…
To add these features you can use some jQuery plugins to achieve the desired effect or feature but sometimes finding these jQuery plugins can sometime be a time-consuming task, so for today’s post you’ll find 12 super useful jQuery plugins that help you create responsive websites.
1. VenoBox
VenoBox is a responsive jQuery lightbox plugin that is suitable for images, , iFrames, Google Maps, videos from Vimeo and YouTube, Ajax requests, Vimeo and YouTube videos, inline contents. But the difference between VenoBox and many of the others modal window plugins is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window so in small devices you can scroll down the content, avoiding vertical microscopic resized images.
2. Response
Response is a jQuery plugin that provides tools for building performance-optimised and mobile-first responsive websites. Response’s most powerful feature isbreakpoint sets. Response use HTML5 data attributes to dynamically swap markup based on breakpoints so that rich content can be served progressively. It’s API includes cross-browser event hooks, HTML5 dataset, and ways to get or test responsive properties.
3. jQuery Responsive Tabs
Responsive Tabs is a jQuery plugin that provides responsive tab functionality, the tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
4. Ridiculously Responsive Social Sharing Buttons
Ridiculously Responsive Social Sharing Buttons is a solution for responsive social share buttons that you can easily customize it by tweaking a few variables. The SVGs allow for tiny file size and retina support.
5. Responsive Elements
Responsive Elements is a jQuery plugin that makes this process easier for the elements that been used in a web page. As this plugin adds classes such as gt100 lt150 lt200 where gt refers to ‘greater than”’ and it refers to ‘lower than’ to the elements which tell us how big exactly the size of each element is.
The range of the classes (from x to y pixels) and the interval of them(create classes each z pixels) can be defined too.
6. slimMenu
slimMenu is a lightweight jQuery navigation plugin, that allows you to make responsive and multi level navigation menus on the fly.
With slimMenu, you will never longer struggle with media queries to create responsive menus, or any other heavy plugins that create multi-level nested menus, as slimMenu does both job for you and it’s only 5KB( or 2.5KB minified).
7. BttrLazyLoading
BttrLazyLoading is a jQuery plugin that allows your web application to defer image loading until images are scrolled to but not only! BttrLazyLoading also allows you to have different version of an image for 4 different screen sizes: phones (<768px), tablets (≥768px), desktops (≥992px) and large Desktops (≥1200px).
8. Remodal
Remodal is a flat, responsive, lightweight, easy customisable modal window jQuery plugin with declarative state notation and hash tracking.
9. Restable
jQuery ReStable is a jQuery plugin that makes your tables responsive by turning them into UL lists when necessary. It’s lightweight, around 1kb, and very simple.
10. Pick a Date
Pickadate.js is a jQuery date input picker that is also responsive as this plugin looks pretty neat and simple at any size, the pick a date is easy to use.
11. matchHeight
matchHeight is a robust, responsive equal heights jQuery plugin, as it makes the height of all selected elements exactly equal. matchHeight provides row aware, handles floating elements, responsive, automatically updates on window resize, handles images and other media, data attributes API and many more.
12. Scrolld.js
Scrolld.js is a unique jQuery Plugin as Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. When you use Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. This plugin was specifically designed to support responsive designs and turns navigating long pages into a simple task.
