15 jQuery Plugins for Building Responsive Layouts

LIKE & SHARE

There are some cases that you will find media queries not powerful enough to handle the optimization of responsive website – and so the help of jQuery plugins for building responsive layouts are in need. The optimization of other web elements such as navigation, image sliders, font size, image gallery and other elements that are part of your layout are required especially if you are building powerful responsive web design.

Here’s a collection of jQuery plugins for building responsive layouts or responsive web design to help you create multiple device-friendly websites. There is also, of course, a lot of mobile frameworks to develop multi-platform apps which will help you to do the same thing. As long as you come up with the benefits of making the experience of web browsing more exciting, then you can use any of these tools.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Microsoft PowerPoint Presentation Templates

Responsive Image Gallery with Thumbnail Carousel

Using the Elastislide plugin (above), this tecnique 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.

Responsive Image Gallery with Thumbnail Carousel
View Source

Response JS: Progressive Enhancement in HTML5

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 progressively via HTML5 data attributes.

Response JS: Progressive Enhancement in HTML5
View Source

FitText – A Plugin for Inflating Web Type

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.

FitText - A Plugin for Inflating Web Type
View Source

Supersized – Full Screen Background Slideshow jQuery

Supersized is a fullscreen background slideshow built using the jQuery library – a project by Sam Dunn of One Mighty Roar.

Supersized – Full Screen Background Slideshow jQuery Plugin
View Source

PhotoSwipe

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.

PhotoSwipe
View Source

ResponsiveSlides.js – Responsive jQuery Slider & Slideshow

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.

ResponsiveSlides.js - Responsive jQuery Slider & Slideshow

The 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
View Source

jQuery Masonry

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

jQuery Masonry
View Source

Doubletake

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.

Doubletake
View Source

rlightbox – a jQuery UI Mediabox

rlightbox 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. Like other jQuery UI widgets, it is ThemeRoller ready.

rlightbox – a jQuery UI Mediabox
View Source

Blueberry – Responsive jQuery Image Slider

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Blueberry – Responsive jQuery Image Slider
View Source

FitVids.JS – jQuery Plugin for Fluid Width Video Embeds

FitVids.JS 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.

FitVids.JS - jQuery Plugin for Fluid Width Video Embeds
View Source

Hoverizr – A Responsive jQuery Image Manipulation

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.

Hoverizr – A responsive jQuery Image manipulation and overlay plugin
View Source

Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.

Elastislide – A Responsive jQuery Carousel Plugin
View Source

Adaptive Images in HTML

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.

Adaptive Images in HTML
View Source
2600+ Facebook Covers - Facebook Timeline Covers | GraphicRiver

Written by Manuel Garcia

Manuel Garcia is the founder and the brain behind Designrshub.com, a community that provides High Quality Design Inspirations and Resources. He’s a student from Philippines who loves to write for design community and dedicated in sharing inspirational resources. He fell in love with creative writing when he was 15.

COPYRIGHT © 2013 DESIGNRSHUB | ABOUT | ADVERTISE | CONTACT US | SUBMIT NEWS | WRITE FOR US
Designrshub.com. Created and Designed by Manuel Garcia.
Reproduction without explicit permission is prohibited. All Rights Reserved.