One of the hot topics in web design are responsive layouts. As it allows you to offer a specific and optimised screen size based on any device such as mobile, tablet that the visitor uses.
Typically we use Media Queries to resize the overall layout, but how do we go about just changing all of those individual elements and features that you want to make your page unique? Everything on your site need to be optimised like your menu(s), images, sliders. Today’s post will feature 15 great jQuery plugins for responsive layouts
Blueberry is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
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.
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.
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.
A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
A jQuery responsive slider with touch support and AJAX image gallery
an awesome, fully responsive jQuery slider plugin.
9. 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 media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.
Responsly.js is a set of simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available, more to come!
The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.
A jQuery plugin for responsive images. 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.
The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc.
This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content
Isotope: An exquisite jQuery plugin for magical layouts