Effective use of J Query to your web pages

Introduction to J Query

JavaScript as a client side scripting is used from last couple of years. JavaScript is also meant for adding interactivity to the website designing.

Later on the new API of JavaScript is launched upon with the name of J Query. J Query is the new way to write the JavaScript code. J Query has the following features:

• J Query is the new kind of JavaScript Library
• 5 lines of J Query code is better and functional as compare to the 20 lines of JavaScript code
• On J Query, Microsoft has been also involved for its API development.
• J Query is the latest JavaScript Framework API which has been added in Microsoft .net platform in visual studio 2010.
• Hiding or showing Sections, Attaching Events, Changing values or style, and adding new content is all about J Query
• J Query is a magic to animation like drag and drop to visualize
• It’s a kind of a centralize file with managing Html, Dom.
• Html Document transverse at the Client end
• Perform validation from the Client
• Animations to your web pages
• It allows the use of Ajax for Adding interactivity with Rapid Application Development concept
• J Query Resent release is 1.4.2

We always think about making our web pages more interactive but our ideas do not convert into actions.  We might have not tried to add interactivity using with J Query or other JavaScript elements. This is the tutorial which will explain how effectively you can add much interactivity with the J Query?

Inform the User what is running behind?

Don’t leave your site visitor to the dark site. Always update them what’s going on the back end of the website. For example if user has requested to display data then give a continuous visual message that shows the request of the user is still processing. Please consider the real time example of Pinchzoom. They have shown a message of loading with a constant motion of graphics that shows the request is in progress.

Perform Testing before Launching your code

Professional web design firms always test their code before they launch it over the web. And Testing is the SDLC phase which is performed right after the development phase. There can be errors with the client side scripting like

Cross Browser Platform usability:

This is the major issue which can affect your client side scripting code, so verify you code properly with major testing techniques.

Sometimes you may surprise with your own code which works pretty much fine at your end but seems awkward at the client browser.

Always verify your java scripting code on most common browsers like Mozilla Firefox, IE, and Opera.

If any element of your website seems broken to your site visitor you may lose your trust. Thus it can decrease your website traffic.

Don’t add J Query for adding much interactivity

One thing which is not recommended is use of too many interactive elements. It may confuse site visitors what to do and how to find the required elements they need?

When you are going to develop a website always keep restriction to the number of controls you use. It will helpful in retaining your website simple and easy to understand.

Please consider the example of Crispin Porter + Bogusky. They have added the option of Read More to scroll the more text if required. Scrolling text is the traditional control users have, so don’t keep this facility away from the user.

J Query & Form validation

At mentioned above, J Query is the latest JavaScript API. Its main objective is to make web pages more interactive. Besides interactivity it is meant for client side scripting also. You can validate your html forms like email validation, mobile phone number, Credit card number, And other type of data validation.

There are two events used for Client side validation as mentioned below:

• On Submit():

When the button is finally submitted by the user, you can place J Query validation on the event of onsubmit()

• On blur():

When user going off to the field, the event is fired known as onblur() event and you can call a validation function on this event.

The main benefits of validating user data on client side (J Query) are:

• User doesn’t have to wait for page reload.
• It saves the extra bandwidth.
• It reduces the querying effect to the server and thus increases usability and efficiency of the Server.

Please consider the examples of Ajax Form with JQuery Validation Code

Less use of animation with a Content

Because JavaScript functions are easy to write with J Query, So it is necessary not to add much animation effects with content.

Adding interactivity to the content is to make the text prominent to the site visitor. So it is pretty much fine if interactivity is at descent level.

But don’t try to mess up content with too much animation.

There is an example of Mashable which is famous social media news website. There is a use of animation to the site content load with the help of J Query. It makes it less effective to the slow internet connection users.

So think about the use of J Query effectively in order to make concentration of the user to the content.

Make Tabs more prominent

We all are aware to the importance of using Tabs. Tabs have the following features and advantages to the website and user.

• They allow user to switch between pages faster and it saves space.
• Tab manages site content in an effective way and add beauty to the website
• Tabs are also helpful to the replacement of menus
• Tabs with a specific heading make the content more prominent.
• It is recommended that tabs should be used with proper style so that the site looks good.
• Also adding description to your tabs, allow users to view the clear picture of what site is all about?
• Attractive and prominent tabs can attract the site visitors at once and thus reduces the bounce rate of the website.

Delibar is one of the examples which have used eye catching tabs with the green color effect.

Speed is not always the key to success

As a web developer, your intentions are always to optimize your web page so that its loading speed increases and user completes his task more quickly. But in case of Business process or requirements it is mandatory to give time to the user for deciding what to do.

The animation of rotating image with a text is often set too fast. We must remember user don’t want to be hurried up.

It is not recommended that a user is in half way to read text and the animation goes off before finishing the text.

If you are using J Query plug in to make effect on functionality, you can adjust the animation speed by using keywords of “slow” or “fast”. If you want exact timings you can use numeric values to slow down your animation like 1200 ms or 900 ms.

Please consider the Post box example of home page where it uses to change “information” by an animation effect after an enough interval to read it completely.

Always care about the user rights.

There is an example of designinsocial which do not allow users to browse or scroll a website whenever it is required. It is the traditional right of every user to even scroll down page content.

Effective use of J Query and its Examples

1. Robot Cat

Robot Cat use J Query for its validation on news letter signup.

2. Panelfly

Panelfly has done Marvelous work by using Tabs. It makes the content more prominent.

3. Jan Eike

With the use of Ajax and J Query, Jan Eike has made Excellent work on loading Portfolio items. The website displays the GUI message that please waits until I load your items.

4. Icon Dock

Icon dock is a kind of shopping cart. The website has used the J Query effect on adding the items to the Cart. User can also drag and drop the items direct to the cart which makes the website more attractive.

5. Yay Paul

Hover events are being used to animate and display the title of the portfolio items. The functionality can be seen from the below image:

6. Orman Clark

Orman clack has made its site navigation very attractive with the use of J Query. It makes the navigation fixed to the background. Please have a review on it.

7. Crush + Love

Crush + Love has used the smooth scrolling effect with the smart page transaction in downwards direction. Have look!

Conclusion

• J Query has improved the way of writing the code when compared to JavaScript code
• 5 lines of J Query can perform better task than 20 lines of traditional JavaScript code
• All the points discussed in this post are according to the latest designing trends and technology
• You as a designer, coder or web design company. Always think from the user point of view.
• Think that the processes which you are going to add are easily understandable by the user.
• If any one of your process may go wrong, how this will affect user’s behavior

Hope you will find this information valuable in regard to the quality of your website’s interactivity with J Query.