jQuery \ Resources
February 15, 2013
No Comments

Web design is developing at high speeds. Nowadays, each web designer`s mission of keeping up with trends and web requirements is a complex process because there are more and more technologies which have to blend together in order to achieve a high-quality finished product. Responsive web design became from a concept a necessity in less than a year and it seems that this is the direction things are going to.

Today I want to present you the important role that jQuery plays in the process of transforming regular HTML/CSS layouts into mobile friendly websites. Even if a website layout looks great on mobile devices thanks to CSS media queries, making it function like a native app is another thing which can be achieved with nothing else than jQuery plugins:

Nivo Slider

Nivo Slider is one of the most popular jquery slider plugins and recently became responsive too. The jQuery plugin is completely free and totally open source which means that you`re free to use it for any kind of project.

nivo slider responsive jquery plugin

Camera Responsive jQuery Slider Plugin

Camera is an open source slider based on jQuery. It supports beautiful transitions, captions and among all, is responsive.

camera responsive jquery plugins

FlexSlider jQuery slideshow

When it was released, FlexSlider was one of the very first responsive jQuery slideshow. Today the slider is curated by the WooThemes team which constantly improves it to satisfy any website homepage. The slider can take different shapes, supports thumbnails and can be transformed into a carousel.

ResponsiveSlides

ResponsiveSlides.js is a tiny jQuery slideshow plugin that creates a responsive slider using list items inside. It works with wide range of browsers including all IE versions from IE6 and up(how cool is that?).

PhotoSwipe

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. Although it wasn`t designed for desktop screens, it is one of the best choices from jQuery plugins for mobile websites sliders, coming packed with the look and feel of a mobile app.

jQuery Masonry

Masonry is a jQuery plugin which deals with layouts. I`m sure you`ve already seen websites, especially blogs with posts arranged vertically one under another. This is what this responsive jQuery plugin does: it 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-responsive-plugin

Isotope

Isotope is another jQuery plugin which also deals with layouts. The plugin can be used for reordering and filtering elements and more importantly, elements can vary in size and purpose. Isotope and Masonry are jQuery plugins developed by David DeSandro which is a great web designer currently working at Twitter.

isotope-responsive-jquery-plugin

Sequence

Sequence.js is a refreshing and modern take on website sliders. Using just HTML and CSS, Sequence allows you to create your own responsive slider with unique transitional styles.

sequence-responsive-plugin

FitVids

Video embeds into responsive websites are a common issue web designers have to face with each project. Hopefully, they have FitVids which is a jQuery plugin used for fluid width video embeds.

fitvids-jquery-plugin

FitText

FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.

fittext-jquery-plugin

TouchSwipe

TouchSwipe is a plugin which can be used with jQuery on touch input devices such as iPad, iPhone etc. In other words, the plugin can be used together with other jquery plugins such as sliders and carousels in order to create a more interesting user experience on mobile devices by enabling touch gestures.

touch swipe

Responsive Menu

This is a jQuery plugin which turns your site’s navigation into a dropdown when your browser is at mobile widths. This is one of the most used jquery plugins for navigation implemented into responsive websites, because is easy to use and does its job pretty well.

responsive-menu-by-matt

Page Slide Responsive Menu

PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction panel. Clicking on a button or link slides the page over to reveal a hidden panel, one that usually contains secondary navigation, a form, or additional information. This plugin can be considered a step further to the goal of achieving a good user experience on mobile devices for responsive desktop websites.

page-slide-responsive-menu

FooTable

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them. The mechanism is simple: it hides certain columns of data at different resolutions. The remaining rows creates a responsive table.

responsive-tables-jquery

Ideal Forms

Ideal Forms is a framework for building and validating responsive HTML5 forms. It`s fully responsive, supports keyboard inputs, it has even a custom date picker and is ready for localization.

ideal-responsive-html5-forms

[pinit]

Written by

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.