As we all know by now, when designing responsive websites, all design components will need to adapt to the device (from mobile browsers to netbooks and tablets) on which they are displayed and have to interact with. Serving a website to different devices can be done with the help of jQuery plugins.
Last week I showed you some free and high quality responsive jQuery Slide and Gallery Plugins here on the gonzoblog. This week I’ld love to present you some free jQuery Plugins to dynamically arrange code blocks based on breakpoints, create responsive navigation menus and to resize your (background) images, text or videos.
Actually these jQuery plugins are created for web designers and developers to add amazing effects and (extra) functionality to websites and/or apps. Below I have collected and categorized some responsive design plugins for you to use in your (next) responsive web design. Let’s hit the road, Jack!
Development & Prototyping
Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its object methodsgive developers hooks for triggering responsive actions and booleans for testing responsive properties.
Using this plugin you can define breakpoints for your design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. Breakpoints.js is a project of the hackers and designers at XOXCO.
jQuery Responsive Web
A simple jQuery plugin helping design more responsive and adaptive websites and web applications with almost no setup. It adds dynamic classes to the
<body> depending on the operating system, browser and resolution. Compatible with Internet Explorer v7 and v8, Firefox, Google Chrome, Safari and Opera.
This plugin is especially useful for single-page responsive websites. Design and build your site, dividing your content into blocks. Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. You can use many effects, including fancy parallax and various animations, pinning and unpinning objects while scrolling either way.
TinyNav.js is a tiny jQuery plugin (322 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen (by using media queries). It also automatically selects the current page and adds selected=”selected” for that item.
Another Plugin which turns your site’s navigation into a dropdown (<
select>) when your browser is at mobile widths. Convert multiple navigation lists into a single dropdown for mobiles [true/false]. Here you can watch the demo of this responsive menu.
Really simple responsive menu
If you’re on a mobile phone or if you narrow the browser window you’ll see a menu button appear which upon pressing displays the considerably unexciting menu and pressing it again retracts it. It offers maximum viewing space for the site content without sacrificing functionality for small screen users.
Molten leading (or, fluid line-height)
line-height for optimum readability across a bunch of media queries is kind of a pain. So I made a thing. One sets a minimum width at which the adjustment starts, a maximum element width where it stops, and a minimum and maximum line height to adjust through. This isn’t especially well-tested, but seems to check out in all the big desktop browsers (including IE).
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Oh, and don’t you dare let us catch you using FitText on paragraph text. This is for gigantic display text only! FitText is brought to you by Paravel.
(Background)Images & Video
Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes. Further advantages of using Anystretch include being able to change the background image on click, set a fade-in speed, and turn the whole thing into a gallery with just a couple of lines of code.
A simple jQuery plugin that allows you to add a dynamically-resized background image to any page. In a nutshell, Backstretch will stretch any image to fit the page, and will automatically resize as the window size changes. Attach Backstretch to click events or use Backstretch in a slideshow. Images are fetched after your page is loaded, so your users won’t have to wait for the (often large) image to download before using your site.
Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary. You can configure the breakpoints, the regular expression pattern to match on the src attribute and whether to update just on
$(document).ready() or on
$(window).resize() as well.
A responsive jQuery Image manipulation and overlay plugin. Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion.
Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.
This is a lightweight and easy-to-use jQuery plugin for fluid width video embeds. This will wrap each video in a
Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.