Useful jQuery plugins for responsive web design


By , April 5th, 2013 , Tags: , 0 Comments

When building responsive websites, jQuery can be very helpful. In this article a list of jQuery plugins that will definitely help you building more responsive and usable websites.

Responsive Web Design is used to present any companies information in the most efficient way possible, depending upon how they are viewing your website. Having a responsive web page is a good way to keep people on your website, instead of another page, especially when it comes to smaller screens. For instance, if someone is looking up information quickly on there smart phone, if they go to a website that is poorly designed they will have to spend much more time (including the time it takes to load something on to the phone itself) looking for what they need. Most likely they will not take that time, and instead will move to another website. One that is designed to adapt to the size of the screen will show the viewer the most important information as effectively as possible. The old way of designing web pages through more structured wire frames, etc., has been replaced with a more fluid model.

SlabText.js

Responsive web design - CSS Matter

SlabText is a jQuery plugin that splits headlines into rows before resizing each row to fill the available horizontal space. Basically, it means that your headline will always look great whatever of the client screen size.

Download: http://www.frequency-decoder.com/2012/01/08/slabtext-a-jquery-plugin…

jQuery Masonry

Responsive web design - CSS Matter

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.

Download: http://masonry.desandro.com/

TinyNav.js

Responsive web design - CSS Matter

TinyNav.js is a super useful jQuery plugin which allows you to automatically turn a navigation menu into a select for small devices such as iPhones. A must have!

Download: http://tinynav.viljamis.com/

FitText.js

Responsive web design - CSS Matter

FitText is a simple jQuery plugin that automatically make a text fit the width of its parent element. Perfect for awesome, responsive headlines!

Download: http://fittextjs.com/

Breakpoints.js

Responsive web design - CSS Matter

Simply define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. Very useful on complicated layouts!

Download: http://xoxco.com/projects/code/breakpoints/

ResponsiveSlides.js

Responsive web design - CSS Matter

Slideshows are very popular among the web. Though, forcing them to fit any screen size can be a little tricky. ResponsiveSlides.js allow you to create responsive slideshows, which will look great whatever on any device.

Download: http://responsive-slides.viljamis.com/

Flare

Responsive web design - CSS Matter

Flare is another jQuery plugin for building responsive and full width slideshows. It is not free but it is absolutely worth $10 as it is very easy to use and visually pleasant.

Download: http://is.gd/flarecwc

FitVids.js

Responsive web design - CSS Matter

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was built by was built by Chris Coyier and Paravel.

Download: http://fitvidsjs.com/

Responsive tables

Responsive web design - CSS Matter

Does your tables break your responsive layout? If yes, here is a simple JS/CSS combo that will let your tables adapt to small device screens without everything going to hell. A must have for any tables!

Download: http://www.zurb.com/playground/responsive-tables

jq-idealforms

Responsive web design - CSS Matter

Ideal Forms is the ultimate framework for building and validating responsive HTML5 forms. It is super easy to use.

Download: http://elclanrs.github.com/jq-idealforms/

 

Share your comments below or contact me.






I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.



Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.



Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.