It seems as if the internet is filled with hundreds, if not thousands of jQuery plugins, sometimes it can be a little hard to keep track of all the new plugins, and therefore we have decided to bring you some of our favorite plugins, here is a list of 30 must see plugins. They cover all areas such as Form & Validation Plugins, Plugins for Responsive Layouts, as well as Web Typography Plugins, Animation Plugins and all sorts of other plugins. Do you think we have forgotten any plugins? If so then feel free to share them in the comments section.

#1. jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

#2. jQuery Validation Engine

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.

#3. Baseline

Baseline.js is a jQuery plugin that helps you to maintain vertical rhythm set by a typographic baseline, even when adding inline images with awkward sizes.

#4. kerning.js

CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.

Print designers have had it easy for way too long. This is 2012; the web has been around for over two decades, yet web designers don’t get full control over their typography? Forget that, use Kerning.js!

#5. Stellar.js

Parallax has never been easier. Add some simple data attributes to your markup, run $. stellar(). That’s all you need to get started.

#6. Responsive Measure

A jQuery plugin for generating a responsive ideal measure.

#7. Wookmark jQuery

This is a jQuery plugin for laying out a dynamic grid of elements.

#8. stickyMojo

stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE.

#9. ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft’s Build 2012 and Gridset App. ResponsiveSLides.js 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.

#10. jQuery URL Parser

An AMD compatible utility to parse urls and provide easy access to their attributes (such as the protocol, host, port etc), path segments, querystring parameters, fragment parameters and more. The core parser functionality is based on the Regex URI parser by Steven Levithan, and the query string parsing is handled by a modified version of node-querystring.

#11. BookBlock: A Content Flip Plugin

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.

#12. ddSlick

A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

#13. Lettering.js

A lightweight, easy to use Javascript <span> injector for radical Web Typography.

#14. imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

#15. mailcheck

The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.

#16.jQuery Tags Input

Magically convert a simple text input into a cool tag list with this jQuery plugin.

Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data – your form just sees a comma-delimited list of tags!

#17. Filtrify

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu.

Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.

#18. Quovolver

Quovolver is a jQuery plugin for revolving multiple testimonials or quotes in your document. Although, it can also be used to cycle through any group of elements.

#19. jQuery Credit Card Validator

jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detectedcredit card type and whether the number length and Luhn checksum are valid for the type of card.

#20. jQuery Panel Gallery 2.0

This jQuery plugin allow you to take a group of images and pass from one to the other in a smooth way adding some effects on it. You’re no longer are you limited to just panels to transition your images; now you have a whole slew of different effect to apply, with multiple ways to apply them

#21. Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

#22. gridster.js

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.

#23. equalize.js

The jQuery plugin for equalizing the height or width of elements. Equalize will accept any of the jQuery Dimension methods: height, outerHeight, innerHeight, width, outerWidth, innerWidth.

#24. HorizontalNav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

#25. jQuery Collapse

A lightweight (~1kb) jQuery plugin that enables expanding and collapsing content. This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.

#26. Style my Tooltips

Style-my-toolips does exactly what its title says: styles browser default tooltips. The javascript generated tooltip behaves and functions exactly like browser’s native tooltip, meaning it is always visible within the viewport and its position is relevant to cursor position.

#27. jQuery Complexify

Complexify is a jQuery plugin, so you will already need to have jQuery included on your page. Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

#28.  jQuery ScrollPath

It’s a plugin for defining custom scroll paths.  It uses canvas flavored syntax to draw lines and arcs. It comes with a custom scrollbar. Honestly this is probably one of my favorites!

#29. jQuery Mega Select List

The jQuery Mega Select List is a plugin that converts large select lists into a mega-menu style list of options. This plugin doesn’t affect your form, posting back the selected value as if the options were being selected in a normal select list.

#30.Freetile.js

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

...

Now that we’ve got our background images squared away and set to break themselves down nicely across various devices and screen resolutions we can look in to populating our home page with some content.

Let’s begin with our header. I always like using a separate file for all the things that will stay uniform throughout my site, header, logo, navigation, etc. That way if I need to make a minor edit down the road I just have to edit the header file, which is then pulled in to every page with a simple PHP include script.

To start, let’s create a new php file, I named my “header.php” in order to keep things simple. In my header.php file I have placed my header, which simply contains the logo (I used the Developer Drive logo for this tutorial). After my logo is my navigation, a simple list will suffice for this tutorial. I chose a few basic links that someone may want to include in their site, but feel free to include what ever links are relative to you. My header.php code looks as follows.

<div id="logo"><img src="images/logo.png" alt="Developer Drive" /></div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li class="last"><a href="#">Contact</a></li> </ul> </nav>

Go ahead and save that file, and feel free to close it since we’re done working in there.

Open your index.php file and let’s begin adding the content. We’ll start by adding a container div after our background image, then place the php include for our header, and finish it off by putting in our little blurb bubble. When all is said and done you should have something similar to this.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> <title>Responsive Web Design</title> <link href="main.css" rel="stylesheet"...

A while back we took A Look at Responsive Web Design and how different designers utilize it in different ways.  Now that we’ve seen a few examples in action, let’s create a responsive website of our own. 

In this installment we’re going to set up the structure of our homepage and add in a few media queries that will help the site load quicker, navigate better, and keep our desired appearance across multiple devices, platforms, and resolutions.

Before we dive in to the HTML, let’s cover the “viewport” meta tag.  The Apple iPhone and iPod touch are programmed to automatically scale down websites in the iOS version of Safari. 

This will allow the user to see the site as it’s intended, but scaled down in order to fit in the smaller screen.  Since we’re going to create a media query specifically for the screen, we don’t want the iPhone to scale it.  The viewport meta tag will also allow you to set parameters on how much a viewer is able to zoom in or out, as well as what scale your site should initially load in.  For this tutorial we’re going to tell it not to scale at all.

Beginning with the HTML, you’ll notice that it’s pretty basic HTML5 stuff with the exception of our viewport meta tag and our main background div.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Web Design</title> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="mainBG" class="homeContent" data-type="background"> </div><!--end div "mainBG"--> </body> </html>

With our HTML in place, let’s create our CSS file.  I like to reset my CSS by getting rid of unwanted margins, padding, and borders with this basic bit of code to start off my CSS file.

body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, fieldset, legend, label, input, textarea { margin: 0; padding: 0; border: 0; } sh1, h2, h3, h4, h5, h6, p { margin: 0 0 1em 0; } h1{font-size: 200%;} h2{font-size: 170%;} h3{font-size: 160%;} h4{font-size: 140%;} h5{font-size: 120%;}

Now that we’re starting from scratch we can open up our body tag and add some style to it.  I set my background color to white and chose a dark gray for my text coloring.  Using a white background with black text often is too sharp of a contrast and can put a strain no the eyes of a viewer, going with a dark gray helps avoid that issue.

html, body { height: 100%; }

You’ll also notice that I set my font size using em, this is a crucial step when developing a responsive site because it is percentage based and will dynamically adjust itself on the fly.  If you were to set your font to a specific pixel size, once your site was scaled down to mobile phone dimensions it won’t flow as nicely with the rest of your design and may fill the entire screen, or the letters may overlap each other.

We can also add the style to our .homeContent class as well as our #mainBG id.  I’ve defined the height of the page, set the width to 100% and centered the content within the .homeContent class.  The #mainBG id pulls in our background image, which is a stock photo I got from 123RF.  I also set the background-size property to “cover”, which will scale the image to fill the screen and allow our background image to maintain proper proportions in larger resolutions.  The size of my “big.jpg” background image is 1920 x 1189.

.homeContent {    ...

Responsive web design is widely thought of as a design trend, but it’s much more than that.

It is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions, and platforms, be it a computer, tablet or mobile device.  It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time.

In this tutorial, we take a look at what responsive web design entails for the developer.

Using Multiple Image Sizes

There’s no need for a mobile device to be loading an image that is 1920 px wide by 1200 px tall and a quarter mb.  That will only slow down the time it takes for a viewer to load the site on their mobile device and eat through their monthly data quota.  A great example of a site that keeps their main image but resizes it based off the screen resolution of the viewer is Sony.  You’ll notice, amongst other changes, how the main image has changed in size between the larger version and the mobile version thanks to CSS media queries.

Another approach to quickening load times and determining how things should be displayed on different devices is to completely drop your main image.  That’s exactly what Fork CMS did with their site.  The main image resizes between the widescreen and more traditional square monitor ratio version of the site, but then is completely dropped from the design once you get down to the mobile sized version.  However, I did find it a little interesting that the designers chose to keep the image towards the bottom of the site throughout each version, but drop the main image.  The main image helped establish the site and give it some character, by excluding that main image on the mobile version the site loses a bit of character.

Navigation

Text links are another thing to take in to consideration when developing a responsive website. On a computer text links aren’t a big issue, but once you get to browsing a scaled down version of a site on a mobile phone it can be hard to hit the desired target area of a small text link. Converting a text link to a slightly bigger button, or swapping text for an icon, will make the site more navigable on a touch screen mobile phone.

A good example of a site that’s navigation changes from text links to buttons is the website for the Clean Air Commute Challenge. You’ll see how in the larger, widescreen mode of the site there are four main navigation links across the top of the page. However, once the site is squeezed in to meet the dimensions of a mobile site the text links convert to larger, easier to target, buttons.

To see a good example of a site where the navigation switches from links to icons have a look at the 2011 dConstruct site. Notice how their three main navigation links, Conference, Workshops and Location, change to icons once the site is narrowed to the parameters of a tablet device or mobile phone. This makes it easier for the viewer to navigate the site regardless of what device they’re on. You will also notice with the dConstruct site that the images don’t swap themselves out at certain points, rather they simply grow and shrink on the fly as the page shrinks or grows.

Flexible Dimensions

Optimizing a site to be responsive and change across platforms is easy to do thanks to CSS. With CSS you are able to define the maximum and minimum height and width of elements, allowing them to grow, shrink and adapt to the specific parameters in which the site is being viewed. Setting the width to adapt is also easily achievable by setting your height and width to a percentage.

Working with percentages to size elements of your website can be a little trickier than creating a site where everything has a fixed pixel dimension. However, there is a fairly simple way to determine what the percentage is that you need to define an element of your site. If you are developing a page and want the main content area to be 1,000 px wide at a specific resolution and you want to include a navigation column on the left-hand side that has a width of 200 px, you will have to convert that to a percentage. You can easily convert a fixed pixel size to a percentage by taking the width of the navigation column, dividing it by the full width of the column, then multiplying it by 100. In this instance we would take 200 (the width we want our navigation column), divide it by 1,000 (the full width of our content area) and then multiply it by 100. The result is 20, meaning to give our site elasticity and allow it to be responsive we would define the width of our navigation column to 20%, rather than 200 px.

For a good example of a site with flexible dimensions, look no further than the page you’re on. Try decreasing the width of the page by dragging your browser window in and see how the main content area resizes itself to adapt to the new dimensions.

Along with setting your structured elements to be flexible in size, it’s also important to make your text a dynamic attribute as well.  This is accomplished much like the height and width, but rather than using a percentage sign to define your font size, or the “px” abbreviation for defining a specific pixel size, you define it as em.

Em simply stands for the letter “M”, which is the widest letter in the font and is a dynamic font measurement.  Meaning a site that uses % to define the height and width of elements, paired with font that is defined in em’s and media queries that select appropriate image sizes and content to be displayed, the result will be a fluid, responsive website.

...

With an emerging market of innovative mobile devices it has become more important to create responsive designs.

In my last article (Part 1) we started with the setup of our HTML and our media queries. The pad.css was the easiest to format due to the change in the screen resolution.

I saved the formatting of the handset for the last part of this series because it’s the device that will start to see changes to our fluid layout. Every site developed without flash content is mobile compatible but is the content mobile friendly?

A couple of the first few changes we’ll make to make our content more mobile friendly is to increase the fonts sizes and the line heights in the body:

body { font-size: 16px; line-height: 20px; }

We need to reduce the width of our design to fit the device as well. By decreasing the size of our container from 680 pixels to 300 pixels, we can make this fit within our media query. There is another factor we have to consider when developing our HTML for iOS devices, we’ll add a meta tag in our head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

If you take a look at your device and refresh, your design should look like crap.

But that’s ok, really. We’re going to fix it and make everything better because we can remake the navigation in our ‘mobile.css’ file.

Let’s try and make our navigation a bit more mobile friendly much like the rest of our mobile layout.

I’ve given my navigation menu the id of menu; if you want to utilize a bit of HTML5 tagging feel free to use the tag ‘nav’. I just happen to do a lot of corporate work that needs to be compatible with legacy browsers like IE7:

#menu { height: 40px; width: 280px; font-size: 1.143em; line-height: 20px; margin: 5px auto 5px auto; text-align: center; }

Make sure to cover your bases with your unordered list as well. The reason for changing the ul’s width is the fact that it’s a little too large for the device at the moment. Set the margin to ‘margin: 0 auto;’ and the width to the same size as the #menu at 280 pixels.

Since you’ve taken the moment to address the changes in the unordered list we’ll need to pay attention to the list items as well. Depending on the number of links, we’ll need to consider how we would like them laid out  both in portrait and in landscape. For the intended purpose of this article, we’ll stick with portrait for now. Let’s locate the #menu li and take a look at our code:

#menu li { width: 260px; display: block; /*--As opposed to inline for Screen--*/ margin-left: 0px; }

Remember to always check your device as needed throughout development. If you don’t have a suitable device, you can use Dreamweaver’s Multiscreen preview or any other online tools at your disposal.

Applications such as PhoneGap and AIRiPad are just a couple to name a few. By now our navigation menu should start taking shape on your mobile device, whether you’re using text links or the menu in your design is a group of buttons, we need to rethink the padding of the links. This makes the links easier to engage on the smaller screen.

/*--- I like to shorthand a lot of my CSS ---*/ #menu a:link, #button { padding: 5px 1.5em 5px 1.5em; margin: 5px 5px 5px -35px; }

From this point forward we’ll work on more of making the existing content in our design fit into the size of the mobile device, so let’s keep in mind any images you may have for logos of featured areas.

The screen width will more than likely be limited to 320 pixels (iPhone 3Gs). Using the min-device-width and max-device-width properties, we can do our best to make sure that our design stands up to the intended integrity whether the device is portrait or landscape.

Something I didn’t cover last time is that you can include your media queries in one external CSS file either at the bottom of your main sheet or in their own separate sheet. Below is an example of using the query in your main stylesheet with a method of @media:

/*--- Responsive CSS for mobile devices---*/ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { body { font-size: 16px; line-height: 20px; } #container { width: 300px; margin-left: auto; margin-right: auto; } #menu { height: 40px; width: 280px; font-size: 1.143em; line-height:...