.. Your Daily Design Dosis

jQuery Plugins for Fluid Layouts/Responsive Web Design

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!

Breakpoints.js

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.

ProtoFluid

ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. It works within your website, HTML5 app or game in the form of a single JavaScript include. ProtoFluid lets you adapt your design to any viewport on-the-fly without the awkwardness and expense of maintaining a high volume of test devices.

Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript. the Heads-Up Grid made it relatively easy to adapt to the needs of responsive web design. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements.

Scrollorama

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.

Navigation

TinyNav.js

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.

Responsive-Menu

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.

The menu displayed is the exact same menu on larger screens so there’s no excess markup and we use progressive enhancement to add the show/hide functionality for Javascript enabled browsers so if your mobile browser doesn’t support JS you’ll see the menu expanded by default.

Content/Text

Molten leading (or, fluid line-height)

Manually adjusting 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

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

jQuery Anystretch

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.

Backstretch

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

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.

FitVids

This is a lightweight and easy-to-use jQuery plugin for fluid width video embeds. This will wrap each video in a div.fluid-width-video-wrapper and apply the necessary CSS. After the initial Javascript call, it’s all percentage-based CSS magic.

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

glad you liked the featured plugins! Altho I try to use as less as possible jQuery in my responsive designs, all the extra HTTP-requests and the asynchronous downloads of the specific scripts make your site on mobile devices very, .. very slow!

But I must admit some of the mobile navigation plugins are a must, also I use FitText and FitVids a lot! But since this post has been published (last year March) there have come a lot of new CSS3 properties that can do the same as some of these plugins do! Personally that makes my choice a bit easier, .. going for CSS3!

Thanks for your comment, I’m glad you liked my little collection ;-P I have experimented with some of these already and I can assure you there are some CSS3 gems hidden here! If you’ll successfully use one of these in the future, send me the URL, I’ld love to see it!