For those of you who are frequent readers of the DBS blog, you may remember that last week’s blog post consisted of our resident programming guru, Hal, explain how libraries and frameworks can help simplify your programming. This week, I was hoping to expand on Hal’s introduction to libraries and provide more information on one of the more commonly used libraries, jQuery.
jQuery is a fast and concise library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX. As a web designer, knowing the ins & outs of jQuery was a prerequisite for my employment, however, much of what I know now was learned through years of hand-on experience. If you don’t have that type of time frame to complete your project, I suggest you look into the myriad of jQuery plug-ins offered by open-source developers.
jQuery plug-ins offer a vast array of benefits to web designers of all levels of experience. Those who are just beginning to fiddle with web design may find that plug-ins allow them to implement functionality in their web site that they don’t have the skill to code themselves. To experienced web designers, the greatest benefit is time saved. Solving simple issues of functionality with a plug-in allows them to sink all of their time into creating an improved user experience.
Another advantage to utilizing jQuery plug-ins is the built in support for backwards compatibility. A plug-in that is backwards compatible should display as it was intended to display, regardless of user preferences. Without this compatibility, designers would need to spend long hours ensuring their jQuery works correctly for a multitude of browsers, browser versions, and user specific options (ie. User has JavaScript disabled). Using jQuery plug-ins makes this process much simpler and guarantees that your website will perform properly for the broadest audience possible.
Even with all of the options available to designers, finding the right plug-in can be difficult at times. Never spend more time searching for a plug-in than it would take for you to code it yourself. If you aren’t capable of coding jQuery functionality from scratch, consider altering an existing plug-in to fit your needs. Don’t just stick in a stock plug-in, make it yours. Make it look like it belongs.
Plug-ins can make a designer’s life much easier, but I would suggest that you not get too “plug-in happy” with your website. Some plug-ins are bulky and can considerably hinder a page’s load time. With page load speed being a factor that is now used to calculate your page rank in the search engines, optimizing for fast load times is more important than ever.
Lastly, only use plug-ins when they contribute to a better experience for the end user. As with most things in life, simpler is almost always better.
As a web design and development shop, we tend to place an importance on our ability to custom hand-code websites. However, I am quite familiar with some of the jQuery plug-ins and would like to share with you a few of my favorites.
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It’s biggest plus side in my opinion is that it supports swapping of any number of different types of content, and not just images.
Lazy Load is a great plugin if you are having trouble with loading a lot of images on your site. By delaying the loading of images in long web pages until the user scrolls to them, Lazy Load can resolve many of the issues related to a large amount of images including reducing server load.
IE-CSS3
IE CSS3 is probably one of my most used plug-ins. It essentially enables CSS3 selectors for older versions of Internet Explorer.
Plug-ins can be a great asset to your site and your personal library of code. But remember to be responsible when choosing plug-ins and only select those that add to your user’s experience.
