6 Jquery Plugins for Responsive and Mobile Websites

response.js

Response.js is a great way to serve up different HTML depending on what browser size or device the user is accessing the site on. In the Yeti Cave we primarily use it to serve different sized images determined by browser dimension break-points so that a user's mobile device doesn't have to spend precious seconds downloading huge files. Response.js is a great way to make sure that your website is optimized for any screen and any device.

FitVid.js
Gone are the days of the frustration of dealing with fluid width video embeds! By setting the video to 100% width of its container your video will always have the correct width to height ratio no matter what the size of the viewport is.

bigtext.js
Big Text is a fast and easy way to create fluid font-sizes for title, h1 or any other large text elements on your page. It works similarly to fitvid in that the text is set to 100% width of its parent element. It's that easy!

InfinteScroll.js

If you are building a blog or a site the has a lot of content you might want to try out this handy plugin. Not only does infinite scroll offer an addicting and easy way of accessing all the things your site has to offer it has also been proven that it actually retains users for longer than if they had to click a link to the next page.

masonry.js

Popularized by sites like pinterest, masonry.js is a plugin that maximizes displayed content with available screenspace. All you have to do is determine the column widths of your layout and then you can define the size of the content blocks to offer a visually satisyfing experience. Consider teaming up masonry.js with Infinite scroll for maximum carnage!

lettering.js

Alright, so this plugin isn't really mobile specific but consider it a bonus for this list. Lettering.js gives typography fans down to the letter control of their designs! This plugin adds a class to each letter of your selected word and where any css styling can be applied.

‍