.. Your Daily Design Dosis

jQuery Plugins for Fluid Layouts/Responsive Web Design

| 13 Comments

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

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.

Source

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.

Source

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.

Source

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.

Source

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.

Source

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.

Source

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.

Source

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.

Source

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.

Source

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).

Source

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.

Source

(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.

Source

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.

Source

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.

Source

Hoverizr

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.


Source

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.

Source

Adaptive Images

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.

Source

 

Author: Gonzo the Great

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.

13 comments

on this article: “jQuery Plugins for Fluid Layouts/Responsive Web Design”
  1. Hi Gonzo, these responsive design plugins you have shared is really useful when creating responsive web design. Thanks for the informative post.

    • Hi Karl,

      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 the comment, enjoy your day! Cheers & Ciao!

  2. Hi Gonzo,

    Brilliant collection of jQuery plugins to create a good user experience for mobile visitors to a responsive website. I’ll be using quite a number of these for sure. Thanks for sharing this!

    Cheers
    Jerry

    • Hi Jerry (of gewoon: Hoi Jerry!),

      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!

      Have a great weekend, jij ouwe Hollander ;-P
      Cheers & Ciao Amigo!

  3. Hello,

    Thanks for sharing this great content, I really enjoyed the insign you bring to the topic, awesome stuff!

  4. Very handy list, been meaning to try out responsive menu for a while. Breakposts looks useful too as i think and hope can load in other assets based on screensize.

    • Hi WDA,

      Glad you liked my list and yes, you can embed these Plugins almost everywhere! Thanks for your comment, have a great day!

      Cheers & Ciao ..

top