Working in the fast-paced web development industry is always challenging. The key is to find the best-practices and techniques for your tasks and then use them to constantly improve the user experience.
As a web developer, you need to be always on the top of your game. With technologies evolving rapidly, constant learning is the key to success.
Web developers all around the world use JavaScript in their web apps. It is used to control different elements on the web page and make them function. JavaScript libraries, such as jQuery, are also popular and are used by many developers out there. In today’s article, we will be focusing on five new jQuery techniques for creating a better user experience.
1. Using the Latest Version of jQuery
jQuery is a complex framework and is updated regularly with new features and fixes. To build a better user experience, you should always use the latest version of jQuery. Apart from the user experience improvement, you will also get better website performance. The best thing about using the latest jQuery is that you only need to change the script tag and it will work!
jQuery can be included using CDN hosting that Google provides for JavaScript libraries. To include the latest version of the jQuery, you need to use the following script.
<!-- The jQuery version you are using -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The latest branch of the jQuery version you are using -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3/jquery.min.js"></script>As you can see, we have included the full version in the 2nd script tag. It will automatically take the latest 3.3.x version once the developers release it.
2. Finding the Page Weight
Site load time is directly connected to the user experience, and that’s why you should take the proper time to optimize all aspects of your website.
This means that the higher the number of DOM elements on the page, the weightier the page is. As a web developer, you need to reduce the number of DOM elements without compromising the functionality of the website. You can use the following code to learn the total number of DOM.
console.log($(*).length); You can run the command throughout the development period and focus on reducing the weight of the page at each step.
Most websites on the internet aim to reduce their page weight so that they can rank higher in search engine optimization (SEO).
3. Developing Sliding Forms
Forms play a crucial role in user experience as they are used for signups, contact information and so on. As a developer, you can use better techniques for forms that can help you better engage users. One of those techniques includes the use of sliding forms. Sliding forms can be used to give the users more than one form without feeling intrusive.
So, how do you do it?
To make it happen, you need to use the jQuery animate() method. First, you need to draw two forms on the page. For our example, it can be a registration form and a login form. When the page first loads, you need to load the registration form since the user is looking to register an account.
With different divs given to each form, you need to put their position relative to the outer div, which in this case can be the “page” div.
- Once the page loads, load the first form relative to the outer div.
- After the first form is filled in, then replace the form with the other form. To do so, you can use the animate() method.
4. Form Submission Without Page Refresh
Page refresh after a form submission may sound logical but can deter many users who want a seamless experience. That’s why as a developer, your job is to make the form submission without doing a page refresh. The good news is that you can do it using jQuery.
First, you need to build a simple HTML form. Once done, use a div tag that is connected with the form itself. Leave the method and tag attributes blank. We do that because we will be using jQuery to handle those aspects.
Now, you need to start adding jQuery. To do so, you need to create a simple JavaScript file and then reference the HTML in there. The format of the code should look like below.
$(function() {
$(".button").click(function() {
// Code for form validation goes here
});
});You can then process others for input by writing more JavaScript.
However, the magic happens thanks to the jQuery AJAX function. Normally, when a form submission takes place, a PHP script will be triggered. With it, the data will be sent to the server but requires a page refresh.
With AJAX, the data will still be sent, but all of this will happen without the need for a page refresh. Let’s check out a sample AJAX code below.
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2> Form Submitted!</h2>")
.append("<p>Lets connect on your emmail.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id="thanks" src='images/thanks.png' />");
});
}
});
return false; This trick can be very useful and will surely improve the user experience.
5. Local Storage and jQuery
Local Storage can help you load your website faster. jQuery offers a local storage API that allows you to store data on the browser. To do so, you need to use the following line of code.
localStorage.someData = "Data that is saved in the browser and can be loaded fast";Conclusion
This leads us to the end of our new jQuery techniques that will help you create a better user experience. User’s experience should always be a top priority for a web developer, and we hope you found the article useful. Of course, more jQuery techniques let you control the user experience even further. For example, you can provide a text size slider, offer jQuery pagination, do a content slider, smoothen content scrolling and so on — all of this using jQuery.
So, which jQuery technique you are going to use in your project? Comment below and let us know. We are listening.
About the Author
Madan Pariyar is a blogger at WebPrecious and a digital marketing strategist helping clients to resolve their website woes. When not busy with all these things, you may find Madan occasionally watching movies, traveling and spending time with family.
